How to Properly Disable Lazy Load in WordPress (Step by Step)

How to Properly Disable Lazy Load in WordPress (Step by Step)

Lazy loading is a technique that defers the loading of non-critical resources (like images and iframes) until they are needed – typically, when they are about to enter the viewport. While generally beneficial for website performance, there are situations where you might want to disable it. This article provides a step-by-step guide on how to disable lazy loading in WordPress, covering different methods and scenarios.

Understanding Lazy Loading in WordPress

WordPress 5.5 introduced native lazy loading for images. This means that by default, your images will only load when they are about to be visible on the screen. This can improve the initial page load time and reduce bandwidth consumption. However, native lazy loading might not always be the best solution for every website. For instance, you might have images that are crucial for the initial user experience, or you might be using a third-party plugin that conflicts with the native implementation.

Before disabling lazy loading, it’s important to understand its impact on your website. Consider the following:

• Improved page load speed
• Reduced bandwidth usage
• Potentially improved SEO ranking

If, after considering these factors, you decide that disabling lazy loading is the right choice for your website, proceed with the methods outlined below.

Method 1: Disabling Lazy Load Using a Plugin

The easiest way to disable lazy loading in WordPress is often through a plugin. There are several plugins available that can handle this for you. Here’s how to disable lazy loading using one of the popular options:

Using the “Disable Lazy Load” Plugin

This plugin is specifically designed for disabling lazy loading in WordPress.

1. Install and Activate the Plugin: Navigate to “Plugins” > “Add New” in your WordPress dashboard. Search for “Disable Lazy Load” (by WPBeginner). Install and activate the plugin.
2. Configuration (if needed): In most cases, this plugin will disable lazy loading immediately upon activation. However, some plugins might offer additional configuration options in the settings. Check the plugin’s documentation for any specific instructions.
3. Verify the Change: Clear your browser cache and test your website to ensure that images are loading without the lazy loading effect. You can use your browser’s developer tools to inspect the network requests and confirm that images are loading immediately.

Other Lazy Load Management Plugins

Plugins such as Autoptimize and WP Rocket can also control lazy loading behavior, but these require a paid license for the feature.

Method 2: Disabling Lazy Load with Code (functions.php)

For more technical users, disabling lazy loading can be achieved by adding code snippets to your theme’s `functions.php` file or using a code snippets plugin. This method offers greater control but requires caution to avoid breaking your website.

Important: Before making any changes to your `functions.php` file, create a backup of your website. Any errors in the code can cause your website to become inaccessible.

1. Access the `functions.php` file: You can access the `functions.php` file through the WordPress Theme Editor (Appearance > Theme Editor) or via FTP. It’s generally recommended to use a child theme to avoid losing your changes when the parent theme is updated.
2. Add the code snippet: Add the following code snippet to your `functions.php` file:

function disable_lazy_loading( $content ) {
    $content = str_replace(' loading="lazy"', '', $content);
    return $content;
}
add_filter( 'the_content', 'disable_lazy_loading' );

function remove_lazy_loading_featured_images( $html ) {
    $html = str_replace(' loading="lazy"', '', $html);
    return $html;
}
add_filter( 'post_thumbnail_html', 'remove_lazy_loading_featured_images' );

3. Save the changes: Save the changes to your `functions.php` file.
4. Verify the change: Clear your browser cache and test your website to ensure that images are loading without the lazy loading effect.

This code snippet removes the `loading=”lazy”` attribute from images within the content and featured images, effectively disabling lazy loading for those images.

Method 3: Disabling Lazy Load Using JavaScript

While less common, you can also disable lazy loading using JavaScript. This approach involves adding JavaScript code to your website that removes the `loading=”lazy”` attribute from images.

1. Add the JavaScript code: You can add the JavaScript code using a plugin like “Insert Headers and Footers” or by enqueueing it in your theme’s `functions.php` file. Here’s an example of the JavaScript code:

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = document.querySelectorAll('img[loading="lazy"]');
  lazyImages.forEach(function(img) {
    img.removeAttribute("loading");
  });
});

2. Enqueue the script (if using `functions.php`): If you’re adding the JavaScript code in your `functions.php` file, you’ll need to enqueue it properly. Here’s an example:

function my_custom_scripts() {
    wp_enqueue_script( 'disable-lazy-load', get_stylesheet_directory_uri() . '/js/disable-lazy-load.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

3. Verify the change: Clear your browser cache and test your website to ensure that images are loading without the lazy loading effect.

This JavaScript code waits for the DOM to be fully loaded, then selects all images with the `loading=”lazy”` attribute and removes the attribute. Remember to create the `disable-lazy-load.js` file in your theme’s `/js/` directory.

Method 4: Disabling Lazy Load for Specific Images

In some cases, you might only want to disable lazy loading for specific images, such as those in your above-the-fold content or featured images. This can be achieved by using a combination of CSS and the methods described above.

Using CSS to Override Lazy Loading

While CSS cannot directly disable lazy loading, you can use it in conjunction with other methods to ensure that specific images load immediately. This usually involves targeting specific images with custom CSS classes or IDs.

1. Add a CSS class to the image: In your WordPress editor, add a custom CSS class to the image you want to load immediately. For example, you can add the class “no-lazy-load”.
2. Modify the Code Snippet: Adjust the code snippet from Method 2 to target only images that do not have the “no-lazy-load” class. This would require more complex string manipulation or DOM parsing.
3. Verify the change: Clear your browser cache and test your website to ensure that the specific image is loading without the lazy loading effect.

Due to the complexity of filtering images with CSS classes in the `the_content` filter reliably, it’s often simpler to use JavaScript for this purpose.

Using JavaScript to Target Specific Images

You can use JavaScript to target specific images based on their CSS class or ID and remove the `loading=”lazy”` attribute.

1. Add a CSS class to the image: As with the CSS method, add a custom CSS class to the image you want to load immediately (e.g., “no-lazy-load”).
2. Modify the JavaScript code: Adjust the JavaScript code from Method 3 to target only images with the specified CSS class:

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = document.querySelectorAll('img.no-lazy-load[loading="lazy"]');
  lazyImages.forEach(function(img) {
    img.removeAttribute("loading");
  });
});

3. Verify the change: Clear your browser cache and test your website to ensure that the specific image is loading without the lazy loading effect.

Troubleshooting Lazy Loading Issues

Disabling lazy loading can sometimes lead to unexpected issues. Here are some common problems and how to troubleshoot them:

• Images not loading: If images are not loading after disabling lazy loading, check your browser’s developer tools for any errors. Ensure that the image URLs are correct and that there are no server-side issues preventing the images from loading.
• Conflicts with other plugins: Some plugins might conflict with the methods used to disable lazy loading. Try deactivating other plugins to see if they are causing the issue.
• Caching issues: Caching plugins can sometimes interfere with changes made to your website. Clear your website’s cache and your browser’s cache to ensure that you are seeing the latest version of your website.

Conclusion

Disabling lazy loading in WordPress can be achieved through various methods, from using plugins to adding code snippets. The best method for you will depend on your technical skills and the specific requirements of your website. Remember to always back up your website before making any changes and to thoroughly test your website after disabling lazy loading to ensure that everything is working as expected.

Consider these factors when deciding whether to disable lazy loading:

• The importance of the image for the initial user experience.
• Potential conflicts with other plugins or themes.
• The overall impact on your website’s performance and SEO.