Bad performance: largest contentful paint (LCP)
I am experiencing a low performance on lighthouse, it mentions the <h1> element as the LCP. I ran these commands but they didn't make any difference:
php artisan icons:cache
php artisan filament:cache-components
php artisan optimize
I am using Filament v3 and Livewire v3.
Thanks in advance.
43 Replies
OPCache for PHP is enabled?
No it's disabled
OPCache is the most impactful measurement for PHP performance in general. You should turn it on and try again
It's litterally what changed the game for PHP
Ok will do
rookie question: I have two php.ini files, one in
cli directory and one in fpm , which one do I edit? or edit both?fpm
Unless you serve via PHPs server. And maybe
php artisan serve.
Just change one and see whether it's enabled when dumping phpinfo()Ok
cli. is for ' Command Line Interface' so when you run php artisan etc it'll likely use that php.ini
mmmm I'm little confused 🥲 .. so I should change both just in case?
It won't hurt. But as I said: Change first, see whether it works. If not change other, check again
I changed one at a time and restarted the nginx server but the issue is still here
Did you check whether OPCache is actually on now?
I am trying to find a way ... since I'm accessing the production server using ssh
Can I -for example- add a file with
phpinfo() from my local and deploy it to production and check?I ran
php artisan tinker in the production website directory then phpinfo() and looked for OPCache section. here is what I've found
after you have changed your php.ini did you restart php-fpm?
I restarted nginx using
sudo systemctl restart nginx , should I restart php-fpm individually?yea
I ran
sudo systemctl restart php8.2-fpm.service and sudo systemctl restart nginx but in my website directory phpinfo() it still not enabled
but your nginx server file does contain phpfpm, right?
like:
?
Is debug bar enabled….
Here is my
nginx.conf file
No we didn't install it yet
it's nginx.conf right? or another file?
sudo nano /etc/nginx/sites-available/yourfile
It has this
Im not actually sure which php tinker uses (php or php-fpm)...i think there is an actual
enable_cli flag.. 🤔 Can you create a temporary dummy route where you actually output phpinfo() or opcache_get_status()ok will try
Can I make the dummy route from my local and deploy it to production? because it seems like everything is cached and my temp route wasn't recognized when I created it on production
Why not?
thats probably already a good sign 🤓 reload or restart php-fpm
Because the directory that I access on ssh is the latest deployed one, which has these commands already applied on
Can I make the dummy route from my local and deploy it to productionI answered to this 😅
ah sorry my mistake 😅
reloading phpfpm should be in the deploy script anyway...but i suppose you can do it locally and push it 😋
will test it 👍
Here is phpinfo() "zend OP cache" on production
That's great. What does lighthouse say?
will test in a moment ...
It's slightly better than earlier but still shows signs of low performance
Mhh 🤔
Maybe now would be a good time to setup http2 and test its impact and
gzip (or similar) if not already done?problem is I don't know where to start with this 😅
especially that filament seems to handle things by itself
Luckily, I have access to view the course, will check it out , thanks 😄
I didn't run them 😅 , so when I run all of them I should run
sudo systemctl restart php8.2-fpm.service ?yes
I ran all the cache commands and made sure that opcache is enabled and running but the problem is still on. could it be the way I assign my css and js in the layout file?
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<!-- Styles -->
@livewireStyles
</head>
<body class="font-sans antialiased">
<x-banner />
<div class="min-h-screen bg-gray-100">
@livewire('navigation-menu')
<!-- Page Heading -->
@if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
@endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
@stack('modals')
@livewireScripts
</body>
</html>