What is lazy load? How to close the lazyload of an image?

WordPress 5.5 is enabled by default Picture lazyLoad Function that allows all pictures to be loaded late when the page is opened. This function is good for web page loading speed, loading time and user experience. Sometimes we need to disable WordPress's lazy load function for some reason.

1、 Introduction to WP lazy loading

No one likes the slow WordPress website, but pictures are the most common media format on the web and indispensable. It is one of the important resources for each page to load, and also takes up a large amount of bandwidth resources. For many WordPress websites, slow page load time is a big problem.

A common user experience problem in modern websites is layout deviation. This problem is caused by the slow loading of media resources such as images. Because the browser can correctly layout the page only after the image is loaded, which causes the content of the web page to move below the image during loading. To avoid Cumulative Layout Shift (CLS) , the page layout will move around before all contents are loaded.

So we thought Optimize WordPress pictures , lazy loading is also called delayed loading, which can only load the display image or iframe when the user scrolls down, greatly reducing the number of HTTP requests and effectively reducing the loading time. It is also a simple solution to reduce critical rendering paths without compromising the user experience.

By forcing the image below the first screen to be loaded only when the user scrolls down, delayed loading is also a simple solution to reduce the critical rendering path without damaging the user experience.

Therefore, WordPress adds loading="lazy" to the labels of the length and width attributes, and the browser uses them to determine the aspect ratio of the image so that the page layout can be inferred before the image is actually loaded. In this way, the overall layout deviation can be reduced and the speed can be increased.

By default, WordPress adds the loading="lazy" attribute to all image labels in the output of the following functions or hooks:

The_content(): image of article content.
The_excerpt(): The article excerpt image.
Widget_text_content: Text widget image.
Get_avatar(): head image.
Wp_get_attachment_image(): an image added as an attachment on WordPress, also called a template image.

Phone delay loading

Delay loading is applicable to mobile devices. Mobile delay loading brings more benefits to users without consuming mobile data to load inaccessible images.

However, image AMP works differently. Amp img uses JavaScript to handle delayed loading. If JS is disabled, it returns to the main image.

2、 Web page benefits from delayed loading

• Bandwidth and resource optimization: it will be displayed only when visitors request it. It can reduce bandwidth usage and reduce resource costs, because media is loaded only when users need it, rather than when a page is opened.
• Reduce initial load time: reduce the weight of the web page and make the page load faster. Visitors can access content faster!
• Better visitor experience: The loading time is very short, improving the user experience and reducing the churn rate.

3、 Why does WordPress delay loading not work?

If the image is not loaded late, it may be because:

• The image is added to the style sheet;
• Add images dynamically using scripts;
• Background image. The background image does not have long and wide tags (the only tag that WordPress delays loading), so lazylaad tags cannot be added.

4、 How to enable delayed loading of WordPress

Common plug-ins that can enable lazyload include:

• Lazy Load by WP Rocket
• A3 Lazy Load
• Smush
• Optimole
• Lazy Loader
• Lazy Load for Videos
• Autoptimize

use Wp rocket plug-in Check to enable lazyload function.

When LazyLoad is enabled, WP Rocket will automatically disable the delayed loading of WordPress native images to avoid possible conflicts.

5、 LazyLoad FAQs

Lazyload may not be 100% compatible with some plug-ins and themes. The following are some conflicts with LazyLoad:

• Use grid layout with fixed positioning/fixed width, such as isotope or masonry;
• Try to calculate the JavaScript of the space according to the size of the image;
• CloudFlare's Rocket Loader. Disabling Rocket Loader can solve the problem;
• IE8 and below browsers do not support Internet Explorer LazyLoad;
• Some background images do not support delayed loading.
• The images added by plug-ins such as Revolution Slider and Envira Gallery will exclude the delayed loading function, which may lead to conflicts.

6、 Close WordPress lazy loading

This function is intended to improve the speed of web page opening, but sometimes it is troublesome to disable the lazy loading function of an image for special needs.

6.1 If you want to disable the WordPress global lazy loading function, you only need one plug-in.

In WordPress background>Plug in, search and enable Disable Lazy Load to disable lazy loading globally. This plug-in does not require any settings.

6.2 Customizing the Lazyload of a picture

However, this function is actually not good for WordPress. More importantly, it only blocks the lazy loading function of a certain image. In addition to code, it requires the help of third-party plug-ins. Taking the wp rocket plug-in as an example, you can use the fields in plug-in settings to exclude images and iframes from LazyLoad:

Check enable for images first, and then fill in the picture name in the box below, one line at a time. In this way, the lazyload function of the specified image can be disabled. Is it simple.

For example, add any form to disable the image lazyload:

 <img src=" http://www.example.org/wp-content/uploads/wp-img-2288-best.jpg " class="attachment-full size-full" data-imgsrc=" http://www.example.org/wp-content/uploads/wp-img-2288-best.jpg " alt="best" title="best"/>

• File name: wp-img-2288-best.jpg
• Class: attachment full size full Exclude all images with these two classes
• Class: attachment full or size full Exclude images with any specific class
• Best: exclude images with best in the file name

6.3 Disabling LazyLoad on Specific Articles and Pages

If you have an article or page that you don't want to delay loading, it's easy to close it.

Open the article or page, and then uncheck the "Image Delay Loading" option in the "Cache Options" metabox on the right. Click the Publish/Update button to save the changes.

If the "LazyLoad for images" option is grayed out, you need to globally activate it in the WP Rocket settings (Background>Settings>WP Rocket>Basic).

6.4 Using Codes to Disable Delayed Loading

Paste the code snippet into the functions.php file of the theme. It is not recommended because it is not friendly to novices and will be overwritten every time the theme is updated (you can easily forget this).

7、 Summary

Lazyload function can effectively delay the loading of pictures, reduce the loading time of WordPress, improve the loading speed, and make the user experience better. Using the wp rocket plug-in is a relatively simple way to implement lazyload, which is recommended.