Skip to content

Commit 99562fe

Browse files
Adding spaces to headers
1 parent 25df428 commit 99562fe

File tree

1 file changed

+15
-0
lines changed

1 file changed

+15
-0
lines changed

explainers/Sustainability/explainer.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,55 @@
1+
12
# DevTools: Sustainable Web Development Feature
3+
24
Author:
35
- [Taylore Givens](https://github.com/tayloregivens), Program Manager
6+
47
## Status of this feature
58

69
Proposal for a feature not yet in development. Please share your feedback [here](https://github.com/MicrosoftEdge/DevTools/issues/92).
710

811
## Definition
12+
913
web app sustainability – energy consumption and type of energy (i.e. fossil fuels/renewable) used for a web app
1014

1115
## Introduction
16+
1217
The carbon impact of the internet, including the hardware, software, and systems that go into creating it, produces about [3.7%]( https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think) of global carbon emissions. This is similar to the percentage of global emissions from the [airline industry](https://www.bbc.com/future/article/20200305-why-your-internet-habits-are-not-as-clean-as-you-think). Developers and the public are becoming increasingly more aware and concerned about this issue. Developers are increasingly interested in understanding **what factors impact a web app's sustainability and how to improve it's sustainability.** Consequently, tools such as [Website Carbon](https://www.websitecarbon.com/), [Ecograder](https://ecograder.com/), [EcoPing](https://ecoping.earth/blog/core-web-vitals-and-sustainability), and [Beacon](https://digitalbeacon.co/) have been created to calculate the amount of CO2 a web app emits and provide recommendations to improve the sustainability of a web app.
18+
1319
## Goals
20+
1421
Adding sustainability features to DevTools will raise awareness about the alarming carbon impact of web apps and the internet and help developers measure and improve the sustainability of their web apps by
1522
- Providing proxy web app sustainability measurements
1623
- Highlighting common factors that reduce the sustainability of web apps by showing or explaining how these factors decrease performance and increase energy consumption
1724
- Indicating to developers what actions they’re currently taking, such as performance improvements, that also improve web app sustainability
1825
- Educating developers on new actions they can take that are purely beneficial for sustainability.
26+
1927
## Solution
28+
2029
### Summary
30+
2131
- Label existing issues in the Issues panel that are beneficial to sustainability and energy efficiency
2232
- Create a “Sustainability” tab that is a hub for sustainability-related metrics and provides insights about web app energy consumption, the type of energy used to power a web app, third parties' impact on performance and energy, and best practices to improve sustainability.
2333

2434
### Sustainability Content Labeling in Issues Tab
35+
2536
![Issues Tab UI](explainer_Issues.jpg)
2637
Mockup is conceptual, not the final design
38+
2739
#### Usage
40+
2841
Once the user navigates to the Issues panel, any issue or category relevant to improving sustainability will have a sustainability label. Clicking this label will expand the category or issue dropdown window. The dropdown window will include a green banner describing how the category or issue is related to sustainability. The banner will also include a link to external documentation to learn more about why the category or issue is sustainability related. The banner will potentially also include a link to the DevTools Sustainability Tab (see next section).
2942

3043
Sustainability labeling will be enabled by default but can be disabled with the checkbox to reduce noisiness. Categories or issues labeled as sustainable would be prioritized in the ordering of categories and issues.
3144

3245
### Sustainability Tab
46+
3347
This tab will be a hub for sustainability-related metrics and provide insights about web app energy consumption, the type of energy used to power a web app, third parties' impact on performance and energy, and best practices to improve sustainability.
3448

3549
Although developers requested a web app carbon calculator feature in DevTools, like [Website Carbon](https://www.websitecarbon.com/), these types of algorithms are underdeveloped and inaccurate because they often rely on inputting the byte size of a website and applying average ratios (i.e. kWh/byte and CO2 g/kWh) to get a carbon estimate. This type of algorithm is **better suited to estimate the carbon emitted from the energy used to transfer a web app over the network** rather than estimate the total carbon emissions associated with a web app.
3650

3751
#### Content and Usage
52+
3853
The Sustainability tab has three sections: Sustainability Analysis, Third Party Impact, and Best Practices.
3954

4055
Sustainability Analysis

0 commit comments

Comments
 (0)