Improve your website performance (gzip + cache)

I always forget to pay attention to webpage load performance and size. I had a mindset, that it's complicated and that it requires a lot of effort. But that is not true. I want to share 2 easy steps how to improve your webpage load time and size.

To verify, that changes I made had positive inpact I used two tools: lighthouse and gtmetrix. Graphs are at the end of the article.

Compression

All files, that are requested from your server, can be compressed. Size reduction depend on file content, but I think you can get pretty good results in general.

Compression will reduce your page size and improve your page load time. And actually it's really simple. This is an example of my Nginx virtual host.

gzip on;
gzip_vary on;
gzip_types text/plain application/javascript application/font-woff text/css application/json;

gzip enables or disables compression
gzip_types set what types of files should be compressed
gzip_vary enables or disables Vary header, that tells server to not serve cached gziped files if browser does not support gziped files.

The issue with Vary header might be a topic for another article. All you need to know, at this point, is that you should add this header if you use cache and compression.

Server cache

Both tools (lighthouse and gtmetrix) will warn you about long caching of static files. It seems that you cannot improve that much after compression, but this change will bring you closer to 100% rating.

You can cache your files in Nginx by adding these lines into your virtual host:

location ~* \.(?:png|svg|css|ttf|woff)$ {
    expires 720d;
    add_header Pragma public;
    add_header Cache-COntrol "public";
}

location ~* .(?:png|svg|css|ttf|woff)$ this line decides which files to cache. In my case its .png .svg .css .ttf .woff files.
expires 720d; i want to cache files for 720 days. It is recommended to go for more then a year (that's the "long" in long term cache).
add_header and set some headers

Results

For full disclosure, fully loaded time can vary, quite a lot, so this value is not very accurate. Nevertheless, I tried to average 10 tests and get a value.

Other improvements

You can never be truly done optimizing your webpage and steps that are right for you often depend on your website content and priorities. However, there is a list of some other areas to improve on.

• preconnect/preload resources
• http/2
• define image dimensions in HTML or CSS