Critical CSS causing erratic Pagespeed scores

OK, so I re-ran a webpagetest test with 9 runs, via the California node (too many pending jobs in Virginia) with a “custom” bandwidth profile to match the one used by Google’s PSI, see https://www.webpagetest.org/result/211124_AiDcX0_8a4bbf8b3f5737d3b77e874714eb9791/. If you then click on “plot full results” you’ll get a good view on variance between all those KPI’s over the 9 runs.

some thoughts on those results:
* first thing that stands out: run 2 is slower for most metrics, root cause is the “time to first byte” is approx. 500ms longer for that run. when looking at the first request in the waterfall chart for that run, you can see a “cf-cache-status: MISS” response header, so for some reason Cloudflare had to re-fetch the page from your server, impacting most other metrics.
* there are some variations in CLS; lowest 0.04 (green), highest 0.121 (yellow), avg 0.69 (green). this is pretty weird, as the HTML is served from cache, so there are no changes in HTML/ JS/ CSS (incl. crit css).

now when comparing the CLS for those 2 tests, you’ll see that in the test with worse CLS (https://www.webpagetest.org/vitals.php?test=211124_AiDcX0_8a4bbf8b3f5737d3b77e874714eb9791&run=1&cached=0#cls vs https://www.webpagetest.org/vitals.php?test=211124_AiDcX0_8a4bbf8b3f5737d3b77e874714eb9791&run=3&cached=0#cls) you’ll see the difference is the “night mode” icon (from wp-content/plugins/wp-night-mode/) which is JS-driven (/wp-content/plugins/wp-night-mode/public/js/wp-night-mode-public.js). additionally the 3rd test run (with worse CLS) does not show the whatsapp button (plugins/wp-whatsapp-chat/) which also is rendered using JS (wp-content/plugins/wp-whatsapp-chat/assets/frontend/js/frontend.js). Given those elements are rendered using JS, they are not “seen” by criticalcss.com and hence the can’t render immediately.

The fact the JS is the root cause of the CLS variations is in this webpagetest.org test, which has JS disabled resulting in pretty stable CLS. My general recommendation; avoid any UI elements rendering to depend on JS.

Last thing; when you look at the images in the webpagetest CLS details, you’ll see that some CLS is also caused by the fallback font not being close enough to the webfonts that are to be loaded, so my remarks about fonts used stands ??

I propose this IIRC: test whether disabling the dark mode plugin and the whatsapp button plugin results in more stable PageSpeed scores? Let me know if it is a good or bad idea.. ??

The fonts loading problem I haven’t decided yet what to do honestly …

• This reply was modified 3 years, 3 months ago by snippet24.
• This reply was modified 3 years, 3 months ago by snippet24.

good idea, also applies nicely to fonts by the way ??

I’m afraid the erratic behavior continues even with both plugins disabled:
https://drive.google.com/file/d/14eWNj1nrMJGU2YmBebBDoWhZTN6vS-wC/view?usp=sharing
https://drive.google.com/file/d/1MSbRJZSfUFUia_gZ7xYOnwCf1_kzYMi_/view?usp=sharing
https://drive.google.com/file/d/1ppRtxGbY-E8GeVrBwQGORWy723WWrYBE/view?usp=sharing

• This reply was modified 3 years, 3 months ago by snippet24.

can’t see the screenshots, but not overly interested in them anyway or at least not at this stage (I don’t pay much attention to pagespeed insights overall scores anyway, which are just there to get your attention but have no *real* importance as opposed to the Core Web Vitals) ??

with both plugins disabled and doing a 9 runs test on webpagetest.org, do you see less variation in CLS? if CLS is still an issue, what elements does webpagetest.org identify? and how do other KPI’s compare between runs (e.g. are there runs where the waterfall charts shows that the page was not served from cloudflare cache, which _will_ cause significant differences)?

can’t see the screenshots

Oh is because of permission not set or it looks pixelated? What I can tell is that the biggest difference in them is first contentful paint from 3s/2.9secs to 1s (best score) also largest contentful paint with 4.8 anmd 4.2 to 1.0

with both plugins disabled and doing a 9 runs test on webpagetest.org, do you see less variation in CLS?

On it ?? I will just re-run the 9 webpagetest.org test…
Here it is I’m analyzing it:
https://www.webpagetest.org/result/211125_AiDc5B_0c763f3458b0f2f7463c8913649152da/

What I don’t know is why if I disable CCSS scores are a lot more stable, i will disable CCSS and test it on webpagetest.org

• This reply was modified 3 years, 3 months ago by snippet24.
• This reply was modified 3 years, 3 months ago by snippet24.

CCSS disabled results overall scores and KPIs are very consistent:

First Contentful Paint
3.9 s
Time to Interactive
6.2 s
Speed Index
3.9 s
Total Blocking Time
130 ms
Largest Contentful Paint
4.4 s
Cumulative Layout Shift
0.004

I will add the webpagetest.org test wait me a bit

• This reply was modified 3 years, 3 months ago by snippet24.
• This reply was modified 3 years, 3 months ago by snippet24.

KPI’s may be more consistent, but they clearly are worse? ??

And I still see the “dark mode” UI element and it is still shown as causing CLS in the run with highest CLS?

CLS is better without CCSS, but with CCSS enabled metrics are just more variable, if I had to choose: I ‘d go for the consistent but a (a bit) lower score.

And I still see the “dark mode” UI element

Thats because I created that element it wasn’t provided by the plugin, if I reap correctly it doesn’t use js, I may have to check the code to be sure… Edit: Confirmed it does however has the plugin class “wpnm-button” but I deleted it and has no difference

• This reply was modified 3 years, 3 months ago by snippet24.
• This reply was modified 3 years, 3 months ago by snippet24.
• This reply was modified 3 years, 3 months ago by snippet24.
• This reply was modified 3 years, 3 months ago by snippet24.
• This reply was modified 3 years, 3 months ago by snippet24.

CLS is better without CCSS

the 0.117 from the median result (median based on speedindex) is actually the hightest value of the 9, the median is 0.063 which is a nice “green” score (below 0.1), but to understand what is causing CLS you’ll have to do detailed comparisons of the screenshots webpagetest provides for CLS for each to the 9 test. as I already wrote; the nightmode element (even if no JS is applied) is clearly shown in the test with slowest CLS and the fonts (yeah, here I go again) are clearly involved as well. the goal of CCSS is to render things asap, but that means fonts are not available yet and that means there are (slight) layout shifts when the webfonts replace the browser-native fonts. and because the font download times vary, the impact on cls varies as well :-/

Okey I may setup an staging WordPress installation to test with only one font, and see what happens but in the next days..

• This reply was modified 3 years, 3 months ago by snippet24.

I do believe fonts are an issue, but perhaps is in addition to that, that’s what I want to test, just like with the plugins, I can even delete the dark button. I remembered the other hosting for this test has one limitation: I cant use Cloudflare with it. But since otzerling.com doesn’t have Cloudflare and had the same variability in scores and kpis with CCSS lets see what happens…

OK i finally got into it.. installed a modified WordPress setup with only one font
https://www.tomastestart.cl/test-back/wordpress/
But I am unable to test CCSS in order to compare the scores and KPIs is like the settings tab is locked. I cant access any of the CCSS arrow expanded info such as “job queue” or “api key status” :/

can you share a screenshot of that “locked” settings-page?

Sure, here it is:
https://drive.google.com/file/d/1XobVdpcaZ8IYFUTZ2Vf6rWQavBwJEHjv/view?usp=sharing