Lazy Loading defers image loading until the image enters the visible viewport. This ensures that only necessary content loads initially, improving performance.
22.1 Overview #
Instead of loading all images during the initial page request:
- Images load only when users scroll
- Below-the-fold images are delayed
This improves:
- Initial page load speed
- Largest Contentful Paint (LCP)
- Server resource usage
How It Works Internally #
- Adds
loading="lazy"attribute to image tags - Skips above-the-fold or critical images when necessary
- May apply JavaScript-based lazy loading for broader compatibility
- Ensures graceful fallback for unsupported browsers
22.2 Settings #
Enable Lazy Load #
- Toggle Enable Lazy Load → ON
Once enabled, SpeedyGo automatically applies lazy-loading attributes to eligible images.
Modern browsers support:
<img src="image.jpg" loading="lazy" alt="Example">For advanced cases, JavaScript-based lazy loading may be applied for broader compatibility.
22.3 Best Practice Recommendation #
- Do not lazy load above-the-fold hero images
- Test sliders and galleries after enabling
- Combine with WebP Conversion for maximum image optimization
Lazy Loading significantly improves perceived performance and reduces unnecessary resource usage.
