I’ll be building on my earlier post about CSS asset fingerprinting, this time adding the preload response header into the mix. Together, these techniques make sure your browser grabs my blog’s CSS right away, keeping things fast and seamless.
In this post I bring two previous blog posts together to create the perfect CSS setup for my little blog.
In this blog post, I'll show you how I've written an 11ty Shortcode to manipulate my CSS file, thus allowing for optimal long-life cache-control response headers. Any feedback on this build process would be greatly appreciated.
In this post, I review Cloudflare's image optimisation library, Mirage 2.0, and explain how it caused images on my blog to fail on all mobile devices for three weeks. I'll also offer suggestions to Cloudflare on how they can prevent this issue from impacting other Pro plan customers.
In this post I investigate how you can use a mixture of dynamic and static Brotli compression with the Cloudflare Pro plan, for optimal web performance.
This post explores refactoring a web performance snippet to improve security and align with modern best practices using the PerformanceObserver and PerformanceNavigationTiming API's.
This is an RFC I wrote to persuade the GOV.UK Senior Technology team to remove Subresource Integrity (SRI) from GOV.UK's assets being served from the assets domain and allow for greater HTTP/2 performance.
This is an RFC I wrote to persuade the GOV.UK Senior Technology team to enable HTTP/2 on GOV.UK. It was accepted and merged into the repository, and enabled in June 2020.
This is an RFC I wrote to persuade the GOV.UK Senior Technology team to enable Brotli compression on GOV.UK. It was accepted and merged into the repo, and enabled in March 2021.
This is an RFC I wrote to persuade the GOV.UK Senior Technology team to enable HTTP/3 on GOV.UK. It was accepted and merged into the repo, and as of 11th Jan 2024 it has now been enabled!
I've finally had time to clean up some tech debt, so I migrated this blog onto Netlify fronted by Cloudflare and fixed the web performance issues I spotted.
The 'Graph Page Data' view is a one of those WebPageTest features that is hidden in plain sight. So lets shine a light on it and see what it can do.
A step by step guide on how to get started with using Cloudflare Workers for web performance optimisation.
Cloudflare Workers are an awesome tool for rapid prototyping and observing web performance changes, here are a few recipes you may find useful.
Priority hints may be on hold, but you can still enable them and investigate what they can do. And in one instance I found a nice set of improvements to visual metrics.
Twitter embeds are bad for web performance. They cause so many extra requests, and a huge amount of data added to a page, so how can we fix it?
It's important to remember staff members are users too, so optimise your internal tools for performance for more productive and less stressed workforce! Here are some tools and resources to help you out.
A small change in the ordering of your font sources in the `@font-face` rule can have a big impact on data and web performance, especially when used in conjunction with the `preload` resource hint.
Let's examine the WebPageTest homepage and investigate what all the settings do, including examples of what you can use them for.
It's amazing what a difference a single little response header can have on web performance. Lets 'fix' it at the edge with a <s>Cloudflare Worker</s> CDN.
WebPageTest exposes all its data via an easy to access API, but the data listed can be overwhelming. Using a tool like jq can help. Here's how you use it.
Your may not think it, but your 404 page is an important part of your potential user journey. You should test its web performance as it can have a big impact on your users experience.
Weird things can happen to waterfalls when you don't set the correct response headers.
TLS 1.3 is the new kid on the cryptographic protocols block. It offers better security and better initial connection web performance. And IPv6 is a 'new' internet protocol. Lets examine some shiny new things!
A simple blog post bringing all the resources I used and created in the GOV.UK HTTP/2 work.
Custom dashboards and graphs are a really powerful feature of SpeedCurve. Here's a few examples of how we at GDS are using them for synthetic web performance monitoring.
The best way to benchmark improvements using WebPageTest is by comparing results. Here's a tool to help you do that.
The `font-display` property is a great way to tweak the way your fonts load, especially useful as fonts have a large effect on the perceived performance of your website.
SSL certificate revocation is complex, but absolutely necessary. And your choice of what certificate to use for your site is important, and you should consider its impact on web performance when doing so too.
There's more to WebPageTest than the Waterfall View. In this post I look at the the 'Connection View' and how it can be used to spot web performance issues.
Enabling HTTP/2 doesn't always lead to web performance gains. I believe I may have finally solved a mystery of why performance got worse in some cases.
WebPageTest waterfall charts are a very powerful web performance tool, but can sometimes be a little confusing. Maybe this post can change that.
The `Save-Data` allows users to choose a data optimised browsing experience (if you put in the work).
Is a performance score of 100 in Lighthouse always for the better?
Frontend performance is important, especially for government services.
It's amazing what a few font tweaks can do to perceived performance. Now lighthouse hits 100/100 for performance!
Optimising the font loading method on GOV.UK to improve performance.
With browsers getting faster all the time it's a good idea to remember that not everyone uses them. Writing efficient code is key to maximising device accessibility.
See all tags.