Writing

Notes on sustainable web development, performance tips for websites and apps, as well as a few other musings.

Logo of COP28 with a circle on the left featuring illustrations of green energy systems, animals and a man. On the right the text COP28 UAE.

Click for high-res image.

COP28 UAE: A Low Carbon Website Review

It'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.

Screenshot of the Firefox Profiler

Click for high-res image.

Power consumption of JPEG, WebP, and AVIF

How 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.

Click for high-res image.

Release guide: CO2.js v0.13

CO2.js v0.13.0 brings the latest average grid intensity data from Ember into the library, as well as expands the number of countries for which average grid intensity data is available.

Click for high-res image.

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.

Silhouette of Boy Running in Body of Water during Sunset

Click for high-res image.

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.

Click for high-res image.

Eleventy Plugin: Green Links

A small Eleventy plugin I built at the end of February 2023.

Click for high-res image.

Release guide: CO2.js v0.12

CO2.js v0.12.0 introduces the ability to customise the figures used in carbon emissions calculations when using the Sustainable Web Design model, paving the way for more case specific carbon emissions estimates.

Light switch set to 'OFF' on a white wall.

Click for high-res image.

Making this website carbon aware

Building carbon awareness into products is an important strategy to in the challenge to develop a more sustainable future. In this post, I cover how I used Cloudflare Workers and real-time data to make this website carbon aware.

Yellow analogue weight scale display with the needle position just before 500 kg.

Click for high-res image.

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.

Yellow sticker of elongated person on grey concrete pathway.

Click for high-res image.

2023. A look ahead.

I’m excited for the year of 2023, both professionally & personally.

Click for high-res image.

2022 in review

A personal look back at the year that was, 2022.

Click for high-res image.

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.

Blue car driving through the desert with colourful balloons hanging out the window.

Click for high-res image.

Driven by defaults

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.

Click for high-res image.

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?

Click for high-res image.

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.

Click for high-res image.

Release guide: CO2.js v0.11

The v0.11.0 release of CO2.js introduces a change to the default carbon estimation model, as well as including global average and marginal intensity data for the first time.

Click for high-res image.

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.

Edge DevTools on GitHub

Click for high-res image.

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.

Click for high-res image.

Release guide: CO2.js v0.10

The v0.10.0 release of CO2.js introduces an easier way for developers to switch between the different carbon estimation models that are available in the library.

Green summer trees overhead with blue sky

Click for high-res image.

A carbon aware internet

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.

Screenshot of the Performance Insights site.

Click for high-res image.

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.

Worms-eye view of building in the daytime.

Click for high-res image.

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.

Man peeking out from behind a wall with a quizzical look on his face.

Click for high-res image.

Hidden in plain sight

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.

Hard gradient from pink to dark purple.

Click for high-res image.

Take it easy with transitions

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.

 Cartoon illustration of an astronaut floating against a black background. Text read: Flowty - Webflow optimisations for carbon conscious designers.

Click for high-res image.

Introducing Flowty - Build low carbon, self-hosted Webflow sites

Webflow is a great service for designers who want to create amazing websites for clients. It does leave a few things on the table when it comes to web sustainability though. Flowty gives designers who build with Weblow the power to create fast, low-carbon, self-hosted sites in minutes.

One green arrow pointing left, above a grey arrow pointing right.

Click for high-res image.

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.

Multi-coloured pens against a black background

Click for high-res image.

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.

Old Pokemon (Gameboy) battle scene with wild Pokemon replaced by chart of new CrUX responsiveness metric. Text: Wild responsiveness metric appeared!.

Click for high-res image.

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.

Road barricade by the sea.

Click for high-res image.

Render-blocking resources

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.

Illustration of speed dial adjusted to the right, with rocket taking off on mobile and laptop in the background.

Click for high-res image.

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.

Click for high-res image.

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?

Female protestor holding up cardboard sign with the words 'Less is more. It's eco-logical' painted on it.

Click for high-res image.

“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?

Colourful video static

Click for high-res image.

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?

Website performance charts for several websites.

Click for high-res image.

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.

Illustration of two people moving charts on a monitor.

Click for high-res image.

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!

The user interface of the Webflow site builder.

Click for high-res image.

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.

COP26 banner with purple globe. Glasgow COP26, in partnership with Italy.

Click for high-res image.

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?

Close-up photo of iWatch measuring health and fitness

Click for high-res image.

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.

Inline skates on a wooden floor.

Click for high-res image.

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.

Wind turbines standing in a grass field in Spain.

Click for high-res image.

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.

Pressure gauge in a box screwed into the wall.

Click for high-res image.

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.

grey steel buckets on wooden floor

Click for high-res image.

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.

white and black signs pointing in direction of various cities

Click for high-res image.

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.

Click for high-res image.

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.

Letter tiles spelling out 'WordPress' positioned between a mobile phone and a laptop.

Click for high-res image.

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!

Cloudflare HTMLRewriter promotion banner

Click for high-res image.

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.

Readle App - 500+ German Stories for Beginners to Advanced

Click for high-res image.

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.

Wooden letter stamps scattered on the floor.

Click for high-res image.

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.

Graffiti art of a black security camera painted in a white frame.

Click for high-res image.

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.

white windmills in open fields during the daytime

Click for high-res image.

The environmental case for website performance

What'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.

CSS programming language

Click for high-res image.

CSS can probably do that

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.

Screenshot of the Fathom Analytics dashboard (Source: Fathom Analytics)

Click for high-res image.

Google Analytics Alternatives

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.

Person holding black android phone scrolling Twitter.

Click for high-res image.

Optimising embedded content

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.

White photo paper with printed icons in black and white.

Click for high-res image.

Web icons in 2021

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.

Person holding black Android smartphone with Google search page on screen.

Click for high-res image.

Core Web Vitals and Google Search

Core Web Vitals are a set of page experience metrics that will be making up part of Google's the search ranking mix from June, 2021. So, what exactly are they?

Person lazing under quilt blanket.

Click for high-res image.

Lazy-loading embedded iframes

Lazy-loading iframes can lead to data savings for your users, faster page loads, and quick interactivity for your site.

Person holding tablet searching through images.

Click for high-res image.

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.

Image with text 'Optimised' centered

Click for high-res image.

Introducing Optimised

Optimised is a fortnightly newsletter focused on the ways website performance and optimisation can help your customers, your business, and the planet.

Weights in on the floor in a gym.

Click for high-res image.

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.

Photo of comma separated data.

Click for high-res image.

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.

Photo of book and computer keyboard.

Click for high-res image.

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.

Screenshot of the redesigned DisplayLink homepage

Click for high-res image.

DisplayLink - Homepage refresh & navigation improvements

A project which saw me redesign and rebuild DisplayLink's homepage and website navigation. A key driver was the desire to declutter the homepage and make different parts of the website easier to reach.

Photo by Pixabay on Pexels.

Click for high-res image.

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.

Photo of a bonfire at night.

Click for high-res image.

Dark Mode toggle for Svelte

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.

View overlooking Taipei city and Yangmin Mountain National Park in Taiwan.

Click for high-res image.

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.

Screenshot of rotating buttons taken from the Markdown Cheat Sheet app.

Click for high-res image.

Rotating buttons in CSS

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.

Banner for Markdown Cheat Sheet, the first Svelte app I made.

Click for high-res image.

Building my first app with Svelte 3

After doing a few tutorials last month, I finally got around to creating my first app in Svelte. In this blog post I go through some of my first impressions on the framework as I start building with the training wheels taken off!

Screenshot from responsive tables Codepen by Fershad Irani.

Click for high-res image.

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.

Screenshot of styled custom dropdown

Click for high-res image.

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.

Screenshot of my 2019 Rugby World Cup fixtures website.

Click for high-res image.

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.

Image of working remotely from a cafe

Click for high-res image.

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.

Cover image showing the final landing page created in this tutorial.

Click for high-res image.

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.

Photo by Fabian Grohs on Unsplash

Click for high-res image.

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.

Logo for Portable Text

Click for high-res image.

Presenting Portable Text

In this code note I cover a couple of ways to build upon Portable Text for presentation.

Technology photo by Andrew Neel on Unsplash

Click for high-res image.

Why I now run my website on Netlify and Sanity

Recently I moved my entire website from Heroku to Netlify. The key driver was to remove the $7 monthly cost of running on Heroku's 'Hobby' plan. It's also allowed me able to make the website more performant without losing the ability to add and manage content. Oh, and I was also able to build this blog into the newly migrated website pretty quickly too!

A photo of me while traveling in South Korea

Click for high-res image.

'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.