Writing
A collection of ideas, inspirations, notes, and blog posts.
I also keep a list of recent articles I've read over on the /reading page of this website.
-
Post
The recent closure of a web sustainability focused developer tooling service got me thinking about selling sustainability and incentives.
-
Post
2025 was a year on the go, with (mostly work related) travel throughout the year.
-
Note
-
Note
Let's get Power Profiling into Chromium DevTools
| 5 likes -
Post
We nearly had power profiling in Chromium
| 6 likes | 1 repostsBeing able to capture the on device power use of a website is a really important step towards making forward progress in web sustainability. Firefox has it, and it looks like Chrome almost did too.
-
Post
A look back at my first TPAC. TL;DR A 10 out of 10 experience.
-
Note
-
Note
-
Note
-
Note
How should the Web Sustainability Guidelines be organised?
| 2 likes | 3 reposts -
Note
-
Post
Thinking about network sustainability for frontend developers
| 34 likes | 20 reposts | 1 mentionSure data transfer does not equal network energy use. Yes, but there is still a way for frontend developers to influence network energy consumption by reducing data transfer.
-
Note| 3 likes
-
Post
A web component for grid-aware websites
This post introduces the Grid-aware Status Bar web component which we built to complement a recent redesign of our Branch magazine website.
-
Note
Sceptical about website carbon emission figures
| 9 likes | 6 reposts | 3 mentions -
Note
-
Post
COP30 website review. Rinse and repeat.
| 4 likes | 2 repostsAfter taking a year off, I'm back reviewing this year's COP30 website and finding some familiar patterns.
-
Note
-
Note
-
Post
Carbon and energy as metrics for web sustainability
| 3 likes | 1 repostsThis blog post aims to flesh out some of my own thoughts on the metrics we use for web sustainability, with a particular focus on carbon emissions and energy use.
-
Note
I've added webmentions to this blog
| 1 mention -
Note
-
Note| 1 mention
-
Post| 2 mentions
Some thoughts on Sam Altman's recent post "The Gentle Singularity".
-
Note
-
Note
-
Note
-
Note
-
Post
Introducing the Green Web Tracker
This post introduces the Green Web Tracker, an open source website to track the green hosting of domains.
-
Note
Virginia data center energy consumption in 2023
| 1 mention -
Note
-
Note
-
Post
What might a grid-aware CMS be like?
I've been doing plenty of thinking about grid-aware "things" recently. In this post, I'll share some initial ideas of how grid-awareness could be applied to an online CMS.
-
Note
-
Note
-
Note
-
Note
Progressive enhancement and graceful degradation in the context of grid-aware websites
-
Note
-
Note
-
Post
What visual changes does grid-awareness trigger on this site?
This post aims to give a visual representation of what changes on this website when grid-aware changes are applied.
-
Note
-
Note
-
Note
-
Note
Matt never cared about WordPress' (environmental) sustainability to begin with
-
Post
Making this website respond to your local energy grid
| 10 likes | 5 repostsThis post covers the technical steps I've taken to make this website respond to a visitor's energy grid. It also touches on the design changes that happen as a result, and the performance and energy impacts of those changes.
-
Note
-
Post| 1 likes
Between travel, Touch footy, more travel, some conferences, and a bunch of cool stuff for work, life in 2024 was pretty, good. Pretty, pretty, pretty good.
-
Note
-
Post| 4 likes
What better way for a nerd to start the new year than with a redesign of their website.
-
Post
As part of a website redesign, I'm making some changes to the main RSS feed for this blog.
-
Note
-
Post
Introducing our grid-aware websites project
At Green Web Foundation kicking off a cutting-edge project to explore our idea for making grid-aware websites a commonplace tool in website developer toolkits, thanks to funding from SIDN Fonds.
-
Note
-
Note
-
Note
-
Note
-
Note
-
Note
-
Post
Including user interaction in website carbon estimates
| 3 likes | 4 repostsThis post explores one way developers can go beyond page load and start estimating web page carbon emissions that include user interactions on the page.
-
Note
-
Note
-
Note
-
Note
-
Post
Understanding the latest Sustainable Web Design Model update
This post covers the changes made in version 4 of the Sustainable Web Design Model, and how those affect the estimation results for those using this methodology.
-
Note
-
Note
-
Note
-
Note
-
Note
-
Note
-
Note
-
Post
Are my third parties green? Two and a bit years on
The Are my third parties green? project has been running for over two years now. In this post, I look back at the project, and do an analysis of the data it's captured.
-
Post
Speaking about Green IT in Asia – Green IO Conference Singapore and more
In the past month, we’ve had the opportunity to speak at a couple of events in Asia for the very first time. This post shares our experience, links to our slides, and other notes from those events.
-
Note
-
Post
Could data networks operate like the electricity grid?
This post briefly explores how the electricity grid manages load, and wonders aloud if it would be possible to do the same with data networks.
-
Note
-
Note
-
Post
Why are you estimating digital carbon emissions?
In this post, I want to look at the two different carbon accounting models used for estimation, and in what scenario you might use one over the other.
-
Post
Thinking about a way to estimate website energy use
In this post, I want to continue building out an incremental model, but rather than focusing on emissions calculations I want to create a model to estimate energy use.
-
Note
-
Note
-
Note
-
Note
-
Note
-
Note
A mental model for thinking about highly emitting industrial processes
-
Note
-
Post
Adapting Cloud Carbon Footprint's methodology to website carbon estimates
In this post I will look at an possible alternative approach to calculating the emissions of the server (data center/hosting) segment for websites using the methodology outlined by Cloud Carbon Footprint.
-
Note
-
Post
A look back at a very full 2023.
-
Post
Why web perf tools should be reporting website carbon emissions
This post was originally published as part of the 2023 Web Performance Calendar.
-
Note
-
Note
-
Note
-
Note
-
Note
-
Note
-
Note
-
Post
COP28 UAE: A Low Carbon Website Review
| 2 mentionsIt's almost COP time, which means another website review! This year I'm focusing on the controversial Low Carbon Version of the COP28 website, and looking at how it has been implemented.
-
Note
Data center electricity usage in Ireland matches urban residential
-
Note
-
Note
-
Note
-
Note
-
Note
-
Note
-
Post
Power consumption of JPEG, WebP, and AVIF
| 2 mentionsHow much power does loading a JPEG, WebP, and AVIF image consumer on a user's device? In this post, I've used the Firefox Profiler to run some unscientific tests in the hopes of finding out.
-
Post
The Week in Green Software: Open Data with Fershad Irani
A couple of weeks ago I had the pleasure of jumping on the Environment Variables: This Week in Green Software podcast with Chris Adams.
-
Post
Sitespeed.io - Using and contributing to CO2.js
Sitespeed.io is an open-source website performance monitoring solution that also has a sustainability plugin powered by CO2.js.
-
Post
A first look at Carbon Control by WebPageTest
In early May, 2023, the WebPageTest (WPT) team shipped a new feature to the tool. They called it Carbon Control, and boy oh boy was I excited to see it finally land.
-
Post
Is data transfer the best proxy for website carbon emissions?
This post captures my thoughts on the use of data transfer in website carbon emissions calculcations, and what the future holds.
-
Post
Chasing efficiency rather than green energy
A recent post by Adrian Cockcroft raised some sensible counter arguments for why chasing green energy usage for cloud compute might not always be the most climate friendly solution.
-
Post
Self-hosting a website on a solar powered Raspberry Pi
A conversation from the ClimateAction.Tech community about self-hosting a website on a solar powered Raspberry Pi.
-
Post
A small Eleventy plugin I built at the end of February 2023.
-
Post
Curious about driving the transition to a fossil-free internet? Here’s how CO2.js can help.
CO2.js is one of the tools we’ve created to help developers drive the transition to a fossil-free internet. This article will explain the concepts behind CO2.js, it’s uses, and when other tools might be better options to consider.
-
Post
Power measurements and CO2e estimates in Firefox Profiler
A quick look at power usage profiling that's available in Firefox Dev Tools Profiler, and the accompanying CO2e measurements.
-
Post
Making this website carbon aware
| ArchivedThis post is archived. This website is now grid-aware.
-
Post
Improving the accuracy of website carbon emissions estimates
Existing models for website carbon emissions are good for reaching a ballpark figure of website CO2 emissions. This post goes into some ways to generate more specific, accurate emissions estimates.
-
Post
I’m excited for the year of 2023, both professionally & personally.
-
Post
A personal look back at the year that was, 2022.
-
Post
Checking where website requests come from with ReqCheck
ReqCheck is a tool I’ve built to help folks find out where all the different requests made by a web page are served from. I’m hoping it can be a tool for both web sustainability and web performance folks to use when auditing websites.
-
Post
I’ve been thinking about how we can drive broader change to make the web more sustainable and performant. As I’ll get into, I believe a large part of that comes from the defaults set by the tools and services we use.
-
Post
COP27 Egypt: A webpage sustainability review
As COP27 approaches, I thought it would be “fun” to take a look at this year’s COP homepage. How does it do in terms of website sustainability?
-
Post
Website carbon: Beyond data transfer
Measuring the carbon emissions of websites and apps is no easy thing. Most tools use the amount of data being transferred to calculate the overall emissions. But to get more detailed, relevant results we need to go beyond just data transfer.
-
Post
CO2.js: An Open Library for Digital Carbon Reporting
Uploading and downloading the bits and bytes that make up the internet uses a lot of electricity. Breaking the internet down to a systems level, data transfer over networks accounts for an estimated 14% of the web’s total electricity consumption.
-
Post
Microsoft propose sustainability section in Edge DevTools
I share some thoughts on the new proposal put forward by the MS Edge DevTools team for a new “Sustainability” tab to be included in the Edge browser’s DevTools.
-
Post
Building a digital carbon API with Cloudflare Workers and CO2.js
| 1 mentionIn this post we’ll build a simple API to calculate the carbon emissions for digital data transfer using CO2.js and Cloudflare Workers.
-
Post
Knowing the carbon intensity of the electricity grids in which code runs can allow developers to make informed decisions about where/when to run their code.
-
Post
Testing a page with Performance Insights
Performance Insights is a tool by Builder.io (http://builder.io/) which, in their words, allows you to learn what improvements can have the greatest impact on your site's performance.
-
Post
YouTube facades with Cloudflare Workers
YouTube embeds can added megabytes of data to a website, even if they are not watched by the user. This post looks at a way to use Cloudflare Workers plus a facade to reduce that initial data load.
-
Post
I was recently shown a code snippet that that a designer friend implemented on a website to combat flash of unstyled text (FOUT). It did so in a way that could possibly have negative impacts on a visitor’s page loading experience.
-
Post
I’ve been doing a few audits of late, and one thing that keeps coming up is the use of transition effects on page load (or above the fold content). This post looks at some of the performance pitfalls that can arise from this practice, as well as what you should keep in mind.
-
Post
Introducing Flowty - Build low carbon, self-hosted Webflow sites
| ArchivedThis post is archived. Due to a legal notice from Webflow, the Flowty project can no longer be publicly accessed.
-
Post
Adding a Directory and API to ‘Are my third parties green?’
I’ve been taken aback by the reception ‘Are my third parties green?’ has received from the community. Since its launch in January the tool has expanded to now include a Directory and public API.
-
Post
Creating user personas for website performance testing
The web makes it possible for businesses to reach audiences well outside of their immediate geographic area. This presents its own set of challenges to ensure online content and experiences remain fast for potential customers around the world.
-
Post
New Web Vitals Responsive Metric Appears in the Wild
At Chrome Dev Summit 2021, Google introduced a couple of new potential Web Vitals metrics it’s looking into. One of these, responsiveness, has now begun appearing in the wild.
-
Post
A conversation with Gaël Duez on Green I/O
I had the pleasure of talking web sustainability with Gaël Duez for the first episode of the Green I/O podcast.
-
Post
Checking the sustainability of third-party requests with “Are my third parties green?”
“Are my third parties green?” is an online tool that checks the sustainability of third-party requests made by any web page. This post provides some insights into how it was built, and what other features are planned.
-
Post
When looking to optimise for paint metrics (First and Largest Contentful Paint for example), we’re almost certainly going to encounter render-blocking resources. In this post I’ll cover what they are, and some general tips on how to mitigate their impact on page performance.
-
Post
Start performance tests from your browser's address bar
A small life hack to help get performance tests started faster with some handy address bar shortcuts in your browser.
-
Post
Testing a web page with PageSpeed Insights
PageSpeed Insights is a free performance testing tool by Google. In this post we’ll cover the basics of testing a web page with PageSpeed Insights, as well as how to understand the different test results.
-
Post
Website performance and the planet
Solid website performance can have a lot of a positive effects from increasing revenue, to reducing stress of users. But did you know that making your site faster can also be good for the planet?
-
Post
“Use less. Use green. Buy green.”
By using less power, using green power, and buying from green suppliers businesses and individuals alike can reduce their carbon footprint. How would we go about applying this same thinking to website performance and sustainability?
-
Post
Approaches to video on the web
Video is becoming an increasingly critical part of the online experience. So how can you include video on a web page without hurting Core Web Vitals, performance or digital sustainability?
-
Post
Using Treo's free Site Speed Test
In this post we'll look at how you can use Treo's free Site Speed Report to better understand real-user performance on your site, and make the case for performance in your organisation.
-
Post
Core Web Vitals meets sustainability
Everyone wants to make sure their website's Core Web Vitals are up to standard. What if we told you that some of the very things you'll do to improve your site's Core Web Vitals can also help make it more sustainable!
-
Post
Improving Webflow Core Web Vitals
Webflow makes it easy for content creators and marketing teams to build stylish websites fast. But this can come with the risk to publishing a site with poor Core Web Vitals. This post covers some of the things to look out for when building with Webflow.
-
Post
COP26.org: A quick sustainability check
With COP26 about to take place in Glasgow, let's take a quick look at how the COP26 homepage holds up in terms digital sustainability. What's its carbon footprint, and can it be improved?
-
Post
Tracking real Core Web Vitals scores
There are a few options when it comes to keeping track of your website's real world Core Web Vitals scores. In this post I'll cover some of the services or tools you can use, and some things to be aware of.
-
Post
Using Cloudflare Workers to inline external CSS
Loading CSS from external files can slow down your site's initial paint, potentially hitting your Core Web Vitals in the process. In this short post we'll look at how using to use a Cloudflare Worker to inline the content of external CSS files.
-
Post
Reducing website carbon emissions
As our thirst for data, connectivity, and content grows, so does the portion of global carbon emissions attributed to the internet. In this post, we'll take a look at the steps frontend developers can take to make sites more efficient and better for the planet.
-
Post
Stress testing site performance
As developers, we're normally building and testing websites on devices with decent specs, so testing how your site performs over a slow network or on a low-powered device is one way to help ensure real world performance.
-
Post
Quick Performance Audit - Taiwan COVID Vaccination Website
Taiwan's COVID-19 vaccination website is integral to the government's vaccine rollout plans. This post is a quick website performance audit of the site.
-
Post
Proxying AWS S3 content with Cloudflare Workers
Using resources hosted by a third-party can seriously hurt website performance in a few ways. In this post, we'll cover how you can use a proxy to reduce the performance impact when hosting content in AWS S3 bucket.
-
Post
Proxying Cloudinary image requests with Cloudflare Workers
Using resources hosted by a third-party can seriously hurt website performance in a few ways. In this post, we'll cover how you can use a proxy to reduce the performance impact when hosting images on Cloudinary.
-
Post
Building a fast, sustainable personal website
This case study explores the design and development decisions I made when redesigning my personal website. These decisions help to deliver perfect Lighthouse scores and improved website sustainability.
-
Post
Frontend tips to speed up your WordPress website
WordPress powers over 40% of the internet. It's a powerful platform that makes content creation possible for more people. In this post we'll cover some simple performance optimisation tips you can use to make your WordPress website faster!
-
Post
Dynamic page content with Cloudflare Workers
A brief guide on how Cloudflare Workers can allow you to add random content to your website without client-side JavaScript.
-
Post
Readle - App Optimisation & Consultancy
Having worked primarily on website performance, the chance to work on Readle's native mobile apps was a new challenge. Here's how we improved app speed and delivered greater user satisfaction.
-
Post
An introduction to optimising web fonts
A brief introduction to some of the key considerations and techniques to keep in mind when optimising fonts for the web.
-
Post
This website is a FLoC-free zone
I switched analytics away from Google late last year. Now, I've also added response headers that will exclude this site from FLoC calculations too.
-
Post
The environmental case for website performance
| 1 mentionWhat's the link between a faster website and climate change? In this post I'll explain how you can help the environment by focusing on website performance.
-
Post
Rather than immediately reaching for JavaScript to handle on-page interactions, why not stop and think Could CSS do that? You'd be surprised, it probably can.
-
Post
There's an increasing number of privacy-focused alternatives to Google Analytics. This article covers a few options you can use to keep your website visitors information out of the hands of digital advertisers.
-
Post
An introduction to HTML resource hints
An easy-to-follow introduction to the different resource hints available to help improve web page performance.
-
Post
Embedding content from Twitter or YouTube is pretty commonplace these days. However, the code these services provide isn't always the most optimised. Here we'll look at a few ways you can optimise pages on your websites that have Twitter/YouTube content embedded within.
-
Post
This post is taken from Optimised, the fortnightly web performance newsletter I run. In it we look at the different options that you can consider, and why you really should be using SVG in 2021.
-
Post
Core Web Vitals and Google Search
| ArchivedThis post is archived. Core Web Vitals have evolved significantly since I wrote this post. You should try to reference more recent content.
-
Post
Lazy-loading iframes can lead to data savings for your users, faster page loads, and quick interactivity for your site.
-
Post
Which CMS, e-commerce platforms, and CDNs deliver the best core web vitals?
Here's a really detailed look at 18.5 million domains and how they stack up against Google Core Web Vitals metrics.
-
Post
The why of website optimisation: Better user experience
In the final post of the why of website optimisation series we'll take a look at how better performance online can equate to a better user (or customer) experience.
-
Post
The why of website optimisation: Better search ranking
This is the fourth post in a series where I'll outline how website optimisation can help you with SEO performance.
-
Post
The why of website optimisation: Increase site conversions
This is the first in a series of five posts where I'll outline the benefits that can be derived through website optimisation.
-
Post
The why of website optimisation: Help the planet
This is the third post in a series where I'll outline the environmental benefits that can be derived through website optimisation.
-
Post
The why of website optimisation: Reduce operational costs
In this second post of the why of website optimisation series we'll go into how you can reduce your operational costs through better site performance.
-
Post| Archived
This post is archived. After a couple of years, I decided to stop publishing the Optimised newsletter. Instead, I'm publishing everything to this blog.
-
Post
Generate CSV Files from Data with 11ty
Eleventy is one heck of a powerful, incredibly flexible static site generator. This short guide will show you how you can generate CSV data files using Eleventy.
-
Post
Reduce the Weight of Your Web Pages with the Picture Tag
Images often combine to make up the largest group of resources on a web page (in terms of file size). Therefore, optimising images is one of the easiest steps any website owner can take when looking at improving the performance of their website.
-
Post
Boost branding and engagement with Open Graph meta tags
When we share content on social media we want it to be read. This blog posts introduces how Open Graph tags can be used to present eye-catching, consistenly branded shared content across social media platforms.
-
Post
DisplayLink - Homepage refresh & navigation improvements
| ArchivedThis post is archived. Displaying has since been acquired by Synaptics, and their website has changed considerably since this project
-
Post
A quick guide to easy web performance wins
This post stems from a conversation I had with a good friend of mine last week. We were talking about how to boost website traffic, and conversions. As I explained to him, and as we'll get to in this post, there's more to the game than just fresh, keyword laden content.
-
Post
This quick code note will go through creating a simple component in Svelte that allows us to switch the theme of our website between light and dark.
-
Post
Freelancing in Taiwan during the COVID-19 pandemic
As a freelancer, and someone who was working remotely in the months before COVID-19 you'd think not a lot has changed for me since. In this post I go through what life is like in Taiwan, and how the coronavirus pandemic has also led to a change in my daily working habits.
-
Post
Here's a really quick little code note that shows how to create rotating buttons using just a tiny bit of JavaScript and some CSS.
-
Post
Building my first app with Svelte 3
| ArchivedThis post is archived. Svelte is now up to version 5, so you probably want to read up about that instead.
-
Post
Two options for making responsive tables for your website
I recently found myself having to create a website that presented a lot of data in tabular format. This post goes through two approached that I tried out. Firstly, using table markup and horizontal scrolling, and then looking at how it can happen with CSS Grid.
-
Post
Make a styled, custom dropdown
I was working on a recent project that required me to create a customized select dropdown. It had to clearly, neatly show two sets of data (jobs and locations), and look good in the process.
-
Post
Disabling elements with CSS pointer-events and media queries
A recent project required a collapsible section of content to remain expanded on desktop and collapsible on mobiles. Here's how I made it work with a handful of CSS.
-
Post
How I would build my 2019 Rugby World Cup fixtures site differently next time.
Mid-September, over a typhoon holiday long weekend in Taipei, I put together a very simple website for the 2019 Rugby World Cup. With the 2019 Rugby World Cup now almost at an end, I've been thinking about how I might build a similar website differently next time.
-
Post
What I've learnt in two months working remotely.
On the back of Buffer's 2019 State of Remote Work report, I take a look back at my transition from being office-bound to location independent. What's met my expectations, what's surprised me, and what challenges I've faced.
-
Post
Storing, using, and keeping environment variables secret in local environments
A quick note on how to create, and use environment variables locally. They can be used to keep API keys, secrets, passwords and other sensitive material that you'd rather not expose to the public on GitHub, GitLab or Bitbucket
-
Post
Build landing pages to promote webinars across different time zones
With the global nature of broadcasting online, many events - from sports tournaments to webinars - require promotion across multiple time zones. In this tutorial, I'll cover how to create a simple set of multi-time zone landing pages for a webinar series.
-
Post
Passing multiple arguments to an Eleventy custom filter
While working on a recent project, I came across a small problem. I needed to convert an event time from UTC to a particular time zone. I was building my website project using the Eleventy static site generator, so I felt that a custom filter would be the best solution to this problem.
-
Post
In this code note I cover a couple of ways to build upon Portable Text for presentation.
-
Post
Why I now run my website on Netlify and Sanity
| ArchivedThis post is archived. This website is now hosted on Cloudflare Pages, and I've recently moved all my content into markdown files.
-
Post
'Hello, world.' A little bit about me.
This will hopefully be the first of many blog posts in which I cover content spanning web development, running a business, freelancing, and just general musings. Here's a little bit more about me, my hobbies, my past lives professionally and what I'm doing these days.