Web Sustainability at CRDT

The concept of web sustainability flows from the recognition that everything we do on the web has a carbon footprint. From the data centers that host the sites and services we use, to  the network components that connect us, to the devices we use to navigate the web – all require electricity, and today that continues to mean carbon emissions.

How much carbon depends on a morass of factors – many of which are only beginning to be understood. To compare where the information communications and technology (ICT) sector as a whole stands in relation to other industries: the aviation industry is said to currently generate 2.5% of global carbon emissions. The World Bank currently estimates ICT’s share is at least 1.7% of the global total, and some researchers have suggested it could be as high as 3.9%.

Data centers are major contributors, and we’re happy to say that the Yale School of Management uses “green hosting” based on Google Cloud Platform. But we at CRDT wanted to go further.

Putting Sustainable Web Design to Work

According to the Sustainable Web Design Model, viewing any web page comes at a carbon cost, and the more “stuff” a web page contains, the higher the cost. Multimedia content such as video, animation, images and graphics rank highest, but other elements like fonts, scripts, and text all contribute their share.

Though our old case pages were hardly “gas guzzlers,” we have made a concerted effort to slim them down even further using sustainable web design practice by:

• Enforcing a page weight budget of 500 KB, meaning that no more than 500 KB of data is transferred to a user's device to view any of our pages -- and many of our pages don't even come close. One major caveat is that we are not counting videos as part of a page's weight -- more on this in the Website Carbon section below.
• Optimizing images: All of our images are automatically formatted using the WebP format, which delivers the same image quality at around 30% less file size than JPEG. In addition to smaller transfers, this also decreases our storage overhead, which also saves on emissions.
• Lazy loading images: This is a technique where images aren't loaded on a page until a user scrolls to it, cutting down on unnecessary transfers.
• Using System Fonts: Many websites use external fonts that have to be loaded, adding to a page's weight. Our pages use system fonts that already exist on all devices.
• Introducing Dark Mode: Based on the premise that displaying dark colors requires less energy than bright colors, Dark Mode has been estimated in average brightness conditions to save users with OLED screens 3-9% of their battery life and up to 47% using 100% brightness in full sun.

Though this is not strictly part of the model, we designed our raw case print feature to reduce the number of pages that need to be printed by up to 50% compared to printing the actual online case.

The Results, According to Website Carbon

We embedded the Website Carbon Calculator into the bottom of all our pages to raise awareness of web sustainability generally and to be fully transparent about our own carbon footprint, but the results are not meant to be so absolute.

Given the chain of components involved, tracking every Greenhouse Gas (GHG) emission generated by something as simple as visiting a webpage is enormously complex. And we're not even touching on the emissions embodied in the manufacturing and disposal of all the devices involved, nor other sustainability concerns such as land and water use. The developers of the Calculator have restricted its scope to the energy transactions that happen when a web page or service is initially delivered to a device. To make it as widely useful as possible, they have made some assumptions and used some averages, but they've been at it for some years -- this is v3 -- and we think that it is a solid framework to start the conversation and gauge progress.

Using the Calculator to compare 242 publicly accessible pages from our old sites with their new counterparts, and we're happy to report that, on average, our new pages consume up to 13.5 times less carbon per view.

There are some caveats. As we indicated above, this does not include the playback of videos, which are not part of a page's initial load, but can be a major source of data transfer. There is also the issue of browser page caching. For users who have not visited one of our pages before, or who may have cleared their browser cache, our findings show that viewing a new page that has not been cached consumes on average .08 grams/view of carbon, or 3.375 times less carbon compared to before --  not the 13.5 stated above. That said, though this is still early days, it looks like our users will only have to download the full content of one of our pages once; after that, as they move on to other case pages and even other case sites, the data cached in their browser will keep their page views in the .02 gram/view range.

NOTE: Once you open the above findings, use the tabs at the bottom of the sheet to navigate across the 12 case sites we surveyed. Each page contains the old Drupal 7 carbon results by webpage, and the cached and uncached versions of the new Drupal 10 pages.

Finally, to restate, we don't necessarily take the numbers the Calculator generates to be gospel truth -- but we do think it shows that we've moved in the right direction. And we plan to continue.