Native Lazyloading vs SPC Lazyloading

Lazy loading is a powerful technique to improve your website's performance by delaying the loading of off-screen images, iframes, and videos until they're needed. This feature significantly reduces initial page load time and conserves bandwidth, especially for content-heavy pages. Super Page Cache uses the Lazysizes library to provide Lazy loading.

🗒️ Note: You can learn how to use SPC lazy loading feature in this guide.

Here are the key differences between using native browser lazy loading and the solution Super Page Cache comes with:

Aspect	Native Lazyloading	SPC Lazyloading
Lazy Loading Trigger	Depends on browser implementation, which can be overly conservative.	Uses a fine-tuned approach to lazy load more aggressively, resulting in faster initial page loads.
Resource Types	Primarily focused on images and iframes.	Handles images, iframes, videos, and CSS background images, providing more comprehensive optimization.
Compatibility	Works best with images properly set up in the WordPress media library.	Works with all images, including those added directly to content or from external sources.
Background Images	Does not support lazy loading of CSS background images.	Fully supports lazy loading of background images, crucial for many modern designs.
Customization	Limited options for customization.	Offers extensive customization including exclusions, skip counts for above-the-fold content, and more.
Browser Support	Implementation can vary across browsers.	Provides consistent behavior across all major browsers.
Above-the-fold Content	May lazy load important above-the-fold content, potentially harming user experience.	Allows you to specify how many images to skip or exclude critical content from lazy loading.
WebP Support	Support for WebP varies by browser.	Fully supports WebP, ensuring optimal performance with this efficient image format.
Performance Metrics	Basic improvement in loading times.	Optimized to improve Core Web Vitals scores, particularly Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).