Page speed affects rankings, conversions, and visitor patience. Images and videos — the heaviest page elements — do not need to load until the visitor is about to see them. WordPress lazy load defers the loading of offscreen images, iframes, and videos until the user scrolls near them, reducing initial page weight by 40–70% on media-rich pages and dramatically improving the Core Web Vitals score that Google uses as a ranking signal. This guide covers every method for implementing lazy loading correctly in WordPress. For the bigger picture, our Complete Guide to WordPress How pulls everything together.
WordPress Lazy Load — Built-In Support Since WordPress 5.5
WordPress added native WordPress lazy load support in version 5.5, automatically adding the loading="lazy" HTML attribute to all images and iframes output by core WordPress functions. This means most WordPress sites have basic lazy loading active by default without any plugin — check by inspecting any image in the page source and looking for loading="lazy" on the img tag.
The native WordPress lazy load attribute works in all modern browsers (Chrome 77+, Firefox 75+, Edge 79+, Safari 15.4+). Browsers that do not support lazy loading simply ignore the attribute and load all images normally — providing graceful degradation without any JavaScript fallback needed. The implementation is zero-performance-overhead: no JavaScript executes, no additional network requests are made, and the browser handles all the deferred loading logic natively. For the majority of images on most WordPress sites, this native browser lazy loading is sufficient and requires no additional configuration.
The native WordPress lazy load attribute is applied by WordPress core to images output through wp_get_attachment_image(), the_post_thumbnail(), and content images processed by the the_content filter. Images added directly in HTML without WordPress functions — hard-coded in theme templates, inserted via page builder HTML widgets, or in custom theme files — do not receive the lazy load attribute automatically. Verify coverage by viewing page source on a content-heavy page and searching for “loading=lazy” — confirm the attribute appears on images throughout the page, not just in the hero section. For images missing the attribute, the plugin or code-based approaches below extend lazy loading to all image sources. According to Google’s web performance documentation, lazy loading below-the-fold images is one of the highest-impact performance improvements available for content-heavy web pages, consistently reducing page weight and improving Largest Contentful Paint scores.
WordPress Lazy Load With Caching Plugins
Caching plugins provide JavaScript-based WordPress lazy load that extends beyond the native browser attribute to cover images in custom HTML, CSS background images, and videos. This JavaScript approach catches elements that the native HTML attribute misses and provides a visual placeholder effect during the loading transition.
Enable lazy loading in WP Rocket: Settings → Media → LazyLoad → enable “Enable for images,” “Enable for iframes and videos,” and optionally “Enable for CSS background images.” WP Rocket’s lazy loading replaces the src attribute of images with a placeholder and stores the real URL in a data-src attribute, then uses an Intersection Observer to swap the real src in when the element enters the viewport. This approach covers all images regardless of how they were inserted — template images, widget images, page builder images, and custom HTML images all receive lazy loading. Configure the “Threshold” (how far below the viewport to start loading) to balance performance against users seeing blank placeholders before images appear.
LiteSpeed Cache also includes comprehensive WordPress lazy load: LiteSpeed Cache → Page Optimization → Media Settings → Lazy Load Images and Lazy Load iFrames. LiteSpeed’s implementation uses a similar placeholder-and-swap approach. For sites using LiteSpeed Cache, this is the most efficient option since it is included without additional plugins and integrates with LiteSpeed’s server-side processing for optimal performance. W3 Total Cache, Swift Performance, and most other performance plugins include lazy loading as part of their media optimisation features — check the media or image settings section of whichever caching plugin is active. Our guide on the complete WordPress caching guide covers the full performance stack that WordPress lazy load is part of, including how lazy loading interacts with page caching and CDN delivery.
Lazy Loading Videos and Iframes
Videos and iframes are the heaviest elements on any page — WordPress lazy load for these is critical. A standard YouTube embed loads approximately 500KB of JavaScript even before the video is played. WordPress lazy load for video iframes defers this massive payload until the user actually scrolls to the video or clicks to play.
The most effective approach for lazy loading YouTube embeds is a “facade” pattern — replacing the iframe with a static preview image and a play button, loading the actual YouTube iframe only when the visitor clicks play. The YouTube Lite Embed block (available via the Embed block settings in modern WordPress) implements this pattern natively for YouTube in the block editor. For existing YouTube embeds, the Facade plugin replaces all YouTube iframes with static facades, reducing YouTube-related page weight by 95% until the visitor actively requests the video. The Intersection Observer approach (used by caching plugin lazy loading) defers iframe loading until the user scrolls near the embed, but still loads the full YouTube JavaScript on scroll — the facade approach is significantly more aggressive and effective for video-heavy pages where not all videos will be played.
For self-hosted videos, combine WordPress lazy load with the preload="none" attribute to prevent the browser from downloading video data before the user interacts with the player: <video controls preload="none"><source src="video.mp4" type="video/mp4"></video>. This prevents the browser from auto-downloading video content while keeping the player accessible. Combine with a poster attribute pointing to a static preview image — this provides a visual placeholder that makes the video player look complete before any video data has loaded. For the block editor Video block: click the video → Block settings → uncheck “Autoplay” and set Preload to “None” → add a Poster image. This combination of WordPress lazy load techniques for self-hosted video reduces page load time for video-heavy pages by eliminating all pre-play video data transfer. Our guide on fixing WordPress images not displaying covers the image delivery infrastructure that must be correct before lazy loading can function properly — broken image URLs are not fixed by lazy loading, only deferred.
Lazy Loading and Core Web Vitals
Correct WordPress lazy load implementation requires understanding its Core Web Vitals impact — specifically Largest Contentful Paint (LCP), which Google uses as a key ranking factor. Lazy loading the wrong image breaks LCP; lazy loading all other images improves it.
Never apply WordPress lazy load to the hero image or largest above-the-fold image — these are the LCP candidates. If the largest image on page load is lazy loaded, the browser does not start downloading it until the Intersection Observer triggers (which requires JavaScript to load first), significantly delaying LCP. Identify the LCP image by running PageSpeed Insights on the page URL — the “Largest Contentful Paint element” is identified in the Diagnostics section. That specific image must not have the lazy load attribute. WordPress’s native lazy loading in version 5.9+ excludes the first image in the content from lazy loading automatically (it adds loading="eager" to the first content image), but featured images and hero images set through theme templates may still need manual exclusion.
Add loading="eager" to prevent lazy loading on critical above-the-fold images: in the block editor, select an image block → Block settings → Advanced → add loading="eager" as an HTML attribute. For theme template images, pass the loading argument to WordPress image functions: get_the_post_thumbnail($post_id, 'large', ['loading' => 'eager']);. For WP Rocket’s lazy loading, the plugin provides an “Exclusion” field where specific image filenames or CSS classes can be excluded from lazy loading — add the hero image’s filename or the CSS class applied to hero images to prevent the plugin from lazy loading LCP candidates. Correct WordPress lazy load implementation excludes above-the-fold images from lazy loading while aggressively deferring all below-the-fold images, producing the best possible balance of LCP performance and overall page weight reduction that Google’s Core Web Vitals scoring rewards. Reviews from Google’s web performance team confirm that incorrect lazy loading of LCP images is one of the most common Core Web Vitals mistakes on WordPress sites, and that excluding the first above-fold image from lazy loading while deferring all others is the correct implementation approach.
Fixing WordPress Lazy Load Problems
Common WordPress lazy load problems and their fixes ensure the implementation produces the intended performance improvement without visual glitches or broken image experiences.
Images not lazy loading despite the plugin being enabled: check whether the plugin’s lazy loading is conflicting with another plugin that also modifies image output. Two lazy loading implementations targeting the same images sometimes strip each other’s attributes, leaving neither working. Disable the native WordPress lazy loading if using a plugin: add add_filter('wp_lazy_loading_enabled', '__return_false'); to functions.php to prevent WordPress core from adding loading=”lazy” attributes — this hands full control to the plugin’s implementation. Images loading before they enter the viewport (lazy loading not working): the Intersection Observer threshold may be set too aggressively — increase the rootMargin setting in the plugin’s configuration to start loading images earlier (e.g., 200px before they enter the viewport instead of 0px). This prevents the slight delay between scrolling to an image and seeing it appear.
WordPress lazy load causing layout shift (CLS issues in Core Web Vitals): images without explicit width and height attributes cause layout shift when they load — the browser does not know the image dimensions before downloading it, so the page reflows when the image loads. Fix by always specifying width and height on img tags, or by using the aspect-ratio CSS property on the image container. WordPress’s attachment_image_src and wp_get_attachment_image functions include width and height attributes automatically — images inserted through these functions do not cause layout shift when lazy loaded. Images inserted via custom HTML without dimensions cause CLS; adding explicit width and height attributes resolves both the layout shift and improves the browser’s ability to reserve space for the image before it loads, eliminating the visual pop that poor lazy load implementations create. Our guide on optimising WordPress admin performance covers the broader performance context where lazy loading is one component of an overall site speed strategy.
Testing WordPress lazy load implementation requires both a technical verification and a real-world user experience test. Technical verification: open DevTools → Network tab → filter by Img → reload the page → the images visible in the initial viewport should load immediately; images below the fold should appear in the Network tab only as the user scrolls toward them. If all images load on the initial page load regardless of scroll position, lazy loading is not functioning. A secondary technical check using PageSpeed Insights or WebPageTest shows the “Defer offscreen images” opportunity in the diagnostics — this opportunity disappearing after lazy loading is enabled confirms the images are now correctly deferred. Real-world UX test: browse the page on a mobile device with a throttled 3G connection (simulate in DevTools: Network tab → No throttling → select “Slow 3G”) and confirm images load smoothly as you scroll without blank placeholders persisting for more than a fraction of a second. Adjust the loading threshold if images appear blank on scroll — a larger intersection threshold starts loading images earlier, trading some bandwidth savings for a smoother visual experience on slower connections.
CSS background images present the most challenging case for WordPress lazy load — the native browser loading attribute applies only to img elements, not to elements using background-image in CSS. Section backgrounds, hero backgrounds, and card thumbnails set via CSS require JavaScript-based lazy loading. The most common approach: replace the CSS background-image with a data attribute initially, then use an Intersection Observer in JavaScript to add a class when the element enters the viewport, and apply the background-image via CSS on that class. WP Rocket handles this automatically when “Enable for CSS background images” is enabled in its LazyLoad settings. For custom implementations, the lozad.js library (available from a CDN) provides a lightweight Intersection Observer that handles CSS background images, video, and img elements with a single script and no jQuery dependency, making it an appropriate choice for performance-conscious custom implementations on WordPress themes that do not use a caching plugin with built-in lazy loading.
Lazy loading and print stylesheets require a special consideration — when a visitor prints a WordPress lazy load-enabled page, images that were not yet scrolled into view will not be in the DOM and will not print. Add a print CSS rule to force all lazy-loaded images to display: @media print { img[data-src] { content: attr(data-src); } } — or configure the lazy loading plugin to not apply to pages where printing is expected (downloadable guides, invoice pages, printable coupons). WP Rocket’s lazy loading configuration allows excluding specific pages and post types from lazy loading, ensuring print-critical content is always fully loaded on initial page render rather than deferred until scroll.
