Skip to toolbar
Digital Sustainability: why must we plan for continuous improvements to support the sustainability of websites?

While this blog series is split into key elements, it’s important to note that our entire team worked simultaneously, catching up via weekly stand-ups to make sure that proposed solutions were achievable.

The final component of our sustainable website build journey with the Climate Group is one that isn’t really all that final. It focuses around continuous improvements, building the foundations for a roadmap which keeps on iterating itself.

To action this, Manifesto has put together a list of future improvements the team will look to work on with the Climate Group to continue reducing the percentage of emissions caused by the charity’s website. It’s not necessarily because we didn’t have the budget or time to do these things. In some instances data wasn’t available or the wider impact isn’t yet measurable.

What glues all these smaller ideas together is the fact that a sustainable website build is never finished. In the same way that SEO, accessibility, and user experience aren’t activities with a final chapter either. The book is instead ongoing, and its narrative should continue to weave through the site’s existence.

Block bad bots

Human activity on the internet accounts for less than half (48%) of traffic on the internet. This means a majority (52%) of traffic is generated by bots. Half of that 52% are deemed bad bots, which makes up a quarter of a site’s traffic. They scrape content, crash websites, look for security loopholes, bulk buy products on ecommerce sites, and simulate advert clicks. The list could go on.

Nowadays these bad bots behave in an almost indistinguishable way from humans. This means they consume HTML, CSS, JavaScript, JQuery images, and videos in the exact same way as humans. That equals the same emissions, and in turn, increases costs of data centre storage and bandwidth - with no benefit for the site owner

This is why we’ll look at specialist bot blocking services, such as Radware Bot Manager, to better understand, and ultimately remove, traffic from bad bots.

Content Delivery Network

A CDN stores bits of a website in data centres around the world. This gets content to global users faster. We decided not to use a CDN during the development phase, largely because we wanted to focus on reducing the number and size of images, as well as on using ‘srcset’ for responsive images.

But we do want to do more research on the potential impact of using a CDN. We want to understand how far we can push it to deliver fonts, code and images, within the parameters of sustainability. And we want to find the best locations for CDNs, ones based on genuine, (not bot) traffic.

Strip back font files

Adding to the work we’ve already done on fonts, we want to sort through our custom font files. By removing the characters and symbols we know we won’t ever use, we can streamline the site’s structure. These are marginal gains, but with every new user directed to the site downloading each font file, it’s absolutely worth it.

Automate emission audits

The new sites we’ve launched for the Climate Group will generate 75% less emissions than the charity’s previous sites. However, we need to ensure it doesn’t creep back up again! That’s why we want to automate emission audits. This will allow us to identify problem areas and sort them out - whether they be a bug which can be directly fixed, or a training issue an editor needs to iron out. It will also help us chart the impact of changes we make as part of our programme of continuous improvement. By tracking our progress, we can continue to challenge carbon budgets in the future.

Keep an eye on the detail

We think more can be done to help guide editors in creating streamlined content which fits with the climate-focused ethos of the website. With some more extensive research and idea generation alongside the Climate Group, we can explore the creation of tools and training which could help with this. Functions such as an alert which warns the editor if a page goes over a certain size, inline hints or tips, and dashboards breaking down page size and performance.

Scalable Vector Graphic (SVG) illustrations

The illustrations we’ve used on the Climate Group’s site hold a strong visual identity. However, we would like to add a much wider range of illustrations going forward. This will allow the charity’s editorial team to replace stock imagery still sitting in some areas of the site. We’ll establish with the editorial team what these additional illustrations will be, make them and then store them somewhere easy to locate in the Content Management System (CMS).

To get the maximum benefit (reducing page weight) from illustrations, they must be SVGs. An illustration in .PNG format will be smaller than a photo, but not as small as an SVG. And given our implementation of colour-coded site sections via Cascading Style Sheets (CSS), a .PNG image simply won’t function the same way as an SVG image. This makes setting aside additional budget for ongoing design and build work an essential consideration.

Inline or in the object tag, that is the question

There was a healthy debate in the team about which way to go on this Shakespeare-esque conundrum. We’d already implemented embedded SVGs, so we ran an experiment to see if there was a clear and obvious reason to revert that.

As you can see from the results below, there wasn’t one. But given our mantra of ‘every byte counts’, we’ll definitely be reviewing this. That way, we can keep analysing the impact of implementing the change, and what the exact carbon cost of those extra requests would be.

screenshot_2020-12-15_at_15.02.46.png
 
Loading...

Drive awareness

The aim behind this article series is to encourage openness around the concept of a sustainable web build. That way, other people can become inspired to embark on similar projects.

We do, however, want to take this work further than the website build itself. That way, we can make people visiting the site aware of its impact, and its role in the wider digital ecosystem. Because the world’s digital CO2 footprint is just as important as other, more visible industries’ footprints such as aviation or mining.

We think the most obvious way to spread such awareness is to badge the site with a carbon footprint. There are a few different ways we could do this. But we’d like to use the automation technology already built into our carbon calculator tool. This will display a badge per page and per site’s carbon footprint, similar to what Oatly does on its packaging.

By signalling the site’s carbon impact clearly to visitors, we think the Climate Group’s new website can set an exciting precedent for the wider web development industry.

manifesto_illustration_kit_climate_group_article-13.jpg
 
Loading...

Drupal templates

Although we have already stripped back our base Drupal template, we think there’s more we can do. We just need a bit more time to play around and make sure we don’t break anything too important!

Caching

Similarly to our templates, our caching set is already optimised. But we want to see how much further we can go. We’ll be looping in our hosting provider on this project to discuss possibilities. These kinds of tuning decisions are always better made with a few weeks or months of data. This helps you to see where further improvements can be made, based on how the site is actually used in real life.

New initiatives don’t have to equal a whole new site!

Finally, the charity already owns a number of initiatives which form key parts of its offering. But there will undoubtedly be new ones.

It’s therefore vital, when working with an organisation whose product offering is dynamic, that you set them up for future successes, as well as victories in the present. So when a new section or initiative for the site crops up, unless a microsite is truly required, it doesn’t see the organisation build a whole new site unnecessarily, with a new code base, new design, new hosting, and new SEO equity. Because that all detracts from the efforts put into the original build.

A shared journey

Rather than concluding this series, we invite you to continue it. We want you to share your digital sustainability journeys. It doesn’t have to be a full web build. If you’ve spotted something we’ve covered that can be improved - tell us! And show us how it could be done better.

It’s important for us to understand suggestions which make for continuous improvements. That are constructive, rather than simply critical. If we’re going to create positive change, we need the learning experience to be positive too.

Check out all of the articles in this series by searching ‘Digital Sustainability’.

Neil Clark, environmental lead at Manifesto.

[...]

Read More...

While this blog series is split into key elements, it’s important to note that our entire team worked simultaneously, catching up via weekly stand-ups to make sure that proposed solutions were achievable.

The final component of our sustainable website build journey with the Climate Group is one that isn’t really all that final. It focuses around continuous improvements, building the foundations for a roadmap which keeps on iterating itself.

To action this, Manifesto has put together a list of future improvements the team will look to work on with the Climate Group to continue reducing the percentage of emissions caused by the charity’s website. It’s not necessarily because we didn’t have the budget or time to do these things. In some instances data wasn’t available or the wider impact isn’t yet measurable.

What glues all these smaller ideas together is the fact that a sustainable website build is never finished. In the same way that SEO, accessibility, and user experience aren’t activities with a final chapter either. The book is instead ongoing, and its narrative should continue to weave through the site’s existence.

Block bad bots

Human activity on the internet accounts for less than half (48%) of traffic on the internet. This means a majority (52%) of traffic is generated by bots. Half of that 52% are deemed bad bots, which makes up a quarter of a site’s traffic. They scrape content, crash websites, look for security loopholes, bulk buy products on ecommerce sites, and simulate advert clicks. The list could go on.

Nowadays these bad bots behave in an almost indistinguishable way from humans. This means they consume HTML, CSS, JavaScript, JQuery images, and videos in the exact same way as humans. That equals the same emissions, and in turn, increases costs of data centre storage and bandwidth - with no benefit for the site owner

This is why we’ll look at specialist bot blocking services, such as Radware Bot Manager, to better understand, and ultimately remove, traffic from bad bots.

Content Delivery Network

A CDN stores bits of a website in data centres around the world. This gets content to global users faster. We decided not to use a CDN during the development phase, largely because we wanted to focus on reducing the number and size of images, as well as on using ‘srcset’ for responsive images.

But we do want to do more research on the potential impact of using a CDN. We want to understand how far we can push it to deliver fonts, code and images, within the parameters of sustainability. And we want to find the best locations for CDNs, ones based on genuine, (not bot) traffic.

Strip back font files

Adding to the work we’ve already done on fonts, we want to sort through our custom font files. By removing the characters and symbols we know we won’t ever use, we can streamline the site’s structure. These are marginal gains, but with every new user directed to the site downloading each font file, it’s absolutely worth it.

Automate emission audits

The new sites we’ve launched for the Climate Group will generate 75% less emissions than the charity’s previous sites. However, we need to ensure it doesn’t creep back up again! That’s why we want to automate emission audits. This will allow us to identify problem areas and sort them out - whether they be a bug which can be directly fixed, or a training issue an editor needs to iron out. It will also help us chart the impact of changes we make as part of our programme of continuous improvement. By tracking our progress, we can continue to challenge carbon budgets in the future.

Keep an eye on the detail

We think more can be done to help guide editors in creating streamlined content which fits with the climate-focused ethos of the website. With some more extensive research and idea generation alongside the Climate Group, we can explore the creation of tools and training which could help with this. Functions such as an alert which warns the editor if a page goes over a certain size, inline hints or tips, and dashboards breaking down page size and performance.

Scalable Vector Graphic (SVG) illustrations

The illustrations we’ve used on the Climate Group’s site hold a strong visual identity. However, we would like to add a much wider range of illustrations going forward. This will allow the charity’s editorial team to replace stock imagery still sitting in some areas of the site. We’ll establish with the editorial team what these additional illustrations will be, make them and then store them somewhere easy to locate in the Content Management System (CMS).

To get the maximum benefit (reducing page weight) from illustrations, they must be SVGs. An illustration in .PNG format will be smaller than a photo, but not as small as an SVG. And given our implementation of colour-coded site sections via Cascading Style Sheets (CSS), a .PNG image simply won’t function the same way as an SVG image. This makes setting aside additional budget for ongoing design and build work an essential consideration.

Inline or in the object tag, that is the question

There was a healthy debate in the team about which way to go on this Shakespeare-esque conundrum. We’d already implemented embedded SVGs, so we ran an experiment to see if there was a clear and obvious reason to revert that.

As you can see from the results below, there wasn’t one. But given our mantra of ‘every byte counts’, we’ll definitely be reviewing this. That way, we can keep analysing the impact of implementing the change, and what the exact carbon cost of those extra requests would be.

screenshot_2020-12-15_at_15.02.46.png
 
Loading...

Drive awareness

The aim behind this article series is to encourage openness around the concept of a sustainable web build. That way, other people can become inspired to embark on similar projects.

We do, however, want to take this work further than the website build itself. That way, we can make people visiting the site aware of its impact, and its role in the wider digital ecosystem. Because the world’s digital CO2 footprint is just as important as other, more visible industries’ footprints such as aviation or mining.

We think the most obvious way to spread such awareness is to badge the site with a carbon footprint. There are a few different ways we could do this. But we’d like to use the automation technology already built into our carbon calculator tool. This will display a badge per page and per site’s carbon footprint, similar to what Oatly does on its packaging.

By signalling the site’s carbon impact clearly to visitors, we think the Climate Group’s new website can set an exciting precedent for the wider web development industry.

manifesto_illustration_kit_climate_group_article-13.jpg
 
Loading...

Drupal templates

Although we have already stripped back our base Drupal template, we think there’s more we can do. We just need a bit more time to play around and make sure we don’t break anything too important!

Caching

Similarly to our templates, our caching set is already optimised. But we want to see how much further we can go. We’ll be looping in our hosting provider on this project to discuss possibilities. These kinds of tuning decisions are always better made with a few weeks or months of data. This helps you to see where further improvements can be made, based on how the site is actually used in real life.

New initiatives don’t have to equal a whole new site!

Finally, the charity already owns a number of initiatives which form key parts of its offering. But there will undoubtedly be new ones.

It’s therefore vital, when working with an organisation whose product offering is dynamic, that you set them up for future successes, as well as victories in the present. So when a new section or initiative for the site crops up, unless a microsite is truly required, it doesn’t see the organisation build a whole new site unnecessarily, with a new code base, new design, new hosting, and new SEO equity. Because that all detracts from the efforts put into the original build.

A shared journey

Rather than concluding this series, we invite you to continue it. We want you to share your digital sustainability journeys. It doesn’t have to be a full web build. If you’ve spotted something we’ve covered that can be improved - tell us! And show us how it could be done better.

It’s important for us to understand suggestions which make for continuous improvements. That are constructive, rather than simply critical. If we’re going to create positive change, we need the learning experience to be positive too.

Check out all of the articles in this series by searching ‘Digital Sustainability’.

Neil Clark, environmental lead at Manifesto.

Powered by WPeMatico