Article from
Creating Client Websites: 3 Tips for More Sustainable Web Development
A guest post from our friends at mittwald
Let's start with an unpleasant truth: Every website visit causes CO2 emissions. From generation on the server, transmission over the internet, to display on the end device, there are many factors. Now for the good news: As a web developer, you can influence the CO2 emissions generated per visit to your websites. Here we reveal 3 things you can implement immediately in your projects. Nice side effect: All optimizations also improve your website performance.
English image not yet available...1. Optimize Images and Videos
The larger the amount of data 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, this should also be stored on the server as an alternative to a full-resolution image. Use vector graphics such as SVGs. These usually have a very small file size but are freely scalable. Caution: Not every image can be arbitrarily converted into a vector graphic. Therefore, it's best to upload the images in the correct scale right away, instead of relying on CSS.
When integrating videos, check if the number of streamed files can be reduced. Automatic playbacks should be removed, and video content should be kept short.
Plugin and extension tips for automatic scaling and compression of images:
When integrating videos, check if the number of streamed files can be reduced. Automatic playbacks should be removed, and video content should be kept short.
Plugin and extension tips for automatic scaling and compression of images:
WordPress: Insanity
TYPO3: Image Optimizer
2. Use Less Java Script
JS affects the efficiency of the website in two ways: It adds file weight to the page and also increases the processing effort on the user's device. The latter is much more the case for JS than for other file types. JavaScript should only be loaded on pages where it is really needed. Often, scripts that are only needed on the homepage are also loaded on all subpages. Through SERP, one can directly reach the desired subpage and thus avoid unnecessary data. For WordPress, for example, the wp_register_script or wp_enqueue_script should be wrapped in an if(is_home()) {...}.
Once integrated, tracking codes can become a permanent companion of every website visit. It is always worth checking whether the currently used tracking services are actually needed. In some cases, they can be omitted, in others configured so that they are only active in certain areas of the site.
Plugin tip for WordPress:
Plugin tip for WordPress:
Lightweight Statistics: Usually sufficient for small projects
Koko Analytics: Detailed statistics without external service providers
3. Use Browser Caching
By using good browser caching rules, the amount of data transferred can be greatly reduced for returning visitors. It is particularly suitable for media such as images and videos, as well as CSS / Javascript and fonts. The cache duration should be chosen as long as possible if no changes to the affected files are foreseeable. Especially for images, a very long period can be set.
Browser caching can be controlled even better via GET parameters. You can append the script or plugin version to the script path. This allows for a high cache TTL even for files that change frequently or where changes need to be loaded immediately.
Example:
Instead of loading the script with index.js, use index.js?v=1.2.0. When registering with WordPress, you can simply specify a version. It can be the plugin version, a custom script version, or just the edit timestamp of the file.
Example:
Instead of loading the script with index.js, use index.js?v=1.2.0. When registering with WordPress, 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 visit
If you host your projects in the Managed Cloud Hosting from mittwald, you can display the CO2 emissions per website visit. This way, you always have an eye on how climate-friendly your development is. Test the hosting for free for 30 days and check the KPIs in your projects.
