Leaner sized css.php for better pagespeed

eva2000

Well-known member
I would love to see a smarter css.php to only really serve the CSS that a page requires. This is code coverage for just XF 2.1 index page where 362,543 bytes or 94.1% of first css.php bytes are unused on the index page !

upload_2020-6-21_15-8-58.png

In terms of Google Lighthouse/Page Speed Insights v6 metrics, that is almost the difference between obtaining a mobile speed LCP (https://web.dev/lcp/) of under 2.5s or not in most cases which is a Google pass for LCP.

Just did some tests on my test Xenforo 2.1 forum via webpagetest with cloudflare cache miss and measured the CSS processing time for css.php from within helper_js_global from start of css (mark_cs_s) to end css (mark_cs_e) on Motorola G gen6 with 3g fast Chrome browser speed profile
  • SpeedIndex = 3.275s
  • FCP = 3.015s
  • LCP = 3.015s
  • CLS = 0.001s
  • TBT = 0.237s
It took 2.590s - 1.196s = 1.394s all up where 271ms was TTFB, 1075ms was content download and rest I guess was overhead for PHP processing ~48ms

wpt-xf21-test-css-times-mobile-3g-moto-gen6-01.png

wpt-xf21-test-css-times-mobile-3g-moto-gen6-02.png

This is a XF 2.1 optimized index page with PSI mobile score = 90 with google analytics, cloudflare beacon and mirage and threadloom CDN loaded as well (obviously Cloudflare cached so difference between above uncached first visit)

psi-xf21-index-mobile-01.png

Basically if you can halve your css.php size, you'd probably be able to get under a LCP of 2.5s for mobile IF everything else page speed wise are optimal for Google 3G speed mobile lab tests. Of course real world mobile/desktop is more important.
 
Last edited:
Upvote 93
nice utilising mod_pagespeed/ngx_pagespeed ! haven't played with it since moving to Cloudflare, I see you're using the following settings :)

....
But isn't mod_pagespeed the absolute worst in terms of Userdata protection? That's why we don't use Cloudflare, for example ...
 
But isn't mod_pagespeed the absolute worst in terms of Userdata protection?
Uh? mod_pagespeed/ngx_pagespeed ist just an optimization library (PSOL) that runs on your server and does things like optimizing images (converting format, adjusting compression, etc.). optimizing CSS (minification, contatenation, etc.) and JS (minification, concatenation, defering execution, etc.) - it does not communicate with Google (except for Google fonts if that is used).

In fact, it isn't even maintained/developed by Google any longer, it's an Apache Incubator project since quite some time.

How the GooglePagespeed ads differ (even after reloading three times) if you call them from a different CONNECTION, ;)
Hint: ( "Felddaten" and "Origin Summary" )
Yeah, unfortunatley there is no real user data yet as the domain has just been online for a few days now (not even the 28 days that would be required for valid origin data).
I'm already excited to see how that numbers will look like once a month has passed :)
 
Last edited:
Uh? mod_pagespeed/ngx_pagespeed ist just an optimization library (PSOL) that runs on your server and does things like optimizing images (converting format, adjusting compression, etc.). optimizing CSS (minification, contatenation, etc.) and JS (minification, concatenation, defering execution, etc.) - it does not communicate with Google (except for Google fonts if that is used).

In fact, it isn't even maintained/developed by Google any longer, it's an Apache Incubator project since quite some time.
I had to/could generate an api-key for mod_pagespeed with which I could view PageSpeed data from Google. The domain name is also queried. To do this, google has to evaluate the data supplied by mod_ pagespeed somehow or not? Therefore, after a few tests, I deactivated mod_pagespeed again.
 
Hmm, I never heard of an API key for mod_pagespeed and I don't have one ;)
Do you have any links / documentation that talks about an API key for this?

Do you mean the PageSpeed Insights API? This does require an API key, but that has nothing to do with mod_pagespeed.
 
How the GooglePagespeed ads differ (even after reloading three times) if you call them from a different CONNECTION, ;)
Hint: ( "Felddaten" and "Origin Summary" )
Origin summary for mobile is now also showing up as passing (was 60% FCP/94% FID/95% LCP/71% CLS on 08/03/2020 and is now 62%/94%/95%/75%) :)

We still got a too much layout shift on desktop, but I'd expect this to also improve over the next couple days as we add more changes to reduce layout shift.
 
We still got a too much layout shift on desktop, but I'd expect this to also improve over the next couple days as we add more changes to reduce layout shift.
And then you create a tutorial about the starting points for optimization, or an affordable add-on that takes over the optimizations. ;)
 
Somewhat related bugs & suggestions

 
Somewhat related bugs & suggestions



These are huge and i'm hoping more are found and corrected before 'gold'.
 
Somewhat related bugs & suggestions


Hoping for XF 2.3 improvements in this area :)
 
I think that it requires a new style to implement this suggestion fully. i. e. to only load the css that is needed for the page and to further reduce css size as @eva2000 suggested.
 
Back
Top Bottom