Website CO2 Footprint: 3 Tips for Sustainable Web Development.

Article from

Creating Client Websites: 3 Tips for More Sustainable Web Development.

A guest post by our friends at mittwald

Let's start with an inconvenient truth: Every time a website is accessed, CO2 is generated. From server generation to internet transmission and display on the device, there are many factors involved. Now for the good news: As a web developer, you can influence the CO2 emissions produced per visit to your websites. Here, we reveal 3 things you can implement in your projects right away. A nice side effect: All optimizations also enhance your website's performance.


Kundenwebsites erstellen: 3 Tipps für nachhaltigere Webentwicklung.(English image not yet available)

1. Optimize Images and Videos

The larger the data being sent, the more energy is consumed. Compressing images and videos is the first logical step. Photos should be optimized responsively. If only a 400px image can be displayed due to the viewport width, it should be stored on the server as an alternative to a full-resolution image. Use vector graphics like SVGs, which generally have a very small file size but are freely scalable. Note: Not every image can be arbitrarily converted into a vector graphic. Therefore, upload images at the correct scale from the start, rather than relying on CSS.

When embedding videos, check if the number of streamed files can be reduced. Remove autoplay and keep video content short.

Plugin and extension tips for automatic scaling and compression of images:
WordPress: Insanity

2. Use Less JavaScript

JavaScript affects website efficiency in two ways: it adds file weight to the page and increases processing load on the user's device. This is more significant for JS than other file types. JavaScript should only be loaded on pages where it is truly needed. Often, scripts required only on the homepage are loaded on all subpages. Through SERP, users can directly access the desired subpage, avoiding unnecessary data. In WordPress, for example, wp_register_script or wp_enqueue_script should be wrapped in an if(is_home()) {...} condition.

Once integrated, tracking codes can become permanent companions of every website call. It's always worth checking whether the currently used tracking services are truly needed. In some cases, they can be omitted, or configured to be active only in certain page areas.

Plugin tip for WordPress:
Koko Analytics: Detailed statistics without external providers

3. Utilize Browser Caching

By implementing effective browser caching rules, the amount of data transferred for returning visitors can be significantly reduced. It is particularly useful for media like images and videos, as well as CSS/JavaScript and fonts. The cache duration should be set as long as possible if no changes to the affected files are anticipated. Especially for images, a very long period can be set. 
Browser caching can be better controlled via GET parameters. You can append the script or plugin version to the script path. This allows a high cache TTL to be specified even for files that change frequently or need immediate updates.

Example:
Instead of loading the script with index.js, use index.js?v=1.2.0. In WordPress registration, you can simply specify a version. It can be the plugin version, a custom script version, or just the edit timestamp of the file.

With mittwald Hosting, direct display of CO2 emissions per website call

If you host your projects in mittwald's Managed Cloud Hosting, you can view the CO2 emissions per website call. This way, you can always keep an eye on how climate-friendly your development is. Try the hosting free for 30 days and check the KPIs on your projects.
Try for free for 30 days

Account ready to go immediately. No payment details required.