Lazy loading in WordPress: it's that easy!

Do you know this? You visit a website and the page takes forever to load because dozens of images and videos are loading immediately. The result: you lose patience and click away. This is exactly what happens to your visitors when your WordPress site too slow is. 

But of course there is a solution: lazy loading! This technique speeds up your loading time and ensures that your visitors stay on your site for longer. In this article, I'll show you how to set up lazy loading quickly and easily in WordPress.

What is lazy loading?

Lazy loading is a web development technique in which content (e.g. images, videos or scripts) is only loaded when it is actually needed - for example, when you scroll to the relevant part of the website. The aim is to Optimize the page feed of your WordPress website and improve performance by immediately loading only the content that is in the user's visible area (viewport).

Why should you use lazy loading in WordPress?

Using lazy loading in WordPress offers you many benefits, especially in terms of website performance, user experience and search engine optimization (SEO). Here are the six most important reasons why you should use lazy loading in WordPress:

1. faster loading time
Lazy loading ensures that only the content that is in the visible area of the page is loaded. Images, videos and other media further down the page are only loaded when the user scrolls to them. This significantly reduces the initial loading time, which is particularly important as users often leave pages that take too long to load.

2. better user experience
A shorter loading time and smoother performance ensure a more pleasant user experience. Visitors do not have to wait until all images and videos are fully loaded, but can interact with the visible content immediately. This increases the likelihood that users will stay on the page and engage with the content.

3. less server load
Since not all content is loaded at once, the server load is reduced. This leads to a more efficient use of resources, which is particularly important if you have a lot of visitors on your site. Fewer requests to the server means more stable performance and fewer loading problems with high traffic.

4. less data consumption for mobile users
Lazy loading is a great advantage, especially for users of mobile devices who often have limited data volumes. As only the visible content is loaded immediately, data consumption is minimized. This is particularly relevant if your site contains many large media files such as images or videos.

5. SEO advantages
One effective SEO strategy should include the loading speed of a website. Google considers the loading speed of a website as an important ranking factor. A faster site therefore improves your SEO and can help you appear higher up in the search results. As Google also recognizes lazy loading and indexes the content, there is no risk of content remaining invisible to search engines due to this technique.

6. Simple implementation in WordPress
Lazy loading is relatively easy to implement in WordPress, as many plugins offer this function. 

10 simple methods for lazy loading on WordPress

Lazy loading in WordPress can be implemented in various ways - be it with simple settings, plugins or manual adjustments to the code. Here are some of the best and easiest ways to enable lazy loading on your WordPress website.

1. WordPress core function (from version 5.5) 

Since WordPress 5.5, lazy loading is already integrated as a standard function. You don't have to do anything else - images are only loaded automatically when they come into the visible area of the page. If you are using a current version of WordPress, this is the easiest way to activate lazy loading.

You can check your WordPress version in your WordPress dashboard under "Updates". Before you update the version, you should always run a Create a backup of your WordPress website!

✅ Advantages: Automatically activated from WordPress 5.5

❌ Disadvantages: No to little control over lazy loading, does not work reliably

2. wp rocket plugin 

👑 Top recommendation for lazy loading: Lazy loading can be easily implemented on your website with WP Rocket. Alternatively, you can also use the caching plugin "Accelerate WP", which is available free of charge in every WordPress hosting is included with WPspace.

WP Rocket is one of the best-known caching plugins for WordPress and offers a built-in lazy loading function. The plugin not only loads images and videos as you scroll, but also optimizes overall page performance. Simply install the plugin, activate the lazy loading option - and you'll benefit from faster loading pages.

✅ AdvantagesEasy to configure, compatible with all relevant media types, reliable

❌ DisadvantagesPaid plugin

3. lazy load by WP Rocket  

If you don't need the entire WP Rocket plugin, there is also a free alternative: Lazy Load by WP Rocket. This slim plugin activates lazy loading especially for images, videos and iFrames, without additional settings or complex configuration.

✅ Advantages: Very lean plugin, no unnecessary bloat for your website

❌ DisadvantagesPersonalized settings only possible via funktions.php

4. autoptimize

Autoptimize is another popular performance plugin that supports lazy loading in addition to minimizing scripts and CSS files. It's a good choice if you want to optimize your site for speed and enable lazy loading at the same time.

✅ AdvantagesReliable caching plugin, lazy loading reliable

❌ Disadvantages: Provides many other functions in addition to lazy loading, can therefore clash with other caching plugins

5. smush  

Smush is primarily known for its image compression, but also offers a powerful lazy loading function. The plugin not only compresses your images, but only loads them when they appear in the visible area. This is particularly useful if you have a website with many high-resolution images.

✅ AdvantagesSimple configuration, continuous further development, over 1+ million active installations

❌ Disadvantages: No lazy load possible for videos, specializes in image optimization

6. a3 Lazy Load  

If you are looking for a plugin that is specifically geared towards lazy loading a3 Lazy Load is an excellent choice. It not only supports images and videos, but also embedded content such as iFrames and WooCommerce product images. The settings are easily customizable, and you can specify exactly which content should be loaded with a delay.

✅ AdvantagesLazy load for images, videos, iFrames and gravatars, clearly arranged

❌ DisadvantagesIs updated irregularly

7. litespeed cache  

Litespeed Cache is a comprehensive caching plugin that also offers an integrated lazy loading function. We recommend that you only use the plugin if your website is running on a Litespeed server. You can easily find the lazy loading option in the settings and activate it with a click of the mouse.

✅ Advantages: Fast configuration, over 6+ million active installations

❌ Disadvantages: Litespeed supporting server recommended, plugin only available in English

8. lazy loader plugin

The Lazy Loader Plugin is a minimalist plugin that has been specially developed to activate lazy loading. It does not offer any additional functions, but concentrates exclusively on loading images and iFrames as required. Ideal for a lean solution without superfluous features.

✅ Advantages: In addition to images, videos and iFrames, can also be used for audio elements, compatible with WebP

❌ Disadvantages: No regular updates

9th BJ Lazy Load for beginners

❌ Has not been developed or maintained since 2017. We therefore recommend that you not this plugin!

Often the WordPress plugin BJ Lazy Load is recommended for lazy loading. However, this plugin has not been updated for 7 years. This means that installing and using this plugin brings additional security risks to your website.

❌ DisadvantagesNo more updates and maintenance, therefore no recommendation.

10. manual lazy loading with JavaScript for professionals

Advanced developers also have the option of implementing lazy loading manually. With JavaScript, you can define exactly when and how images are loaded. A popular solution is the `Intersection Observer` API, which checks whether an element is in the view area and then loads it.

✅ Advantages: No additional plugin necessary

❌ DisadvantagesComplex, manual effort

How do I check whether lazy loading really works?

Once you've enabled lazy loading on your WordPress site, you'll want to make sure it's working correctly. Here are five simple ways to check if your images and media are actually loading when they appear in the visible area.

1. use browser developer tools

Almost every modern browser, such as Chrome or Firefox, offers developer tools that allow you to see exactly when and how content is loaded.

• Step 1Open your website in a browser.
• Step 2Right-click on the page and select "Explore" (Chrome, Firefox and Microsoft Edge). This will open the dev tools of the respective browser.
• Step 3Go to the "Network" tab and select "Pictures" or "Media".
  Note💡: The dev tools are often still in English. So select "Network" and "Img" or "Media".
• Step 4: Reload the page and observe when the images and media are loaded. Lazy loaded content only appears when you scroll down.

2. checking the source code

You can check the HTML source code of your page to see if lazy loading is enabled. Many lazy loading techniques add attributes such as <img> or <iframe> the "loading=lazy" added.

• Step 1Right-click on the page and select "Show page source text".
• Step 2: Search for the image tag (<img>) and check whether the attribute loading="lazy" is included.

Here is an example of how this can look in the source code:

3. scroll test

A simple, visual method to check lazy loading is the scroll test. Load your website and observe the images:

• Step 1Load the page and make sure that initially only the images appear in the visible area.
• Step 2Scroll down slowly and observe whether the remaining images are only loaded when they reach the visible area.

4 Google PageSpeed Insights

Tools like Google PageSpeed Insights give you detailed information about the loading speed of your website. If lazy loading is working correctly, the tool should give positive indications of delayed media usage under "Passed tests".

• Step 1Click on Google PageSpeed Insights.
• Step 2Enter the URL of your page and analyze it.
• Step 3In the "Improvements" or "Opportunity" section, you can see whether lazy loading is being used correctly.

5th Lighthouse report in Chrome

You can use the integrated Lighthouse report in Chrome to test lazy loading and get recommendations.

• Step 1Open the developer tools (right-click → "Examine").
• Step 2Select the "Lighthouse" tab.
• Step 3Create a performance report that shows you whether media is loading with a delay and where you have optimization options.

Conclusion: Lazy loading in WordPress

Lazy loading is a powerful function that can significantly improve the loading time and usability of your website. The function is a real performance boost, especially for websites with lots of large images!

There are various options for configuring lazy loading. You can either use a plugin or activate it manually via JavaScript. The easiest way to activate lazy loading is with a plugin. Here we recommend the WordPress plugin WP Rocket - based on our experience, this is the best plugin for caching and lazy loading.

Alternatively, you can also use the "Accelerate WP" plugin, which is included free of charge in all WPspace hosting plans.

In summary, lazy loading is an easy way for beginners and experts to optimize the overall performance of WordPress websites.