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:
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
- Thinking about network sustainability for frontend developers
- 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:
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
- Exploring Large HTML Documents On The Web
- Graphics Card Power Consumption and Efficiency Tested
- How Deep is Your DOM?
- How Much Power Does Memory Use?
- How Quickly Can Chrome Parse HTML Code?
- 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