You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've been working on getting 4x100 for my custom frontend for weeks, improving each LH/PSI issue day by day.
I'm at the stage where I'm finally getting 4x100 on desktop, and almost 4x100 on mobile - for most of the time.
I can live with 99/100 "Performance" score on mobile, but the issue is that PageSpeed Insights are returning really inconsistent results, even in a short timeframe. Sometimes even 79/100 or lower for "Performance" - with the exact same page source. I've tried everything: adding LogRocket to review what's going on during PSI test sessions, removed it later as I figured out that every console.error is visible in the PSI report, so implemented a full frontend logging and logged every single event as an error, just to review it line-by-line. Still nothing. It's driving me crazy and after two weeks of hard work, I'm hoping to get some help here.
The issue is only with PageSpeed Insights. With Lighthouse, I'm finally getting 4x100 all the time - of course network throttled to "Slow 4G" and CPU throttled to "Low-tier mobile" based on the official calibration (15.4x for me).
I have most of the CSS inlined, http response compressed, above the fold hero image and fonts in preload hints, implemented a multi-layered JS preload: 1) almost nothing external loads before "window.load", after that 2) the consent & tracking scripts, after that 3) UI related, most important stuff (swiper, countup, dependencies, etc.) and custom image lazy-load initialization, and after that 4) only on user interaction, some other, least important stuff improving UX.
I'm almost sure, that the issue is caused by the consent (CookieYes) and tracking (GA4) scripts, but I don't get, why. Reviewing the (error) logs in PSI, I see that I get a "window.load" event in 0.5s even in the worst case. And on "window.load" everything should be visible and nothing is expected to change in the viewport. There is no way to get a FCP:2.3s and LCP:4.2s when logs show that almost even every lazy-loading is finished by 1.0s. (log timings are based on performance.now())
Here is the PSI result with 79/100 "performance" score on mobile: https://bit.ly/45S8W3b
Here is the PSI result with 99/100 "performance" score on mobile, with the exact same source code, 5 minutes later: https://bit.ly/4nyN8jl
Notes: See the logs under "Best Practices" -> "Browser errors ..."
The website is cached with LiteSpeed Cache, both tests were started after a cache-clear and cache preload - HTML source remained the same, PSI test request hit LiteSpeed cache.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I've been working on getting 4x100 for my custom frontend for weeks, improving each LH/PSI issue day by day.
I'm at the stage where I'm finally getting 4x100 on desktop, and almost 4x100 on mobile - for most of the time.
I can live with 99/100 "Performance" score on mobile, but the issue is that PageSpeed Insights are returning really inconsistent results, even in a short timeframe. Sometimes even 79/100 or lower for "Performance" - with the exact same page source. I've tried everything: adding LogRocket to review what's going on during PSI test sessions, removed it later as I figured out that every
console.error
is visible in the PSI report, so implemented a full frontend logging and logged every single event as an error, just to review it line-by-line. Still nothing. It's driving me crazy and after two weeks of hard work, I'm hoping to get some help here.The issue is only with PageSpeed Insights. With Lighthouse, I'm finally getting 4x100 all the time - of course network throttled to "Slow 4G" and CPU throttled to "Low-tier mobile" based on the official calibration (15.4x for me).
I have most of the CSS inlined, http response compressed, above the fold hero image and fonts in preload hints, implemented a multi-layered JS preload: 1) almost nothing external loads before "window.load", after that 2) the consent & tracking scripts, after that 3) UI related, most important stuff (swiper, countup, dependencies, etc.) and custom image lazy-load initialization, and after that 4) only on user interaction, some other, least important stuff improving UX.
I'm almost sure, that the issue is caused by the consent (CookieYes) and tracking (GA4) scripts, but I don't get, why. Reviewing the (error) logs in PSI, I see that I get a "window.load" event in 0.5s even in the worst case. And on "window.load" everything should be visible and nothing is expected to change in the viewport. There is no way to get a FCP:2.3s and LCP:4.2s when logs show that almost even every lazy-loading is finished by 1.0s. (log timings are based on
performance.now()
)Here is the PSI result with 79/100 "performance" score on mobile:
https://bit.ly/45S8W3b
Here is the PSI result with 99/100 "performance" score on mobile, with the exact same source code, 5 minutes later:
https://bit.ly/4nyN8jl
Notes: See the logs under "Best Practices" -> "Browser errors ..."
The website is cached with LiteSpeed Cache, both tests were started after a cache-clear and cache preload - HTML source remained the same, PSI test request hit LiteSpeed cache.
Beta Was this translation helpful? Give feedback.
All reactions