Improving website load speed

Posted 10 May 2017


Users expect your website to load fast, and if it doesn't you'll lose that traffic. Optimizing your website to improve load speed can not only reduce traffic bounce rate, but improve your SEO as page speed is a metric used by search engines such as Google to rank your website.

PageSpeed Insights

Google offers an online tool called PageSpeed Insights that tests the performance of your website on both mobiles and desktops. As mobile web usage continues to increase it is important to consider how your website is optimized for browsers often browsing the web with slower internet connectivity.

PageSpeed Insights tests your website and gives a score between 0 and 100 for both mobile and desktop performance.

PageSpeed Insights results for

There are also open-source PageSpeed modules for Apache and Nginx webservers to automatically optimize the serving of assets to improve performance.

Best practices


One way to improve the speed of your website is to ensure the HTML file and CSS and JavaScript assets are minified [1]. Minification is the process of removing unnecessary data from files without affecting how the resource is processed by the browser. Examples include removing comments, using shorter variable and function names, and removing unused code.

Best practice is to include minification into your build process using an automation tool such as Gulp.

Render blocking

PageSpeed also penalizes any JavaScript or CSS assets that block browser rendering of above the fold content [2,3]. Above the fold content describes the top section of your website first visible on page load. Browsers must wait for JavaScript and CSS files included within the document's <head> to be loaded before rendering the webpage. This increase in wait time can be enough to make a user hit the back button.

Optimizing JavaScript delivery

To stop JavaScript assets blocking rendering you should include them just before the closing </body> tag rather than within <head>. This delays browser loading of JavaScript until after the DOM and styles are rendered.

Optimizing CSS delivery

Note: I'm now using Filament Group's async css approach using rel="preload" and cssrelpreload.js polyfill for older browser support.

CSS delivery can be optimized by inlining all styles for above the fold content within a <style> tag. Inlining all stylesheets isn't feasible for most websites and to mitigate this you can use the following example to extra CSS files after first browser rendering.

      // Styles for above the fold content
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="css/styles.css" />
      var loadDeferredStyles = function () {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(function () { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);

Enable compression

Google recommends using gzip to compress resources served by your web server [4]. gzip can reduce response size by up to 90% significantly increasing page load times.

Optimize images

Images are often the largest resources on a web page therefore their optimization is vital in improving page speed [5]. Images should be optimized for the web with consideration placed into resolution and dimensions.

Thanks for reading

I'm Alex O'Callaghan and this is my personal website where I write about software development and do my best to learn in public. I currently work at Mintel as a Principal Engineer working primarily with React, TypeScript & Python.

I've been leading one of our platform teams, first as an Engineering Manager and now as a Principal Engineer, maintaining a collection of shared libraries, services and a micro-frontend architecture.