3.1 Set goals based on performance and energy impact
Account for the difference in energy intensity that different types of content may have on a project and set goals based on what you would like to achieve.
Criteria
- Performance goals: Machine-testable
Set clear goals with performance and environmental impact in mind, then meet them. These could include, the number of requests or elements that must be rendered.- 15 page speed optimizations that sites ignore (at their own risk)
- CPU Throttling In Chrome DevTools and Lighthouse
- Does Making Fewer HTTP Requests Improve Page Speed?
- Does not compute: Avoiding pitfalls assessing the Internet’s energy and carbon impacts
- Electronics Goes Green (PDF)
- Equations relating total annual energy consumption and chips energy efficiency
- Fast load times
- Front-End Performance Checklist 2021
- GPF – General Policy Framework (PDF) – 1.1 – Strategy (Assessment & Impact)
- GPF – General Policy Framework (PDF) – 1.5 – Strategy (Impact Goals)
- GPF – General Policy Framework (PDF) – 4.9 – UX and UI (Server Requests)
- GR491 – 3-7043 – Client / Server Requests
- How Improving Website Performance Can Help Save The Planet
- Investigating the website sustainability of Finnish listed companies (PDF)
- Latency numbers every frontend developer should know
- Platform Strategy and Its Discontents
- Rethinking Allocation in High-Baseload Systems (PDF)
- Systems thinking and efficiency under emissions constraints
- UI Tools
- United Nations SDGS – Goal 1 – Poverty
- United Nations SDGS – Goal 7 – Sustainable Energy
- United Nations SDGS – Goal 13 – Climate Change
- Web Almanac: Sustainability
- Why do reflows negatively affect performance?
- Energy intensity: Machine-testable
Consider differences in the energy intensity or testable impact across each component. For example, unstyled text is less computationally intensive to render than CSS, which in turn is less process-heavy than JavaScript, which is less resource-heavy than WebGL or 4K video.- Analysis of overconsumptions on a light website
- Avoid An Excessive DOM Size For Better Web Performance
- Boring Web Development
- Graphics Card Power Consumption and Efficiency Tested
- How Deep is Your DOM?
- How Much Power Does Memory Use?
- Latency numbers every frontend developer should know
- Mac Pro power consumption and thermal output (BTU/h) information
- Power Consumption of PC Components in Watts
- The Carbon Impact of Web Standards (PDF)
- United Nations SDGS – Goal 1 – Poverty
- United Nations SDGS – Goal 7 – Sustainable Energy
- United Nations SDGS – Goal 13 – Climate Change
- Web Almanac: Sustainability
Benefits
- Conversion
Page speed and web performance are confirmed ranking factors when it comes to SEO. A faster digital product or service may support an organization’s efforts to rank higher on search engines. Combined with the better on-page user experience, this can lead to improved conversion rates. - Environment
Limiting the number of server requests and the DOM size lessens the negative environmental impact of a product or service’ by reducing CPU and GPU cycles and RAM usage. This brings down energy consumption, and reduces the need to recharge portable devices as frequently. - Performance
Reducing the hardware load improves overall performance. Devices are less likely to be overloaded or hit their limits with reduced resources.
GRI
- Materials: Medium
- Energy: Medium
- Water: Medium
- Emissions: Medium