Tips to make your website faster

Did you know that Google takes into account the speed of your website in order to know where to position it in the search results? Yes, and Google is not the only reason why your website should be quick. To avoid forcing your users to leave your website and/or your server to run out of resources, you need to ensure things run quickly.

From a mobile perspective, you have to be aware of the limits of all the devices. You can compare them for performance to computers and internet connections of five years ago: the hardware is poor and the bandwidth is generally limited compared to today’s computers. We all know that mobile devices are becoming ever more popular so it’s extremely important to make sure that your website is quick on these devices as well.

Speeding up your website is based on two simple things: reducing the number of requests the users make and reducing the size of the response your server sends back. Here are some useful tips:

Reduce the number of requests

Every static resource included in the HTML of your website is a request the end user will make to the website—every single image, style sheet and JavaScript. Modern browsers usually only process four static resources at a time, meaning that the more you have, the more the end user will have to wait. But how do you reduce the number of requested static resources?

• Combine static images into CSS sprites: instead of having fifty different icons, create an image containing all of them and use the CSS attribute background-position to extract them. You probably already saved most of the requests sent by the user—CSS sprites are very powerful
• Combine style sheets: if you have more than one style sheet, combine them together
• Combine JavaScripts: the same as for the style sheets, merge multiple JavaScripts into a single file
• The browser cache is your friend: to avoid having the user ask the server the same resources over and over (e.g. the logo), configure your server to send back the required headers in order to have the browser cache them

Reduce the size of the response

Reducing the size of the response your server sends back drastically decreases the time the user has to wait for the page to be loaded. It’s pretty straight forward—the fewer bytes the end user has to download; the less time he will have to wait. But how…?

• Compress text resources: you can easily configure your website to compress all your HTML files, style sheets and JavaScripts with the GZIP algorithm. The idea is pretty simple, the resource is compressed by the server before being sent to the end user, and decompressed by the end user’s browser as soon as it receives it. You can save between 40% and 90% of the original file size. Quite a lot, huh?
• “Minify” text resources: in English—remove all the useless characters from your HTML files, style sheets and JavaScripts. Remove all the comments, the tabulations and line-break characters from your text resources—they are useless. You can save up to 20% of the original size
• Optimise images: make sure you save the images in the correct format. Priority always goes to PNG and GIF formats; they are both very lightweight when the image has a low spectrum of colours. Use JPEG only when it’s a photographic-style image (a JPEG quality of 75% is usually enough)

How to actually speed it up

You’re probably asking yourself, ‘what’s the best way to achieve all of this in a simple way?’. Obviously you don’t want to combine and minify your original static resources otherwise it will be impossible to work on them. You may try to code something in your favourite server-side language, but that will be generally too slow and invasive.

Well, GIYBF – Google is your best friend (although it’s not mine since it completely deleted 49GB of my beloved documents, but that’s another story). Specifically, mod_pagespeed. It’s an Apache module you can download and install, coded in Python by Google itself (if you don’t use Apache, I’m sorry but it’s time to switch to a better web server). What can you do with it? Everything I specified above and more.

The configuration is very straight forward, all you have to do is configure your pagespeed.conf to specify what you want the module to do. Here is the list of things it can do. Yes, it can generate CSS sprites for you; how powerful is that?! It can resize and optimise images for you. It can even make sure that the Google Analytics snippet is included in every page.

And the awesome thing is: you don’t even have to touch your website code!

How to check the performance

Google really cares about the speed of the web—it has always been clear since they released the first version of Google Chrome. And it also wants to make sure that the web is quick in other browsers, which is why they coded the Apache module.

In order to achieve its mission, they know it’s important to make everyone aware of the speed of their websites—it’s the first step towards its improvement. Google PageSpeed Online is what you need; simply input the address of your website and it will analyse it and tell you where and how you can speed it up.

Conclusion

If you follow all the tips specified in this article, you can make your website at least 3 times faster. End users will have a much better experience and may not leave your website and go to one of your competitors, this time. Your website will be better ranked in Google and other search engines. Your web server will be less busy responding to requests. It’s a benefit for everyone, so why not do it?

To increase the readability of the article, I tried to use as little technical jargon as possible, and avoided going too far into detail. If you are interested in having more technical details, don’t hesitate to contact us to learn more about our web development services!