Skip to main content

How to Defer Offscreen Images

· 5 min read
Oscar Weissnat
Shing Kuo

Defer Offscreen Images

Images are an important part of the Web and image optimization is very critical for Web Performance. However, even the optimized images shoudn't be loaded at the same time as the initial Web Page Load. The offscreen images must be deferred or "Lazyloaded" to boost the page loading.

Let's understand the meaning of an offscreen image and how we can defer them to improve the performance of our Website.

What Qualifies as an Offscreen Image​

An offscreen image refers to any image on a webpage that is not immediately visible to the user when they load the page. These images are typically located "below the fold", which means they are part of the content that a user would need to scroll down to see.

By default, when a webpage loads, the browser requests all images on the page, including those that are not immediately visible. This can lead to slower page load times, especially on image-heavy sites, as images often contribute the most to page size compared to other elements like CSS and JavaScript files.

Why you should Defer an Offscreen Image​

Deferring offscreen images can significantly improve your website's performance. Here are three key reasons why you should consider implementing this technique:

  1. Better Page Speed: By deferring offscreen images, you reduce the initial page payload, allowing the browser to render the visible content much faster.

  2. Resource savings: Deferred images are only processed if the user scrolls down to them. This reduces the total number of bytes delivered on the page for users who bounce immediately or don't scroll down. If your CDN provider charges based on data transfer and HTTP requests, lazy loading can literally save you money.

  3. Better resource utilization: Since some images are never loaded, lazy loading also saves resources like battery and processing time. This technique speeds up the initial page load time and helps utilize resources more efficiently.

How to Defer the Offscreen Images​

There are several ways to defer offscreen images, and the method you choose will depend on your specific needs and the platform you're using. Here are a few common methods:

  1. Native Lazy Loading: This method involves adding a loading="lazy" attribute to the img tag in your HTML markup. This tells the browser to defer loading of the image until it's needed. The downside is that as of now, not all browsers fully support this feature. You can check out the support the Browser Support for Native Lazy Loading on Can I Use.
CAUTION

You should never lazy-load above-the-fold images that are visible during the first paint. This can significantly reduce the performance of the website and may lead to poor LCP and FCP scores.

  1. JavaScript Lazy Loading: This method involves using a JavaScript library like lazysizes. You add a class="lazyload" attribute to your images and change the src attribute to data-src. The library then takes care of loading the images when they're needed. Lazysizes is also SEO-friendly and simple to use.

  2. Intersection Observer API: This method involves using the Intersection Observer API to detect when an image enters the viewport and load it at that time. This method requires more JavaScript knowledge but has wider browser support.

  3. Platform-Specific Methods: Many platforms, like WordPress, Magento, and Shopify, have plugins or extensions that can handle lazy loading for you.

Remember, the goal of deferring offscreen images is to improve your website's performance. So, choose the method that best fits your needs and capabilities. And always test your site after implementing any new performance optimization to ensure it's having the desired effect.

Lazy-Loading Images in Different Platforms​

Different platforms have unique ways to implement lazy loading. Let's explore how to defer offscreen images in several popular platforms:

  1. WordPress: WordPress offers various plugins to handle lazy loading. One such plugin is a3 Lazy Load. It allows you to set up lazy loading within a few clicks, providing SEO-friendly no-script tags, custom loaders, and the capability to lazy load videos. Most WordPress Speed Optimization Plugins already have this feature built-in.

  2. Shopify: In Shopify, you can modify your theme to leverage the lazySizes library. You'll need to download the library, upload it to your theme's /assets folder, and then modify your image tags in the theme to use the library. You can also check out our Shopify Speed Optimization guide.

  3. Drupal: Drupal offers modules that can lazy load images. These modules provide the ability to defer any offscreen images, improving performance. Learn more about Drupal Performance Optimization on this page.

  4. Magento: Magento users can use WeltPixel's lazy loading extension. Once installed and enabled from Magento admin, this extension works out of the box with Magento 2 product pages, search pages, and listing pages.

  5. React: For React-based websites, you can use the npm package 'react-lazy-load-image-component'. This lightweight solution provides a LazyLoadImage component that you can use instead of the regular image component. Alternatively, you can leverage the browser's IntersectionObserver to create your own image lazy-loading solution.

  6. Angular: Angular provides a built-in solution for lazy loading. You can use Angular's router to define lazy-loaded routes. Then, Angular will only load the components associated with those routes when the user navigates to them.

  7. Next.js: Next.js, a React framework, offers a built-in Image component that supports lazy loading. You simply replace your img tags with Next.js's Image component, and it handles the rest. You can learn more about optimizing Next.js Apps here.

  8. Svelte: In Svelte, you can implement lazy loading by using the Intersection Observer API. You create an action that applies the Intersection Observer to an element, and then use that action in your Svelte components.