Precompressed HTML at the Edge: Eleventy Meets Cloudflare Workers
In this post, I will show you how I integrate Brotli level 11 compression directly into my 11ty build process to squeeze every possible byte out of my blog’s HTML.
Tagged “web-performance”
Asset fingerprinting and the preload response header in 11ty
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.
The Speed Trifecta: 11ty, Brotli 11, and CSS Fingerprinting
In this post I bring two previous blog posts together to create the perfect CSS setup for my little blog.
Using an 11ty Shortcode to craft a custom CSS pipeline
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.
Cloudflares Mirage 2.0 broke my images on all mobile devices
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.
Cranking Brotli up to 11 with Cloudflare Pro and 11ty
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.
Refactoring a Web Performance Snippet for Security and Best Practice
This post explores refactoring a web performance snippet to improve security and align with modern best practices using the PerformanceObserver and PerformanceNavigationTiming API's.
Remove Subresource Integrity (SRI) from the GOV.UK assets domain
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.
Enabling HTTP/2 on GOV.UK
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.
Enabling Brotli compression on GOV.UK
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.
Enabling HTTP/3 on GOV.UK
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!
Migrating from Github Pages to Netlify & Cloudflare
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.
How to use WebPageTest's Graph Page Data view
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.
Setting up Cloudflare Workers for web performance optimisation and testing
A step by step guide on how to get started with using Cloudflare Workers for web performance optimisation.
Cloudflare Worker recipes for frontend performance testing
Cloudflare Workers are an awesome tool for rapid prototyping and observing web performance changes, here are a few recipes you may find useful.
Testing priority hints with WebPageTest
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.
Using Puppeteer and Squoosh to fix the web performance of embedded tweets
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?
The web performance of internal systems is important, so optimise them too
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.
The importance of `@font-face` source order when used with preload
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.
How to run a WebPageTest test
Let's examine the WebPageTest homepage and investigate what all the settings do, including examples of what you can use them for.
Fixing a legacy HTTP/1.1 server configuration with Cloudflare Workers a CDN
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.
Using jq with the WebPageTest API
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.
Why you should be testing your 404 pages web performance
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.
A 'Vary' unusual waterfall
Weird things can happen to waterfalls when you don't set the correct response headers.
Measuring and examining TLS 1.3, IPv4, and IPv6 performance
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!
Bringing HTTP/2 to GOV.UK - Resources
A simple blog post bringing all the resources I used and created in the GOV.UK HTTP/2 work.
Example synthetic web performance monitoring dashboards using SpeedCurve
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.
WebPageTest comparison URL generator
The best way to benchmark improvements using WebPageTest is by comparing results. Here's a tool to help you do that.
Improving perceived performance with the CSS `font-display` property
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.
The impact of SSL certificate revocation on web performance
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.
How to read a WebPageTest Connection View chart
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.
HTTP/2 and Subresource Integrity don't always get on
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.
How to read a WebPageTest Waterfall View chart
WebPageTest waterfall charts are a very powerful web performance tool, but can sometimes be a little confusing. Maybe this post can change that.
Speeding up the web with the Save-Data header
The `Save-Data` allows users to choose a data optimised browsing experience (if you put in the work).
Lighthouse score of 100: not always for the better
Is a performance score of 100 in Lighthouse always for the better?
Why we focus on frontend performance
Frontend performance is important, especially for government services.
Joining the 100 club (#webperf)
It's amazing what a few font tweaks can do to perceived performance. Now lighthouse hits 100/100 for performance!
Making GOV.UK pages load faster and use less data
Optimising the font loading method on GOV.UK to improve performance.
Writing efficient CSS selectors
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.