Snippets

Snippet: Remove lazy loading from Featured Images

  • Updated:

By default the Total theme adds lazy loading via the browser loading="lazy" attribute to all images since it's impossible to know if an image is displayed above or below the fold. Generally you would want to avoid lazy loading any images above the fold to lower your LCP time. If you are creating a dynamic template and using the theme's Image element there is a built-in setting you can use to disable lazy loading as well as enable fetchpriority but if you are using a default theme template you may need to use a little code to alter the featured image arguments. See the examples below for targeting various featured images.

/**
 * Alter the featured image arguments to disable lazy loading and include fetchpriority.
 *
 * @link https://total.wpexplorer.com/docs/snippets/remove-lazy-loading-from-featured-images/
 */
function my_custom_featured_image_args( $args ) {
    $args['lazy'] = false;
    $args['attributes'] = [ 'fetchpriority' => 'high' ]; // optional
    return $args;
}
add_action( 'wpex_page_single_thumbnail_args', 'my_custom_featured_image_args' );
add_action( 'wpex_blog_post_thumbnail_args', 'my_custom_featured_image_args' );
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top