Critical CSS causing erratic Pagespeed scores

hmm .. and clicking on those triangles does nothing? can you check the browser console for JS errors?

and clicking on those triangles does nothing?

Exactly

can you check the browser console for JS errors?

Indeed here they are:
https://drive.google.com/file/d/1gEK7120tjnzOi-n5pnuOmss_Vc8irs-G/view?usp=sharing

well, it looks like something is acting on jQuery (which AO does not optimize), breaking the admin, find what is doing that to fix the “jQuery is not defined” errors and the CCSS settings page will function again as well ??

Okey sorry if is a silly question: how do I find it?
looking at the lines of the error I get this:
https://drive.google.com/file/d/1Uvj_qW4601_zlmHj8Py0M8GUyW74r9rD/view?usp=sharing

yeah, the CCSS settings-screen uses jQuery and somehow (due to something outside of the scope of AO as AO does not optimize wp-admin) jQuery is not available. It could be a plugin, it could be custom code, but I can’t tell you what is removing/ deferring jQuery is I’m afraid .. :-/

I noticed the error also appears on non-admin pages in case is useful to further debug it:
https://drive.google.com/file/d/1QhoyOuq1HN8o2cCp8LF7nY5dl0VGksZc/view?usp=sharing
that is for https://www.tomastestart.cl/test-back/wordpress/contacto/

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

well, on the frontend jquery is:

* loaded from jquery.com
* with the async attribute
* but most importantly it is simply commented, so indeed does not load;

Yes but for the backend of WordPress jquery shouldn’t be used automatically? Well I just checked the CCSS settings page and now it is properly working (I did nothing in regards to jquery) so no idea why it happened. OK I should start testing PS scores and report back

nah, jquery is loaded by default on the backend, it’s typically loaded via a request for /wp-admin/load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils, even when no plugins are active.

I see understood!! ??
I have installed again WordPress from zero using an older backup but recent theme files, just in case problems are remotely & somehow related to a failed update of WordPress core, most likely not but one less factor in the equation.

Okey I’m afraid scores with CCSS either on my website (with Cloudflare) as in Otzerling (without Cloudlfare) are not that much well: scores for the first:
https://drive.google.com/file/d/1Wq-vhQsEQTgA5OpylXqXxAlltjtJEve5/view?usp=sharing
https://drive.google.com/file/d/1pd-2efO-GJnw36WkjpjilhRVrGBPZPZO/view?usp=sharing
https://drive.google.com/file/d/1zudWfQxwmqRDxjORnBJkLNDBpq3EaFVe/view?usp=sharing

They seem to be related to fonts in particular to Fontawesome, and perhaps while it reports little size in terms of CSS in PS diagnostics, checking the network tab is a lot more of size 70 kbs x 4 (fa-brands-400.woff2, fa-brands-400.woff2, fa-solid-900.woff2, fa-solid-900.woff2) at least and for some reason is loading twice fa-brands-400 and fa-solid-900. I’m using also an older version of this library. I had already optimized woof2 and woff versions for the fonts which at leas 200kbs less (thanks for the advice) and if I replace the fontawesome library by svg icons it would mean 280kbs less. Still I wonder why this happens with CCSS.

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

Screenshots for Otzerling with CCSS
https://drive.google.com/file/d/1-dQrRLFIanb_tBorONvbJdvPoCpeP-h8/view?usp=sharing, https://drive.google.com/file/d/1rHonqJlEU8l3jxtuub7R-cPZ4Ayquulp/view?usp=sharing

Screenshots for Otzerling mobile without CCSS
https://drive.google.com/file/d/1lpKEF5Uj4WRINWErdggp69btZBLOxZUs/view?usp=sharing, https://drive.google.com/file/d/1sNFSx08vapMtnhvnAaVQOYWJIKweFgeq/view?usp=sharing

Don’t really have time to go compare all those screenshots snippet24 and given variability (GPSI now says 65 and CCSS is off, all CSS is inlined) I would again strongly suggest testing on webpagetest.org running multiple (5-9) runs per test so you can compare median (or average) results instead of those one-off tests that don’t really have that much info in them ??

Re. CCSS vs inline all CSS; take into account that in the latter case on 2nd (and later) pageloads, all CSS will be downloaded again and again as it is part of the HTML, vs. when using CCSS the amount of inlined CSS is a lot smaller and the full CSS is loaded from a file that is cacheable by the browser. so although it will not show in GPSI or normal webpagetest tests, inlining all CSS will make subsequent pages load slower.

Re. CCSS vs inline all CSS

Well I disabled though “Inline all CSS?” so it shouldn’t load all the CSS inlined.. (in addition to disabling Critical CSS)…

I would again strongly suggest testing on webpagetest.org

Okey!! is it possible to know the version of lightspeed used? will look again…

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