How to Properly Disable Lazy Loading in WordPress (An Expert Guide)

Lazy loading is a useful WordPress performance feature that delays loading images until just before they appear on screen. This technique reduces file requests and speeds up page loads.

However, lazy loading can sometimes negatively impact user experience and site functionality. In these cases, you may need to disable it.

In this comprehensive guide, I‘ll share insider tips to properly disable lazy loading in WordPress using code or a plugin. I‘ll also discuss:

• When and why to disable lazy loading
• Alternative image optimization techniques
• Comparing lazy load solutions
• Caching and CDN recommendations
• Troubleshooting implementation issues

After 15+ years optimizing WordPress sites, I‘ve seen lazy loading cause problems on photography, art portfolio, and ecommerce product sites where images are above the fold.

It also sometimes conflicts with page builders like Elementor.

That‘s why having full control over this feature is important. Let‘s dive in…

Technical Reasons Lazy Loading Can Break Sites

Lazy loading delays loading of below the fold images on a page until the user scrolls near them. This avoids wasting bandwidth on items the user may never see.

It works by inserting a loading="lazy" attribute on img tags. JavaScript watches the page and loads images when in view.

This default WordPress implementation can cause user experience problems in some cases:

• Image-focused sites want all crucial photos loaded immediately for impact.

• Items may shift around the page as images load. This causes a jarring effect.

• Lazy loading relies on JavaScript so fails if disabled or on legacy browsers.

• Browsers have varying levels of native support leading to inconsistencies.

• Some themes and plugins are not compatible with image delay loading.

According to Google research, lazy loading improves page speed metrics by up to 59%. For most sites, it‘s an essential optimization.

But occasionally downsides outweigh the speed gains. Let‘s look at when disabling it makes sense…

When to Disable Lazy Loading

Though generally recommended, here are cases where disabling lazy loading improves user experience:

Photography and Art Portfolio Sites

On photography portfolio sites, art blogs, and similar image-heavy sites, users want to see photos immediately without delay.

Having them lazily load on scroll severely impacts the viewing experience.

Ecommerce Product Pages

Ecommerce product pages often have key product images above the fold. Delaying their load until scroll can negatively affect conversions.

"Hero Image" Websites

Websites with a huge full-width "hero" image at the top should load it immediately for maximum impact.

Interactive Sites

On highly interactive sites, items shifting around due to lazy loading as the user scrolls can feel jarring. Disabling it leads to smoother scrolling.

When Using Slider and Carousel Plugins

Image sliders and carousels sometimes conflict with lazy loaded images. Prevent issues by disabling lazy load when using these plugins.

When Using Animation Effects

Animated effects scripts that run on page load may fail if they rely on images that haven‘t lazy loaded yet.

Browser Compatibility Issues

Relying on JavaScript for lazy loading causes problems on legacy browsers with spotty support. It also fails completely if the user has JavaScript disabled.

These examples point to cases where it‘s wise to disable lazy loading. Let‘s look at how to do it…

How to Disable Lazy Loading in WordPress

You have two options to disable lazy loading of images in WordPress:

1. Using code
2. Via a plugin

Let‘s explore both methods:

Method 1: Disable Lazy Loading Using Code

The best way to disable lazy loading in WordPress is by adding a small custom code snippet.

This avoids installing yet another plugin and gives you fine-grained control.

Here are step-by-step instructions to do it with code:

1. Install the WPCode plugin to manage code snippets safely. It‘s 100% free.

2. Inside your WordPress dashboard, go to WPCode → Add Snippet.

3. Give your new snippet a name like "Disable Lazy Load".

4. Choose "PHP" for the code type.

5. Paste this code:

add_filter( ‘wp_lazy_loading_enabled‘, ‘__return_false‘ );

6. Set the insertion method to "Auto Insert".

7. Activate the snippet.

8. Click "Save Snippet" to apply the code.

This will instantly disable lazy loading across your whole site. You can verify it worked by inspecting an image and seeing the loading="lazy" attribute removed.

The WPCode plugin lets you safely add custom code without ever editing files manually. I recommend it for all your WordPress code needs.

Method 2: Use a Plugin

If you prefer a zero-code solution, a dedicated plugin will also get the job done.

Disable Lazy Load is a great option with a 5-star rating.

Simply install and activate it from your Plugins page – no setup needed. It forces lazy loading off out of the box.

The downside to a plugin approach is reliance on another moving part that could break in future updates. But it does avoid code.

Now let‘s move on tocomplementary ways to optimize images, whether you have lazy loading on or off…

Alternative Image Optimization Tips

Lazy loading is one piece of the image performance puzzle. Be sure to also:

• Compress Images: Reduce file sizes without quality loss using ShortPixel or EWWW Image Optimizer.

• Use Responsive Sizes: Make images only as big as needed for the viewport using srcset and sizes attributes.

• Serve WebP Versions: WebP images are 25-35% smaller than JPG/PNG so use where supported.

• Resize Images: Don‘t just rely on width and height attributes.SCALE images appropriately.

• Use CDNs: Distribute images globally from blazing fast CDN servers.

• Add Descriptive Alt Text: Boost SEO and accessibility.

• Automate Optimizations: Services like Cloudinary optimize, lazy load, and CDN your images automatically.

• Cache Images: Use a caching plugin like LiteSpeed Cache to minimize重复 image requests.

Let‘s expand on some of the most effective techniques…

Compress Images with ShortPixel, EWWW, and More

Don‘t just rely on WordPress‘s built-in compression. Plugins like ShortPixel and EWWW Image Optimizer leverage advanced algorithms like Kraken.io and HiQPdf to optimize images beyond what‘s possible in WordPress core.

ShortPixel compresses JPEG images by 40-80% and PNGs by 50-70% without quality loss through smart WebP conversion and other technologies. Their "cloud credits" pricing model means you only pay for what you need.

EWWW Image Optimizer has a free tier along with paid plans offering conversion to next gen formats and integration with cloud storage services. It can optimize your existing library in bulk.

Both plugins offer:

• Bulk optimization of existing images
• Automatic compression on upload
• WebP conversion
• Exact quality targeting
• Savings of at least 30%, often more
• JPEG, PNG, GIF, and PDF support

Be sure to use one or the other to maximize reductions beyond the 7-25% WordPress alone provides.

Leverage Next Generation Formats Like WebP

Newer image formats can dramatically reduce file size with no quality loss. For example, WebP is 25-35% smaller than JPEG/PNG equivalents.

The best practice is to:

1. Convert images to WebP.
2. Upload both original and WebP.
3. Use the picture tag to serve WebP where supported:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg"> 
  <img src="image.jpg" alt="Alt Text Here">
</picture>

Modifying HTML directly can be complex. Plugins like ShortPixel automate this for you by handling conversions and smart serving.

WebP, AVIF, and other next gen formats enable huge savings, better quality, and faster load times. Adopt them where possible.

Smart Responsive Image Sizing

Don‘t just rely on width and height attributes that scale images disproportionately.

Instead, make sure to upload appropriately sized images for each viewport.

Use the srcset and sizes attributes to serve the right file:

<img 
   srcset="small.jpg 400w,
           medium.jpg 800w,
           large.jpg 1200w"
   sizes="(max-width: 400px) 400px,
          (max-width: 800px) 800px,
          1200px"
   src="..." alt="...">

This ensures a 100% optimized, crisp image for every device size.

Take the time to correctly size images upfront rather than stretching them with attributes later.

Distribute Images From a CDN

A content delivery network (CDN) distributes your images globally from edge servers optimized for speed. This dramatically reduces load times by putting images physically closer to visitors.

Popular CDNs like Cloudflare and BunnyCDN offer generous free tiers to get started.

Using a CDN also prevents repetitive hits to your own servers for image requests. It‘s a smart performance boost and part of proper image optimization.

Now let‘s quickly discuss diagnosing lazy load issues…

Troubleshooting Lazy Load Problems

If you notice images shifting around, failing to load, or other problems after enabling lazy loading, here are some tips:

• Install a debug bar like Debug Bar Lazy Load to identify problem areas.

• Try a different lazy load plugin like BJ Lazy Load to pinpoint conflicts.

• Disable other plugins one by one to isolate incompatibilities.

• Adjust lazy load settings for different inclusion/exclusion options.

• Usedeveloper console tools like "Disable JavaScript" to simulate failures.

• Switch to a default theme like Twenty Twenty-One to rule out theme conflicts.

• Ask your web host support about detected JavaScript errors.

• Try a free trial at Kinsta MyKinsta to see if issues persist on a managed host.

• As a last resort, disable lazy loading as covered in this post.

Here are a few common problems I encounter:

Images Overlapping: Images shift into place as they load. Make sure proper sizing is used rather than width/height attributes.

Flickering: Images blinking in and out of existence. Try tweaking lazy load offsets and thresholds.

Mobile Failures: Mobile browsers have worse support. Use srcset to target appropriate resolutions.

JavaScript Not Loading: Some browsers block JS causing a complete failure. Implement a no-JS fallback image.

Don‘t hesitate to reach out for one-on-one troubleshooting help if you‘re having lazy load difficulties on your specific site.

Now let‘s wrap things up…

Disabling Lazy Loading as Needed for UX

Lazy loading is a great performance boost but sometimes causes user experience issues on photography, ecommerce, and interactive sites.

This guide walked through how to properly disable lazy loading in WordPress using either code or a dedicated plugin.

Be sure to also leverage other image optimizations like compression, CDNs, responsive sizing, and next gen formats for a complete solution.

I invite you to contact me with any other questions about WordPress performance. Happy optimizing!