8 Ways Developers Can Help Save the Planet

With Earth Day upon us and the increasingly urgent warnings of scientists to reign in humanity’s carbon emissions ringing in our ears, now is as good a time as any (and certainly a better time than later) to examine the environmental impact of our digital world. It might seem at first that going digital is inherently eco-friendly with the ways it reduces paper waste, but digitization comes with its own costly carbon emissions.

1. Analyze Our Digital Footprint

Individual browser searches and emails don’t amount to much individually, but like pennies add up to dollars, grams of CO2 add up to tons. The total amount of CO2 emitted by online tech is about 4% of global greenhouse gas emissions, higher than that of the entire aviation industry. Its energy consumption is roughly equal to the electricity usage of the UK.

Every time we send an email, Google something, or stream a video or a song, we’re adding to this total. This is because the Internet we have come to rely on so much in our daily lives depends on physical servers. These servers are housed in data centers that are connected with undersea cables, switches, and routers that require energy to run. The primary sources of this energy are, unsurprisingly, fossil fuels.

As software and web developers—the people responsible for creating the technology that produces these CO2 emissions—and as human beings sharing the responsibility of this world with everyone else, it’s important we consider the ways we can reduce our waste and consumption. So how can we do our part to make the world a little greener?

The first step web developers can take is to check their website’s footprint with websitecarbon.com. It’ll tell you how your site compares to the average site in terms of carbon emissions, how much CO2 your site produces when a person visits it, and ways you can clean it up.

2. Host your site on green servers

Not all server farms are run by CO2 emitting fossil fuels. Some run on renewable energy or offset their CO2 emissions to reduce their overall footprint. The Green Web Foundation can tell you if your website is hosted on green servers and also provides a directory of their recorded green web hosts. Wholegrain Digital recommends Google Cloud Platform, which celebrated its fourth consecutive year of using 100% renewable energy last year.

3. Use Less JavaScript and jQuery

JavaScript adds weight to webpages and increases the amount of processing required by the user’s device and consequently, the energy the device consumes. If you want to cut down on unnecessary JavaScript, implement functionality with CSS where possible instead. Likewise, instead of downloading the entire jQuery library to perform simple DOM operations on your site, you might be able to achieve the same functionality by replacing it with pure JavaScript and spare the servers some energy consumption.

4. Build Static Sites

Static webpages are much faster than dynamic pages because, unlike dynamic websites that must interact with a database before constructing the pages for the client to download, static sites skip this step. Static sites avoid the costly process of re-rendering your site every time someone visits and instead serve pre-built HTML, CSS, and JS pages without redownloading them from the server. In contrast, dynamic webpages are dynamically generated on the server with each incoming request and then served. These advantages of static sites result in speeds up to 10 times faster than dynamic sites.

Additionally, static sites are more easily replicated across the world which makes CDNs a great choice for hosting them. A CDN allows your web files to be served from locations as close as possible to the clients so that European users are pulling from European servers, African users are pulling from African servers, etc.

5. Use Web Caching

Web caching refers to the process of downloading files like copies of webpages and media files like scripts, images, and GIFs and saving them for reuse on the user’s device. After the initial visit to the page, the files will be loaded from the device rather than re-downloaded them from the server. Essentially, caching speeds up the page and reduces the burden on the originating server by decreasing the number of data transfers it must perform which in turn reduces the server’s energy consumption. A win-win-win for the user, the host, and the environment. Some tools like Varnish offer caching services that developers can use to pre-generate static versions of each page.

6. Optimize Your Images

Large, high resolution images look gorgeous but can really slow down a webpage and cause a larger than necessary strain on servers. It’s good for UX and for the environment to reduce your image sizes. There are a number of ways to do so and plenty of free online tools that will shrink your image sizes like Img2Go, TinyPNG or ShortPixel.

Using the WebP format instead of JPEG or PNG can also save space. WebP images are 26% smaller than PNGs and up to 34% smaller than similar JPEGs without loss of image quality. Fortunately, most of the major internet browsers—Google Chrome, Microsoft Edge, Firefox, Opera, and Android’s native browser—now all natively support WebP. You can create WebP alternatives for your site’s current images and selectively serve them to browsers that offer support.

7. Optimize Your Use of Web Fonts

According to Wholegrain Digital, each font file can be as much as 250kb. That’s 250kb for each style like regular, bold, or italic that you use. Web designers can use system fonts instead, which might interfere with their original design but can save a lot of space and improve site performance. Designers can specify a list of web safe fonts in a CSS font stack ordered by preference.

Even if you choose to use web fonts, there are ways to reduce their file sizes by up to 97% . One way is to be smart and selective in your choice of custom fonts. Choose only a couple of font weights. It’s good for site performance and helps maintain the visual consistency of an uncluttered design. Another way is to use web font file formats like WOFF and WOFF2. These formats use higher lossless compression methods than TTF, OFT and SVG files.

8. Mobile Optimize

Making your site mobile-friendly can ensure that your site is optimized to run as efficiently as possible in mobile environments and save processing power. This should be an easy box to check beacuse you should already be designing and optimizing your site for mobile for the sake of providing good UX. Especially since mobile traffic makes up 50% of all web traffic worldwide.