Lazy Loading: what it is and how to exclude an image

This article explains what image lazy loading is, why Refari uses it on the websites we build, and how to stop a specific image from being lazy loaded.

What is image lazy loading?

Lazy loading delays loading an image until it is actually needed. With it switched on, an image only loads once it scrolls into the visitor's view, rather than every image loading the moment the page opens. Until an image loads, a light grey placeholder box is shown in its place.

Why does Refari use lazy loading?

Lazy loading makes your website faster, and a faster site brings a few clear benefits:

• Quicker page loads. Loading fewer images up front reduces the page size, so the page appears more quickly.
• A better visitor experience. A slow website makes visitors doubt the site, and by extension the jobs and the experience on offer. Faster pages keep them engaged.
• Stronger SEO. Search engines take page speed into account when ranking, and often penalise slow-loading pages, so faster image loading helps your site rank.

How to exclude an image from lazy loading

Sometimes you want a particular image, such as a logo or a hero image at the top of the page, to load straight away rather than wait to scroll into view. Here is how to exclude one.

Step 1: Copy the image address

Go to the page where the image appears, add ?LSCWP_CTRL=before_optm to the end of the page URL, and press Enter. Right-click the image you want to exclude and choose Copy image address.

Note: Adding ?LSCWP_CTRL=before_optm to the URL temporarily loads the page with its original image paths, before optimisation, so the address you copy is the one LiteSpeed needs to match.

Step 2: Open Page Optimisation

In your WordPress dashboard, hover over LiteSpeed Cache and click Page Optimisation.

Step 3: Open Media Excludes

Click the Media Excludes tab.

Step 4: Add the image to the Lazy Load Image Excludes box

Paste the image address you copied into the Lazy Load Image Excludes box.

Step 5: Trim the address

Delete the first part of the address so that it starts with /wp-content.

Step 6: Save your changes

Click Save Changes.

Step 7: Clear the LiteSpeed cache

Hover over the LiteSpeed Cache icon in the top admin bar.

Step 8: Purge all cached pages

Click Purge All - LSCache.

Success! The image is now excluded from lazy loading and will load straight away instead of waiting to scroll into view.

Idea: Only exclude images that genuinely need to appear immediately, such as a logo or a hero image at the top of the page. Excluding too many images cancels out the speed benefit that lazy loading gives you.

Final Notes

If you would prefer not to make this change yourself, the Refari team is happy to exclude an image for you. Just let us know the page and the image.

Other articles you might be interested in:  Optimum resolution for job media images and gifs  |  Streamline your website change requests