Planet Saving Pixels | Creating a Web That is Good for People and the Planet

Firstly, if you’ve watched my keynote talk at Dot All in Barcelona, then thanks for listening! If you missed it then you can watch it here:

Below are useful tools to measure and optimise your web pages to help you craft low-carbon, more sustainable websites.

How to measure your website’s carbon footprint

https://www.websitecarbon.com/

https://digitalbeacon.co

https://ecograder.com/

https://www.digitalcarbon.online/

Tools and techniques that will impact a website’s carbon footprint

1. Take a minimalist approach

If in doubt leave it out. Thinking minimally about what deserves to be on the page. Does a piece of content serve a purpose? Does it help your readers understand? Remember that Less on the page means less data to load, and less time spent viewing it.

2. Streamline user journeys

Helping people find the page they’re looking for quicker and avoid yo-yo user journeys helps to reduce unnecessary page loads and time spent on a website.

3. Optimise web typography

• Use fewer fonts and weights
• Convert font files to WOFF
• Remove unnecessary languages and subset characters
• Self host font files

Choosing ‘Expert’ and ‘Custom subsetting’ gives you the greatest optimisation control

https://www.fontsquirrel.com/tools/webfont-generator

4 Colour and screen energy

• Dark colours are less energy intensive
• Blue colours use more energy than green or red
• Reducing colour variation in imagery reduces file size

Image energy calculator: https://codepen.io/stoumann/full/vYgzpNp

5. Media optimisation

• Use fewer images, if possible
• Consider vector illustrations/icons
• Export correct dimensions with compression
• WebP and AVIF formats are best

https://tinypng.com/

https://www.videolan.org/vlc/

https://handbrake.fr/

• Set image compression within CMS
• Set file size limits for image uploads to CMS
• Generate image sizing according to the screen size it is being delivered to
• Automate image conversion to WEBP or AVIF formats

https://imgix.com/

https://plugins.craftcms.com/imager-x

6. Mindful motion and less video

• Use motion sparingly
• Avoid autoplay on videos
• Only play when visible on the screen
• Use lightweight javascript frameworks

http://vanilla-js.com/

https://alpinejs.dev/

• Lightweight, scalable animations

https://lottiefiles.com/

7. Static page caching

Pre-generate static versions of your website so that each page doesn't have to be transferred and rendered from scratch each time it is loaded.

https://plugins.craftcms.com/blitz

8. Optimise page size

GZIP is a form of data compression that can compress files up to 70% for faster delivery

https://www.gnu.org/software/gzip/

9. Reduced server requests

Every time your page makes a server request, energy is required to transfer and display data. Using HTTP/2 allows browsers to issue parallel requests.

https://http2.github.io/

10. Green hosting

Choosing a web host that powers its servers and data centres with renewable energy is one of the most important choices you can make to reduce your website’s environmental impact.

www.thegreenwebfoundation.org

Extra reading and resources

https://sustainablewebdesign.org/

https://the-sustainable.dev/

Low carbon case studies: https://lowwwcarbon.com/showcase/

Web Sustainability Guidelines (WSG) 1.0: https://w3c.github.io/sustyweb...

Books on the topic

https://abookapart.com/products/sustainable-web-design

https://sustainablewww.org/sustainable-web-design-in-20-lessons-book