Image Preload: Site Booster Module
The Ocean Site Booster's Image Preload module is specifically designed to optimize your Largest Contentful Paint (LCP) metric, which is a critical component of Google's Core Web Vitals. By telling the visitor's browser to prioritize and fetch your primary above-the-fold images before parsing the rest of the page, you can drastically reduce perceived loading times and eliminate layout shift delays.
The Image Preload feature is available as of Site Booster 1.5.0 version.
To enable Image Preload optimization features, toggle to enable the module.
Enable (or disable) any option you would like to use, then save changes at the bottom of the module page.
Available LCP Image Preload options include:
- Disable Lazy Loading for LCP Images,
- LCP Image Detection,
- Skip Lazy Load for First Images,
- Best Practices & General Recommendation.
Disable Lazy Loading for LCP Images
The Disable Lazy Loading for LCP Images toggle allows you to disable lazy loading for the preloaded LCP images to ensure they load immediately.
While lazy loading is excellent for saving bandwidth on images further down the page, applying it to your main header or hero image delays its display.
Turning this option on ensures your primary images are excluded from lazy loading and display right away.
LCP Image Detection
This dropdown option dictates how the plugin scans and identifies your primary layout images. You can select between two modes:
Auto-detect (recommended): The system automatically identifies and targets the designated WordPress featured image first. If no featured image is configured for that specific page or post, it dynamically scans the post content area and prioritizes the very first large image it discovers.Featured Image Only: The system limits its preloading behavior strictly to the official WordPress featured image or the primary WooCommerce product image on shop entries.
Skip Lazy Load for First Images
The Skip Lazy Load for First Images option allows you to prevent the first N images on the page from being lazy-loaded.
This field accepts a numeric value (default is set to 1 ). This is particularly helpful when a page features a hero layout or multiple decorative images above the fold that need to render simultaneously without waiting for user scrolling behavior. If you wish to deactivate this parameter completely, simply set the value to 0 .
Best Practices & General Recommendation
Optimizing images is one of the fastest ways to improve user experience. Keep these recommendations in mind when using the Image Preload module:
1. The Core Web Vitals Relationship (LCP)
- What is LCP? Largest Contentful Paint measures how long it takes for the largest visual element (usually a hero image or large banner) to become visible to the user.
- The Perfect Combo: By enabling Auto-detect (recommended) alongside Disable Lazy Loading for LCP Images, you provide a clear highway for the browser to fetch that large asset instantly, which can directly lift your mobile and desktop performance scores.
2. Don't Skip Too Many Images
- Keep N Low: When configuring the Skip Lazy Load for First Images option, avoid setting the number too high (keep it between
1and3). - The Reason: If you prevent 10 or 15 images from lazy loading, the visitor's browser will attempt to download all of them at the exact same time. This creates a data bottleneck, completely defeating the purpose of speed optimization and dragging down your loading speed.
3. Check for Theme and Plugin Overlaps
- Native WordPress Lazy Loading: WordPress includes basic built-in native lazy loading. Site Booster handles conflicts automatically, but if you are using an external image optimization plugin (like Smush, Imagify, or EWWW), ensure their specific "Exclude from Lazy Load" or "Preload" settings do not conflict with the rules you set up here. Turn off image preloading in third-party optimization tools to let Site Booster manage it cleanly.
Enjoy speeding up your website's performance with Site Booster.
Found an error in this doc or believe it needs improvement?
Send us a prepurchase ticket, include the URL of the page, and add suggestions and more details about how we can make things better for you.
That's it!
Boost your WordPress website on all levels with OceanWP and Ocean Site Booster.