2

My website https://www.rbfamily.nl/ is having trouble with google pagespeed and I have no idea why. The main bottleneck seems to be the LCP time, which google says takes between 7 and 11 seconds depending on the run.

As you can see in the waterfall, everything above the fold is loaded quickly and doesnt change afterwards. If I use the performance tab in chrome with network set to 3g and 4x slower CPU, it still loads everything above the fold under 2s. Looking at the "View original trace" in chrome with lightspeed, I dont see any changes to the website after a second.

I even tried without a background image, webfonts, scripts and no content below the fold, but it hardly changes the LCP time.

Can anybody tell me what pagespeed is waiting for, before it calls the LCP loaded?

Long time for LCP

UPDATE

I stripped everything down to the bare minimum except css. https://rbfamily.dego.dev/

I still get a red LCP score (2.9s) in lighthouse even though everything is drawn in the first frame of the waterfall.

2.9 without content

Machavity
  • 30,841
  • 27
  • 92
  • 100
Hugo Delsing
  • 13,803
  • 5
  • 45
  • 72

1 Answers1

1

Can anybody tell me what pagespeed is waiting for, before it calls the LCP loaded?

I get a similar time to Lighthouses prediction when running with "Fast 3G" and "4x CPU Slowdown". (There will be some discrepancy as Lighthouse uses simulated throttling).

It is your hero image that is causing the LCP at 7 seconds (if it isn't clear from the image below the webp image called "homepagebg.jpg.webp" is the large green bar that finished loading just as you see the LCP entry).

Performance timeline showing 7 second LCP

Why am I getting different results to you?

My guess is that on the "Network" tab you don't have "Disable Cache" checked so you are running the performance trace from a "warm cache".

Screenshot showing location of disable cache checkbox

You have to bear in mind that Lighthouse always runs as if it was the first visit to a page unless explicitly told not to (using the Lighthouse CLI, or by unchecking the "clear storage" checkbox on the Lighthouse Tab) so doesn't have any cached images, files etc.

Location of Clear Storage Checkbox on the Lighthouse Tab

With the image cached I get a 2 second LCP like you are experiencing.

How can I make the performance profile match what Lighthouse sees?

You may find this answer on how to run Lighthouse in the browser and make it match the performance profile if you view the trace useful.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • Obviously my first thought was the main background, but when I remove the image completely and just use a gray background, the LCP doesnt change – Hugo Delsing Dec 17 '20 at 16:21
  • do you have somewhere I can test that as well for you? bear in mind that if you weren't clearing cache then you will still possibly see old results? (not teaching you to "suck eggs" just trying to see if it is just one of those annoying "oh yeah of course" moments we all have :-P) – GrahamTheDev Dec 17 '20 at 16:28
  • I stripped basically everything except the css and it still takes 2,5seconds for the LCP to trigger. So it will be hard to keep it under 2.5seconds with content. I guess I'll have to strip everything down to the bare minimum if I want a decent score. No more convient single stylesheets for the entire website. https://rbfamily.dego.dev/ – Hugo Delsing Dec 18 '20 at 08:30
  • Thank you for checking it out and giving some pointers. – Hugo Delsing Dec 18 '20 at 08:31
  • I had a look at the new page for you, you now need to do some more advanced optimisations such as inlining the critical CSS for all of the "above the fold" content and probably need to adjust fonts so that they don't block rendering (I didn't check that as it was the CSS blocking the rendering). If you do that you will get sub 1 second load times. If you look through [my past answers](https://stackoverflow.com/search?q=user%3A2702894+%5Bpagespeed-insights%5D) there is loads I have covered on optimisation for speed, look for "critical CSS" as part of the search term (or ask a new question). – GrahamTheDev Dec 18 '20 at 11:12
  • Thanks again for your response. I'm familiar with critical CSS, but also with convience haha. Luckily these type of sites are rare for me, but this time I wont get around it. – Hugo Delsing Dec 18 '20 at 12:43
  • 1
    hehe, yeah if you don't build it in from the start it is a real pain, good luck with the project! – GrahamTheDev Dec 18 '20 at 13:10