Energy efficient website design

Conserving energy, recycling and doing our bit for the environment is drummed into us all – and rightly so. We all have to start thinking more about our planet’s resources and how we are using energy.

Does ‘doing our bit’ extend to web design? Should we be making energy efficient websites? Can you make a website more energy efficient? Should we bother? How do we do it?

All valid questions that deserve some thought…

Can you make a website energy efficient?

The answer to this question is influenced by a number of factors. For example, we are not only dealing with the energy being used by the device rendering your website, but also the server hosting your website. If you were being really pedantic, you could also argue the energy used in the production of the website – all those Apple Macs and PCs burning away, late into the night.

For now, let’s just consider the core components: the website and the hosting.

Energy efficient website hosting

It is technically possible to get low carbon hosting, where the energy used to power the servers is generated by renewable means. Solar, wind or water powered generators that are generating the electricity to run the servers. However, most data centres require massive amounts of power to run, cool, backup and protect the servers, so expecting carbon neutral is probably unlikely at this stage. Whilst considering the overall carbon footprint of the hosting service, you could also include the power and resources required to build the servers and their components – obviously recovering that over the life cycle of the server is possible, but let’s face it, it’s unlikely. There are a number of hosting firms who claim to be environmentally friendly or carbon neutral – doing so by planting trees to offset their carbon usage. Perhaps the ideal combination would be offsetting the carbon by planting a tree or trees for each server and also using recovered energy to power, cool and protect the data centre.

But does such a hosting firm exist? Answers on a postcard, please!

Another fairly easy ‘win’ is to keep the server software up-to-date. For example, huge efficiency and performance gains are reported when upgrading from PHP 5.3 to 5.5 – greater efficiency requires less resources and energy, so keep upgrading that server!

The energy efficient website

You only have to spend a long train journey browsing a particularly image heavy or interaction-laden website to realise it’s sapping juice from your smart phone. The harder the phone works to process your web pages or download those images, the more energy it’s using. The same principles apply to a desktop PC too, albeit a lot less noticeable.

There has been lots of discussion over the years concerning energy use on dark background or light background websites. For example, blackle.com – the “energy efficient version of Google” – has a black background, rather than white and claims to have saved billions of watts in energy.

Does a black background actually save any energy?

The short answer is it depends on the type of screen. With an LCD screen, it makes very little difference, indeed in some instances black uses more energy. However, with old CRT screens and newer AMOLED screens, as found in many Android devices, they do actually use more energy to deliver white pixels. (This site has some nice work on the subject.)

So, it’s fair to say that, yes it can have an effect, but we are talking about small returns and there are easier ways to make a difference.

At the recent and excellent Responsive Day Out, Stephanie Rieger (@stephaniereiger) talked about ‘The Future of Media Queries’. Of particular interest was the light-level media query that is in the v4 spec for CSS(http://dev.w3.org/csswg/mediaqueries-4/#light-level) – which could be used to dynamically turn down or change colours depending on light levels in the surrounding environment – so your website could swap to a dark background with white text if the room is dark etc. Perhaps, this could be manipulated to help preserve some energy when browsing late into the night or in low light situations?

Alternatively we could start to offer a battery saving mode on our websites, where non essential images or functionality is removed, so that just core content is displayed, on dark backgrounds. Saving bandwidth, saving energy, making your phone last that final 20 minutes of your train ride…

Optimise for maximum efficiency

From an on-page point of view, the real benefits are had in optimising your website code, minifying JavaScript and CSS, optimising images and pushing fewer bytes over the air and down the wires. Not only will your users thank you for faster load speeds, but they could eek out prolonged browsing times. However, the real cherry on the top is that Google will also reward you for a faster site by improving your search engine performance. Google provides the excellent Page Speed service to help you to optimise your website. (A note worthy point here is that achieving a 100 is very, very hard – anything over 95 is pretty good. It also means running caching and minifying all code, which is fine, but can sometimes be impractical.)

Don’t forget the back-end code

In August 2013 MOZ software did some great work on the correlation between site speed and search engine performance – however it’s worth conceding that they found a greater correlation between the “Time to first byte” and search engine position than the rendering speed, so using CDNs and ensuring maximum response times from your server is a vital part of overall page speed (There is a nice argument not to use that cheap hosting!). But please remember, this is one set of research in an ever changing landscape and it’s well documented that Google are now penalising websites that are slow loading on mobile devices – which leads me to the conclusion that contrary to MOZfindings, page rendering must be also be an influencing factor in how Google is indexing websites.

Things to remember when creating an energy efficient website

So, from a fairly high level, there are a few key things to consider when creating an energy efficient website:

  • With a responsive website, make sure your media queries go small screen to large screen – so you’re not loading big, desktop sized images onto a phone and then hiding them.
  • According to Apple, front loading CPU usage is more efficient than continual load, which is also useful to know for JavaScript powered web apps employing lazy loading or infinite scrolling
  • Run server side compression on all images, code and content
  • Use icon fonts instead of images
  • Use sprites instead of lots of little images (fewer round trips to the server)
  • Use SVGs where appropriate
  • Avoid geo-location requests, they draw a lot of energy from the device
  • Use a CDN
  • Make sure your server responds as quickly as possible and the back end code is efficient

Conclusions

In conclusion, it’s fair to say there are a number of possibilities in creating a ‘green’ website. No single thing is going to get you the energy saver of the year award (if such a thing exists?), but as with most things web related, the cumulative effect of all of these steps is undoubtedly going to offer genuine, tangible benefits to you, your users and your websites performance on the search engines. So get out there, optimise and start saving some energy!

Useful links: