The Grid-aware websites project is an experimental (and exciting) new approach to sustainable web design proposed by the Green Web Foundation that considers how websites can be served more efficiently using cutting-edge Content Delivery Network technology and the Energy Maps API.
In this article, we’ll explore the concept of Grid-aware websites that can adapt based on the intensity of their servers local power grid.
Where you host your website matters
When it comes to Sustainable Web Design, your web hosting package plays an important role in reducing the amount of energy required to run your website.
As well as running well optimised servers, the geographic location of the machines that store your website also plays a key role.
Generally speaking, the closer the server is to the people who visit the website means there is less distance for the data to travel ‘over the wire’ to reach their devices and therefore uses less energy to do so.
For example, a website hosted here in the UK will load faster for someone viewing it in London compared to someone viewing it from Australia. This is why websites with a global audience typically utilise a Content Delivery Network (CDN) to run copies of the site from data centres around the world for visitors in different regions.
Learn more in our Green web hosting guide for ethical businesses.
How clean is your web hosting?
New work by The Green Web Foundation now asks us to consider another important condition when choosing where to host a website: How clean is the energy that powers those servers?
Taking this into account, a website hosted in a country that relies mostly on fossil fuels for power would create more pollution than one hosted further away in a country powered by renewables.
Most countries will primarily use a combination of renewable energy such as wind or solar power and then fall back to fossil fuels (also known as the ‘fuel mix’) when local demand for electricity is higher than what the available renewable sources can provide.
The intensity of a countries power grid fluctuates throughout the day. In the UK it normally peaks around 6pm and is at it’s lowest overnight. Therefore the grid intensity at the time your website is loaded will determine whether it is powered by a cleaner fuel mix or not. In this case, a website viewed at 6pm is more likely to be powered by fossil fuels than if it is viewed at 2am when the grid is under less stress.
Helpfully, you can actually view realtime data of global power grid usage with the excellent Electicity Maps tool.
Adapting your website to the intensity of the local power grid
What if your website could adapt to the usage of the power grid? Doing so would allow us to present a ‘heavier’ version of a site when the server is powered by clean energy and a lightweight version when the power grid is under high use and switching to fossil fuels. For example:
- Showing a video when the power grid uses renewable energy and falling back to a static image if not.
- Using custom fonts and falling back to system fonts.
- Replacing embedded iframes with basic links to the external content.
- Apply progressive enhancements (ie. extra fancy bits) when the grid is under less stress.
Learn more about how Branch Magazine adapt their website to various grid intensities.
How do Grid-aware websites work?
The Green Web Foundation have created the Grid-aware Websites Toolkit to aid developers in building grid-aware sites.
The toolkit utilises modern edge-computing functionality of CDNs called Edge Workers to calculate the visitor’s local grid intensity and manipulate the page accordingly before it is presented to them.
This is where it gets (more) complicated so this is our super simplified version:
- Visitor requests to open the web page from the closest server on the CDN.
- The site detects the visitors location using the GaW Cloudflare Workers Plugin.
- Check the current grid intensity of that country using the Electricity Maps API.
- If the grid intensity is high return the ‘light’ version of the web page or modify accordingly.
For a more in-depth explanation check out Fershad Irani’s write-up on Grid-aware websites.
Examples of Grid-aware websites
Our thoughts on Grid-aware websites
As a sustainable web design studio we often find ourselves discussing how designs can be simplified to reduce their environmental impact and stand firmly in the belief that websites should be built as low-carbon by default.
Therefore, what we find most interesting about Grid-aware websites is that whilst this approach could be considered extreme, if anything it provides leeway to add in progressive enhancements (such as showing a video instead of a image) when the power grid is cleaner. Using the low-carbon version of the site as the default and then adding in extra features when the environmental impact is lower could be seen as a more moderate way forward.
Another thing to consider is that the inclusion of additional versions of a web page will likely lead to an increase of both design and development time. With this comes increased project costs which could therefore provide a barrier to Grid-aware sites becoming more commonplace.
In many ways this feels similar to the invention of Responsive Web Design when we began designing both Desktop and Mobile views of websites. This of course is now the norm so why can’t the same happen with Grid-aware websites?
As Grid-aware websites rely on using a Content Delivery Network, one could also argue that this approach is more suited to sites with a large, global audience than one where the visitors are mostly already in the same country.
Conclusion
We think the concept of Grid-aware websites are a very exciting prospect and could potentially be the biggest evolution of web design since Responsive Web Design.
For businesses who are truly invested in minimising their environmental impact of their digital presence, Grid-aware websites could well be the future of Sustainable web design.
In this article, we have discussed how:
- The geographic location of where your website is hosted and the intensity of that country’s power grid impact the environmental impact of your website.
- Grid-aware websites can adapt to provide a more efficient version when the local power-grid is under stress.
- Content Delivery Networks can be used to serve up a copy of a website from a server local to the person viewing it.
- Grid-aware websites utilise edge-computing functionality on CDNs to manipulate a loaded web page based on the the local power grid intensity.