DEV Community

Cover image for Make the Web Greener, Luxury Edition
Tim Benniks 🗼
Tim Benniks 🗼

Posted on • Updated on • Originally published at valtech.com

Make the Web Greener, Luxury Edition

If the internet were a country, it would be the world’s sixth biggest polluter.

The internet consumes around 416TWh per year in electricity. That number does not say much until you compare it to the 300TWh the United Kingdom consumes. These are staggering numbers, and they will only go up as the internet keeps growing. Whether you realize it or not, carbon emissions are generated all over the place.

The average website produces 1.76 grams CO2 per page view. For a website with 10,000 monthly page views, that is 211 kg CO2 per year or about twice the weight of a professional basketball player. This is more carbon than ten trees can absorb. If you think about how many websites we have on the internet, this comparison paints a pretty scary picture.

The Luxury Dilemma: The Rich Experience and Fast Page Loads

Every web page is crafted with art-directed elements that tell the right story. Luxury product pages are rich experiences that make the user linger and enjoy the ride. This approach is great for the potential customer, but there is a dark undertone when we consider the environment. These pages are full of heavy images, videos and animations. The heavier the page, the more carbon is emitted. If pages take longer to load, the emissions go up due to more device usage–and the antenna and screen are used for a longer period too.

There are some conflicting goals within luxury on the web. We want a rich experience, but we also want hyper-fast page loads. We all know that slow pages mean more user drop-off. And to make matters worse, we also need to think about the environment. We need to contain how much carbon is blasted into the atmosphere when someone visits a page.

How to Reduce Carbon Emissions from Your Website

The above describes a complicated mix of problems to solve. We know that carbon emissions are lowest if:

  • A page is fast to find
  • The page loads fast and with little resources
  • Users stay on a page for a very short time

These three points are hard to carry out in the current way of working in luxury. That is not because we do not know how to build websites but because the goals are different. We want visitors to explore the brand, linger and become influenced by the product story. They should become lifelong customers. Sadly, this goes against what is best practice for websites with a low carbon footprint.

Being Sustainable Without Compromising Quality

But fear not: There is a solution that can get us much closer to being sustainable. We can even keep the same level of quality we have now. In addition to being greener, this solution makes our websites more accessible to people in upcoming markets. The answer is: optimization of image and video delivery. We solve the problem by reducing excess and only loading what is needed in the context of the user.

Are We There Yet? Optimizing Media Asset Delivery

Most traditional CMS systems focus on content editing or cataloguing of content and not on serving of content per se. Serving the content is part of the suite of tools in the platform, but the focus tends to be on other aspects. We call this the “best-of-suite” approach where one vendor deals with all aspects of the website.

Nowadays, there are companies that solve specific problems within the eco-system of websites. We call these “best-of-breed” solutions, and they tend to be cloud native SaaS companies. Among these companies, there is a category that only deals with media asset delivery.

Images and videos are particularly hard. If we ask a content editor, filmmaker, or web developer how to optimize assets for the web, they generally do not know. The same goes for the best-of-suite CMS systems. They do not specifically optimize assets for the web—they serve them as is.

This leaves the responsibility to the content editor. We have seen people struggle with photoshop and not know how to optimize an image. Teaching courses and paying for Adobe licenses is commonplace and awfully expensive.

Fortunately, there is a plethora of ways to optimize images and videos for the web—and the SaaS solutions mentioned above take care of the problem for you. They serve assets in the right format for the user’s context (browser, device, resolution). And they reduce the file size with AI to be indistinguishable from the original—doing this by hand as a content editor is impossible.

We have had projects where the page weight dropped by 90 percent without loss of quality. Content editors would only upload the original image and the system did the rest.

Loading the Right Assets in the Context of the User

Next to serving optimized assets, the most gain is made when not serving them at all. As funny as this may sound, it is the most effective way to have a low-carbon website. If a user never scrolls down or never opens the big mega menu, what is the use in loading these assets in the first place? You should only load assets you know the user will see. We call this “lazy loading,” and it is one of the most powerful tools in the bag of tricks of web developers.

Next to lazy loading, it is also important to load assets in the right context. If a user visits your website on a phone, make sure to load an image with the same resolution the phone has. Loading bigger assets unnecessarily degrades the user experience. It also makes the website have a higher carbon footprint due to excessive file size.

The same goes for file types. If you want an animated background image on the hero banner (we all do), do not use a GIF, but rather a video. GIF’s are about five times as big as videos and tend to not work well on mobile devices.

Looking Ahead on Website Sustainability

We cannot always optimize our web pages according to the best practices for low-carbon websites. This is just the nature of luxury. But we can focus on smaller parts of the equation that have a huge influence on how sustainable the website is. All of this can be accomplished without compromising on quality.

Look at the future and choose a best-of-breed solution that handles one of the most complex parts of the web: images and media. By combining optimized assets and lazy loading we make our pages lighter. This means they are more accessible to new customers in emerging markets.

And wouldn’t it be nice if content editors did not need photoshop licenses anymore? The overhead of training and the extra process is not worth it.

Instead, have your media delivered by a specialized solution—Mother Nature will thank you for having a low-carbon website.

Top comments (0)