COP27 Egypt: A webpage sustainability review - Part 1

Another year, another COP website to review. This issue is the first of two in which I'll take a look at the COP27 website, particularly through the lense of website sustainability. Today, we'll briefly touch the site's website performance which sets the scene for the sustainability stuff we'll focus on later. In part 2, I'll look at ways to reduce the site's data transfer, as well as try out some new tooling to assess device level energy consumption and emissions.

I've split this up because it is waaaaaay to long for email format. Another reason is because some of the tooling we'll be playing with in part 2 is still being actively developed, so there might be updates between now and then. If you can't wait for part 2 in a couple of weeks, then I've published the whole review on my website.

Around this time last year there was a lot of focus on the upcoming COP26 summit in Glasgow. Rightly so, as it marked the five-year anniversary of the Paris Agreement. Under that agreement, countries agreed to revisit and strengthen their commitments towards limiting global temperature rise to 1.5 degrees Celsius at the 26th COP.

With so much attention on COP26, I got curious about how their website stacked up in terms of digital sustainability and performance. So, I took a look under the cover and wrote up COP26.org: A quick sustainability check.

The article got a fair bit of attention, definitely more than anything I’d written before. This attention helped catch the eye of some folks over at the UK’s Government Digital Services (GDS) team. With their help, we were able to address one of the factors contributing to the large size of the COP26 homepage.

While COP26 grabbed a lot of headlines, COPs (mercifully short for Conference of the Parties to the United Nations Framework Convention on Climate Change) actually happen annually. This year’s COP event is being hosted by Egypt, and starts on November 7th.

As it 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?

What we’ll look at

For this review, we’re going to focus on the desktop version of the COP27 homepage (https://cop27.eg/). We will:

• Touch briefly on the page’s Core Web Vitals & performance story.
• Evaluate its sustainability profile by concentrating on hosting, data transfer, and device energy consumption.

Though that’s only two bullet points, we’ll actually be covering a lot in this post. That includes trying out some experimental diagnostic tooling for the first time.

Performance - Core Web Vitals

To start with, let’s take a look at the site’s performance through the lens of Core Web Vitals. This is a Google initiative which ties website performance geekery (aka metrics) with tangible user experience outcomes.

Though this post is concerned with the website’s sustainability profile, its performance history helps to set the scene for what we’ll cover later.

Field data

Google makes Web Vitals data for websites accessible to the public. We'll use that to see how the site is performing in the real world. I personally like to use Treo’s Site Speed Audit tool for this, since it presents the data in an easy to digest visual format.

Looking at the COP27 website, and filtering for desktop sessions, we can see that something happened between July and August which absolutely destroyed the website’s paint metrics (First & Largest Contentful Paint).

It’s worth bearing in mind that the results we see in Treo are for the entire origin (all pages visited on that website) rather than just the homepage. But it’s pretty clear that something changed. Given how it’s impacted the paint metrics, my initial guess was that perhaps a larger main image was swapped in. To find out, let’s use the Wayback Machine.

August, 2022. A redesign

Spoiler in the heading, ey.

Yep, there was a website redesign in August (or late July) which seems to have coincided with the deterioration in paint metrics that we see in Treo. Now I’ll hold off on commenting about the design until later in this post, but below are before and after screenshots.

Before - July 2nd, 2022

http://web.archive.org/web/20220602135905/https://cop27.eg/

After - August 2nd, 2022

http://web.archive.org/web/20220802092302/https://www.cop27.eg/

Quite a significant change above the fold for the homepage. One interesting thing to note here is the size of the main image. The image of the windmills on July 2nd was a 111 kB PNG file, while the audience photo from August comes in at 2.1 MB (still a PNG).

Another thing to note, from a performance perspective, is that the July image is discovered through an <img> tag in the HTML. In August, that’s changed to an inline CSS background-image that’s loaded as part of what seems to be a JavaScript powered slider. The image in August is not preloaded either. Harry Roberts covers these patterns and some over on his blog. To grossly simplify it, the <img> tag should always win out.

The two things above are probably enough to have pushed out the LCP, though the degree of change would suggest some other factors are at play too. You're welcome to dig around and see what you can find.

While we were looking at performance, though, we’ve also started to surface some website sustainability issues. Let’s shift focus to that.

Sustainability

In last year’s audit of the COP26 website, I started looking at sustainability by calculating the homepage’s carbon emissions using Beacon, one of many online website carbon estimation tools. We’re not going to be doing that this year, for reasons I’ve outlined earlier this month.

Instead, we’ll look at each individual segment of a website’s sustainability profile. There are three key areas that developers and website owners can control:

• Servers (data centers and hosting)
• Networks (data transferred over the wire to load site content)
• Devices (how the website impacts the devices used to view the site)

Servers - hosting and CDNs

Let’s start by building a sustainability profile of how the website is hosted.

Does it use green hosting

The first thing we’ll do is check if the website uses a known green web host (or CDN). To find out, we’ll use The Green Web Foundation’s Green Web Checker. Running the domain (https://cop27.org) through this tool reveals that the site is not hosted on a known green web host or CDN.

Where is it being hosted

It looks as though the site itself is hosted in Egypt, and doesn’t use a Content Delivery Network (CDN) to serve cached versions to global users. To uncover this, I ran the page through WebPageTest from three different locations:

• Virginia, USA (test results)
• Frankfurt, Germany (test results)
• Sydney, Australia (test results)

Looking at the request headers (found at the bottom of each test result’s details page), we can find the IP address of each website request. In each test, the homepage document itself, and resources from the COP27.eg domain, come from the same address - 163.121.141.38.

Knowing this, we can find out where the site is hosted. We’ll another tool from The Green Web Foundation - their IP to CO2 Intensity API. This API does two things:

1. It reveals the country in which the IP address is located, and
2. It surfaces the latest annual average carbon intensity figures of that country’s electricity grid.

Running the IP address above through the API returns:

{
  "country_name": "Egypt",
  "country_code_iso_2": "EG",
  "country_code_iso_3": "EGY",
  "carbon_intensity_type": "avg",
  "carbon_intensity": 466.006,
  "generation_from_fossil": 88.87,
  "year": 2021,
  "checked_ip": "163.121.141.38"
}

So, the IP address is located in Egypt as I mentioned earlier. Last year (2021), Egypt’s grid had an average carbon intensity of 466 grams per kilowatt-hour, with close enough to 89% of electricity generation coming from fossil fuels.

That’s not great. Even though emissions-wise Egypt is pretty close to the global average (442 g/kWh), in terms of generation from fossil fuels it is way above the global average (61.56%). The data here comes from Ember. You can play around with their Data Explorer if you want to go deeper.

Yes, we’ve made some assumptions

The checks above don’t paint the rosiest picture of the site’s hosting. However, it is worth mentioning that we’re limited here to general, publicly available data. There is every possibility that the team behind the COP27 website has hosted it on a server located in Egypt that is connected to a clean energy source like solar. I really hope this is the case. If you are reading this & you’ve got an answer to that, reach out and let me know on Twitter.

We'll stop here for now. Part 2 will continue in two weeks time, where we'll look at network data transfer and device energy usage.

The next issue of Optimised will be in your inbox on November 11th. The website has an archive of all previous emails. It's a good place to recap on anything we've covered, and also handy to share with friends or colleagues. As always if you've got any feedback or specific topics you want to be covered then just reply to this email.

Keep safe, stay well.
Fershad.