Leaner sized css.php for better pagespeed

eva2000

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
Anatoliy said:
I already know the answer: "It's only for the first time, then it will be loaded from browser cache".
(facepalm smilie)
Click to expand...
Only valid if your real visitor's first visit's pages per session is >2 otherwise when it's under <2 then first time visitors will never properly utilise browser caching or other caching layers.

For me 1st time visitors have ~1.5 pages/session average while return visitors have ~3.5-5.0 pages/session average. Where 80% of visitors are 1st time visitors, it means majority of visitors won't make optimal use of any browser cache and/or caching layers so optimal 1st time visitor metrics are important.

Here's Webpagetest same forum index with same 3G fast Chrome speed profile testing 1st, 2nd and 3rd time visitors to measure browser cache and cloudflare caching effectiveness. Yes LCP and page load time improved but for css.php the 1st visit the css time was still high (mark_cs_s - mark_cs_e = 2.670s - 1.0.17s = 1.653s). Cached 2nd and 3rd visits was fast at 0.013s to 0.056s.

wpt-xf21-test-css-times-mobile-3g-moto-gen6-3visits-02.png
 
eva2000 said:
Where 80% of visitors are 1st time visitors, it means majority of visitors won't make optimal use of any browser cache and/or caching layers so optimal 1st time visitor metrics are important.
Click to expand...
exactly! and the more unused css, fontawesome, & js they will download during that first visit, the thinner chance that they will visit one more time.

The "sabotage" word is coming on my mind. If I would be a communist spy, sent to ruin capitalist's business, which builds a forum software, I would do just that - I would include in every forum page a 300kb file with icons, when soft uses just 10kb of them; 300kb of css rules, when a page needs only 10kb of them... Mobile visitors will leave such a forum, and then PC members will leave it too, because without the main contributors (mobile members) there will be nothing to read there...
 
I also think this is an issue that needs significantly more attention. It feels like the XF developers have been amazing about their commitment to speed/optimization in so many areas, but when it comes to CSS the code is just lazy. I routinely see 80% css code unused when evaluating my site's performance. There has got to be some room for improvement here.
 
SIneDave said:
I also think this is an issue that needs significantly more attention. It feels like the XF developers have been amazing about their commitment to speed/optimization in so many areas, but when it comes to CSS the code is just lazy. I routinely see 80% css code unused when evaluating my site's performance. There has got to be some room for improvement here.
Click to expand...
Yeah. Even providing for a way to break up critical rendering css elements for above fold versus below fold would be nice i.e. optional settings that can toggle splitting critical render path css and/or even inlining the critical render path css elements. Then theme/style designers could utilise the tool/feature to differentiate themselves and offer up 3rd party theme/styles which are page speed focused.
 
Last edited:
Well, now it's "I would love to see that PageSpeed Insights could read xF2.2".
(It returns "Lighthouse returned error: INTERNAL: APP::1: Abnormal renderer termination, status = crashed exit_code = 1" )
 
eva2000 said:
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)
Click to expand...
It does require some work, but optimizing (despite being fun) seems worth it:

WebPageTest​

wpt.PNG


PageSpeed Insights​

ps-insights.PNG
Still pretty much work in progress, but so far looks promising :)
 
Kirby said:
It does require some work, but optimizing (despite being fun) seems worth it:
Click to expand...
nice utilising mod_pagespeed/ngx_pagespeed ! haven't played with it since moving to Cloudflare, I see you're using the following settings :)

Code: 
mod_pagespeed on
Filters:
gp    Convert Gif to Png
jp    Convert Jpeg to Progressive
jw    Convert Jpeg To Webp
pj    Convert Png to Jpeg
db    Debug
hw    Flushes html
io    In-place optimize for browser
js    Jpeg Subsampling
rj    Recompress Jpeg
rp    Recompress Png
rw    Recompress Webp
cf    Rewrite Css
jm    Rewrite External Javascript
jj    Rewrite Inline Javascript
cp    Strip Image Color Profiles
md    Strip Image Meta Data

Options:
AvoidRenamingIntrospectiveJavascript (aris) True
EnableRewriting (e) 1
FileCacheCleanIntervalMs (afcci) 3600000
FileCacheInodeLimit (afcl) 500000
FileCacheSizeKb (afc) 512000
InPlaceResourceOptimization (ipro) True
RewriteLevel (l) Optimize For Bandwidth
 
Wow. :)
Who updated now, XF or Google?
What (up to now) was not possible for me, now it is possible to scan the forum overview (.../community/) with Pagespeed insights.

1596558738116.webp



Now the only thing missing is the adjustment that the css.php only loads relevant code (also desktop vs. mobile) and I am delighted with XF :D
 

Similar threads

A
  • Question Question
XF 2.2 Pagespeed Insights is making no sense
Replies
2
Views
126
avalanch
A
A
Confused by Google PageSpeed Insights Results
Replies
4
Views
477
CedricV
CedricV
A
  • Question Question
XF 2.2 Why are links on “Share this page” not crawlable, and how does one make them crawlable?
Replies
2
Views
509
Aivaras
A
bzcomputers
  • Question Question
XF 2.2 Display:flex combined with inline CSS causing CLS issues on Google PageSpeed for mobile devices
Replies
2
Views
731
bzcomputers
bzcomputers
bzcomputers
  • Question Question
XF 2.2 Slow pagespeed LCP (Largest Contentful Paint) for pages with notices / cookie warning
Replies
4
Views
1K
bzcomputers
bzcomputers
Back
Top Bottom