You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: explainers/Sustainability/explainer.md
+8-6Lines changed: 8 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
1
# DevTools: Feature for Sustainable Web Development
2
2
Author:
3
-
-[Taylore Givens](https://github.com/tayloregivens), Program Manager
3
+
-[Taylore Givens](https://github.com/tayloregivens), Program Manager
4
4
## Status of this feature
5
-
This is a proposal for a new feature not yet in development. The team welcomes your feedback on this feature. Please [comment on this thread](https://github.com/MicrosoftEdge/DevTools/issues/26) to share your thoughts.
5
+
This is a proposal for a new feature not yet in development. Please share your feedback [here](https://github.com/MicrosoftEdge/DevTools/issues/26).
6
6
## Definition
7
7
sustainability of a web app – energy consumption of a web app
8
8
## Introduction
@@ -26,21 +26,23 @@ Once the user navigates to the Issues panel, any issue or category relevant to i
26
26
Sustainability labeling will be enabled by default but can be disabled to reduce noisiness. Categories or issues labeled as sustainable would be prioritized in the ordering of categories and issues.
27
27
28
28
### Sustainability Tab
29
-
The Sustainability tab will be a hub for sustainability-related metrics and provide insight about web app energy consumption, third parties' impact on performance, and best practices to improve sustainability.
29
+
This tab will be a hub for sustainability-related metrics and provide insights about web app energy consumption, third parties' impact on performance, and best practices to improve sustainability.
30
30
31
-
Some developers have suggested adding a website carbon calculator to DevTools, similar to the calculator on [Website Carbon](https://www.websitecarbon.com/). However, since these algorithms rely on inputting the byte size of the website and applying average ratios (i.e. kWh/byte and CO2 g/kWh) to get a carbon estimate, this methodology leaves many factors unaccounted for. Therefore, we propose displaying the carbon calculation as an estimate of carbon emitted from the *network transfer energy that goes into rendering a web app* rather than having the calculation represent the total carbon emissions associated with a web app.
31
+
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 network transfer energy used to render a web app rather than estimate the total carbon emissions associated with a web app.
32
32
33
33
#### Content and Usage
34
34
The Sustainability tab will have three sections: Energy Consumption, Third Party Impact, and Best Practices.
35
35
36
36
Energy Consumption
37
37
38
38
> The Client-Device Energy and Network Transfer Energy sub-sections display metrics relevant to how much energy is used to render the web app on the client device and transfer it over the network to give the developer a sense of the energy consumed by the web app.
39
-
> Client-device energy
39
+
>
40
+
> Client-Device Energy
40
41
> - “Client-Device Energy Score“ is out of 100 and is based on the CPU utilization and GPU utilization of the web app's initialization compared to the average web app. The score will vary slightly depending on the client's device due to different hardware. The score should be used as a guideline metric to assess how incremental code changes affect the client device energy.
41
42
> - CPU metrics such as the average CPU utilization and the live CPU utilization
42
43
> - Link to Performance tab to further investigate CPU utilization
43
-
> Network Transfer energy
44
+
>
45
+
> Network Transfer Energy
44
46
> - Bytes transferred and number of network requests to give context to the amount of network activity the web app is generating
45
47
> - Use an open-source API, such as the [Green Web Foundation API] (https://www.thegreenwebfoundation.org/green-web-feed/), to estimate carbon emissions due to the energy required to transfer bytes over the network
0 commit comments