Three months ago we proudly launched Serving.Green, our web initiative designed to highlight the impact that the internet has on the environment, and what we can all do to reduce that impact.
Now that the dust has settled a bit, I’d like to say a few words about what we did—from a development standpoint—to make the site as efficient as we could given our design objectives. I’ll be the first to admit that even more could be done, either by sacrificing some parts of the experience or by using techniques of which I’m not yet aware, but below are a few important tips and tricks that we can all do to make our websites more efficient. If you want to reach a digital green Nirvana, this will get you on your path.
1. Images
One of the biggest burdens for a website’s load time in a browser is typically images. I love high resolution imagery in my websites as much as the next guy, but they do come at price. To lighten the load, your choices here are fairly simple:
- Get rid of images that you don’t really need.
- Reduce the resolution of the images that you do need, as much as possible.
- Reduce image quality to the absolute minimum that you can stand to look at.
- Only serve large image as required for the size they’ll be displayed.
A major philosophical thread that runs through all design is the idea of economy. My recommendation is to look at everything you’ve got, and ask yourself if you really need it. If you take something out and the design is better, or just as good, you didn’t need it anyway.
2. Videos
The only thing worse than images (in terms of performance and efficiency) are videos. This is such a big deal that Apple stopped supporting auto-play of videos in 2013 because it was unexpectedly eating up people’s data plans.
Serving.Green still uses a video because we wanted to show that it can be done smartly with green design practices. The video we use of steam (not smoke!) bellowing out of an Icelandic geothermal plant is only 264kb. That’s on par, or smaller, than a typical banner image. How’d we do it?
- Length (time)
- Resolution
- Embed method
The video is only 4 seconds long, but I carefully set up a seamless loop so it feels infinite. If you watch closely, you can see the point where it cross-fades back to the start.
We also went with 720p resolution because it kept the size down, and looked good enough since it’s mostly used behind other elements or is tinted green.
Lastly, the video is embedded as an HTML5 video element. Our earlier iterations were embedding straight from YouTube, but we found that the overhead of script files required to load our tiny video outweighed the benefits achieved by offloading the burden of hosting the video to a third party (e.g. YouTube).
3. Recycle, Recycle, Recycle
On Serving.Green you see the video background come and go from the beginning of the experience to the end. This was a very conscious decision, as it allowed us to keep the experience rich without adding new assets. Through the use of layering and CSS3, it’s as though we have three different versions of the video.
- Full color
- Black and white
- Tinted green
In this way, we can re-use the video (for three different effects), creating a much smaller page size and a better user experience.
4. Text Masking
In earlier iterations of Serving.Green, we tried using fairly experimental methods of using text as a mask (for example the “Together, we can do this” layer near the start). In the end, it was much easier (with performance benefits) to make giant images with alpha transparency than it was to use SVG or Canvas!
5. Too Many Fonts
With webfonts being critical to a site’s unique look and feel and legibility, it’s easy to get caught up in using a boatload of fonts all in one project. We chose to use only one font family for this project, and only the 4 weights and styles we actually needed (400, 400i, 700, 900). This helped establish an economy of means throughout the site—in the design and with the assets and code base.
6. Green Hosting
Currently, Serving.Green is being hosted on 1984. They use green, sustainable geothermal and hydroelectric power sources and are committed to environmentally responsible business practices by utilizing only electricity from renewable energy sources and placing emphasis on reaching the highest possible energy utilization efficiency levels. Finding a green host is a huge way to improve your website’s environmental impact.
7. Hosted Libraries
Script libraries such as jQuery, Bootstrap, and Angular make common scripting tasks easier by doing some of the heavy lifting for us web developers. It’s no surprise that these libraries get included in many of the websites we build, and the code of these libraries is exactly the same no matter where it’s being used. Hosted libraries such as Google Hosted Libraries or CDNJS.com are CDNs (content delivery networks) that hold some of these commonly-used resources in multiple locations around the world so that they can be downloaded from wherever is closer to device asking for that resource. They also allow us to offload the hosting of certain resources from our main server and to facilitate the reuse of libraries we may have already downloaded from a site we were browsing a few minutes or weeks ago. As long as the site exists in our browser cache we can skip the download and save a bit of energy—and probably fossil fuels being burned.
Have Your Green, and Eat It Too.
Serving.Green is our proof case for a sustainable site that is also rich in experience. Making a site lean doesn’t mean it has to be mean. We do not have to convert all our websites to plain text, and use only dark shades of grey to save the energy it takes to produce bright white light on a display. We can and should produce rich experiences that educate and inspire without being wasteful.
Update February 16, 2017: Andrew & I just participated as speakers in the SustainableUX 2017 Webinar. Watch our segment.