How to do a Sustainable Web Design Audit

This is my method for auditing a website. We use it as a product that we sell to our clients - I hope this lets you go and do the same. Please take this method and adapt it as you see fit!


LINK TO TEMPLATE

LINK TO EXAMPLE

Step 1 - Calculate overall carbon emissions

You won’t know how much you’ve improved if you don’t take note of where you started.

  1. Identify the different page templates you use on your website. These will be types of pages that all have similar content / layout eg. home page, an article page, a recipe page, a gateway page etc.

  2. Pick a representative page for each template, and calculate the carbon emitted by that page using WebsiteCarbon.com

  3. Enter your numbers for each page template into the Excel Template document along with the total page views per template to calculate the current carbon footprint of the site.

Run your website through a tool like WebsiteCarbon (free) or EcoPing (paid, but more detail) to measure how you are doing at the moment.

Step 2 - Review hosting

Hosting makes up about half of a website's overall emissions - so making sure that the client is using a green hosting provider is key to reducing emissions.

To find out if your website is using a green hosting provider - run it through the Green Web Checker.


Step 3 - Check the typefaces

When a user loads a page, they also load the type files. You can reduce the workload of a user's device by:

  • Hosting the type files w/in the CMS (rather than using an external provider like Adobe)

  • Reducing the number of typefaces

Check the type file hosting by inspecting the page, and looking at the head of the document to see if it refers to an external provider like Google Fonts or Adobe:


To check the font uses

  1. Find the .css file in the code (you can Cmd+F and search "stylesheet" to get it), and open it up in a new windo

  2. You may want to unminify the .CSS file so that it's easier to read using something like Unminify

  3. Then you want to find all the type faces that are referenced, and for each one, count how many times it is referenced in the document.

Fonts that are not referenced very often could be replaceable with another font. (see Example audit to understand this in practice)

Before you make a recommendation on whether to remove a typeface, I suggest you discuss this with a developer.


Step 4 - Review each page template

For each template, run your representative page through Google Page Speed insights tool.

This will give you an overview of the page performance and call out what parts of a page are slowing it down. Now it's your job to sift through that information and recommend how your client fixes it.

Imagery

  • Style of image - switching photos for illustrations can drastically reduce file size

  • Photo treatment - Greyscale images, smaller image crops, images with blurred backgrounds can all reduce file size

  • Frequency of use - How many images are on the page? Could you reduce that number? Do they all add something to the page?

  • Type of use - Are they decorative images, or do they convey information (like a graph) - If they are decorative, could they be removed or made smaller?

  • Compression - How big is the image file? Anything that's 300kb or more should be compressed (but really you want them to be about 30kb)


Lazy loading

Web pages load everything at once, but users only see what's in their viewport. Lazy loading tells the browser to load things as a user scrolls so that they don't load anything they don't need.

If the web page is long and has videos / image below 'the fold' then they should be lazy-loaded to improve performance.


Javascript use

JavaScript lets us build interactivity, but it it can also slow pages down if used improperly.

Google Page Speed Insights will flag if it things the page has JS that is slowing down the page.


Videos

Videos are moving images, so they should be used sparingly, especially if they are decorative (eg like this video clip in the header)

  1. Check if the video is hosted on the CMS or on an external provider like Vimeo / YouTube. External is better because they are much more efficient to transfer / load

  2. Check the video is lazy loaded

  3. If they video is decorative - see if it can only be loaded on desktop devices


Step 5 - Caching policy

When you load a page, your device has to download the information and assemble it into the words / pictures / buttons that you see.

Cacheing a page allows you to download a 'pre-assembled' version of that page, which saves your device effort.

(Sort of like buying IKEA furniture and having to assemble it yourself).

I usually leave caching to developers, but you can read a little more about it in this article I wrote.


Step 6 - Recommend improvements

We then pull together a list of recommendations they can implement across their site and get a developer to estimate the effort to implement those changes.


Step 7 - Implement and then re-measure

Once the changes have been implemented - go back and see what effect they had by re-calculating the emissions, and re-running page speed insights


Step 8 - Write a sustainability page

Like an Accessibility statement, your sustainability page should tell customers:

  • How your current site performs & its annual carbon emissions

  • How you manage

  • Hosting

  • Cacheing

  • Typefaces

  • Images

  • Video

  • Lazy Loading

  • JavaScript

  • If you do any kind of offsetting / carbon removal to counter act your emissions

  • If you are doing anything else to improve your website