#52 - Bits & pieces

It’s issue 52 of Optimised, which means it’s the two year birthday for this little newletter.

CO2.js: An Open Library for Digital Carbon Reporting

This week I'm sharing an article I wrote for the Issue 4 of Branch Magazine. It is centered around the work I have done with The Green Web Foundation on their CO2.js library.

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.

Building a digital carbon API with Cloudflare Workers and CO2.js

In this post we’ll build a simple API to calculate the carbon emissions for digital data transfer using CO2.js and Cloudflare Workers.

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.

#47 - Bits & pieces

This week, I’ll be sharing some of my favourite articles and videos from the recent past.

Testing a page with Builder.io’s Performance Insights

Performance Insights is a tool by Builder.io which, in their words, allows you to learn what improvements can have the greatest impact on your site's performance.

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.

Experiment with performance

This week’s newsletter is a very quick look at the new Opportunities & Experiments features that were added to WebPagetTest over the last week.

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.

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 week we’ll look at some of the performance pitfalls that can arise from this practice, as well as what you should keep in mind.

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.

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.

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.

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.

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.

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.

#35 - Bits & pieces

This week, as we celebrate Lunar New Year here in Taiwan, I’ll be sharing some of my favourite web perf. articles and videos from the past year.

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.

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

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?

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.

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 issue covers some of the things to look out for when building with Webflow.

Updates from Chrome Dev Summit 2021

A brief update on some of the announcements from the 2021 Chrome Dev Summit, and how they relate to web performance.

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?

Tracking real Core Web Vitals scores

This week we're going to look at a few different ways you can keep track of your site's own real world Core Web Vitals.

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.

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.

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.

CSS can 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.

Proxying third-party requests

Using resources hosted by a third-party can seriously hurt website performance in a few ways, one of which is the need for the browser to establish a connection with another domain. In this issue, we'll cover how you can use a proxy to reduce the performance impact of this connection step.

Building a fast, sustainable personal website - Part 2

Part 2 of this case study explores some of the key code and build step implementations that help to deliver perfect Lighthouse scores and improved website sustainability for my personal website.

Building a fast, sustainable personal website - Part 1

Part 1 of 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.

Speed up your WordPress website

WordPress sites make up a big part of the internet, and so getting performance right on them will go a long way towards delivering a better online experience overall.

Bits and pieces

Something a bit different this week - I'll be sharing some recent web peformance related news and articles that have come out in the past two weeks.

App Optimisation for Readle

This week I'll be sharing a recent client project I worked on. Hopefully real world examples like these can provide practical insights for tackling performance issues on your own websites.

Performance & accessibility

Performance and accessibility go hand in hand. The overlaps between the two are present in more ways than you might think.

Optimising web fonts - Part 3

The third and final part of a short series looking at some of the tricks and techniques to consider when optimising fonts for the web.

Optimising web fonts - Part 2

The first of a short series looking at some of the tricks and techniques to consider when optimising fonts for the web.

Optimising web fonts - Part 1

The first of a short series looking at some of the tricks and techniques to consider when optimising fonts for the web.

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.

Do you need all that analytics?

Website analytics provide useful insights into the reach of your online content. However, the analytics on your site can also impact page performance and expose privacy concerns.

Resource hints - Part 2

This week we continue our look at resource hints, and how you can use them to improve perceived performance.

Resource hints - Part 1

A brief primer about resource hints. What they are, where, when and how to use them.

Optimising embedded content

This week we'll look at a few ways you can optimise pages on your websites that have Twitter/YouTube content embedded within.

Web Icons in 2021

A quick primer on the benefits associated with replacing icon fonts with SVGs

Optimising images - Serving images

A guide to some techniques that can help with optimising, compressing & serving images.

Optimising images - Reducing image size

When it comes to optimising images, the easiest place to start is with the image files themselves. With modern image formats, compression tools, and online services it's easy to shave megabytes off the total size of a web page.

Core Web Vitals & Google's Search Update

What are Core Web Vitals? What might adding them to the signalling mix for search mean for SEO? And, what can you do to check & prepare your site? Read on to find out!

Tools to measure site performance

This issue of Optimised will introduce you to a few tools you can use to test and track website performance.

Third-party resources - A cautionary tale

Optimised is a fortnightly newsletter all about web performance. In this issue we'll be looking at third-party resources.

Yeah okay, but why?

Welcome to the first issue of Optimised.