Improving a website’s performance (Part 1)

For the past decade, internet speeds have become more reliable, both for a wired and a wireless connection. We are able to retrieve large chunks of data at an impressive rate and load relatively bulky web content at lightning speed when compared to the dial up days. As web developers, we shouldn’t allow such commodity to make us lazy when we develop websites and web applications.

Instead, we should seek ways how to make our product load faster, thus giving the end user a better experience, which will then increase the probability that the end user will visit the website again. Together we will look at ‘tricks’, so to speak, that we can implement to improve our website’s performance. Every time a user accesses a new web page from your website, or even the same page is refreshed, the user’s browser downloads all the content needed to load that page properly. This means that, besides the HTML itself, the web browser is requesting and essentially downloading all relevant images, stylesheet files, javascript libraries and other files that the web page might be referencing. If you have CSS styling and JavaScript code, which are in separate files but will be used throughout the whole website, then you can attach them together to make one file to reduce the number of HTTP requests. On the other hand, if you have certain styling or scripting which is spe- cific to a particular page, make sure to load the relevant files from that page only. Avoid adding all references in the head of the HTML, since this will enable the file to load every time. Allowing the browser to download the JavaScript library you are using in your Gallery page in the Contact us or About us page is redundant. In relation to bandwidth consumption, images could easily be the most expensive content to download on your website. Try to use CSS to generate graphics instead of an image. For instance, setting a button’s background colour with CSS is better than using the background image property. However, in some cases, CSS cannot be used to generate images such as photos of a rotating banner. In that case, keep in mind that image optimisation can be helpful to make your page load faster. Keep the image sizes realistic. Do not make the browser download a 2500 pixel image only to limit its width to 500 pixels with a CSS property. Resize the image using an image editor software, to save on bytes on every image. Compress the image, to further reduce the image size. This will reduce the quality of the image such as removing “extra” colour profiles and tags which are not required for the web, but it will still make it look great when viewed in a website. Photoshop has a specif- ic feature for that, Save for Web. Lastly, save your images in the correct format. Stick to JPEG for photos and PNG for graphics and get rid of BMP and TIFF.

In this first part of this article we have looked at ways how our website’s response time can be improved. In the second part, we will discover other beneficial implementations and also tools that can be used to grade our website’s performance. Watch this space for the second part and don’t forget to give the points we have discussed above a try! Bjorn Micallef is a web developer at Deloitte Digital. For more information, please visit www.deloittedigital.com.mt/web -mobile-development