Lazy Loading Media Elements

Optimizing media loading is crucial for website performance. WP Block to HTML supports lazy loading of media elements like images, videos, and iframes to improve page load times and Core Web Vitals scores.

Overview

Lazy loading defers the loading of off-screen images and other media until the user scrolls near them. This significantly improves initial page load performance, reduces bandwidth usage, and enhances user experience.

How Lazy Loading Works in WP Block to HTML

The library implements lazy loading by adding the loading="lazy" attribute to media elements. This attribute is natively supported by modern browsers and gracefully degrades in older browsers.

For images that are likely to be in the initial viewport (above the fold), the library strategically avoids lazy loading to ensure optimal Largest Contentful Paint (LCP) performance.

Enabling Lazy Loading

Lazy loading is part of the SSR optimization module and is enabled by default when SSR optimizations are turned on:

import { convertBlocks } from 'wp-block-to-html';

const html = convertBlocks(blockData, {
  ssrOptions: {
    enabled: true,
    optimizeImages: true // Ensures images are optimized, including lazy loading
  }
});

Customizing Lazy Loading Behavior

You can customize which elements get lazy loading applied:

import { convertBlocks } from 'wp-block-to-html';

const html = convertBlocks(blockData, {
  ssrOptions: {
    enabled: true,
    optimizeImages: true,
    lazyLoadOptions: {
      skipFirstImage: true,     // Skip lazy loading for the first image (default: true)
      skipImagesAbove: 500,     // Skip lazy loading for images above 500px from the top
      applyToIframes: true,     // Apply lazy loading to iframes (default: true)
      applyToVideos: true       // Apply lazy loading to video elements (default: true)
    }
  }
});

Implementation Details

The lazy loading implementation follows these principles:

1. First Image Preservation: The first detected image is not lazy-loaded to prevent impact on LCP metrics
2. Native Approach: Uses the browser's native loading="lazy" attribute
3. Size Attributes: Ensures width and height attributes are preserved to prevent Cumulative Layout Shift (CLS)
4. Fallback Handling: Graceful degradation for browsers without native support

Supported Media Types

Lazy loading is applied to the following media elements:

• Images: Both standalone <img> elements and those within figures
• Iframes: Embedded content like YouTube videos or maps
• Videos: HTML5 video elements

Browser Support

Native lazy loading is supported in:

• Chrome 76+
• Firefox 75+
• Edge 79+
• Safari 15.4+

For older browsers, the content loads normally without lazy loading.

Example Output

Here's an example of how the library transforms media elements:

<!-- Original image -->
<img src="large-image.jpg" alt="Description" width="800" height="600">

<!-- After conversion with lazy loading -->
<img src="large-image.jpg" alt="Description" width="800" height="600" loading="lazy">

Performance Impact

Internal benchmarks show significant performance improvements with lazy loading enabled:

• Initial Page Load: 15-30% faster
• Bandwidth Reduction: 30-50% less data loaded initially
• LCP Improvement: Up to 25% better LCP scores
• Memory Usage: Reduced by 10-20% during initial render

Best Practices

For optimal performance with lazy loading:

1. Always provide width and height attributes for images to prevent layout shifts
2. Use appropriately sized images for different device widths
3. Consider adding low-resolution placeholder images for critical content
4. Use the fetchpriority="high" attribute for the most important images (automatically added for the first image)

Integration with Content Handling Modes

Lazy loading works with all content handling modes:

• Raw Mode: Applied during HTML generation
• Rendered Mode: Can be applied as a post-processing step
• Hybrid Mode: Applied during class mapping while preserving the original structure