Lazy Loading Question

Ismael,

This is a wordpress/theme topic.

Check this out: https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/#highlighter_892127

Copying certain interesting paragraphs:
By default, WordPress will add loading=”lazy” to all img tags that have width and height attributes present. Technically this is handled on page output, similar to how responsive images are facilitated in WordPress by adding srcset and sizes attributes. To improve server-side performance of the two features, a new wp_filter_content_tags() function has been introduced so that img tags only need to be parsed once while then deferring the modifications to more specific functions related to the feature.

By default, WordPress will add a loading=”lazy” attribute to the following images:

images within post content (the_content)
images within post excerpts (the_excerpt)
images within text widgets (widget_text_content)
avatar images (get_avatar)
template images using wp_get_attachment_image() (wp_get_attachment_image)
Developers can customize this behavior through various filters, the most foundational one being wp_lazy_loading_enabled, which receives the following parameters:

$default: The boolean default of true to filter.
$tag_name: An HTML tag name. While per current WordPress behavior this will always be img, it should be noted that the loading attribute is a generic attribute and may be expanded to support further elements, e.g. iframes, in the future.
$context: A context string as additional parameters, indicating where the image technically comes from, usually a WordPress hook name. Based on how WordPress itself uses lazy-loading, the context can be one of the five values in parentheses in the list above.

And it gives you what the Enfold switch does. Which is great. But then it goes on:

In order to modify the loading attribute for very specific images, there are two different approaches, depending on the type of images:

For images that appear within a content blob (e.g. the_content, the_excerpt, widget_text_content), another new filter wp_img_tag_add_loading_attr can be used, which receives the following parameters:

$value: The loading attribute value, either “lazy” (default), “eager”, or false. If you want to disable lazy-loading for an image, it is strongly recommended to specify false so that the attribute is omitted altogether.
$image: The entire image HTML tag with its attributes.
$context: The context, similar as described for the other filter above.
For example, if you would like to disable lazy-loading for a specific attachment image with ID 42 in size “large” within post content, you could use the following code snippet:

And it gives you the snippet – but doing this is similar to my workaround for a specific image (taking the HTML that is the output and changing lazy to eager)

Theme developers are recommended to granularly handle loading attributes for images anytime they rely on wp_get_attachment_image() or another function based on it (such as the_post_thumbnail() or get_custom_logo()), depending on where they are used within templates. For example, if an image is placed within the header.php template and is very likely to be in the initial viewport, it is advisable to skip the loading attribute for that image.

And the Core Web Vitals issue was actually identified by them but it seems that on their experiment they didn’t consider all the 3rd party calls and javascript running times that can delay the LCP image from being loaded, so they write:
“Experiments using Chrome for Android have shown that the impact of such loading=”lazy” images in the initial viewport on the Largest Contentful Paint metric is fairly small, with a regression of <1% at the 75th and 99th percentiles compared to non lazy-loaded images – yet it is a consideration to make where theme developers can apply some fine tuning for even better user experience.”

So, maybe this could be a good new feature for Enfold? Allowing to Disable Lazy Loading on certain images from inside the Block Editor?

What concerns me is that you don’t see this on your installation. As it seems to solve mine with my HTML insertion/loading eager workaround. And Enfold is amazing when it comes to the ALB as it allows you to Enable/Disable Loading Lazy on an single image basis. All that’s missing is applying the same to a native or non-ALB image.

Please, let me know if my understanding of what is going on is correct. And if so, maybe this can help others who would like to implement my workaround or the one on functions.php that wordpress offers.

Thank you so much!

Havi

Hi Ismael,

I never wanted to disable the Lazy Loading on the whole site. (I don’t know why you seem to think so)

Maybe the difference between your environment and mine is the reason for this difference. It will take me a few days to update these sites. As soon as I get to it, I will check and get back to you.

Hopefully, there will be a way to prevent a single image from Loading Lazy. This is what I wanted from day one.

Quick question: I want to Lazy Load all images with the exception of the first image on a Post or Page as it affects LCP on Core Web Vitals.

My goal is to stop the 1st image that renders above the fold from being Lazy loaded. The rest of the images on any page/post, should be lazy loaded.

Anyway, maybe there is a way once I update and you see it and you think I see it too. If there isn’t. I still need a way to do this.

Thank you!

Havi

Hi Ismael,

Answering your question:

Do you see the same behavior when you update WordPress to the latest version?

Yes.

I see the same behavior. Both wordpress and Enfold are fully updated on other sites and the behavior is identical.

1- If Lazy Loading is enabled on Enfold Performance settings >> loading=”lazy” displays on the HTML for the image
2- If Lazy Loading is disabled on Enfold Performance settings >> there is no loading=”lazy” displaying on the HTML for the image

I can use my workaround with the Block Editor for an image Block. I cannot use my workaround with the Classic Editor on a Blog Post image.

I can use Enfold’s ALB feature if I use the ALB Editor to lazy load or not an image. Maybe this could be a feature to consider in the near future to help with Core Web Vitals? ;) Adding the same Enable Lazy Loading to the image itself but on the Classic and Block Editors? Maybe it’s not feasible but maybe it is.

It would be great. Also, maybe other people have come up with a solution to disable Lazy Loading of a single image (above the fold) on WordPress. But it’s definitely enabled/disabled from Enfold (it is possible that it’s a WordPress feature that Enfold manages. Actually, I’m sure that’s the case. It would be great if it would manage it a wee bit more and that would be awesome.)

Any help or ideas or hope on this matter would be greatly appreciated.

I have no clue why you don’t see it though.

TIA!!

Havi