Get Started with Sustainable Web Design in 2017

By Stuart Walsh / Mar 21, 2017

BLOG

scroll

Your website might not be the first item you think of when building a sustainable business, but the equipment used to deliver content to your visitors takes a lot of electricity. 

By taking some extra steps though, you can reduce your website’s energy consumption and environmental impact.

While this article mostly addresses technical web development issues, the important take-away for digital marketers is that you can build a website that is more energy-efficient—and should ask your web development partner how their process can help you accomplish this.

Image Optimization

Images are incredibly important to the web, but they do slow down a website’s performance and increase energy consumption – especially if they’re not optimized.

It’s very easy to export an image from Photoshop for immediate use, but taking a few extra moments to reduce its file size means faster load times and less energy needed to deliver it.

Tiny PNG is a third-party service that optimizes PNG and JPG images. In addition to its web service, it can be integrated into Photoshop, WordPress, Magento and Craft CMS, which means it’s accessible to designers and content managers. Other similar services include Kraken and Compressor.

Sprite Sheets

If you use images for navigation and icons, it’s easy to create a separate file for each image. If you use a sprite sheet, you can be even more efficient and accomplish something like this:

Sprite Example

Sprite Sheet Example

The above example still gives you access to all three images, but requires fewer trips to the server. And trips to the server, like multiple trips to the refrigerator, use more energy. 

CSS and JavaScript

In the same way that you can combine images, JavaScript and CSS sheets can also be combined with like files to minimize energy consumption by creating fewer server requests. With all of the frameworks, libraries, and plugins available, it’s very easy to add separate JavaScript and/or CSS files without putting much thought into it.

This issue is especially problematic in WordPress sites where a new plugin is a click away and each plugin comes with a separate CSS and JavaScript file.

File Example

Combining Resources

Insights that incite.

get our newsletter.

Please enter your first name.
Please enter your last name.
Please enter a valid email address.
  • Should be Empty:
  • Combining files isn’t the only way to reduce energy usage. In many cases, JavaScript libraries such as jQuery can be delivered through a content delivery network (CDN). CDNs can be beneficial in a couple of ways. Not only can they deliver the file from a server that is geographically closer to the visitor, the browser can also use a cached file from a previously visited site.

    Regardless of whether you decide to combine files or use a CDN, it’s good to minify your JavaScript and CSS. Minification is the process of removing unnecessary characters to reduce its file size.

    Minify Example

    Minifying

    Green Web Hosting

    We saved the largest factor in web sustainability for last, and that is your website host. Servers and cooling systems consume vast amounts of energy, so finding a company that’s putting efforts into renewable energy is an important issue for your sustainability initiatives.

    Green web hosting is still finding its legs though, and what constitutes a “green” hosting company varies. Some use the term to mean internal recycling programs or keeping lights off to minimize their carbon footprint. Others employ it to mean they purchase renewable energy certificates (RECs) on the open market, and even fewer define it to mean they enter into a power purchase agreement (PPA) from a renewable energy provider.

    You can read more about RECs and PPAs here.

    Regardless of how a hosting provider uses the term “green,” we encourage you to do your homework to find a hosting provider that best suits your needs and values.

    Sustainability is a Work In Progress

    So how does Oliver Russell’s website stack up? To be honest, there’s room for improvement. In the near future, we’ll be implementing some changes in order to become a better example for web development sustainability.

    If you’d like to find out how your website performs, head over to Ecograder and see if you need to make any improvements. Of course, we’d be happy talk with you about how to make your website more sustainable as well—just pop us an email at info@oliverrussell.com or call us at 208.344.1734.

    Insights that incite.

    Get our newsletter.

    Please enter your first name.
    Please enter your last name.
    Please enter a valid email address.
    Stuart Walsh

    Stuart Walsh

    Stuart has been developing websites, interactive content and video games on behalf of clients and agencies for the better part of a decade. A graduate of both Boise State and Idaho State, Stuart ensures our client projects reflect the latest thinking on technology and strategy. His portfolio includes award-winning websites for clients such as the J.R. Simplot Company, Aire rafts, and Blue Cross of Idaho, as well as games for iOS, Android and Amazon devices.