Academy / Advanced Level: HTML and CSS

Web Performance Optimization

Lazy Loading and Asynchronous Loading

Lazy loading delays the loading of off-screen resources (like images and videos) until they are needed. This reduces initial load time and saves bandwidth for users who may not scroll down to view all content.

Lazy Loading Images:

htmlCopy code<img src="placeholder.jpg" data-src="image.jpg" alt="Lazy load example" loading="lazy">

The loading="lazy" attribute defers the loading of images until they enter the viewport.

Asynchronous Loading for JavaScript:

Load non-essential JavaScript files asynchronously to avoid blocking the initial rendering of the page.

htmlCopy code<script src="script.js" async></script>

Using the async attribute ensures that the script is loaded asynchronously, allowing the page to load faster.