Improving website load speed
Posted 10 May 2017
Contents
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.
There are also open-source PageSpeed modules for Apache and Nginx webservers to automatically optimize the serving of assets to improve performance.
Best practices
Minification
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.
- Minify HTML: HTMLMinifier - offers Gulp and Grunt plugins and Express middleware wrapper
- Minify CSS: clean-css or cssnano (extension of PostCSS)
- Minify JavaScript: UglifyJS or the Closure Compiler
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.
<head>
...
<style>
// Styles for above the fold content
</style>
...
</head>
<body>
...
<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</noscript>
<script>
var loadDeferredStyles = function () {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function () { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
</body>
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.