I'd love to have some CO2 accounting as part of DevTools

[mgifford]

Really useful tools like https://www.websitecarbon.com & https://www.thegreenwebfoundation.org

Have lots of useful information to help developers assess the CO2 footprint of their work. This should be something that was just built into our developer tools.

We should see the relative CO2 emissions of a page.

AB#39825299

[captainbrosset]

Thanks for the feature request! Having something like this in DevTools seems like a good idea. Here are 2 thoughts about this:

• It would make a lot of sense as a hint in webhint.io. And what's cool is that EdegeDevTools uses webhint behind the scenes, to populate its Issues tool. So the hint would get displayed automatically.
• Another way would be to build a browser extension for this. Extensions can create DevTools panels, and the API for doing so are compatible between all major browsers. In fact the green-web-foundation seems to have an extension already: https://www.thegreenwebfoundation.org/browser-apps/

@hxlnt what do you think?

[hxlnt]

I like this idea--great way to give visibility to developers on this aspect of web development. Thanks for the feedback!

In terms of where to integrate, I agree that extensions and the Issues panel might be the two most sensible DevTools surfaces for this feedback.

In the Issues panel, I could imagine an issue being surfaced when a page exceeds a certain CO₂ threshold, while an extension could provide on-demand insight.

Not sure whether inclusion in webhint would be the right fit given that the project tends to focus on recommendations that include specific actionable fixes in the codebase; we would need to dive in more to see how granular some of these tools are.

[tkadlec]

Lots of interest in this for WebPageTest too. catchpoint/WebPageTest#1613

[hxlnt]

Thanks for kicking off the conversation, @mgifford, and for the great comments throughout. This is something we're keen to look into, but more research is needed to compare the different assessment methods as well as how the results might be surfaced in DevTools. Marking this as tracked while we do some research, but will leave this issue open to continue the discussion.

[ldevernay]

If you're looking for an extension creating a new DevTools panel, there is GreenIT-Analysis : https://chrome.google.com/webstore/detail/greenit-analysis/mofbfhffeklkbebfclfaiifefjflcpad?hl=fr
But I think something like the actuel Ecograder would be a good starting point (CO2 calculation + checking best practices). Ideally, this would need to go even further. I would be glad to discuss it further.
(and of course it would be a great addition to WebPageTest, even more since their last announcements)

[mgifford]

There are extensions, but ultimately how do we help developers understand the impacts of bloated sites by default. If they have to install an extension, it's going to be of minimal value, as we know most folks just won't.

[ldevernay]

Yes, it sure would be better to have this by default directly in the DevTools. It would be great to have such items (CO2eq estimation + checking for best practices) natively in the DevTools. We had some discussion about that with @rviscomi regarding Chrome but this should be the case for as many browsers as possible.
You could also go as far as offering options for users to reduce environmental impact of their browsing natively (loading images/iframes/videos only on interaction, filtering 3rd party scripts, dark mode, etc), displaying an estimation of the environmental impacts of the websites they're browsing (either through estimations or scores). This could also offer benefits for users on low bandwidth and/or old devices.
So, yes, 2 topics :

• What can you do to raise awareness among users and help them reduce the impact of their web browsing? => clear indicators, settings to reduce impacts.
• What can you do to raise awareness and help tackle the subject among developers? => add calculations for environmental impacts in DevTools, check for best practices (and give resources for them to go further)

Even if more and more professionals are interested is this topic, involving browsers (natively) could be a game-changer!

[captainbrosset]

As pointed out by Henri on Twitter: WebPageTest is starting to add some of this information in their tool. More info: https://blog.webpagetest.org/posts/website-performance-and-the-planet/

(Edit: sorry, I somehow missed @tkadlec's comment above before posting).

[captainbrosset]

We had some discussion about that with @rviscomi regarding Chrome but this should be the case for as many browsers as possible.

Agreed. Getting this in front of as many people as possible, regardless of what browser (or tool, like WebPageTest) they are using, seems like the right thing to do.

[fershad]

Will also worth keeping an eye on what The Green Web Foundation are doing around proposing a carbon.txt convention.
https://github.com/thegreenwebfoundation/carbon.txt

[ldevernay]

I'm wondering how we could tackle this efficiently.

• What would be the next steps to implement this in Edge?
• How can this thinking be more global to design a solution that could fit all browsers and, why not, performance tools?

Ideally, I think the hypothetical implementation for Edge could serve as an example for other browsers/tools but, since some of them are already on the same topic, this might not be the optimal way to go.

Even if this is only due for late 2021, I will consider including a section about the future of browsers and tools for a sustainable web in the 2022 Sustainability chapter for Web Almanac. The point is not here would not be to state the ultimate truth but share ideas and start discussions.

[mgifford]

Ideally there would just be something in the address bar of the page, right? Some indication that a site might have a greener or browner profile. Could be like how Immersive Reader mode or ssh is added. Just something subtle. Should also be something that is easier to compute than say a Lighthouse score. Could just be something like bytes loaded perhaps. Maybe it could identify if the IP is in the Green Web Foundation's list of renewably powered servers. Could be really simple.

[ldevernay]

Yes, I see what you mean.
This would be great to have an indicator for the "greenness" of the page based on a simple score, directly on the address bar (BTW, I think I saw some proposal like this on another occasion). For example, something calculated with bytes loaded, number of requests and whether the hosting uses renewable energies (a basic score from 1 to 10, a leaf icon is displayed if the score is more than 5, otherwise it is crossed out). Then it would be possible to click on it to get more details (on how it is calculated + values of the chosen metrics + links to DevTools, other websites or whatever).

[tayloregivens]

We've created an explainer for a sustainability feature proposal we've been working on to address your requests! Please leave feedback on this new issue #92 .