Lazy Loading in WordPress: Load images only when they are needed

Lazy Loading in WordPress: Load images only when they are needed

Lazy loading is one of the most important techniques for making image-heavy WordPress websites faster. Long blog articles, guides, portfolios, galleries, product pages or landing pages in particular often contain many images. Without optimization, the browser would have to load a large number of files at the same time when the page is first opened, even if visitors cannot yet see those images.

This is exactly where lazy loading comes in. Images, videos or embedded content are not fully loaded immediately, but only when they approach the visible area of the browser. This allows the upper part of the page to appear faster, reduces data usage and makes the website feel much more responsive for visitors.

Why lazy loading is so important

Imagine a long post with 20 images. Without lazy loading, the browser tries to download all images as soon as the page loads. This can significantly increase loading time, especially on mobile devices or slower internet connections.

With lazy loading, only the content that is important for the visible area is loaded first. Images further down the page are loaded later as soon as the visitor scrolls. This reduces the initial load on the page.

Typical advantages of lazy loading are:

• faster initial page load: Fewer files need to be loaded immediately.
• lower data usage: Images that are not viewed may not be loaded at all.
• better mobile user experience: Especially important for mobile connections.
• less browser load: The browser does not have to process all media immediately.
• potentially better performance scores: Especially on image-heavy pages.

How lazy loading works technically

With lazy loading, the browser or a script decides which images are loaded immediately and which ones follow later. Modern browsers support the native HTML attribute loading="lazy" for this purpose.

A simple example:

<img src="beispielbild.webp" alt="Example image in a WordPress post" loading="lazy">

This attribute tells the browser that the image may be loaded later. The browser then decides for itself when the right time to load it is.

There are also JavaScript-based lazy loading solutions. These are often used by performance plugins to optimize content that is not fully covered by native browser lazy loading.

Lazy loading in WordPress since version 5.5

Since WordPress 5.5, lazy loading for images has generally been included in the WordPress core. WordPress automatically adds the loading="lazy" attribute to suitable images. This means many websites already benefit from basic optimization without an additional plugin. 

However, this does not mean that every lazy loading plugin is unnecessary. The basic WordPress function mainly focuses on normal images in the content. Depending on their feature set, advanced plugins can additionally lazy load iframes, videos, background images, sliders, WooCommerce images or embedded content.

What should not be lazy loaded?

Lazy loading is very useful, but it is not suitable for every image. The largest visible image in the upper area of the page is particularly important. This could be, for example, a hero image, a large featured image or an important product image.

If this most important image is loaded with a delay, the page load can actually become worse. The browser then loads a central element too late, which can negatively affect Largest Contentful Paint, or LCP for short.

As a rule, the following should not be lazy loaded:

• hero images in the upper area,
• the most important featured image above the visible area,
• logos in the header,
• important product images directly at page start,
• visible slider images in the first viewport.

Above the fold: the visible area matters first

The term above the fold describes the area of a website that visitors see without scrolling. This area is especially important because it shapes the first impression. If the headline, introduction, main image and navigation appear quickly, the website feels faster and more professional.

Lazy loading helps prioritize the visible area. Content further down is deferred so that the browser uses its resources first for what visitors see immediately.

For good performance, you should therefore:

• not unnecessarily delay the most important image in the upper area,
• lazy load lower images,
• optimize large background images,
• avoid unnecessary sliders,
• keep CSS and JavaScript lean,
• specify image dimensions correctly.

Lazy loading and Core Web Vitals

Lazy loading can have a positive effect on loading time and user experience. Google’s Core Web Vitals are particularly relevant here. However, the correct classification is important: the previously often mentioned metric First Input Delay, or FID for short, was replaced in March 2024 by Interaction to Next Paint, or INP for short, as the Core Web Vitals metric for responsiveness. 

Lazy loading mainly affects how quickly visible content is loaded and how much the browser is burdened at page start. It can therefore indirectly help improve the user experience. However, several factors are crucial for good Core Web Vitals scores:

• LCP: The most important visible element should appear quickly.
• CLS: The layout should not shift during loading.
• INP: The page should also respond quickly to interactions.
• Server response time: Hosting should respond quickly and reliably.
• JavaScript: Too much JavaScript can delay interactions.

Lazy loading is therefore an important building block, but not a standalone solution for all performance problems.

Lazy loading for images

Images are the most common use case for lazy loading. Especially with long posts, galleries or product lists, the effect can be clearly noticeable. WordPress already handles a lot of this automatically, provided images are inserted correctly via the media library and the editor.

For lazy loading to work well, images should also be optimized:

• use suitable image dimensions,
• compress file size,
• check WebP or other modern formats,
• maintain alt texts properly,
• ensure width and height are output correctly,
• do not embed unnecessarily large original images.

Lazy loading does not replace image optimization. An image that is far too large remains far too large, even if it is loaded later.

Lazy loading for YouTube, Vimeo and iframes

Embedded videos from YouTube, Vimeo or other platforms can strongly affect loading time. External scripts, preview images, tracking components and player files are often already loaded when the page is opened, even though the visitor has not started the video yet.

Many performance plugins therefore offer special lazy loading for iframes or videos. A particularly effective method is to replace the embedded player with a preview image. The actual video player is only loaded when the visitor actively clicks.

This can bring major advantages, especially on pages with several embedded videos.

Lazy loading for background images

Background images are often embedded via CSS. This applies, for example, to hero areas, design sections, tiles or page builder sections. Native browser lazy loading functions do not always automatically apply to such CSS background images.

Some performance plugins can also lazy load background images. Whether this makes sense depends on where they are used. Background images in the upper visible area should not be delayed. Background images further down the page, however, can be good candidates for lazy loading.

Plugins for advanced lazy loading

If the basic WordPress function is not sufficient, performance plugins can offer additional options. Well-known solutions include WP Rocket, Autoptimize, LiteSpeed Cache or other optimization plugins. Which solution is best depends on your hosting, theme, cache system and the plugins you use.

Depending on their feature set, advanced lazy loading plugins can:

• lazy load images,
• lazy load iframes,
• replace YouTube videos with preview images,
• optimize background images,
• define exceptions for specific images,
• adjust thresholds or loading distances,
• improve lazy loading for sliders or galleries.

Make sure not to activate several plugins with similar lazy loading functions at the same time. Duplicate optimization can cause images not to appear or to be loaded too late.

Testing lazy loading

After activating or adjusting lazy loading, you should test your website. Check not only the homepage, but also blog articles, product pages, galleries, landing pages and mobile views.

You can check lazy loading using the browser developer tools, among other things:

1. Open your website in the browser.
2. Open the developer tools with F12 or by right-clicking and selecting Inspect.
3. Switch to the Network section.
4. Reload the page.
5. Observe when images are loaded.
6. Scroll down slowly and check whether additional images are loaded later.

You can also use tools such as PageSpeed Insights, Lighthouse or WebPageTest to check loading time and Core Web Vitals recommendations.

Typical lazy loading mistakes

Lazy loading is easy to activate, but it is not always automatically configured perfectly. Common mistakes include:

• Hero image is lazy loaded: The most important image appears too late.
• Duplicate lazy loading systems: WordPress, theme and plugin work against each other at the same time.
• Slider problems: Sliders load images incorrectly or with a delay.
• Background images are missing: CSS images are not handled correctly.
• Layout shifts: Image dimensions are missing and cause shifts.
• Videos still load immediately: Iframes are not optimized.
• Mobile view is not checked: Problems only become visible on smartphones.

If images are missing after optimization, appear with a delay or the layout shifts, you should check lazy loading settings, cache and theme compatibility.

Lazy loading and mobile visitors

Mobile visitors benefit particularly strongly from lazy loading. Smartphones often have fast hardware today, but mobile connections are not always stable. Every unnecessarily loaded file costs time, data volume and energy.

For mobile performance, the following are particularly important:

• small image files,
• correct responsive image sizes,
• lazy loading for images further down,
• few external scripts,
• no unnecessary loading of videos,
• fast hosting and good caching.

Especially for long articles with many images, lazy loading can make the difference between a sluggish page and a pleasantly usable mobile page.

SEO and lazy loading

Lazy loading can indirectly support SEO because it can improve loading times, user experience and technical quality. Search engines do not generally prefer one specific lazy loading method. What matters is that important content is visible, accessible and correctly present in the HTML.

From an SEO perspective, you should ensure that:

• important images are correctly embedded in the HTML,
• alt texts are available,
• images are not hidden from search engines by faulty JavaScript,
• the visible area loads quickly,
• Core Web Vitals issues are checked regularly,
• important content does not only become visible through problematic user actions.

GEO: Why lazy loading is also relevant for modern search systems

GEO, or Generative Engine Optimization, primarily concerns the discoverability and understandability of content for AI-supported search systems. A technically clean website supports this process because content should be reliably accessible and quickly usable.

Lazy loading can help ensure that extensive content with many images is still delivered quickly and reliably. However, it is important that images, alt texts and content remain semantically cleanly embedded. A fast website alone is not enough. The content must still be understandable, structured and fully accessible.

Recommended approach

1. Check WordPress version: Modern WordPress versions already include lazy loading for images.
2. Test the website: Check which images are loaded immediately and which follow later.
3. Exclude hero image: The most important upper image should not be delayed.
4. Optimize images: Improve file size, dimensions and format.
5. Check iframes: Lazy load YouTube, Vimeo and external embeds if necessary.
6. Use only one system: Avoid several competing lazy loading functions.
7. Test mobile view: Check especially on smartphones and tablets.
8. Measure Core Web Vitals: Use PageSpeed Insights or Lighthouse for monitoring.

Frequently asked questions about lazy loading in WordPress

What is lazy loading?

Lazy loading means that images, videos or iframes are only loaded when they are needed. Content further down the page is therefore not loaded immediately when the page is first opened.

Does WordPress already have lazy loading built in?

Yes. Since WordPress 5.5, WordPress has added native lazy loading by default to suitable images using the loading="lazy" attribute. 

Do I still need a lazy loading plugin?

That depends on your website. For simple content, the basic WordPress function is often sufficient. For iframes, videos, background images, sliders or special optimizations, a performance plugin can be useful.

Should the first large image be lazy loaded?

As a rule, no. The most important visible image in the upper area should be loaded quickly so that the page load is not delayed.

Does lazy loading automatically improve my Google rankings?

Not automatically. Lazy loading can improve loading time and user experience. This can indirectly contribute to technical quality, but it does not replace good content, a clean structure and further performance optimizations.

Can lazy loading cause problems?

Yes, if it is configured incorrectly. Typical problems include missing images, hero images that load too late, layout shifts or conflicts between several optimization plugins.

What is the difference between FID and INP?

FID used to be a Core Web Vitals metric for the first input delay. Since March 2024, FID has been replaced by INP, which assesses the responsiveness of a page more comprehensively.