Lazy Loading

How Lazy Loading Works

Lazy loading defers the loading of off-screen images and videos until the user scrolls near them. Instead of downloading every image when the page first loads, the browser only fetches what's visible, then loads the rest on demand.

This reduces initial page weight, improves Largest Contentful Paint (LCP), and saves bandwidth for users who don't scroll the entire page.

Above-the-Fold Skip Count

The above-the-fold skip count tells BoostPro 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
• Recommendation: Set this to match the number of images visible in your viewport before scrolling (typically 1 to 3)

Background Image Lazy Loading

Standard lazy loading only works on <img> tags. Many WordPress themes use CSS background-image for hero sections, sliders, and cards. BoostPro can detect and lazy-load these too.

When enabled, BoostPro scans the HTML output for inline background-image styles and converts them to lazy-loaded versions using Intersection Observer.

• Default: Off
• Works on: Inline style="background-image: url(...)" elements
• Does not work on: Background images defined in external CSS files

Video Placeholder

YouTube and Vimeo embeds load significant JavaScript and CSS even before the user clicks play. BoostPro replaces embedded videos 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.

Fade-In Effect

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

• Default: Off
• Animation: 0.3 second opacity transition
• Performance impact: Negligible (CSS-only animation)

Iframe Lazy Loading

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

• Default: Off
• Toggle: Enable independently from image lazy loading
• Skips: Iframes that already have a loading attribute, and video placeholder iframes

Lazy Load Exclusion Patterns

Some images should always load immediately, like hero images, logos, or above-the-fold banners. You can exclude images from lazy loading by adding URL substring patterns, one per line.

For example, adding /hero would exclude any image whose src contains "/hero". Excluded images get loading="eager" and don't count toward the above-the-fold skip count.

/hero
/banner
/logo
/above-fold

How BoostPro Handles Native Lazy Loading

WordPress has built-in lazy loading that adds loading="lazy" to images. BoostPro enhances this by:

1. Skipping the first N images (above-the-fold count) so they load eagerly
2. Adding fetchpriority="high" to the first image for faster loading
3. Using output buffering to process all images, including those from plugins and themes

Best Practices

• Start with defaults: The default skip count of 2 works for most sites
• Test on mobile: Mobile viewports show fewer above-fold images, so a lower skip count often works
• Enable video placeholders if you have any YouTube or Vimeo embeds
• Check LCP: After enabling, run a PageSpeed test to make sure your LCP image isn't being lazy-loaded