Sustainability in website design, you may be reading this and thinking a website is already a pretty sustainable thing. They don’t use up natural resources like trees that books and flyers use when we print them. We don’t have to drive to use a website, and we certainly aren’t making a hole in the ozone layer by doing our online shop. So why are we writing this article? Well, if we put the glaring obvious aside, websites do actually use energy. After all, where does a website come from? Although it’s digital, it has to reside somewhere in the real world for us to be able to view it, doesn’t it?
Yes, websites are hosted; each website lives somewhere inside a server that’s plugged into an outlet at a facility in the real world. That facility takes employees to run it and uses power just like with most things. Then, of course, we have to access that website on a device of some sort that also uses power.
Now, as things go, a single website will use a mere pittance of the energy allowance of other things; however, they do use something. But how can we really have any effect on the energy that a website takes to exist? Well, that is exactly what we are about to explore.
Optimization
When we talk about websites, what is the one word that always comes to mind? Optimization. There are several ways we can optimize our website and its contents for sustainability. Let’s take a look at what those are.
Clean and Efficient Coding
Semantic HTML
What better way to optimize your website than heading straight for the code itself. Not only is clean, efficient coding good for the environment, but it is good for, well, just about everything. It’s easier to read when things need to be discovered or changed and easier to optimize. If you were learning a subject in school, you would want the lessons to be planned out well and linear so you can work through the different parts of the topic. Websites need to be the same. Use Semantic HTML5 Elements for that readability to help on the green front and a nice SEOÂ boost.
Minimize HTTP Requests
A website is full of resources that it needs to function. Each resource creates an HTTP request or Hypertext Transfer Protocol. This is the basis of data communications, which allows us to pass information back and forth via the Internet. Every resource a website is made of will create an HTTP request to load. It is basically a request to the server of that website to provide the resources needed. So, HTML, CSS, JavaScript, and images all create a request; by reducing all of these resources to what you actually need, merging CSS or JavaScript files into one larger file or removing unneeded characters, you can reduce your HTTP requests and enhance loading speed in the process.
Lazy Loading
Imagine when a website loads up. If it tries to load everything at the same time, you will expect to wait a while. Lazy loading allows resources to only load when they come into view. If a user never scrolls that far down the website, the unneeded resources just won’t load, saving a few HTTP requests and energy.
Enable Caching
Ever had an issue where a program runs slowly, or your browser is imitating the speed of a snail and being told to clear your cache? Well, surprisingly, caching is actually good for sustainability. Caching means that when a user visits your website on their device, it saves some of the information from the visit. Thus allowing the page to load faster next time.
Content Delivery Networks
A regular hosting provider with a server will be in one place. No matter where you are in the world, you are accessing content in that one place. If you are in India and are accessing a website on a server in the USA, the site is going to load slower than it would if you were in the USA. A content delivery system allows other “edge servers” across different locations to cache the content of that website so that when users from further afield access your website, they can access it from the server closest to their location. Such a practice is seen a lot in the world of online gaming websites or with international companies to make sure they are delivering their content as fast as possible to the user and, in turn, reducing energy consumption.
Media Optimization
Remember the days when good old BMP files were all that was available for images? How about AVI for video? Well, a long time ago, we realized this wasn’t a sustainable practice; files took up so much space, and that was where the invention of file types such as MP4 and JPEG came from: both much more compressed file types. It is always best to use images with file extensions that take up the least space, most recently, we have been given WebP. WebP has an extra 25-34% compression rate in comparison. Using smaller files can reduce the strain on the website, save you money on your hosting, and increase your loading speed in the process.
Website Design
Optimization isn’t just about optimizing a website after it has been built; optimization begins at the very first stages of building – design.
Minimalistic Approach
Designing a website with minimalism in mind is a great start on the road to sustainability. Remember the old and fully loaded websites of the 90s? That is exactly what we are trying to avoid in modern-day web design. From brainstorming to wireframes to building, trying to relay all the information you need whilst not muddying the website with unnecessary modules and information is not only good for the eco-friendly approach but also helps towards providing a clear and valuable experience for the user and a more successful website for your company.
It doesn’t just have to be content that goes under the minimalism knife. Website navigation is a great area to apply this method in. Having clean and simple navigation on your website avoids the user needing to unnecessarily visit pages that are of no use to them, which, in turn, does not load resources that aren’t needed. All of these help you reach your eco-friendly target and your company goals.
Adaptive and Responsive Design
Both of these web design methods focus on making the website run more optimally on whatever device is viewing it at the time. This helps to save energy that would be wasted trying to load a page that is not designed for the current device. It also gives a much more user-friendly experience to the user, making things such as online shopping and finding out what they need to know about your company much easier.
You can also make your website responsive to users browsing in dark mode. Recolouring logos and designs to fit the easier-on-the-eye method of viewing can reduce power consumption for anyone with an OLED screen.
Using a Green Hosting Provider
Using a hosting provider that makes an effort towards sustainability itself is a great idea to help keep down the carbon footprint of your website. Hosting providers such as Green Geeks make an effort to help the environment in their business practices. You can also visit the Green Web Directory by The Green Web Foundation to find hosting providers near you that are green-approved. They also have a handy site checker to see if your website is being hosted with a green outlook in mind.
Key Takeaways
- A website does indeed have a carbon footprint.
- Using clean, efficient code helps reduce power consumption, improve readability, and speed up loading times.
- Minimizing HTTP requests helps towards a greener website by reducing the strain on the server.
- Content delivery networks can help your green initiative by allowing other servers to cache your sites for more localized access in different parts of the world.
- Optimizing your media content by reducing file size can lead to faster loading times, and a smaller carbon footprint.
- Eco-friendly website initiatives can be implemented from the very first stage of design; using a minimalist approach can help on various fronts.