Boost serving your site by using pre-compressed files

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
martin.mattel
 
 
Posts: 83
Joined: Thu Oct 04, 2018 3:04 pm

Boost serving your site by using pre-compressed files

Post by martin.mattel »

Create a .gz version for .css .js and font files

If you run eg nginx as webserver, you can use the directive gzip_static on; for named locations.
This directive automatically checks for the presence of a .gz version of the file requested.
If no .gz file is found, the original file requested is served, else the compressed version is sent.
The browser extracts the file before usage.

There is of course an equivalent Apache command set.

Here are examples to see the file size difference:
96268 contact.css
..7103 contact.css.gz

243304 verdana.ttf
142501 verdana.ttf.gz

Benefits
For the user, nothing changes except transfer times/quantity reduces quite a lot.
The webserver cpu does not have more to compute as the files are already pre-compressed.
The webserver software itself determines if the client supports compressed responses.
For the browser it is standard behaviour.

Code for manually creating/deleting .gz files
Please adopt paths, foldernames, user/group names ect. accordingly
Please delete /update the .gz files by re-running this script when your site changes and you publish to web !
You can easily expand the scripts to handle .ico (icon) files - it is worth doing so...

Code: Select all

#!/bin/bash

pathweb='/var/www/yoursite'
webuser='www-data'
webgroup='www-data'

echo
read -p "Create or Delete in dev .gz (c/D)? " -r -e answer
(echo "$answer" | grep -iq "^D") && create_delete="d" || create_delete=$answer

if [[ $create_delete == "d" ]]; then
  echo "Deleting .gz"
  for gz in $(find $pathweb -name '*.gz'); do rm $gz; done
  $(service nginx reload)
  exit
fi

if [[ $create_delete != "c" ]]; then
  echo "No Valid Command"
  exit
fi

echo "Creating .gz"

for css in $(find $pathweb -name '*.css' -or -name '*.js'); do gzip -fkN9 $css; done

for font in $(find $pathweb/fonts -name '*.eot' -or -name '*.otf' -or -name '*.svg' -or -name '*.ttf' -or -name '*.woff' -or -name '*.woff2'); do gzip -fkN9 $font; done

chown -R $webuser:$webgroup $pathweb/*.gz

exit
Code to calculate the compression ratio

Code: Select all

#!/bin/bash

pathweb='/var/www/yoursite'

gz=$(find $pathweb -name "*.gz" | wc -l)

pu1=$(find $pathweb \( -name "*.css" -o -name "*.js" \) -print0 | xargs -0 du -ksc | tail -1 | awk 'END{print $1}')

pu2=$(find $pathweb/fonts \( -name '*.eot' -or -name '*.otf' -or -name '*.svg' -or -name '*.ttf' -or -name '*.woff' -or -name '*.woff2' \) -print0 | xargs -0 du -ksc | tail -1 | awk 'END {print $1}')

pu=$(( pu1 + pu2 ))

# if no gz files are found assign 0 else sum them up
if [[ $gz -eq 0 ]]; then
  gz=0
else
  gz=$(find $pathweb -name "*.gz" -print0 | xargs -0 du -ksc | tail -1 | awk 'END {print $1}')
fi

fr=$(awk -v var1=$gz -v var2=$pu 'BEGIN { print ( var1 / var2 ) }' | awk '{printf "%2.2f",$0}')

echo $fr
An output after running the compression could be: 0.22
This means, that you have shrinked the files by roughly 80% !
A lot less to transfer over the wire :lol:
To monitor the files in the browser (opera, chrome), open the developer tools of the browser and under network hoover over the filesize of a .css .js ect file. There you see the resource vs the transferred over the network size - what a difference.

For ease of understanding, this is an example of an nginx directive serving pre-compressed static files

Code: Select all

        # serve pre-compressed .css and .js files
        location ~* \.(?:css|js)$ {
            gzip_static on;
        }

        # serve pre-compressed font files in folder fonts
        location ~* ^/fonts/.*\.(eot|otf|ttf|svg|woff|woff2)$ {
            gzip_static on;
        }
To check if .gz files are served, run following command and force-reload the page:

Code: Select all

sudo strace -e trace=open -p `pidof nginx | sed -e 's/ /,/g'` 2>&1 | grep .gz
Here is also a nice explanation about the benefits:
https://betterexplained.com/articles/ho ... mpression/
Post Reply