Automatic Image Lazy Loading in WordPress (With Smart Exclusions for Critical Images)

This feature is available in the Pro version starting from v1.2.7.2 (released), and the Lite version starting from v1.4.0.5 (to be released).

The Lazy Load tab within the “Resource Loading” area from the plugin’s settings, automatically adds loading="lazy" to eligible <img> tags found in the final HTML output.

This helps reduce the number of images downloaded during the initial page load, which can improve the page load speed, core web vitals, bandwidth usage and overall user experience.

Quick Navigation

How It Works
↑ Back to top

When enabled, Asset CleanUp scans all <img> tags found in the final HTML output and determines whether each image is safe to lazy load.

Eligible images are updated as follows: 

<img src="image.jpg" alt="Example">

becomes:

<img src="image.jpg" alt="Example" loading="lazy">

Relationship to “Image Attributes”
↑ Back to top

The Image Attributes tab and the Lazy Load tab serve different purposes.

Image Attributes (Granular Control)

Use the Image Attributes tab when you want to explicitly add, replace, or override image attributes such as:

  • fetchpriority
  • loading
  • decoding

Examples:

  • Change fetchpriority="high" to fetchpriority="auto"
  • Replace loading="eager" with loading="lazy"
  • Change decoding="sync" to decoding="async"

This feature is rule-based and applies only to images matching specific conditions, such as a source URL containing a specific keyword or matching a regular expression.

Lazy Load (Automatic)

Use the Lazy Load tab when you want Asset CleanUp to automatically add loading="lazy" to images that are considered safe to defer.

It does not override attributes that indicate an image was intentionally marked as critical.

Images Automatically Excluded
↑ Back to top

Automatic lazy loading skips images that are likely important for above-the-fold rendering.

Images are skipped if they already contain:

  • fetchpriority="high"
  • loading="eager"

These attributes usually indicate that the image should load immediately.

If these values were added incorrectly by your theme or another plugin, you can override them using the Image Attributes tab.

Automatic Lazy Loading evaluates the final <img> tag after any “Image Attributes” rules are applied. For example, if you replace fetchpriority="high" with fetchpriority="auto", the image becomes eligible for automatic lazy loading.

Optional Image Decoding
↑ Back to top

Apply decoding="async"

When enabled, Asset CleanUp also adds decoding="async" to automatically lazy-loaded images, but only if no decoding attribute is already present.

Example:

<img src="photo.jpg">

becomes:

<img src="photo.jpg" loading="lazy" decoding="async">

If the image already contains decoding="sync", decoding="auto", or decoding="async", the existing value is preserved.

Lazy Load Exclusions
↑ Back to top

You can exclude images from automatic lazy loading using several criteria.

Skip the First X Eligible Images

Skip the first N eligible images found in the HTML source.

Examples:

  • 0 → Lazy load all eligible images
  • 1 → Skip the first eligible image
  • 3 → Skip the first three eligible images

This is useful for preserving above-the-fold images.

URL Keywords

Exclude images whose source URL contains specific keywords.

Examples:

/logo
/hero
banner-

Regular expressions are also supported when wrapped in #, ~, !, or % delimiters.

Example:

#/uploads/.+\.(jpg|webp)$#i

The matching process checks common image-related attributes such as:

  • src
  • srcset
  • data-src
  • data-srcset

CSS Classes

Exclude images containing specific CSS classes.

Examples:

custom-logo
hero-image
skip-lazy

Enter one class per line, without the leading dot.

CSS Selectors

Exclude images that match or are located inside specific CSS selectors.

Examples:

.site-header img
.hero-section img
#featured-image

This option is useful when images do not have unique URLs or CSS classes.

Example Workflow
↑ Back to top

Suppose your homepage contains:

  1. Company logo
  2. Hero image
  3. Product thumbnails
  4. Footer images

Recommended setup:

  • Skip the first 2 eligible images
  • URL Keywords:
    • /logo
    • /hero
  • CSS Classes:
    • custom-logo
  • Enable decoding="async"

Result:

  • Logo and hero image load immediately
  • Product thumbnails and footer images are lazy loaded

Important Notes
↑ Back to top

  • Existing loading="lazy" attributes are preserved.
  • Images with loading="eager" are skipped.
  • Images with fetchpriority="high" are skipped.
  • Existing decoding attributes are preserved.
  • Use the Image Attributes tab to explicitly replace or override existing image attributes when needed.

SEO Considerations
↑ Back to top

When used correctly, automatic image lazy loading is generally safe for SEO.

To avoid delaying critical images:

  • Skip above-the-fold images
  • Respect fetchpriority="high"
  • Respect loading="eager"

This follows Google’s recommendations for browser-native lazy loading.

For most websites, the following defaults are recommended:

  • Enable automatic image lazy loading
  • Enable decoding="async"
  • Skip the first 1 or 2 eligible images
  • Add common exclusions such as:
    • custom-logo
    • /logo
    • /hero

These defaults provide a good balance between performance and visual stability.

Was this post helpful?