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

What is Image Lazy Loading?

Lazy Load defers the loading of an image that is not needed on the page straight away. When enabled, this setting only loads the images once they are visible in the user's viewport. The remaining images are only loaded as necessary when they scroll into view.

When Lazy Load Images is enabled, a gray box is displayed as a placeholder until an image can be or is loaded.

Why do we use Image Lazy Load?

It reduces loading time and speeds up the website

Lazy loading images reduces page size, allowing for a quicker page load time.

Numerous advantages come with a faster website. You can increase conversions, enhance and enrich the user experience, and make your website much more SEO-friendly.

Improved user experience

No one likes a slow website. In fact, slow websites frequently give users the impression that there is a problem with the device they are using or that the website isn't very good and as such the jobs and experience are not likely to be very good. The user experience can be enhanced by faster loading time. 

Better SEO Experience

Improved page load times are essential to search engine optimization (SEO). One of the main causes of delayed site loading is images, which are frequently penalised by search engines. You must maximise your loading speed if you want to improve the functionality of your website and raise your search engine rankings.

How to exclude an image from lazy loading?

1. Navigate to the page where the image exists and add ?LSCWP_CTRL=before_optm to the end of the URL and press return/enter. You can now right click on the image that you want to exclude and choose copy image address.

2. Now navigate to your website's Wordpress Dashboard and hover over Litespeed Cache and click 

on Page Optimisation.

3. Then click on 'Media Excludes'

4. Then simply paste the URL into the 'Lazy Load Image Excludes' box

5. Then delete the first bit of the URL so it starts with /wp-content

6. Then click 'Save Changes'

7. Finally we need to clear the LiteSpeed Cache by hovering over this icon

8. At the top we need to click 'Purge All - LSCache