What Is Lazy Loading And How to Use It to Speed Up Your Site

Many site owners unknowingly slow down their pages by loading too many resources all at once—images, videos, scripts, and more. The common advice? Remove content from your pages.

Not ideal, right?

But what if I told you you could keep your site exactly as it is and make it faster without sacrificing aesthetics?

Enter Lazy Loading—a performance technique that helps you prioritize only the most important parts of your website first and delays others until they're needed.

In this article, I’ll explain exactly what lazy loading is, why it’s a game-changer for website performance, and how you can implement it to make your site faster—without any coding knowledge required.

Apply Lazy Loading automatically with NitroPack →

What is Lazy Loading?

Lazy loading is a performance optimization technique that delays the loading of non-critical resources (such as images, videos, JavaScript, and iframes) until they are needed. Instead of loading everything immediately when a user visits a page, lazy loading prioritizes critical content first and defers secondary resources until the user scrolls to them or interacts with them.

Lazy loading is commonly used for:

• Images: Deferring off-screen images until they are about to be viewed.
• Videos: Loading video content only when a user interacts with a play button.
• Iframes: Postponing the loading of embedded content like YouTube videos, Google Maps, or ads.
• JavaScript & CSS Files: Delaying the loading of non-critical JavaScript and stylesheets until required.
• Fonts: Preventing render-blocking font requests by loading them asynchronously.

Lazy loading works by loading only the visible content when a page initially loads and deferring non-visible elements. It typically functions with JavaScript event listeners, such as IntersectionObserver, which detects when an element enters the viewport and then loads it dynamically.

The process follows these steps:

1. The page loads only essential content (e.g., above-the-fold images, primary scripts, and styles).
2. Non-essential elements stay in a placeholder state (e.g., a blurred or low-resolution image).
3. When the user scrolls down or interacts with a certain part of the page, lazy-loaded elements are triggered to load.
4. The browser fetches and displays the elements only when needed, reducing initial page load time.

Simple example of Lazy Loading

A basic HTML example of lazy loading an image:

With JavaScript:

This script ensures that images only load when they enter the viewport, improving site speed.

Incorrect Implementation of JavaScript Lazy Loading

• Mistake: Using lazy loading techniques that aren’t browser-compatible or relying on outdated event listeners (scroll, resize).
• Impact: Fails on older browsers or requires excessive JavaScript execution.
• Fix: Use native lazy loading (loading="lazy") for modern browsers and IntersectionObserver API for broader compatibility.

Lazy Loading vs Eager Loading: What’s the difference?

Lazy loading and Eager Loading are exact opposites, meaning lazy loading works by prioritizing content in the viewport to speed up a website, whereas eager loading loads all resources as soon as a webpage is requested by a site visitor.

Why use Lazy Loading?

Lazy loading provides multiple advantages:

• Faster page load speed: reduces initial page size, leading to quicker first-time loads and higher performance scores in your Google PageSpeed Insights report.
• Lower bandwidth usage: only load assets when necessary, saving server resources and offloading mobile users on older devices and slower network connections.
• Better user experience: prevents slow, laggy interactions by prioritizing visible content, instantly improving all Core Web Vitals metrics.
• SEO benefits: helps improve Core Web Vitals, leading to higher search rankings and optimized search ad budgets thanks to higher page quality ratings.

How to apply Lazy Loading to improve site speed and performance?

By strategically applying lazy loading to resources like JavaScript, CSS, HTML, images, and videos, websites can perform better by loading only what's necessary and deferring the rest until it's required.

Lazy Loading JavaScript

JavaScript files can be lazy-loaded to improve performance, especially for scripts that are not essential for the initial rendering of the page.

• Defer Non-Critical Scripts: Use the defer or async attribute in the script tag to delay the execution of JavaScript files. The defer attribute ensures the script will execute after the document has been fully parsed.
  

• Code Splitting: Modern JavaScript frameworks like React, Angular, and Vue support code splitting. This allows only the necessary parts of the JavaScript to load initially, and the rest can load on demand (e.g., on user interaction or as the user scrolls down).

Example: Using React.lazy() for dynamic imports:

Good practices:

• Avoid Blocking the Render: Ensure that JavaScript files that aren't critical for the initial render are loaded asynchronously to avoid blocking the DOM from rendering.
• Use IntersectionObserver for Dynamic Script Loading: Load scripts when the user scrolls to the relevant content or interacts with certain elements.

Lazy Loading HTML

Lazy loading HTML involves deferring the loading of heavy or unnecessary HTML content that is not immediately needed on the page. This can help reduce the size of the initial page load.

How to apply:

• Dynamic Content Loading: Use JavaScript (e.g., fetch(), XMLHttpRequest, or AJAX) to load sections of your HTML content after the page has loaded. This is useful for sections like comments, user reviews, or product details that are not essential for the initial page view.

Example:

Good practices:

• Load Heavy Sections Last: Critical content like headers, footers, and main content should be loaded first. Non-essential sections like user reviews, social media feeds, or additional product images should be lazy-loaded.
• Use a Placeholder for Content: While content is loading, use placeholders (like skeleton loaders or loading spinners) to improve the user experience and avoid content jumping as the page loads.

Lazy Loading CSS

CSS files can also be lazy-loaded to improve performance, especially when the style is applied to content that is not immediately visible (e.g., content that will appear later in the page when the user scrolls down).

How to apply:

• Media Queries for Conditional Loading: Use media="print" or other specific media queries to load CSS only when it's needed, for example, only loading print-specific CSS when the user is about to print.

Example:

• Lazy-load CSS for Non-Essential Styles: Use JavaScript to dynamically load non-critical CSS files when required. For example, loading CSS for animations only when the user interacts with a page element that requires animations.

Example:

Good practices:

• Avoid Blocking CSS: Ensure that critical CSS (CSS needed for above-the-fold content) is loaded inline or in the head section, while non-critical styles can be lazy-loaded to improve rendering speed.
• Lazy-load Stylesheets for Interactive Elements: For example, if your site uses special styles only for certain user interactions (like tooltips or dropdowns), you can load the styles for those elements dynamically as needed.

Lazy Loading Images and Video

Lazy loading is commonly applied to images and video content, which are often the largest files on a webpage, and can significantly slow down page load times.

How to apply:

• Images: Use the loading="lazy" attribute in the tag to defer loading of images until they are near the viewport.

Example:

• Videos: Apply lazy loading for videos by using the loading="lazy" attribute for iframe elements or lazy-load videos when the user clicks on a thumbnail or scrolls near the video.

Example:

Alternatively, display a "facade" (image thumbnail) for videos until the user clicks on it.

Example:

Good practices:

• Lazy-load Images for Below-the-Fold Content: For images not visible on initial page load (such as those in long articles or galleries), defer loading until the user scrolls near them.
• Use a Placeholder or LQIP (Low-Quality Image Placeholder): Show a small, blurred version of the image until the full-size image has loaded to avoid layout shifts (CLS).

Automatic Lazy Loading with NitroPack

NitroPack offers automatic lazy loading for a wide range of content types, including images, JavaScript, CSS, and videos. By using NitroPack’s automatic lazy loading, you don’t need to manually implement lazy loading or worry about missing optimization opportunities.

How it works:

• NitroPack automatically detects which content on your website can be lazy-loaded and applies it without any manual configuration. For example, images below the fold are lazy-loaded by default as users scroll down the page.
• The tool also applies best practices for performance optimization, including ensuring that JavaScript, CSS, and other non-essential resources are loaded asynchronously or deferred.

Why use NitroPack’s Lazy Loading?

• Fully Automated Process: NitroPack eliminates the need for manual intervention, automatically optimizing your site for performance without the hassle.
• No Code Required: With NitroPack’s cloud-based solution, you don’t need to implement complex code for lazy loading—just install and let NitroPack handle it.
• Seamless Integration: NitroPack integrates effortlessly with your site, working in tandem with your existing content to reduce load times and improve Core Web Vitals.

Start Lazy Loading automatically and unlock 50+ optimization features with NitroPack →

5 common Lazy Loading mistakes

1. Lazy Loading Above-the-Fold Content

Applying lazy loading to critical content that appears at the top of the page (hero images, logo, key CTA buttons).

• Impact: Lazy loading is designed to delay the loading of content that is not immediately visible on the screen, but if you apply lazy loading to key above-the-fold elements (the visible part of the page when it first loads), it can delay their display. This increases the Largest Contentful Paint (LCP) time, which is a critical metric for Core Web Vitals. As a result, users may experience delays when the main content (like a logo or call-to-action button) is visible, causing frustration and negatively affecting the user experience.
• How to fix: Use preloading instead of lazy loading for images, fonts, and other resources that are part of the initial visible content. Preloading allows the browser to fetch these resources ahead of time, reducing the loading time for above-the-fold elements.

Example:

2. Not Reserving Space for Lazy-Loaded Elements

Not setting explicit width and height attributes for images, iframes, and videos when lazy loading is applied.

• Impact: When an image or video is lazy-loaded without explicitly defined dimensions, the layout may shift unexpectedly as the resource is loaded. This results in Cumulative Layout Shift (CLS), which is another important metric for Core Web Vitals. CLS can cause frustrating visual jank when content moves around on the page, and it can make your site feel unstable.
• How to fix: Always set the width and height attributes for all images, videos, and iframes. This reserves the required space in the layout even before the media is loaded. You can also use CSS aspect-ratio to maintain the correct proportions for responsive layouts.

Example:

3. Lazy Loading Too Many JavaScript and CSS Files

Deferring critical scripts and stylesheets (e.g., those required for page layout, interactions, or animations) that are essential for rendering the page properly.

• Impact: Deferring critical JavaScript and CSS can cause render-blocking issues, where the browser is unable to display the page correctly because it’s waiting for these resources to load. This can lead to issues like FOUC (Flash of Unstyled Content), where the page appears without styles, and broken layouts.
• How to fix: Load critical CSS inline for immediate styling and defer only non-essential scripts that do not affect the initial rendering of the page. Use a Critical CSS tool or process to extract and inline the most essential CSS styles needed to render the above-the-fold content, deferring other stylesheets.

Example:

4. Lazy Loading External Resources Without Optimization

Applying lazy loading to third-party resources like ads, embedded social media feeds, or tracking scripts that are loaded from external servers.

• Impact: Third-party resources can slow down page loading significantly because they rely on external servers that may not be fast or reliable. Lazy loading these resources without proper management can cause delays in loading other content or result in poor user experience if these resources are slow to load or fail to load altogether.
• How to fix: If third-party resources are absolutely necessary, defer loading these resources and ensure they are fetched from a content delivery network (CDN) for better performance. Additionally, consider lazy loading only certain resources (e.g., ads) when they become visible on the page, using IntersectionObserver to trigger the loading process.

Example:

5. Using Lazy Loading on Non-Scrollable Content

Applying lazy loading to content that is always visible on the page, such as elements inside fixed-position containers, navigation bars, or carousels, may never be loaded because they don’t trigger the viewport entry event.

• How to fix: Exclude fixed-position content, like navigation bars or carousels, from lazy loading. These elements are always visible and should be loaded as part of the initial page load to avoid delays in rendering.

Example:

FAQs

What’s the alternative to Lazy Loading?

Instead of lazy loading, you can optimize performance using content delivery networks (CDNs), preloading critical resources, and reducing asset sizes.

Is Lazy Loading bad for SEO?

No—Google supports native lazy loading, but improper implementation (like lazy-loading important content) can negatively affect indexing and ranking.

How do I know if Lazy Loading is working properly?

Use Lighthouse in Chrome DevTools, check Google PageSpeed Insights, or inspect network requests to see if deferred assets are loading only when needed.

How to prevent Lazy Loading?

To disable lazy loading for certain elements:

• Remove the loading="lazy" attribute.
• Use data-no-lazy="true" for scripts that automatically lazy load.