Recently I rebuilt my website, and while doing so, tried to increase my website’s Google Page Speed score. While Page Speed score, is not really a conclusive indicator of a website’s performance, resolving some of the problems that Google specifies, indeed help to speed up your website. Below are my solutions to the problems specified by Google. I will be writing from the perspective of an Nginx user since I use it a lot, though I have posted links to Apache configurations wherever possible. Don’t worry though, as only minor editing of the configuration files is required.
Enable Gzip Compression
Gzip is commonly used for compression and decompression of files that are sent when a request is made. Compression reduces the size of files sent to the client, while decompression retrieves the original content from the compressed ones. To enable gzip compression uncomment the following lines in the http block in /etc/nginx/nginx.conf , these are commonly located in a section named “Gzip Settings” (depending on your configuration you may need to use sudo). You will need to add the final line yourself.
I have described in comments what each line does. Detailed descriptions are provided here. A possible solution in Apache may be the following.
Use Browser Caching
Most of the data of your application does not change everyday. Thus it helps if you cache the data on the user’s browser, so that bandwidth is not wasted in fetching redundant files like CSS, images, fonts etc. Browser caching can be achieved by adding the following to the main server block in /etc/nginx/sites-available/<site-name>
This snippet caches jpg, png, gif, ttf etc for a period of 7 days in the client’s browser cache. An equivalent in Apache may be this.
Concatenate and Minify CSS
Your site probably has more than one CSS file. The browser has to make a request for fetching each of the CSS files. Concatenating the files will result in only one request for the concatenated CSS file. Moreover minifying the concatenated CSS file can reduce it’s size.
Concatenation can be done by using a Gulp plugin like gulp-useref. While minification can be done by using gulp-if, together with gulp-cssnano. An example of a gulpfile.js using such a configuration is shown in the next section.
For further increase in performance you can inline CSS within the HTML itself.
Furthermore, you may try to concatenate your JS files by using gulp-useref and minify them using gulp-if + gulp-uglify, to reduce the JS size.
A configuration to concatenate and minify CSS and JS into individual files is given below
It is possible to reduce the size of images through compression. This is because most of the data in images is redundant, so that compression does not lead to any significant loss in the quality of images. Images can be compressed using a library like imagemin or better still using a Gulp plugin like gulp-imagemin.
These solutions are not without their quirks. For instance I found that using SSL reduces the Page Speed score. There is a trade-off between website performance and security.
If you would like to read more posts like these, subscribe to my blog below.
This post was published in Other