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: 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
This means, that you have shrinked the files by roughly 80% !
A lot less to transfer over the wire
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;
}
Code: Select all
sudo strace -e trace=open -p `pidof nginx | sed -e 's/ /,/g'` 2>&1 | grep .gz
https://betterexplained.com/articles/ho ... mpression/