Fix Defer Offscreen Images in WordPress with Lazy Loading

Most content websites are filled with large volume of multimedia content, be it graphics, images or videos. While these types of content provide excellent aesthetic appeal and a unique form of information delivery, the downside is that they take up quite a lot of weight on your webpage. This in turns result in a large number of resources that the end-user must download and render before they can access them. Unfortunately, this includes files that are not initially visible on the screen. This is where Lazy Loading comes into play to load the media only when needed. In this article, we will explore how to fix Google PageSpeed Insights tool suggestions like defer offscreen Images in WordPress using lazy loading technique.

What is Lazy Loading Technique?

There are two parts on your webpage when any users opens it:

• Above the fold or ATF – this is the area visible on the screen which crawlers like Googlebot show you in the Google PageSpeed Insights screenshots. Remember, above the fold area will be different in mobile and desktop devices. This is the reason you will get different mobile and desktop speed scores.
• Below the fold – this is the area on your webpage not visible with initial loading.

The entire WordPress optimization is all about optimizing the files loaded during the above the fold area. Whether it is removing render blocking resources, removing unused CSS/JS or reducing total blocking time, it’s all about optimizing the resources needed for fast loading of a page’s above the fold content. Lazy loading is one such optimization process to initially load the media files visible only on above the fold. However, unless other techniques it does not stop there. Lazy loading also delays all media files on the page including those on below the fold area and render them only when user scroll to that position in the webpage. This will drastically improve your site speed and loading times thus leading to a better user experience.

Lazy Loading is a content loading feature that ensures your website loads the media content only up to the section of the page that has been scrolled down to, thereby improving website performance and page load time.

Checking Errors in Google PageSpeed Insights Tool

Google PageSpeed Insights (PSI) is one of the most popular tools for webmasters to measure speed of their websites. Since page experience and speed are part of the ranking signal, it is necessary for all site owners to measure their site’s speed and take necessary action if required. Below is an example of “Defer offscreen images” opportunity message showing in Google PSI tool.

If you filter the results with FCP, TBT, LCP and CLS, you will be surprised to see that defer offscreen images is not part of any of these groups. However, fixing the problem will improve your speed score considerably though you will see a message that the opportunities will not affect the performance score directly.

When Do You Need Lazy Loading?

Many users in WordPress simply enable lazy loading using a plugin for all media files. As mentioned above, you need to lazy load only below the fold images and not the media files required to load on above the fold during initial loading. Here are some of the examples that you need lazy loading:

• Gravatar images showing in comments and author bio box.
• Related post or any other thumbnails loading off the screen.
• Iframe content, gallery and slider images available below the fold.
• Large infographic images and YouTube video preview images not visible to users on initial load.

As you see, you need lazy loading not only for image files but also for iframe content and videos. Being said that there are some cases you need to exclude from lazy loading to avoid seeing another issue in Google PSI tool.

• Logo image on desktop and mobile which is loaded in above the fold area.
• Small icons and SVG images used in header navigation menu.
• Any other smaller images that is loaded in the header section of your webpage.

However, there is one exception to this logic – largest contentful paint image. Lat’s say, you have a background image in the header section which is very large in size like 1MB. You need to defer this background image from loading though it is on the visible area to avoid seeing “Largest Contentful Paint image was not lazily loaded” warning in Google PSI tool.

Note: Sometimes, you may purposely want to exclude an important image in below fold that you want the users to see without waiting for lazy loading. In addition, bigger problem due to defer offscreen images come due to third-party resources. We will explain this at the end of this article after explaining lazy loading of your own site’s media file.

Lazy Loading in WordPress

So, now that we know what Lazy Loading is and why it’s necessary, it’s time to understand how you can implement in your WordPress site. There are few ways to do this, and in this tutorial, we will go over a couple of different plugins that will help you get there. Note that some plugins have lazy loading exclusion option while many plugins do not offer this feature. As mentioned above, if you have text logo and no other images on above the fold area, we recommend using simple plugins without any exclusion option. Otherwise, you need to try a plugin that offers excluding list of images from lazy loading.

1. Lazy Load Plugin by WP Rocket

This plugin is hands down the best available and has over 100K+ active installations to date. It is developed by WP Rocket, quite easily the best WordPress web performance plugin out there. Through this plugin, you’ll be able not just to optimize your images but also replace YouTube iframe with a preview thumbnail. This will reduce page weight further and improve page load speed in the process.

Since this is a free plugin available in WordPress repository, you can install it from WordPress admin dashboard by navigating to “Plugins > Add New” section. Simply enter “Lazy Load” in the search box and find the plugin developed by WP Rocket.

Install and then activate the plugin by first clicking on the “Install Now” button and then the “Activate” button after that. Go to “Settings > Lazy Load” menu to access the plugin’s settings page. Click on the checkboxes to apply lazy loading for images, iframes & videos and replace YouTube videos with thumbnails.

Click on the “Save Changes” button at the bottom left of the page before exiting. That’s all and the plugin will do the rest for you. The plugin will now display images, iframes and videos on a page only when they are visible to the end-user, resulting in less bandwidth usage and faster load times. Though Lazy Load plugin is simple to use with few clicks it does not offer exclusion feature. You may need the complete WP Rocket premium plugin for this including caching capabilities to improve your website’s overall SEO health. If you are using WP Rocket, go to “Media” section and enable lazy loading for images, iframes and YouTube image previews.

If you already have a caching plugin and want to try another performance optimization plugin then Perfmatters is the perfect choice. It also offers lazy loading with few clicks to enable for images, YouTube preview thumbnail, iframes and videos. You can enable these options under “Options > Lazy Loading” section of the plugin.

2. Lazy Loading with Smush Plugin

Here is another plugin that can work wonders for your content lazy loading needs. The Smush plugin may be more famed for its image compression and optimization capabilities, but the plugin also offers lazy Loading, among other things. The plugin has over a million installations and is one of the best SEO-focused plugins for WordPress. First, find and install the plugin from free WordPress repository.

Enable Lazy Loading with Smush

After activating the plugin, you will see a setup wizard taking you through all the features. You can enable lazy loading from the setup wizard or skip this step for the time being.

Go to the Smush plugin control panel by clicking on the “Smush > Lazy Load” menu item in your WordPress admin dashboard panel.

If you did not activate from the setup wizard, here you can activate the lazy loading function and you will now be able to make custom changes to your website’s lazy loading configuration. Unlike Lazy Load by WP Rocket plugin, you can select the media types and media outputs with Smush plugin. By default, all media types (like .png, .jpeg, etc.) and all media outputs such as content, widgets, thumbnails and Gravatars will be enabled for lazy loading. If you have any specific preferences, deselect the option which you do not want to apply lazy loading.

Next comes the cool part; you can choose how you would like loading images to be shown and what animation type to show. The different options offered by the plugin are:

• Fade In: This feature will show the image after a delayed time once loaded.
• Spinner: A spinner animation will be shown where the image will be lazy Loading. You can use one of the preset spinner Gifs or upload your one, such as your company logo.
• Placeholder: As the name suggests, you can also display a placeholder image instead of the actual content while being lazy-loaded. Same as before, you can use one from the provided templates or upload your own.
• None: Nothing fancy will be applied here, and the images will show up as soon as they are loaded.

Exclusion and Other Smush Settings

As mentioned, you need to have lazy loading exclusions to exclude specific items and Smush offers many options that even premium plugins do not offer. You have options to exclude based on post type, page/post URLs and CSS class/IDs.

• This will be super useful to exclude all archives or only frontpage by turning off those options.
• Some page content like portfolio page with filters may not work properly with lazy loading. You can simply enter the page URL and exclude it from lazy loading.
• Finally for items like your logo and header images, you can use the corresponding CSS class or ID and exclude from lazy loading.

Apart from the aforementioned configuration options, you can also change where to load the script, enable support for native browser loading and disable Noscript during lazy Loading. Generally, you can use footer location for scripts and disable native and noscript options.

After updating the settings, click on “Save Changes” at the bottom right of the page to apply the lazy loading settings that you’ve just selected.

Note: Browsers like Google Chrome offers native lazy loading feature. However, enabling this in Smush plugin will fail to fix “Defer offscreen images” problem in Google PSI. You can also see this warning below the option in the plugin settings.

3. Using SiteGround Optimizer

This plugin in our list is only for SiteGround hosting users. Since SiteGround Optimizer plugin has more than 1 million active users, we will cover this for SiteGround users.

• SG Optimizer comes by default with all WordPress installations in SiteGround. Therefore, you will have this plugin pre-installed and do not need to install again.
• Go to “SG Optimizer” menu and navigate to “Media” section.
• Scroll down to “Media Optimization” section and enable “Lazy Load Media” option.
• You also exclude CSS classes and media types under this section.

Unfortunately, lazy loading in SiteGround Optimizer will not work when you host media files from subdomain. This will create Cross-Origin Resource Sharing (CORS) violation and block the assets from the plugin and you will see blank spaces instead of your images. Therefore, make sure to purge your cache and test your images are working fine after enabling lazy loading feature with SiteGround Optimizer plugin.

4. Lazy Loading with Jetpack

More than 5 million users use Jetpack for improving security, backup and optimization of their WordPress sites. If you use Jetpack, go to “Jetpack > Settings” section and enable lazy loading for images option under “Performance” section.

5. Other Free Caching Plugins

Almost every optimization and caching plugins out there offers lazy loading feature as it is important to get high page speed score in Google PageSpeed Insights. Here we will mention two most popular free caching plugins for WordPress.

• W3 Total Cache – you can go to “Lazy Load” section under “Setup Guide” to enable lazy load option.

• Autoptimze – go to “Images” tab and enable lazy loading option.

Testing Lazy Loading is Working on Your Site

There are two ways you can test if the lazy loading is successfully working on your site. First option is to test your site in Google PSI and confirm “Defer offscreen images” is showing under “Passed Audits” section.

The next option is to check the page source of your page. You can find the lazy loading script from the plugin you use. In addition, check the images are included with lazy loading CSS class. Below is the example from WP Rocket plugin showing the image includes “rocket-lazy-load” CSS class and “data-lazy-src” parameter.

Lazy Loading Third-Party Content

You will see lazy loading related issues in Google PSI when using images and embedding videos from third-party services. Generally, you will see “Lazy load third-party resources with facades” under passed audits section. But you will find the typical “Defer offscreen images” test fails when using third-party embeds like YouTube videos or banner advertisements.

• As explained above, you can replace the embedded YouTube videos with a static preview image. You can then lazy load this preview image to overcome the problem in Google PSI tool.
• Unfortunately, you can’t do much in cases like banner images from Google AdSense advertisement programs. Since these ads are loaded dynamically, it will change on each page load and there are no fixed way to avoid Google PSI warnings. However, there are some WordPress themes that helps to use lazy loading and dynamically load the ads. Below is the theme options page from Breek minimalist theme where you can see the lazy loading option for Google AdSense ads. As you can in the text, the theme asks you to remove the ad push in the default ad code and will dynamically push when user reaches the position on the page. We do not recommend using this type of feature as it can affect your earnings and also may not work properly (at any case, you can’t use this other than AdSense)

Final Words

Applying Lazy Loading is not tricky or complex, and by following this article, you can also do it in no time. Make sure to select the best plugin that is suitable in your case and works best for you. However, remember that lazy loading needs a script to be included by the plugin at the footer section of the page. Sometimes, this script may be blocked and your images will not load as mentioned above with SiteGround Optimizer. Therefore, after enabling lazy loading feature test your pages thoroughly in different browsers, especially pages with heavy inline JavaScript.