Ask any question about Performance here... and get an instant response.
Post this Question & Answer:
What's the best way to defer offscreen images for improved loading speed?
Asked on Apr 06, 2026
Answer
Deferring offscreen images is an effective way to improve loading speed by reducing initial page load times and resource usage. This can be achieved through lazy loading, which delays the loading of images until they are about to enter the viewport.
<!-- BEGIN COPY / PASTE -->
<img src="image.jpg" alt="Description" loading="lazy">
<!-- END COPY / PASTE -->Additional Comment:
- Lazy loading is supported natively in modern browsers using the "loading" attribute set to "lazy".
- This technique helps improve the Largest Contentful Paint (LCP) by prioritizing above-the-fold content.
- Ensure that critical images, like hero images, are not lazy-loaded to avoid delays in rendering key visuals.
- Consider using a JavaScript library for older browsers that do not support native lazy loading.
Recommended Links:
