Critical CSS causing erratic Pagespeed scores
-
Hi Frank, after much struggling I realized CriticalCSS was causing major Pagespeed erratic scores with all the websites where it is enabled for months now, but oddly disabling it in the main settings doesn’t fix the issues, instead I had to remove the api key to get the website scores to behave normally in addition to disabling CCSS…
-
This topic was modified 3 years, 4 months ago by
snippet24.
-
This topic was modified 3 years, 4 months ago by
-
So when mentioning “main settings”, you mean the “Eliminate render-blocking CSS?” option?
Can you give some more info on those “erratic pagespeed scores” as well? what KPI’s seemed worse (speciifically for the core web vitals)?
So when mentioning “main settings”, you mean the “Eliminate render-blocking CSS?” option?
Yes
Can you give some more info on those “erratic pagespeed scores” as well? what KPI’s seemed worse (speciifically for the core web vitals)?
I got overall worst scores with 53/against 89 for example but it was weird at least what I recap it wasn’t tied to consistent specific KPI or was a mix of kpis.
-
This reply was modified 3 years, 4 months ago by
snippet24.
afraid I don’t have a logical explanation for that snippet24, sorry; when “eliminate render-blocking CSS” is off, the critical CSS is not used at all … :-/
Maybe I can re-enable CCSS on my website to better debug it.. but give some days, on saturday I should get into it.
sure, keep me posted ??
Okey this are several screenshots of PageSpeed reports with CriticalCSS disabled.
https://drive.google.com/file/d/19ynB47bwCVKlz9COfAUhb5vQpJJsJ4TE/view?usp=sharing
https://drive.google.com/file/d/1DNBZWyf_g1Ffswy_HDRW4EHX0IRAkxhr/view?usp=sharing
https://drive.google.com/file/d/1Xclfu-cJ9r-KkZk-gFV27XODuhPhexUt/view?usp=sharing
https://drive.google.com/file/d/1owfwvYNRzjiaHR-CmbQ9ryVcjTfyNAYa/view?usp=sharing
https://drive.google.com/file/d/1t5rTG_4hThb_UsnN8dvldQMyMVTtJhuQ/view?usp=sharing
More or less the overall score on mobile and desktop are stable (70 points approx and 98 points approx each)
Now this are for CCSS enabled.
https://drive.google.com/file/d/1bOjAfA_YmOozNItzc9kNFEp8IiYLI_Gd/view?usp=sharing
https://drive.google.com/file/d/1tnXGw8Xz6k_SEBxodH2qkOTY-3KNqssQ/view?usp=sharingNotice the first report the score is around 80 (mobile), while the second is around 54 (mobile)
I have CCSS enabled right now in case is useful in figuring out why is this happening.
-
This reply was modified 3 years, 3 months ago by
snippet24.
Afraid the 2nd CCSS-enabled screenshot (score 54) is not available for me, can you adjust permissions?
Ohh yes of course, done!
no idea I’m afraid. can you run a couple of tests on webpagetest.org (which measures the same KPI’s and then a lot more + shows a waterfall graph) to see (a) if it is also as inconsistent and (b) if we can find an explanation in the extra data?
Here it is https://webpagetest.org/vitals.php?test=211123_BiDcH1_43b23e3a2d2df7883e29a8b1a3bb1855&run=3
I wonder why testing it on my end? and does the erratic Pagespeed scores happen on your end as well or not?just did some more tests and is still erratic. Do note I had to change the browser to run several tests (as it seems using the same tab it doesn’t re-scan)
https://drive.google.com/file/d/1jmgJa_aS0vxaUrk4orOVXH5hrXfYopgB/view?usp=sharing
https://drive.google.com/file/d/1f-HdmsPKJcr-YH0lkM-bqfta0pwq2h4P/view?usp=sharing
-
This reply was modified 3 years, 3 months ago by
snippet24.
Here it is https://webpagetest.org/vitals.php?test=211123_BiDcH1_43b23e3a2d2df7883e29a8b1a3bb1855&run=3
OK, but the goal is for you to execute multiple tests on webpagetest.org and compare CWV’s there to see there are major fluctuations there as well ??
I wonder why testing it on my end
because I can try to help, but I don’t have time to take the lead and do the deep-dive for you ??
does the erratic Pagespeed scores happen on your end as well or
not?The results you shared previously seem to be outside of the margins what can be expected and I did see *some* fluctutations, but those were within the margins of what I have seen before.
pagespeed is not perfect; in some of the tests I did on your site PSI suddenly complained about missing image sizes or offscreen images not being deferred, for those opportunities to vanish in other test runs. that’s why I recommend running a batch of tests on webpagetest.org to see if results are more consistant and if not there is more info to dive into (starting with the waterfall chart and the content breakdown).
my 2c based on that one webpagetest.org test result (and somewhat outside of the scope of your original question):
* I would try cutting down on the number of fonts & total font download size. the full page is approx. 800KB, out if which half is for fonts. Additionally fonts have high priority, so those will “steal” bandwidth that could have gone to other resources
* I see you have Cloudflare’s rocketloader active, which means you have one render-blocking JS-file. Rocketloader is an easy way to ensure (the rest of) the JS is not render-blocking and usually that will load _very_ fast but if for whatever reason is is not fast, it will slow everything down.because I can try to help, but I don’t have time to take the lead and do the deep-dive for you
Okey.
There’s something I didn’t mention but should had: otzerling.com had the same problem and it doesn’t have Cloudflare implemented. And before I tried so many things an non worked till I disabled CCSS.
complained about missing image sizes or offscreen images not being deferred
Maybe I should send the details/expanded oportunities of PS?
And thanks for the additional advices will take a look into them ??
Maybe I should send the details/expanded oportunities of PS?
I would rather you switch to webpagetest.org tests for now, running multiple tests to see if the variations also occur there? ??
Okey I noticed default speed for mobile is cable, while pagespeed is with:
Emulated Moto G4 with Lighthouse 9.0.0 Slow 4G throttling
So I dont see the same throttling for mobile unless I’m missing something..
Well used slow 3g but I’m not sure is right or not:
https://webpagetest.org/result/211123_BiDcZ3_4f44303a47b5eeee8f3f110ce517d8fd/
https://webpagetest.org/vitals.php?test=211123_AiDc20_c4eb53fe179a418463f9b54b8add5724
https://webpagetest.org/result/211123_BiDc52_a6445acf1df806a69c618302e0ce65a9/
Wish there was an overall score and the version of lighthouse used…I’ll review results tomorrow, but typically I’d opt for “4G (9 Mbps, 170ms RTT)” (which is slower then LTE which is similar (but technically not the same) as 4G and which based on the numbers used by webpagetest.org (12Mbps, 70ms RTT) is faster. When you hover over connection description in pagespeed insights you should see more info re. bandwith & latency to compare with the bandwidth profiles webpagetest offers.
-
This reply was modified 3 years, 4 months ago by
- The topic ‘Critical CSS causing erratic Pagespeed scores’ is closed to new replies.