Sustainability - How Our Web Design Strategy Helps the Environment
I have to admit, this one is a hard sell, but if you stick with me for a few moments, I can hopefully convince you of the importance of protecting the environment with a sustainable web design strategy.
The biggest difficulty is that you may look at two websites and have very similar experiences with both. But behind the scenes, one of these websites consumes many more resources and much more energy just to give you the same result. I can look behind websites and what I see really appals me. Here are two specific areas that seem to cause the most problems:
1 - Bloated Resources
Many's the time I have seen a large image on a homepage and discovered it was saved in PNG format and is 2 megabytes in size. The same image could look just as good at that size and if the AVIF format is used, would be pehaps 25k in size. In these days of superfast Internet connections you may not realise the difference. However, they are still consuming 50 to 100 times the number of resources for an identical result.
It is not limited to pictures. Videos can be an enormous consumer of resources. There are optimisation tools out there such as Handbrake or FFmpeg which can reduce the size of a video by many times with no loss in quality.
Even the styling can take up many more resources. I have seen websites with links to ten or twenty style sheets where one will do. It is not just the size of the resources, it is the ten or twenty times you have to hit the network to download them all.
2 - Content Management Systems
The most popular Content Management System is Wordpress. However, I am not just singling out Wordpress for this. There are many of them as well as online platforms such as Wix that all behave in the same way.
The problem is that in order to create something that an amateur can use to create a good looking website, the resources behind the scenes that make this possible are wasteful in the extreme. Sure, there are now caching strategies that one can employ to mitigate this but you are still left with a structure that makes unnecessary demands on resources.
So How am I Different?
For starters, I use my own designed Content Management System that uses as few resources as possible without compromising on quality. I am not afraid to fill a website with great looking images and videos, but I do so in a way that minimises the number and size of connections to the Internet. Here are some of the other methods I employ:
Image Optimisation
I use WEBP and AVIF images a lot these days. Sometimes I also use PNG or JPEG where necessary. These produce images of the same or better quality than the much older JPEG or GIF for much smaller file sizes.
Modern Scripting
I use one pure JavaScript file instead of the bloated resource heavy jQuery framework that so many modern websites use. And I get the same or better results. I also hand write my style sheet (note the singular) to ensure most efficient page rendering.
Latest PHP Version
PHP is the scripting language that is behind most websites you will view. Each release is faster and more efficient than the last. I always ensure my sites are capable of utilising the latest version of PHP.