Render blocking should be resolved
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).
Resources
- Fast Load Times: Optimize your resource delivery
- Flash of unstyled content
- Front-End Performance 2021: Delivery Optimizations
- Islands Architecture
- Optimizing The Critical Rendering Path
- Tight Mode: Why Browsers Produce Different Performance Results
- Web Almanac: Sustainability
- Web performance resources
Criteria: Priority loading
If external resources are required on load, their priorities (delivery route) are set correctly.
Resources
- Assist the browser with resource hints
- Browser Resource Hints
- CSS performance optimization
- Electricity Intensity of Internet Data Transmission
- Fast Load Times: Lazy-load images and video
- Fast Load Times: Optimize your resource delivery
- Front-End Performance 2021: Delivery Optimizations
- Get All That Network Activity Under Control with Priority Hints
- Lazy load third-party resources with facades
- Lazy loading
- Lazy loading (Performance)
- On the Impact of the Critical CSS Technique on the Performance and Energy Consumption of Mobile Browsers (PDF)
- Optimizing The Critical Rendering Path
- Tight Mode: Why Browsers Produce Different Performance Results
- Web Almanac: Sustainability
- Web performance resources
Impact: Medium, Effort: Low
| GRI | Impact |
|---|---|
| materials | Medium |
| energy | Medium |
| water | Medium |
| emissions | Medium |
Benefits of this guideline
- Environment: 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.
Example
-
code
-
contentBrowser-level image lazy loading for the web.
Tags:
- Assets
- CSS
- JavaScript
- Performance