Sustainable Web Design: 5 Tips to More Efficient Code

Tom Gabrysiak

Director of Technology

Certainly, the internet stands out as the most revolutionary technology of the past 25 years, reshaping nearly every facet of our daily existence.

For many, the thought of a world devoid of the internet is now a distant recollection. Amidst its widespread influence, one crucial element frequently disregarded is its environmental footprint. The internet’s infrastructure, encompassing devices such as laptops and cellphones, along with the intricate web of servers and global wireless connections, plays a substantial role in carbon emissions. As we acknowledge the transformative power of the internet, it’s imperative to consider sustainable web design practices as a crucial component in mitigating its environmental impact.

As of 2019, the internet boasted 4.4 billion users, with approximately 1 million new users joining each day. With 1.5 million websites in existence, a staggering 44 billion gigabytes of data are generated daily. The sheer volume of content is exemplified by 300 hours of video uploaded every minute, leading to a daily consumption of 5 billion videos on YouTube alone. Alarmingly, the internet’s annual carbon footprint rivals that of the entire aviation industry.

Amidst these striking statistics, there is a pivotal role for web developers to play in mitigating the environmental impact through sustainable web design. By incorporating eco-friendly principles into web development practices, developers can contribute to a significant reduction in the carbon footprint associated with websites. This shift toward sustainable web design is crucial, given the continuous growth in internet usage.

As a web developer, embracing sustainable web design principles becomes an ethical imperative. Integrating these practices not only lessens the environmental impact of websites but also enhances the overall product for clients. By prioritizing sustainability, web developers can actively participate in minimizing the internet’s carbon footprint and fostering a more environmentally conscious digital landscape.

5 Tips to Reduce Bandwidth with More Efficient Code

On the website programming side, the use of smarter and more efficient code can dramatically reduce bandwidth and improve the load time of a website. 

• The term ‘tree shaking’ is a process whereby unused code is excised from JavaScript. CSS files can be massively complicated, so using a simple tool like Purge CSS can remove unnecessary code. Don’t include an entire framework, just include only the JavaScript and CSS you need.
• Minify and Concatenate your JS and CSS which dramatically reduces file size. At York and Chapel, we use Webpack and Gulp to do the heavy lifting of code optimization.
• Server-side optimization is a critical part of sustainable programming, with Gzip being the most powerful tool for on the fly data compression.
• Using advanced proxy caching accelerators for faster delivery such as WP Super Cache, Varnish, and FastCGI Cache reduces a server’s workload and therefore its energy requirements.
• Websites can use a CDN to store static assets and deliver them from the closest datacenter. 

There are also entire platforms that emphasize speed and size restrictions that are environmentally beneficial. An Accelerated Mobile Page (AMP) is a framework created by Google and other companies. Its sole purpose is to make super-fast mobile pages. At its core, AMP is a stripped-down version of HTML designed for mobile users with a separate desktop markup. AMP is great for building lightweight and efficient mobile websites but are not easy to implement.

These practices can dramatically decrease energy usage while also delivering a faster, more efficient website experience.

Adopt Sustainable Development Practices

When it comes to website design, you can control about 60% of your carbon footprint by using sustainable development practices. A lightweight website uses fewer computational resources, less energy, less bandwidth, and has the added user benefit of loading faster and running smoother. 

• Designers can reduce extraneous content such as unneeded images in image carousels that do little to advance the narrative or provide more information.
• Switching to the use of WebP reduces image size by 30%.
• Using links instead of embedding YouTube videos saves nearly a megabyte of bandwidth even before hitting the play button.
• Uploading videos in 720p instead of full HD creates file sizes significantly smaller while creating a nearly imperceivable difference in image quality on all but the largest monitors and TVs. 

Switch to Renewable Energy Data Centers

The biggest impact you can make is to host your website at a data center that buys its power from renewable energy sources. 

Just in the U.S., data centers use 140 billion kilowatt-hours annually. That’s the equivalent of 50 power plants or nearly 150 million metric tons of carbon emissions. 

Renewable energy data centers are already being used by companies that run massive hyperscale data operations such as Apple, Amazon, Facebook, Google, and Microsoft. Facebook currently buys 1.54 Gigawatts of wind and solar energy. Amazon Web Services has committed to meet the terms of the Paris Agreement and reach net carbon zero operations by 2040. Microsoft has committed to spending $1 billion in carbon remediation technologies over the next four years. 

Unfortunately, there are no data centers that are completely carbon neutral, so you’ll have to find one that gets a higher percentage of its power from renewable sources. Your company can also directly purchase carbon offsets or plant trees to minimize the remainder of your carbon footprint. At York and Chapel, we have made a donation to Groundwork Bridgeport to offset the carbon footprint of our corporate website.

The Sustainable Future of Development

Developers have the opportunity to significantly reduce a website carbon footprint by adhering to sustainability principles. Achieving viability requires close collaboration with clients and third-party vendors to deliver an environmentally conscious solution that aligns with business requirements. The interesting reality is that there isn’t much of a trade-off involved, as websites that are well-designed, user-friendly, optimized, and fast tend to have the smallest carbon footprint.

Incorporating sustainable web design principles not only benefits the environment but also addresses the increasing share of world climate pollution associated with the growing online economic activity. Those responsible for building the internet’s infrastructure must play a role in curbing environmental damage. Given the rising number of companies embracing sustainability mandates, those capable of delivering sustainable web development, including the integration of sustainable web design practices, will find a receptive and expanding clientele eager to promote eco-friendly online solutions.

Looking for an agency that leverages Sustainable Web Design? Contact us.

Citations

Dougherty, J. (2019, December 10). Internet growth + usage stats 2019: Time online, devices, users. Retrieved May 28, 2020, from https://www.clickz.com/internet-growth-usage-stats-2019-time-online-devices-users/235102/

Editor. (2020, March 11). 37 Mind-Blowing YouTube Facts, Figures, and Statistics – 2020. Retrieved May 28, 2020, from https://merchdope.com/youtube-stats/

Lenox, J. (2019, January 15). How Improving Website Performance Can Help Save The Planet. Retrieved May 28, 2020, from https://www.smashingmagazine.com/2019/01/save-planet-improving-website-performance/

Miller, R. (2020, April 24). Data Centers Accelerate Their Focus on Sustainability, Green Power. Retrieved May 28, 2020, from https://datacenterfrontier.com/data-centers-accelerate-their-focus-on-sustainability-green-power/

Schultz, J. (2019, June 08). How Much Data is Created on the Internet Each Day? Retrieved May 28, 2020, from https://blog.microfocus.com/how-much-data-is-created-on-the-internet-each-day/