How to make your websites faster

Nobody likes slow websites

Recently I rebuilt my website, and while doing so, tried to increase my website’s Google Page Speed score. While the 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.

Place JavaScript in the footer

Whenever the browser encounters a script tag, it stops everything else, fetches the script and continues from where it left off. Thus rendering of the page is temporarily stopped. JavaScript is not really necessary during the initial stages when the website is still loading. For instance you may use JS to have animation effects, and it may not be really necessary to load these animations before the content. Use async in the script tags to load them asynchronously or place them just before the closing body tag.

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

Optimize Images

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 liked this post, please ♡ it and share it :)

If you would like to read more posts like these, subscribe to my blog.