-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdetails.html
More file actions
84 lines (80 loc) · 5.99 KB
/
Copy pathdetails.html
File metadata and controls
84 lines (80 loc) · 5.99 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properties -->
<title>webNRG - Measure energy and CO2 cost of your website</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" href="favicon.ico">
<link rel="icon" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" href="favicon-48x48.png" sizes="48x48">
<meta name="description" content="Measure the actual energy cost and CO2 emissions that the browser produces when accessing and rendering your website">
<link rel="stylesheet" type="text/css" class="ui" href="dist/css/semantic_reduced.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/shared.js" defer></script>
<script type="text/javascript" src="js/details.js" defer></script>
</head>
<body>
<div class="ui center aligned grid">
<div class="column">
<a href="/" style="display: block; margin-bottom: 20px;">
<h2 class="ui image header">
<img src="img/gc.png" class="image">
<div class="content" style="color: #3d936f; font-size: 70px; line-height: 70px; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;">webNRG⚡️</div>
<div id="tagline">... pronounced web energy ;)</div>
</h2>
</a>
<div class="ui stacked segment left aligned">
<h1 id="website-name" class="ui massive teal ribbon label"></h1>
<p style="margin-left: 0; margin-top: 10px; text-align: left;">Tested on <span id="last-run-date"></span></p>
<hr>
<div style="display: flex; align-items: center; gap: 10px;">
<h2 style="display: inline-block; margin-bottom: 0px;">Rendering Energy</h2>
<div id="rendering-energy-label" style="white-space: nowrap;"></div>
</div>
<br>
<p>The CPU power consumption for rendering was <span id="rendering-power" class="ui label"></span></p>
<p>With an initial load and then waiting for 5s the total visit time was: <span class="ui label measurement-duration"></span></p>
<p>This equates to an energy of: <span id="rendering-energy" class="ui label"></span></p>
<p>Over a year with 10,000 monthly page views this would consume <span id="rendering-energy-10k" class="ui label"></span> and emit <span id="cpu-carbon-10k" class="ui label"></span></p>
<hr>
<div style="display: flex; align-items: center; gap: 10px;">
<h2 style="display: inline-block; margin-bottom: 0px;">Network Data</h2>
<div id="network-transfer-label" style="white-space: nowrap;"></div>
</div>
<br>
<p>The network data transfer the website was <span id="network-transfer" class="ui label"></span> for loading and staying on the page for <span class="ui label measurement-duration"></span></p>
<p>Over a year with 10,000 monthly page views this website would produce about <span id="network-carbon-10k-year" class="ui label"></p>
<hr>
<h2>Grid Intensity</h2>
<p>The carbon intensity level of the electricity grid at measurement time was: <span id="carbon-intensity-level" class="ui label"></span> <small>(source: <a href="https://www.electricitymaps.com" target="_blank" rel="noopener">Electricity Maps</a>)</small></p>
<p>In value in absolute numbers was: <span id="carbon-intensity-value" class="ui label"></span></p>
<hr>
<h3>What about scrolling?</h3>
<p>A page can download way more resources when scrolling down. Also some energy intensive rendering elements can be below the fold.</p>
<p>However scrolling is hard to compare as some pages have infinite scrolling and some don't.</p>
<p>Scrolling down took an additional: <span id="measurement-duration-scrolling" class="ui label"></span></p>
<p>While scrolling the additional downloaded amount of data was:<span id="network-transfer-scrolling" class="ui label"></span></p>
<p>The rendering power while scrolling was: <span id="rendering-power-scrolling" class="ui label"></span></p>
<hr>
<h3>History and more details</h3>
<ul>
<li style="margin-bottom:5px;">See the energy consumption over time: <a id="timeline-link" href="" class="ui teal horizontal no-wrap" target="_blank" rel="noopener"><i class="ui icon clock"></i>History </a></li>
<li>See more details of the measurement: <a id="measurement-details-link" href="" class="ui blue horizontal no-wrap" target="_blank" rel="noopener"><i class="ui icon info"></i>Measurement Details</a></li>
<li>For scrolling details click on the <a id="measurement-details-link-scroll" href="" target="_blank" rel="noopener"><i class="ui icon angle double down"></i>Scroll down and wait for 5 s</a> tab</li>
</ul>
</div>
<hr>
<div class="ui left aligned info message">
<div class="content">
<p><b>How does it work?</b> 👉 <a href="/methodology.html" style="text-decoration: underline;">Read about the methodology here</a></p>
</div>
</div>
<script data-domain="website-tester.green-coding.io" data-api="https://worker-spring-sunset-f89b.arne5926.workers.dev/jovvvvvse" src="https://worker-spring-sunset-f89b.arne5926.workers.dev/worker/script.outbound-links.js" defer></script>
</div>
</div>
</body>
</html>