Lazy Loading

Definition 1: Lazy loading means waiting to render content on a webpage until the user or the browser needs it. Lazy loading can help speed up webpage load times. Performance for Developers.

Resources above the fold will show because they're supposed to, but images further down won't load until the user scrolls down to where they're located on the page.

Definition 2: {According to mdn} Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path , which translates into reduced page load times.

Lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation. The loading attribute on an <img\> element, or the loading attribute on an <iframe\> can be used to instruct the browser to defer loading of images/iframes that are off-screen until the user scrolls near them.

You can determine if a given image has finished loading by examining the value of its Boolean complete property.

Testing application Performance with Network Browser API:

1. Use the DevTools Network Tab:

   • Open your browser's developer tools and navigate to the "Network" tab.

   • Perform typical user interactions in your application while monitoring the network requests.

2. Analyze Network Requests:

   • Examine the list of network requests to identify unnecessary or slow-loading resources.

   • Look for large images, unnecessary scripts, or external dependencies causing delays.

3. Check Load Times:

   • Observe the load times for each resource. Pay attention to the "Waterfall" chart, which visualizes the timing of each request.

   • Identify long-running tasks and delays between resource loading.

4. Inspect Size and Compression:

   • Check the size of resources, especially images, scripts, and stylesheets. Use compression techniques (e.g., gzip) to reduce file sizes.

   • Optimize images by compressing them and using modern image formats like WebP.

5. Minimize HTTP Requests:

   • Reduce the number of HTTP requests by combining CSS and JavaScript files.

   • Use CSS sprites for small images or consider using inline data URIs for small images.

6. Leverage Browser Caching:

   • Set appropriate cache headers to enable browser caching for static resources.

   • Ensure that resources are cached and served from the cache when appropriate.

7. Asynchronous Loading:

   • Load non-essential scripts asynchronously to prevent blocking the rendering of the page.

   • Use the async or defer attribute for script tags when possible.

Depending on programming language being used, several libraries in package managers support/are build for lazy loading.

Benefits of lazy loading:

• Faster website load times

• Reduced bandwidth usage

• Improved user experience

• Better SEO performance