3.9 Resolve Render Blocking Content
The ability to work around render-blocking issues is a great addition to the web. From deferring code, to lazy loading, to asynchronous loading, each has its use case and each can have the potential to reduce or give performance benefits to a website or application.
Criteria
- Asynchronous Code: All external assets have been deferred or set to async (unless required) to avoid Flash Of Unstyled Content (FOUC).
- Priority Loading: If external resources are required on load, their priorities (delivery route) are set correctly.
Impact
Medium
Effort
Low
Benefits
- Environmental:
Lazy loading videos and images ensures that they are only requested once the visitor needs them (not demanded even if they aren’t viewed). This saves processing power which can help older devices or those with less battery capacity access your websites and applications barrier-free. - Performance:
Letting text render first makes your website feel like it’s loading faster (as the remainder will appear in the background or on demand). - Economic:
Unused content will not contribute to your server’s bandwidth bills.
GRI
- materials: Medium
- energy: Medium
- water: Medium
- emissions: Medium
Example
- Code:
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
- Browser-level image lazy loading for the web.
Resources
- CSS performance optimization
- Electricity Intensity of Internet Data Transmission
- Fast Load Times: Lazy-load images and video
- Fast Load Times: Optimize your resource delivery
- Flash of unstyled content
- Front-End Performance 2021: Delivery Optimizations
- Islands Architecture
- Lazy loading
- Lazy loading (Performance)
- On the Impact of the Critical CSS Technique on the Performance and Energy Consumption of Mobile Browsers (PDF)
- Web Almanac: Sustainability
- Web performance resources