Lazy Loading

Overview

Lazy loading defers the loading of offscreen content until the user scrolls near it. Instead of downloading every image, video, and iframe when the page first loads, the browser only fetches what is visible, then loads the rest on demand. This reduces initial page weight, improves Largest Contentful Paint (LCP), and saves bandwidth.

All lazy loading settings are located on the BoostPro → Optimization tab under the Lazy Loading section.

Above-the-fold skip count

The lazy_above_fold setting controls how many images at the top of the page should load immediately without lazy loading. These are the images your visitors see first, so loading them eagerly ensures they appear instantly.

• Default: 2 images
• Range: 0 to 10
• Behavior: The first non-lazy image automatically receives fetchpriority="high" for faster loading

Lazy load background images

Standard lazy loading only works on <img> tags. Many WordPress themes use CSS background-image for hero sections, sliders, and cards. This setting defers those background images using Intersection Observer, loading them only when the element scrolls into view.

• Default: Off
• Badge: Advanced
• Works on: Inline style="background-image: url(...)" elements

Video placeholder

YouTube and Vimeo embeds load significant JavaScript and CSS even before the user clicks play. BoostPro replaces embedded video <iframe> elements with a lightweight thumbnail placeholder that only loads the full player when clicked.

• Default: Off
• Savings: Up to ~800KB per embed
• Behavior: Displays the video thumbnail with a play button overlay. Clicking loads the actual player.

This is especially impactful on pages with multiple video embeds.

Lazy load iframes

Adds loading="lazy" to <iframe> tags so embedded content (maps, forms, third-party widgets) only loads when the user scrolls near them.

• Default: Off
• Skips: Iframes that already have a loading attribute, and iframes replaced by video placeholders

Fade-in effect

When lazy-loaded images appear, they can pop in abruptly as the user scrolls. The fade-in effect adds a smooth 0.3-second CSS opacity transition so images gently appear instead of jumping onto the page.

• Default: Off
• Animation: 0.3s opacity transition (CSS-only, negligible performance impact)

Exclude patterns

Some images should always load immediately regardless of position. Add URL substring patterns to exclude from lazy loading, one per line:

/hero
/banner
/logo
/above-fold

Any image whose src contains a matching pattern will be excluded from lazy loading.

Native lazy loading

WordPress has built-in lazy loading that adds loading="lazy" to images. BoostPro works alongside this by enhancing it with additional features:

1. Skipping the first N images (above-the-fold count) so they load eagerly
2. Adding fetchpriority="high" to the first non-lazy image
3. Processing all images via output buffering, including those from plugins and themes
4. Optional background image lazy loading, video placeholders, and fade-in effects