ThisCalculator

Everyday

Lazy Load in WordPress: Keep Hero Image Fast

Updated · Standard formula, shown below

Lazy Load in WordPress: Keep Hero Image Fast

Lazy loading delays the loading of images and iframes until they are about to enter the viewport. In WordPress, this can significantly improve initial page load time and Core Web Vitals, but if applied to your hero image (the large banner at the top), it can backfire. This guide shows you how to enable lazy loading in WordPress while ensuring your hero image remains fast and above-the-fold.

What You’ll Need

  • Access to your WordPress admin dashboard (wp-admin).
  • If you plan to use a plugin, a free plugin like Lazy Load or a3 Lazy Load (or a caching plugin with lazy load built in).
  • Basic familiarity with editing theme files (for the manual method) or adding code to your theme’s functions.php file.
  • A way to test page speed (e.g., Google PageSpeed Insights, GTmetrix, or browser DevTools).

Step-by-Step

  1. Check if your WordPress version already has native lazy loading.
    WordPress 5.5 and later automatically adds loading="lazy" to images and iframes. To see if it’s active, view your page source and look for loading="lazy" on images. If it’s there, you already have lazy loading. However, WordPress excludes the first image in the content by default, but not necessarily your hero image if it’s in a template or a slider.
  2. Decide on your approach: plugin or code.
    For most users, a plugin is easiest. For developers, a code snippet gives more control. We’ll cover both.
  3. Option A: Use a plugin (recommended for beginners).
    1. Go to Plugins → Add New.
    2. Search for “lazy load�. Choose a reputable plugin with good ratings (e.g., “Lazy Load� by WP Rocket, or “a3 Lazy Load�). Install and activate.
    3. Go to the plugin’s settings page. Enable lazy loading for images, iframes, and videos as desired.
    4. Look for an option like “Exclude first image� or “Exclude above-the-fold images�. Enable it if available. This will prevent the hero image from being lazy-loaded.
    5. If the plugin doesn’t have an exclusion option, you’ll need to add the hero image to an exclusion list manually (see step 5).
  4. Option B: Add lazy loading via code (for developers).
    1. Add the following to your theme’s functions.php file or a custom plugin:
    2. add_filter( 'wp_lazy_loading_enabled', '__return_true' ); – This ensures lazy loading is enabled globally.
    3. To exclude the hero image, you can add a filter that removes the loading attribute from images with a specific class or ID. For example:
    4. add_filter( 'wp_img_tag_add_loading_attr', function( $value, $image ) { if ( strpos( $image, 'hero-image' ) !== false ) { return false; } return $value; }, 10, 2 );
    5. This checks if the image HTML contains ‘hero-image’ (the class you’d assign to your hero image) and if so, removes lazy loading.
  5. Ensure your hero image is not lazy-loaded.
    If you’re using a theme that outputs the hero image, check the theme’s template file (e.g., header.php or template-parts/hero.php). Look for the <img> tag and add loading="eager" to it. This explicitly tells the browser to load it immediately. Also add fetchpriority="high" to signal priority.
  6. Optimize the hero image itself.
    Lazy loading won’t help if the image file is huge. Compress your hero image (use a plugin like Smush or ShortPixel, or manually via Photoshop/TinyPNG). Also serve it in modern formats like WebP. Consider using a CDN to deliver it faster.
  7. Test your site.
    After enabling lazy loading, run a speed test. Check that the hero image appears immediately (no blank space or layout shift) and that other images below the fold load as you scroll.

Common Mistakes

  • Lazy loading the hero image: This is the most common mistake. If the hero image is lazy-loaded, the browser may delay loading it until the user scrolls, causing a blank or unstyled hero area and hurting LCP (Largest Contentful Paint) scores.
  • Not excluding above-the-fold images: Even if you don’t have a hero image per se, any image visible in the initial viewport should not be lazy-loaded. Use the exclusion options in your plugin or code.
  • Using too many plugins: Multiple lazy load plugins can conflict. Stick to one.
  • Forgetting to test on mobile: Lazy loading behavior can differ on mobile. Always test on a phone.

Tips

  • Use native lazy loading: WordPress’s built-in lazy loading is efficient and doesn’t require JavaScript. Only use a plugin if you need more control or to lazy load background images (which native doesn’t do).
  • Set explicit dimensions on images: Always specify width and height attributes on your images to prevent layout shift (CLS) when lazy loading.
  • Consider a caching plugin: Many caching plugins (like WP Rocket, W3 Total Cache) include lazy load options and can also minify CSS/JS, further improving speed.
  • Monitor Core Web Vitals: Use Google Search Console’s Core Web Vitals report to see if your changes improve LCP and CLS.

Troubleshooting

  • Hero image still not loading immediately: Check if your theme or page builder is adding its own lazy loading. Look for a setting in your page builder (e.g., Elementor, Divi) to disable lazy loading on that specific image or section.
  • Images not lazy loading at all: If you’re using a plugin, ensure it’s activated and the settings are saved. If using code, verify the filter is hooked correctly. Clear any caching plugins or CDN caches after changes.
  • Layout shift when images load: Add width and height attributes to your images. If they’re missing, the browser doesn’t know the aspect ratio, causing shift when the image loads.
  • Plugin conflicts: If images break or the site slows down, deactivate other optimization plugins one by one to find the conflict.
  • Lazy loading not working on background images: Native lazy loading doesn’t apply to CSS background images. Use a plugin that supports background image lazy loading, or replace with an <img> tag.

Frequently Asked Questions

Does WordPress have built-in lazy loading?

Yes, since WordPress 5.5, images and iframes have native lazy loading via the loading="lazy" attribute. However, it doesn’t apply to background images or the first image in the content (which is usually the hero).

Should I lazy load the hero image?

No. The hero image is above the fold and should load immediately for good LCP. Lazy loading it would delay the load and hurt performance.

How do I exclude an image from lazy loading?

You can add loading="eager" to the image tag, or use a plugin’s exclusion list. In code, you can filter the wp_img_tag_add_loading_attr hook.

Will lazy loading hurt SEO?

No, if implemented correctly. Google supports lazy loading and it can improve page speed, which is a ranking factor. Just ensure your hero image is not lazy-loaded.

What is the difference between lazy loading and eager loading?

Lazy loading delays the load until the element is near the viewport. Eager loading loads immediately. The hero image should use eager loading.

Can I lazy load videos in WordPress?

Yes, many lazy load plugins support iframes and videos. Native WordPress lazy loading also applies to iframes, which covers embedded videos.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.