Page load time optimisation

Slow page times can significantly increase your sites’ bounce rate and poorly effect your user experience. Manuel has some tips on optimising your page load times.

“Google is now using page load speed as a ranking factor, so it’s even more imperative that your page load times are as optimised as possible!

A key factor in high page load times is on-page images, so optimising these can really help speed things up. The best way to do this is to minimise the overall download size by eliminating unnecessary resource downloads, limiting the number of HTTP requests and optimising and compressing the required resources such as HTML, JS, CSS, XML and images themselves.

Whether on mobile or desktop, JS and CSS are critical when rendering a page and ensuring the load time is as low as possible. As we can’t do a partial evaluation of the on-page CSS, we hold the rendering of the page until we have all of the CSS file downloaded and we then have the DOM (HTML) and CSSOM (CSS) together and place them within the render tree and perform the layout instruction. JS files that are not critical for the page rendering should be loaded asynchronously or at the bottom of the page.

Enabling compression (mod_gzip, mod_deflate, or any server-side language that does content compression) on the server could also improve page load time. Compressing the content saves bandwidth and improves render times, particularly on devices with slow internet connections. It will also reduce load on your server, as transferring smaller files takes less time.

Where possible, HTTP requests should be kept to a minimum, as well as avoiding the use of redirections unless necessary, and you should also try to put your critical assets under the same domain.

The use of a Content Delivery Network (CDN) can also help by providing alternative servers which are geographically closer to the end-user.

Also, reduce the load time of pages by serving appropriately sized images:

  • Reduce file sizes based on where images will be displayed
  • Resize image file themselves instead of via CSS
  • Save files in an appropriate format depending upon usage.”

Related Blog & News