We’ve used a custom version of the New Transport font since the launch of GOV.UK. New Transport was rendered on-screen by Base64 encoding font files into a CSS file. Base64 encoding was the preferred technique when we launched in 2012 as it helped to reduce the number of HTTP requests and minimise the flash of unstyled content (FOUC).
Why we changed font loading on GOV.UK
Browsers have improved a lot since 2012 and Base64 encoding font files is now considered a method you should avoid. The main problems we had with the Base64 encoding method were that we:
- forced browsers to download fonts even if they were not used
- could only use the Web Open Font Format (WOFF) because of the file size restriction
Base64 encoding also added extra bytes to the page that were sitting on the browsers’ critical rendering path. All these bytes needed to be loaded before the page could be rendered. The CSS file was approximately 200 kilobytes (KB), which was 82% of the total blocking assets needed to load the page.
How we changed font loading on GOV.UK
We made a simple code change but the impact on the wider GOV.UK codebase was significant. We changed the way the
@font-face loading method referenced fonts. By removing the inline Base64 encoded font and loading the files via standard HTTP requests we can now:
- serve multiple font types from the same
@font-facedeclaration, which allows a browser to choose the appropriate font it supports
- remove approximately 200KB from the critical path to load pages faster
- start to take advantage of modern browser optimisation techniques like the CSS font-display property and resource preloading
The main advantages for end users
Less data usage
Removing the Base64 encoded font has reduced the total page weight by 16% (75 KB) per request (assuming no caching). This may not sound like a huge difference, but GOV.UK receives approximately 48 million visitors per month, so this adds up to mobile users saving approximately 800 GB per month, cumulatively. This is especially important to users on older mobile devices and expensive data plans.
By removing the Base64 encoding we are also giving mobile users the ability to opt in or out of downloading the font completely. This can help users reduce their data consumption.
Faster page loading
We have seen big improvements in page load time since we introduced the change. In our testing, the page load time for high-end devices using 4G dropped by 13% and visual population of the page (Speed Index) reduced by 50%.
But where the change is most noticeable is on slow mobile devices on a 2G connection. Under these conditions the page loads approximately 10 seconds faster according to our simulated SpeedCurve tests. This large performance increase comes in part from the 16% reduction in overall page size, but also from the fact we have removed around 200 KB of CSS that no longer needs to be processed by the browser before the page is shown.
Lower battery power usage
With over 44% of GOV.UK users accessing the website through a mobile device, pages need to render quickly and efficiently. Mobile devices are often CPU, memory and battery limited.
A page with a large amount of blocking data can have a huge impact on users with pre-2012 devices. A GOV.UK page will take longer to download due to the mobile connection speed. The CPU and RAM requirement will increase when processing the data and display content to the screen. These both have an impact on a users mobile battery life. The same principle applies to users on older desktop and laptop devices.
By optimising the GOV.UK frontend code, we are improving the experience for all users no matter what device they are using to access it.
Continuing to improve GOV.UK frontend performance
This is just the first stage in improving the GOV.UK frontend performance. The font foundry is working on a new font that promises to reduce the font weight by another 47% for WOFF2 (50% for WOFF).
We’ll also experiment with new browsers features like the
font-display property and asset preloading. By combining all these changes we’ll aim to reduce the load time and also the overall page weight for GOV.UK users. This will provide a better user experience for all users no matter how they access the site.