You’ve come to the right place if you need to turn off the lazy image loading for the first images on your WordPress website. If you’ve been exploring ways to optimize your WordPress website, you’ve likely come across a concept called lazy image loading. This concept is highly significant in Search Engine Optimization (SEO).
The current article is "6.17. Turn Off Lazy Loading" of our Complete SEO Guide Box.
Previous Article: 6.16. Turn Off Storing User Agent. Next Article: 6.18. H2 Headings Anchor Links
Contents
Understanding Lazy Image Loading
In simple terms, lazy image loading is a mechanism employed to speed up the loading times of web pages. This method delays the loading of images until they are just about to enter the user’s viewport or visible area of a webpage. This process is particularly beneficial when a webpage has many images.
The principle behind this is relatively straightforward: by reducing the initial amount of data that needs to be loaded when a user visits a webpage (in this case, images), the webpage can load faster, providing a more seamless user experience.
WordPress and Lazy Image Loading
WordPress took a step forward by implementing lazy image loading directly into its core system to address the growing need for quicker webpage load times. From WordPress version 5.5 onwards, Lazy Image Loading was introduced. From this version, released in August 2020, WordPress began to add a “loading=’lazy'” attribute to img elements by default. This addition signaled to browsers that support the feature to delay the loading of images until they become close to, or in view of, the user’s scrolling viewport. It’s a significant addition to enhancing user experience by speeding up initial webpage load times.
Why Turn Off the Feature on Initial Images?
There is a compelling reason to turn off lazy image loading for the first few images on your webpage, particularly regarding user experience. When visitors land on your site, the initial visual elements are critical in creating a first impression. For instance, if the first two images on your page are crucial to your site’s content or branding, you’d want those to load immediately as the page opens.
Take, for example, a blog post that leads with an impactful image or a header that visually communicates the topic. Suppose this image is subject to lazy loading. In that case, it may not appear immediately, leaving a space, or worse, causing a disruptive shift in layout as it finally loads. Similarly, a product page in an e-commerce store might have a primary product image that should load instantly for immediate user engagement.
In these cases, you’d want to turn off lazy image loading for these initial, crucial images. This ensures they are loaded immediately, regardless of the user’s viewport, providing an immediate visual impact and a seamless user experience.
Since user experience is a significant factor in SEO, when checking your site for performance in GTmetrix, you will get a lower score if you do not turn off lazy image loading on initial images.
How to Turn Off Lazy Image Loading for Initial Images with Child Theme’s functions.php
To turn off the two initial images, we will add a code to your Child Theme’s functions.php file. You may adjust the number of images as you like.
Find the end of the functions.php file with the “?>” string.
Before that string, make at least three empty lines and paste the code:
// Disable lazy loading for the first 2 images.
function custom_lazy_loading( $default, $tag_name, $context ) {
static $image_count = 0;
if ( 'img' === $tag_name ) {
$image_count++;
// This line sets the number of initial images to turn off lazy image loading on them.
if($image_count <= 2) {
$default = false;
}
}
return $default;
}
add_filter( 'wp_lazy_loading_enabled', 'custom_lazy_loading', 10, 3 );Click [Update File].
Clear all the caches if you use them.
Explaining the Code
At a high level, this function, ‘custom_lazy_loading()‘, hooks into the WordPress filter ‘wp_lazy_loading_enabled‘. This filter is a part of WordPress’s system for deciding whether or not to add the ‘loading=”lazy”‘ attribute to an ‘img’ element.
The function to turn off lazy image loading on the first images takes three parameters: ‘$default‘, ‘$tag_name‘, and ‘$context‘. The ‘$default‘ parameter holds the default behavior (whether or not to add the ‘loading=”lazy”‘ attribute), ‘$tag_name‘ contains the name of the HTML tag being checked, and ‘$context‘ holds information about the context in which the image is being used.
Inside the function, there’s a static variable ‘$image_count‘, which keeps track of the number of ‘img’ tags processed.
The function checks if the tag name is ‘img’. If it is, it increments the image count. Suppose the image count is less than or equal to ‘2‘ (corresponding to the first two images). In that case, it sets ‘$default‘ to ‘false‘, turning off the lazy loading for those images.
Lastly, the ‘add_filter()‘ call tells WordPress to use this function when deciding whether or not to enable lazy loading. The ‘10‘ is the priority of this function when multiple functions are hooked to the same filter (lower numbers correspond to earlier execution), and ‘3‘ is the number of arguments that the function accepts.
Bonus: Turn Off Lazy Image Loading at All
You can turn off lazy image loading in WordPress at all. However, we do not recommend that since it is a good feature overall. So, this line is just for reference:
add_filter( 'wp_lazy_loading_enabled', '__return_false' );The current article is "6.17. Turn Off Lazy Loading" of our Complete SEO Guide Box.
Previous Article: 6.16. Turn Off Storing User Agent. Next Article: 6.18. H2 Headings Anchor Links
If you find any mistakes or have ideas for improvement, please follow the email on the Contact page.