Tech Tip #50: Put your page's footprint in the footer

What if every page told you its own carbon cost?

Video created by explainapaper.com

The problem

Page weight creeps up because nobody sees it. A number on every page keeps the team honest.

The fix you can use today

  • Add CO2.js to estimate a page view's transfer size and CO2e.
  • Show it where the team (and visitors) will see it.
  • Treat it like a performance budget: a heavier page is a regression.

GreenCode shows the data size and carbon of every page in its own website's footer.

Tools that help

  • CO2.js (Green Web Foundation): an open-source library that turns bytes transferred into an estimate of CO2, using the Sustainable Web Design model
  • GreenFrame: measures the footprint of a web application's user scenarios and enforces carbon budgets in CI

How GreenCode helps

GreenCode helps tackle this by keeping its own pages light and showing each page's data size and carbon in the footer. Static pages, WebP images, scripts only where they are used and purged styles cut a first view of the home page from 6.8 MB to 1.7 MB. More on this.

Tags

#web-performance#measurement#javascript

Sources

Transcript

What if every page told you its own carbon cost? Web pages get heavier because nobody sees the weight. A new script here, a big image there. A number on every page keeps the team honest. Here is the fix you can use today. First, add the Green Web Foundation's carbon library to your pages. It estimates each page view's data size and carbon. Next, show the figure where your team, and your visitors, will see it. Then treat it like a performance budget. Tools like GreenFrame measure a web app's footprint, and enforce carbon budgets in testing. A heavier page is a bug to fix. GreenCode shows the data size and carbon of every page in its own website's footer. A change that makes a page heavier shows up straight away. GreenCode helps tackle this by keeping its own pages light, and showing the result. Its first-visit home page shrank from six point eight to one point seven megabytes. That was GreenCode Tech Tip number fifty. Follow for the next tip, and find more on greencode.ai/tech-tips.

All GreenCode Tech Tips · All GreenCode videos

  • Tip #50
  • For Developers
  • Length 1:06
  • Category Web and front-end
GreenCode

Want this checked on your own system? Talk to the GreenCode team.

Get in touch