We know that fast sites perform better. A few choice stats:
- Yahoo increased traffic by 9% for every 400ms of improvement
- Amazon increased revenue by 1% for every 100ms of improvement
- Mozilla had 60 million more Firefox downloads per year, by making their pages 2.2 seconds faster
And just as we know that good performance is a benefit, poor performance is a liability.
- A one second delay in mobile load times can impact mobile conversions by up to 20%
- The BBC found they lost an additional 10% of users for every additional second their site took to load.
- DoubleClick by Google found 53% of mobile site visits were abandoned if a page took longer than 3 seconds to load.
We can see from our analytics stats that not all of our users are visiting from devices with fast internet connections so it’s important to optimize the loading times for everyone.
In this article I’ll cover the different types of assets used on the site and what we did to optimize the performance.
The site uses the open source Open Sans font throughout. We self-host the WOFF2 fonts instead of using Google Fonts CDN to avoid the additional TLS/DNS round-trip associated with Google Fonts.
We use Bootstrap to build our site’s CSS. It’s minified at build-time and PostCSS is used with Autoprefixer and the excellent PurgeCSS which does a great job scanning all of the generated webpages and removing all the CSS rules which are not used.
This makes a huge difference to the file-size of the generated output, typically reducing the size by more than 50%.
All images are losslessly optimized. We use Squoosh for bitmap images and SVGOMG site to minify the SVG files.
We also use native lazy loading so that all images ‘below the fold’ are not loaded until a visitor scrolls near them. Some pages are long so this can save the users bandwidth by not downloading images they may not see.
Where possible we always specify the images height and width to reduce content layout shifting (CLS).
Icons, logos and diagrams are all SVG where possible.
self-host your static assets
. Scripts which are not needed to render the page are loaded with the
async attribute and analytics tracking scripts use the new
We make use of a few third-party widgets and found that they were negatively affecting performance - in some cases substantially.
The site is hosted on
CDN which has blazing-fast performance as standard. Static assets are
cached for 1 year
with a custom configration in the
Hugo Minification configuration
We use the static site generator Hugo to build the site which has great minification options baked right-in .
We use this in our Hugo site’s
minify: minifyOutput: true tdewolff: html: keepWhitespace: true keepDefaultAttrVals: false keepEndTags: false js: keepVarNames: true json: KeepNumbers: true xml: keepWhitespace: true
- We make use of the
library. This tiny (1 KB) script works by preloading the HTML of a page when a user hovers over a link. This script is loaded with the
deferattribute to ensure it is loaded last.
- iframes are lazy-loaded with the
We regularly make use of a range of performance testing tools:
There’s a few things we’d still like to improve with the site’s performance.
- We’d like to start using the more efficient WebP image format (with a fallback) instead of JPEG later in the year now that browser support has improved.
- Remove any Internet Explorer 11 CSS and workarounds from the main codebase later in the year now that IE is no longer supported by Microsoft.
We hope you’ve found this post useful and given you some ideas on how to improve your site performance metrics.
Share this article: