3.8 Defer the loading of non-critical resources
Avoid render-blocking slowdowns by asynchronously loading, deferring, or prioritizing external resources as appropriate.
Criteria
- Asynchronous code: Machine-testable
Defer loading of non-essential external assets or set these to load asynchronously to avoid a Flash Of Unstyled Content (FOUC).- 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
- Optimized loading: Machine-testable
Where external resources are required to be used upon the documents load, optimize loading using resource and priority hints.- Assist the browser with resource hints
- Browser-level image lazy loading for the web
- 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
Benefits
- Economic
If data is not loaded unless needed, you will reduce your server’s bandwidth use. - Environment
Lazy loading videos and images so that they are only loaded once required by the user. This reduces transferred data and the required processing power. - Performance
Allowing text to render first make the user feel that everything is loading faster while, as the remaining content loads in the background or on demand.
GRI
- Materials: Medium
- Energy: Medium
- Water: Medium
- Emissions: Medium