• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • As we have now upgraded the main XenForo community, this forum is now being retired. It will remain open in a mostly read only state. Any further feedback, suggestions or bug reports should be posted on the main forum. We will still process the existing bug reports from this forum.

    When we approach a stable release, this forum will become inaccessible. If there is any content you wish to save, please do so before then.

Unbundle css assets without css.php if using HTTP/2 HTTPS ?

#1
With HTTP/2 based HTTPS the requirement to bundle css into css.php doesn't seem to be needed. It is possible via admin option to unbundle the css files to individual css static files instead of using css.php ? Then let end user decide if they want to use css.php method or individual css static files i.e. if they have HTTP/2 HTTPS they can switch to using individual css static files ?

HTTP/2 HTTPS
Preload headers

Also add the option to set individual each individual css static files with/without rel=preload headers
Google Brotli Compress

It also makes it possible for individual css static files to utilise new gzip/deflate alternative http compression technologies like Google's Brotli compression

Right now if css.php is used, Brotli compression (content-encoding = br) can not be used :)

xenforo2-dev3-devtools-02.png


brotli.sh-vs-brotli-vs-gzip-xf2-wpt-080317-01.png


Brotli compression of js files works but css doesn't due to css.php in use.

brotli.sh-vs-brotli-vs-gzip-xf2-wpt-080317-04.png
 
#2
difference in file sizes for js/xf directory for xenforo2 for original vs brotli vs gzip files
Code:
ls -lah /home/nginx/domains/domain.com/public/js/xf | grep '.js'
-rw-r--r-- 1 nginx nginx 4.4K Mar  7 17:26 admin.js
-rw-r--r-- 1 nginx nginx 1.2K Mar  7 17:26 admin.js.br
-rw-r--r-- 1 nginx nginx 1.3K Mar  7 17:26 admin.js.gz
-rw-r--r-- 1 nginx nginx  12K Mar  7 17:26 attachment_manager.js
-rw-r--r-- 1 nginx nginx 2.8K Mar  7 17:26 attachment_manager.js.br
-rw-r--r-- 1 nginx nginx 3.2K Mar  7 17:26 attachment_manager.js.gz
-rw-r--r-- 1 nginx nginx 4.1K Mar  7 17:26 avatar.js
-rw-r--r-- 1 nginx nginx 1.1K Mar  7 17:26 avatar.js.br
-rw-r--r-- 1 nginx nginx 1.3K Mar  7 17:26 avatar.js.gz
-rw-r--r-- 1 nginx nginx 5.3K Mar  7 17:26 captcha.js
-rw-r--r-- 1 nginx nginx 1.3K Mar  7 17:26 captcha.js.br
-rw-r--r-- 1 nginx nginx 1.5K Mar  7 17:26 captcha.js.gz
-rw-r--r-- 1 nginx nginx  608 Mar  7 17:26 code_block.js
-rw-r--r-- 1 nginx nginx  278 Mar  7 17:26 code_block.js.br
-rw-r--r-- 1 nginx nginx  370 Mar  7 17:26 code_block.js.gz
-rw-r--r-- 1 nginx nginx 5.3K Mar  7 17:26 code_editor.js
-rw-r--r-- 1 nginx nginx 1.5K Mar  7 17:26 code_editor.js.br
-rw-r--r-- 1 nginx nginx 1.7K Mar  7 17:26 code_editor.js.gz
-rw-r--r-- 1 nginx nginx  31K Mar  7 17:26 color_picker.js
-rw-r--r-- 1 nginx nginx 6.5K Mar  7 17:26 color_picker.js.br
-rw-r--r-- 1 nginx nginx 7.1K Mar  7 17:26 color_picker.js.gz
-rw-r--r-- 1 nginx nginx 1.5K Mar  7 17:26 comment.js
-rw-r--r-- 1 nginx nginx  509 Mar  7 17:26 comment.js.br
-rw-r--r-- 1 nginx nginx  600 Mar  7 17:26 comment.js.gz
-rw-r--r-- 1 nginx nginx  92K Mar  7 17:26 core.js
-rw-r--r-- 1 nginx nginx  21K Mar  7 17:26 core.js.br
-rw-r--r-- 1 nginx nginx  23K Mar  7 17:26 core.js.gz
-rw-r--r-- 1 nginx nginx  39K Mar  7 17:26 editor.js
-rw-r--r-- 1 nginx nginx 8.5K Mar  7 17:26 editor.js.br
-rw-r--r-- 1 nginx nginx 9.4K Mar  7 17:26 editor.js.gz
-rw-r--r-- 1 nginx nginx  12K Mar  7 17:26 filter.js
-rw-r--r-- 1 nginx nginx 2.7K Mar  7 17:26 filter.js.br
-rw-r--r-- 1 nginx nginx 3.0K Mar  7 17:26 filter.js.gz
-rw-r--r-- 1 nginx nginx 1.6K Mar  7 17:26 form_fill.js
-rw-r--r-- 1 nginx nginx  543 Mar  7 17:26 form_fill.js.br
-rw-r--r-- 1 nginx nginx  642 Mar  7 17:26 form_fill.js.gz
-rw-r--r-- 1 nginx nginx 7.7K Mar  7 17:26 inline_mod.js
-rw-r--r-- 1 nginx nginx 1.9K Mar  7 17:26 inline_mod.js.br
-rw-r--r-- 1 nginx nginx 2.1K Mar  7 17:26 inline_mod.js.gz
-rw-r--r-- 1 nginx nginx  11K Mar  7 17:26 lightbox.js
-rw-r--r-- 1 nginx nginx 2.3K Mar  7 17:26 lightbox.js.br
-rw-r--r-- 1 nginx nginx 2.6K Mar  7 17:26 lightbox.js.gz
-rw-r--r-- 1 nginx nginx 4.6K Mar  7 17:26 login_signup.js
-rw-r--r-- 1 nginx nginx 1.4K Mar  7 17:26 login_signup.js.br
-rw-r--r-- 1 nginx nginx 1.6K Mar  7 17:26 login_signup.js.gz
-rw-r--r-- 1 nginx nginx  34K Mar  7 17:26 message.js
-rw-r--r-- 1 nginx nginx 5.7K Mar  7 17:26 message.js.br
-rw-r--r-- 1 nginx nginx 6.5K Mar  7 17:26 message.js.gz
-rw-r--r-- 1 nginx nginx 2.3K Mar  7 17:26 nestable.js
-rw-r--r-- 1 nginx nginx  655 Mar  7 17:26 nestable.js.br
-rw-r--r-- 1 nginx nginx  806 Mar  7 17:26 nestable.js.gz
-rw-r--r-- 1 nginx nginx 3.4K Mar  7 17:26 notice.js
-rw-r--r-- 1 nginx nginx  892 Mar  7 17:26 notice.js.br
-rw-r--r-- 1 nginx nginx 1.1K Mar  7 17:26 notice.js.gz
-rw-r--r-- 1 nginx nginx 3.0K Mar  7 17:26 payment.js
-rw-r--r-- 1 nginx nginx  855 Mar  7 17:26 payment.js.br
-rw-r--r-- 1 nginx nginx 1003 Mar  7 17:26 payment.js.gz
-rw-r--r-- 1 nginx nginx 8.4K Mar  7 17:26 permission.js
-rw-r--r-- 1 nginx nginx 2.1K Mar  7 17:26 permission.js.br
-rw-r--r-- 1 nginx nginx 2.5K Mar  7 17:26 permission.js.gz
-rw-r--r-- 1 nginx nginx 6.7K Mar  7 17:26 prefix_menu.js
-rw-r--r-- 1 nginx nginx 1.5K Mar  7 17:26 prefix_menu.js.br
-rw-r--r-- 1 nginx nginx 1.7K Mar  7 17:26 prefix_menu.js.gz
-rw-r--r-- 1 nginx nginx 1.6K Mar  7 17:26 rating.js
-rw-r--r-- 1 nginx nginx  514 Mar  7 17:26 rating.js.br
-rw-r--r-- 1 nginx nginx  622 Mar  7 17:26 rating.js.gz
-rw-r--r-- 1 nginx nginx 5.1K Mar  7 17:26 stats.js
-rw-r--r-- 1 nginx nginx 1.5K Mar  7 17:26 stats.js.br
-rw-r--r-- 1 nginx nginx 1.7K Mar  7 17:26 stats.js.gz
-rw-r--r-- 1 nginx nginx 1.2K Mar  7 17:26 thread_edit.js
-rw-r--r-- 1 nginx nginx  432 Mar  7 17:26 thread_edit.js.br
-rw-r--r-- 1 nginx nginx  577 Mar  7 17:26 thread_edit.js.gz
-rw-r--r-- 1 nginx nginx 5.4K Mar  7 17:26 token_input.js
-rw-r--r-- 1 nginx nginx 1.6K Mar  7 17:26 token_input.js.br
-rw-r--r-- 1 nginx nginx 1.9K Mar  7 17:26 token_input.js.gz
-rw-r--r-- 1 nginx nginx 2.8K Mar  7 17:26 user_list.js
-rw-r--r-- 1 nginx nginx  832 Mar  7 17:26 user_list.js.br
-rw-r--r-- 1 nginx nginx  991 Mar  7 17:26 user_list.js.gz
Total sum of js/xf files for js.gz vs js.bz
Code:
ls -la /home/nginx/domains/domain.com/public/js/xf | grep '.js.gz' | awk '{sum += $5} END {print sum}'
79574
Code:
ls -la /home/nginx/domains/domain.com/public/js/xf | grep '.js.br' | awk '{sum += $5} END {print sum}' 
70566
Original js/xf .js file sizes uncompressed
Code:
ls -la /home/nginx/domains/domain.com/public/js/xf | grep '.js$' | awk '{sum += $5} END {print sum}'
307353
 
Last edited:

sheel

Active Member
#4
Please keep in mind that style templates not only have style variables, but the full template syntax (and yes, it is used by some people).
...
Considering this, unbundling means to compile one PHP file per template, and the browser will initiate one full PHP program execution for each CSS file.
 
#5
Serving "static" brotli compressed CSS should already be possible (also in XF1) with some nginx trickery:
Instead of directly passing css.php to upstream PHP-FPM pass it to a named proxy location which does have proxy cache enabled.
This named proxy location should have brotli (level 11) & gzip (level 9) enabled for on-the-fly compression and pass the request to upstream PHP-FPM.

This way the "on-the-fly" compression would happen only once (until the cache is gone for whatever reason, needs to be sufficiently large).
 
Last edited: