Lazy Loading: What It Is and How to Enable It on Your Website

Introduction

Lazy loading (deferred loading) is a technique that delays loading images and videos until the user scrolls and sees them. This way, the visible part of the website loads much faster because not all elements are downloaded at once.

It’s one of the optimizations with the most impact on the perception of speed, especially on websites with many images. In this article you’ll see what it is, what it’s for, and how to enable it.

What lazy loading is (in plain words)

Imagine a newspaper page with 30 photos. Without lazy loading, the browser tries to download all 30 photos at once as soon as you enter, even though you only see the first 3. The result: the website takes a long time to load because it’s downloading photos you can’t see.

With lazy loading, the browser only downloads the photos in view. The rest are downloaded as you scroll. This way, the initial page loads much faster.

[Imagen sugerida: visual comparison of loading with and without lazy loading]

The visible part of the website (what the user sees first) loads much earlier. The speed sensation is immediate.

Why use lazy loading

• Faster initial load. Only what’s visible is downloaded.
• Less data consumption on mobile. The mobile user doesn’t download images they won’t see.
• Less server load. If the user doesn’t scroll, not all images are downloaded.
• Better LCP (Core Web Vitals). By prioritizing the main image, LCP improves.
• Better SEO. Google recommends lazy loading.

How to enable lazy loading in WordPress

WordPress already includes it

Since version 5.5 (released in 2020), WordPress enables lazy loading on all images by default. You don’t have to do anything.

If you use a recent WordPress version, you already have lazy loading. You can confirm it by seeing your images have the loading="lazy" attribute in the source code.

With LiteSpeed Cache (recommended)

If your host uses LiteSpeed (like miHosting plans), the LiteSpeed Cache plugin gives you control over lazy loading:

1. Go to LiteSpeed Cache → Page Optimization → Media Settings.
2. Enable Lazy Load Images.
3. (Optional) Enable Lazy Load Iframes for YouTube and similar videos.
4. Save and clear the cache.

[Imagen sugerida: screenshot of lazy load configuration in LiteSpeed Cache]

With other plugins

If you don’t use LiteSpeed Cache, other plugins that add advanced lazy loading:

• WP Rocket: includes lazy loading in its configuration.
• Smush: in addition to optimizing images, includes lazy loading.
• Lazy Load by WP Rocket: free plugin specifically for this.

How to enable lazy loading in HTML (without WordPress)

If your website isn’t WordPress, you can enable lazy loading by adding the loading="lazy" attribute to your images:

<img src="photo.jpg" alt="My photo" loading="lazy" width="800" height="600">

Always remember to include width and height to avoid page jumps (improves Core Web Vitals CLS).

For videos and iframes

Similarly, add loading="lazy":

<iframe src="https://youtube.com/..." loading="lazy"></iframe>

Compatibility: the loading="lazy" attribute is compatible with all modern browsers (Chrome, Firefox, Safari, Edge). In old browsers it’s simply ignored and the image loads normally.

Which elements should and shouldn’t have lazy loading

Yes: lazy loading

• Images that appear below the fold (out of initial view).
• Embedded videos (YouTube, Vimeo).
• Iframes.
• CSS image backgrounds (with plugins).

No: without lazy loading

• The main image (the one that appears right when entering). This image contributes to LCP, and if you delay it, you hurt the metric.
• Logos and headers always visible.
• Images above the fold.

A common mistake is applying lazy loading to the main image on each page. This worsens LCP. Images visible on load should load immediately.

Useful tips

• Don’t apply lazy loading to the main image. It’s counterproductive.
• Use placeholders. If an image takes time to load when scrolling, leave a gap or background image so there are no jumps.
• Combine with image optimization. Lazy loading delays loading; optimization reduces weight. The two together are perfect.
• Don’t overuse on websites with little scroll. If your website has all content visible at once, lazy loading barely contributes.
• Test on mobile. Lazy loading’s benefit is greater on slow connections.

Common problems

Images don’t appear when scrolling

It may be a conflict with JavaScript or a poorly built theme. Try another lazy loading plugin or disable it for those specific images.

LCP worsens after enabling lazy loading

You applied lazy loading to the main image. Exclude it from lazy loading.

Google Search Console warns about missing images

Some tools and old search engines don’t execute lazy loading. If it’s critical for image SEO, make sure important images don’t have lazy loading.

Embedded YouTube videos keep loading even though they’re down the page

YouTube iframes don’t use lazy loading by default. You need to specifically enable iframe lazy load (done by LiteSpeed Cache or WP Rocket).

I don’t know which images to exclude

The rule is simple: exclude the first visible image on each page. The rest can have lazy loading.

Frequently asked questions

Does lazy loading affect SEO?

No, quite the opposite. Google recommends it. The only thing: make sure not to apply it to the main image to not hurt LCP.

Does WordPress already have lazy loading?

Yes, since version 5.5. Images have it by default.

Can I use lazy loading with a cache plugin?

Yes, they’re compatible. LiteSpeed Cache, WP Rocket and similar include lazy loading in their configuration.

Does lazy loading work in all browsers?

In modern ones yes. In old ones it’s ignored and images load normally, without anything failing.

Do I need lazy loading if my website has few images?

It will barely be noticeable. Its greatest impact is on websites with many images (blogs, online stores, newspapers).

Load what matters first

Lazy loading is one of those techniques that provides a lot with little effort: it reduces initial load time and prioritizes what the user sees first. If you have a website with images or videos, you should use it.

If you have a host with LiteSpeed like miHosting’s, configuring lazy loading is very easy: the LiteSpeed Cache plugin enables it in a couple of clicks and with advanced options. Open a ticket from your client panel if you need help configuring it.