Support

Account

Register Login

Home › Forums › General Issues › WordPress native Lazy Loading with ACF image field

Solved

WordPress native Lazy Loading with ACF image field

  • Hello everybody,

    I’m wondering how to make ACF Image Field compatible with WordPress native lazy load.

    https://make.wordpress.org/core/2020/07/14/lazy-loading-images-in-5-5/

    Should I just modify from :

    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">

    To
    <img load="lazy" srcset="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">

    To sum up change src to srcset and add load=”lazy”

    Is that correct according to you ?

    Thanks
    Regards

  • You just need to add loading="lazy"

  • Thanks a lot !

    Do you know if I need to activate WordPress Lazyloading with a snippet to add to the functions.php of my custom theme ?
    Or WordPress does it natively ?

    I found this source that explain there is a function to add but i’m sceptic :
    https://seobookpro.com/how-to-enable-the-default-wordpress-lazyload-for-you-images-and-iframes-in-5-steps-no-plugin/

    Suggesting to add it to functions.php

    // Enable WordPress Default Lazy Load Functions for Images, Videos, Iframes
    add_theme_support( 'lazy-load' );

  • I have not had to enable this on any site. WP automatically adds lazy loading to images that are inserted into WP content areas, it automatcially adds the attribute unless you tell it not to.

    lazy loading by adding loading="lazy" to image tags is not a WP thing. This is a browser thing. Browsers not recognize this attribute. In WP is just means that WP is not added the attribute automatically when it generates an image tag.

  • Enabling the lazy load may be confused you

    Sorry about that i will update the post next few days. Proper Title is add_theme_support for Lazy Load in fnctions.php is super easy and useful instead of using Plugin

    Lazy-Loading Images in WordPress Core

    The loading attribute currently supports two possible values:

    • eager, to load an image immediately on pageload
    • lazy, to load an image only when it becomes relevant for the viewport

    The implementation seeks to enable lazy-loading images by default, providing the loading attribute with value lazy on the following img tags:

    • Images in post content
    • Images in post excerpts
    • Images in comments
    • Images in text widget content
    • Individual images rendered via wp_get_attachment_image()
    • Avatar images rendered via get_avatar()

    Note that loading=”lazy” will only be added if the respective tag does not yet include a loading attribute. In other words, to prevent an image from being lazy-loaded, it is recommended to specify loading=”eager”.

    Source and more info in the Make WordPress

    This is used to add( support ) the loading=”” in the templates and to be able to play with it

    For example Lazy Load in WordPress since xxx Version is enabled by default. Mean everywhere lazy will be add to the images. I don’t need loading lazy for some specific parts of the template and the site. One of the most common errors by the Web Developers is to keep the lazy load enabled for all supported types in above the fold.

    add_theme_support( ‘lazy-load’ );

    means this will be supported as a tag for the custom template you build

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.