This "simple trick" is nothing very special: it's our good old friend gzip. However, not all static website hosts automatically compress and serve your website and assets. This may inadvertently result in larger-than-necessry file sizes when creating and publishing your static websites on hosts such as Gitlab Pages, Github Pages, or Netlify. As such, we need to manually compress the files as part of our website build step.
In your CI build script, add in the following right after your build script:
$ ./build_my_website.sh && gzip -k -6 $(find public -type f)
For example, if you build your website with Hugo and serve it on Gitlab Pages, you would do the following:
# in .gitlab-ci.yml
script:
- hugo && gzip -k -6 $(find public -type f)
What this does is to compress your site's static files in the public directory at the compression level 6. Increasing the compression level (maximum is 9) would increase build times, but result in smaller files.
-n : Regulate the speed of compression using the specified digit n, where -1 or --fast indicates the fastest compression method (less compression) and --best or -9 indicates the slowest compression method (optimal compression). The default compression level is -6 (that is, biased towards high compression at expense of speed).
The -k flag indicates to gzip to keep the original files instead of replacing them.
Do note that most file hosts would serve the .gz files if they are present. This is not a hard rule, as it differs from provider to provider.
Serving on NGINX​
When serving your files through NGINX, you can use the gzip_static directive to enable sending of compressed gzip files.
As mentioned in the documentation, you would have to compile it yourself:
This directive is defined in a separate module that might not be included in an NGINX Open Source build by default.
from https://docs.nginx.com/nginx/admin-guide/web-server/compression/#sending-compressed-files
However, the docker image comes to save the day! The required modules for serving gzip are pre-compiled into the NGINX docker images. Refer to this great blog post for more details for verifying that it is pre-compiled.
You can use this nginx.conf as a base for serving static files through the nginx docker image:
worker_processes 1;
events { worker_connections 1024; }
http {
server {
include /etc/nginx/mime.types;
default_type application/octet-stream;
gzip_http_version 1.0;
gzip_static on;
listen 80;
server_name localhost;
root /usr/share/nginx/html/;
location / {
index index.html index.htm;
expires 5d;
add_header Cache-Control public;
}
}
}