Wait, isn’t lazy-loading images the greatest thing since sliced bread?! Yes, it is for the speed-obsessed. So why would you ever want to disable it?
Lazy-loading should only be used for off-screen images that are on your page and not immediately viewable in the screen area before having to scroll down the page.
Looking at our mobile blog example in the picture, we want to exclude the pictures above the pink line from lazy-loading, meaning we want those images to load immediately. Any pictures or video below the line, should wait to load the resources and only when needed so they don’t block the webpage from loading.
Selectively disabling Lazy-Loading on Images
Method 1: WP Rocket Media Settings
Best method for adding your logo, featured image code class, or sidebar bio image, which can’t easily be accessed individually. Go to your top traffic pages and make sure especially on mobile, that any image you see on your device before having to scroll, is on that LazyLoad exclusion list.
- Right Click on the image you want to disable lazy-loading on. In this case, my logo.
- In the pop-up menu, select Open Image in New Tab. This will open up a new browser tab.
- In that new browser tab, you’ll see the Image’s URL. Copy the url.
- Open up WP Rocket’s Settings dashboard.
- Click through to the Media section.
- Paste the URL you previously copied into the box underneath Lazy Load. Notice the format of the URL I’ve entered. From my logo example, my complete URL is https://blogjolt.com/wp-content/uploads/Blog-Jolt-Logo-Header.svg
But, what I’ll enter into this box is only the part that comes after uploads/
Featured Images: To target multiple images that serve a similar function, such as Featured images, is to add their code Class to the box. I’ve compiled a list of popular themes and their Featured Image code classes. If you have the theme, enter the appropriate code class into the box to disable lazy-loading on your featured images on blog posts. Doing this will help with LCP issues in Google.
Theme Featured Image Classes
attachment-large size-large wp-post-image
featured-image attachment-full size-full
Method 2: Adding the skip-lazy class to each image
This is useful when you have your featured images set not to display and instead your first blog post image is usually after an intro paragraph, but still visible in the viewing area before scrolling. This method is especially useful when you can’t target all the images needed by their code information like above, and you’ll have a lot of images to separately adjust. Easier once you get in the habit of using this class, to enter it as you create your blog post.
- Click on the image in your blog post or page that you want to disable lazy-loading on.
- In the Block tab on the right-hand side of the screen, scroll down till you see the Advanced option. Click to open.
- In the field Additional CSS class(es), enter the following:
- Click the Update button when finished to save your changes.