I finally took the time to optimize aureola.codes. And the results are impressive. From 1.7 MB download size, only 0.27 MB remained in the end, the response time was partly reduced by half. In this series I will show you how I did it.
Analysis With The Waterfall View In Chrome DevTools
The most important part of any optimization is measure, measure, measure. Chrome offers a nice way to analyze the requests, download sizes and load times of a page with the Waterfall View of the DevTools. As an example, I have picked out two pages that have sufficient content. Important: The response times can vary greatly. It therefore makes sense to calculate the average value from several reloads.
Status Quo: Little Astronaut - Now It's Personal
Status Quo: How well does an Instagram promotion perform?
How well does an Instagram promotion perform? has fewer images overall, but they are optimized much worse. We only have 17 requests here, but a download size of a sporty 1.7 MB and ultimately a response time of 433 ms.
Normally, of course, you would start with the biggest clunker (that would be the images). But since the lack of gzip compression is so eye-catching and also just pretty quick to do, I'll start with that. My website runs under Nginx. Here gzip can be enabled quite easily via the configuration. In principle you can do this globally via /etc/nginx/nginx.conf or add a configuration file in the folder /etc/nginx/conf.d. But I personally like to have the possibility to enable and disable settings per page. For example, because I want to check them first on the test installation.
With Nginx it seems to be a good idea to work with snippets. These are configuration items that can be imported flexibly into the configuration files of the individual pages. So we create a snippet in /etc/nginx/snippets/gzip.conf with the following content:
Here are the most important things about the content:
gzip_comp_level 2; defines the level of compression (more compression = smaller files = needs more CPU).
gzip_min_length 256; defines the minimum size of a file to be processed (smaller value = more files are processed = needs more CPU)
gzip_types which file types should be processed?
More details can be found in the documentation. This snippet will be included in the corresponding page configuration. You can find it in the folder /etc/nginx/sites-available.
Now the server must be restarted or the configuration must be reloaded. Important: Before you restart the server after a configuration change, check if the configuration is ok. Nothing increases the stress level more reliably than a server that does not start up again because of a broken configuration. For this you can use the following command:
If this does not throw any errors (warnings are less bad here), the configuration can be reloaded.
service nginx reload
Result With gzip Compression Enabled
The effect is modest. From the initial 984 kb and 1.7 MB, the download size was reduced to 866 kb and 1.6 MB. The response time remains almost unchanged or increases slightly from 324 ms and 433 ms to 359 ms and 459 ms (so basically negligible). Of course, gzip compression also takes a certain amount of time, but this is offset by lower download times.
There are no comments yet.