Welcome to Before DevBreak

Before DevBreak is a series of live, online, tech talks. Each session features a senior tech expert from an innovative company, who demonstrates how they solved major programming challenges in their business. This series is part of our 2-day festival experience DevBreak.

This edition of Before DevBreak takes a closer look at some ingenious solutions that can be applied when working on website projects to make them more energy efficient and reduce their adverse effects on climate. In this talk, Roy Derks, head of the engineering teams at Vandebron breaks down some of the methods used to optimise website projects.

Internet usage is up globally, and so is data centre usage

As people spend more time online for various reasons including work, socializing, entertainment, etc., data center usage will only keep climbing. The 2020 Hootsuite Digital Report indicates that mobile phones have become our “first screen” as we spend an average of 7 hours per day online, a 4% increase from the year before.

According to the Internet Archive’s findings in 2020, the average website’s size had gone up four times within the last 10 years. In the Netherlands alone, data centers account for at least 4% of the total electricity consumption, according to the 2020 State of the Dutch Data Centers Report. Up to 86% are partially using green energy, even though only 17% of the electricity in the Netherlands is green.

So are customers to blame? Or could modern web development be unfriendly to climate?

Lately, many of the popular websites include high resolution images and videos. A lot of websites are also being built on popular JavaScript frameworks. Websites are carrying a median of 2MBs of data but with some going as high as 4MBs or more.

The climate impact depends on the way a website is designed and the processes being run on both the server and client side. With a bundle size of about 5MBs, total data load of roughly 10.2MBs and 10,000 monthly views for a year, such a website’s climate impact could be on par with driving an electric car for 10,000kms, since each visit could produce 4.96g of CO2 (600Kgs of CO2 if it is loaded 120,000 times in a year).

To offset this impact, we’d need to plant at least 28 trees.

How can we work towards delivering more energy efficient websites?

‍

• Developers and designers need to find different ways like caching to optimize websites. Caching can happen on both the browser and server end.
  With browser caching, a user’s browser can store JavaScript files, fonts, stylesheets, etc. that are commonly downloaded along with a web page’s content and influence how the page is presented and behaves. This way, they don’t have to be downloaded during future visits.
  For server caching, the results of a particular request can be stored so that the server references them when the request recurs rather than processing the request afresh. The cache options include “full page” for a request pertaining to an entire page, and “object”, which focuses on smaller pieces of data and can be useful for intricate operations like generating a navigation menu.

• Static websites are also becoming a friendlier solution, where you can set up the website to render in such a way that not all the JavaScript code is being executed instantly. In a nutshell, a user is served a lean and complete HTML file instead of having to task a server to piece together numerous bits of information in real-time.
  You can experiment with different static generators like Gatsby, Next.js, Gridsome and more, depending on the additional functionality you need such as PWA support, plugins and integrations, automatic code splitting, API routes for serverless functions, templates, speed and security, etc.

• Another possible way around this problem is the use of Content Delivery Networks (CDNs). For example, CDNs can help in optimizing images and videos, with websites displaying more compressed versions of images as thumbnails in their feeds. Using CDNs, you can place multiple versions of your website’s content in different points of presence (PoPs) so that each visitor receives the content from the nearest PoP, which reduces latency.

‍

Additionally, your website can be set up to serve visitors differing versions of your content, like lower resolution videos for people viewing from devices that don’t support high resolution videos or certain aspect ratios.

You can learn more on how to determine the energy efficiency of your web project and optimise it accordingly by watching the full talk here.

Vandebron are recruiting tech profiles on talent.io, be sure to sign up to receive the best offers.

‍

About  talent.io and DevBreak

DevBreak is a 2-day tech festival organised by talent.io, Europe's leading selective recruitment platform which has raised over €10m and is over 170 employees strong. We help great companies build great tech teams, in the simplest way: selected companies apply directly to vetted candidates. We cover most tech roles (software engineers, data scientists, product managers, DevOps engineers, CTOs). Our platform is open to permanent positions as well as freelance assignments, both on-site and remote.

• 7,000+ companies use talent.io, such as Deliveroo, Volkswagen, N26, PayFit and Aircall
• 6,000+ candidates recruited, for permanent contracts and for freelance assignments
• 5 Countries / 11 cities (Paris, Lyon, Lille, Bordeaux, Toulouse, Berlin, Hamburg, Munich, London, Amsterdam, Brussels)