Separate the first visible image from off-screen content
The main banner, logo or first product image has a different job from photographs several sections down. Keep immediately needed content available without waiting for a scroll event.
Run the address through PageSpeed Insights and inspect the Largest Contentful Paint finding. This identifies the large visible element used for the loading measurement; it is not always an image. Our Core Web Vitals guide explains that result. Record the current behaviour before changing loading settings.
Check whether lazy loading is already present
Modern WordPress adds browser loading hints to eligible images and uses rules intended to avoid delaying initial content. There is no single core dashboard switch that must be turned on for every image. Themes, builders and performance plugins can change the output, so inspect the page that visitors receive. WordPress describes its approach in the image-loading guidance.
For a simple check, right-click an ordinary image further down the public page and choose Inspect. In the selected image element, look for loading="lazy". That is a browser instruction to defer it when appropriate. An absent attribute does not prove there is no lazy loading, because a plugin can use a script or the image can be a CSS background.
Review the active builder and performance plugin settings for image or media loading controls. Record which feature owns each behaviour. Avoid enabling two script-based lazy loaders for the same images, which makes exclusions and faults harder to trace. Keep WordPress's existing behaviour unless a measured issue requires a change.
Use Elementor's loading control on Elementor pages
In the current Elementor interface, open Elementor > Editor > Settings > Performance. Set Optimized Image Loading to Enable and select Save Changes. Older interfaces place Settings directly under Elementor. The official instructions show the current control, which combines image priority with selective lazy loading.
Test this change on a staging copy first if another optimisation tool already manages images. Compare the first visible image and one further down the page before adding more options. Enabling a feature is not evidence that every builder widget uses the expected loading method.
Background images and carousels have separate handling. Elementor's lazy-loading reference describes its background feature and widget controls. Review the relevant widget if a later slide never appears, and test the first slide separately from images that appear only after interaction.
Exclude the main image from an over-broad lazy loader
If the top banner stays blank until you scroll or a performance report identifies delayed loading of the main image, find the plugin or builder that controls it. Use that tool's documented exclusion field for the specific image, class or selector it supports. Record the original setting and change only that exclusion on staging.
There is no universal exclusion class that works in every plugin. Do not paste a code snippet into your theme or give every image high priority to compensate. When the tool cannot exclude the image reliably, compare its lazy-loading feature turned off while leaving other optimisation settings unchanged. Keep the result that makes the important content available promptly without breaking later images.
A large file still needs downloading even when it starts at the right time. Use our image optimisation guide to correct oversized files and unnecessary resolution. Lazy loading changes when an image loads; it does not reduce that image's file size.
Reserve space and verify images as you scroll
Keep the image's width, height or aspect ratio defined through the block or builder so the page reserves its space. Without that space, content can jump when an image arrives. Google's browser lazy-loading guide explains why dimensions and the image's position matter.
After saving, clear the affected page cache and test as a logged-out visitor. Start at the top, scroll through the full page and open image galleries, tabs or accordions. Check that every image appears and that surrounding text stays stable. Repeat on mobile and with a slower connection if your browser's tools support that test.
Native browser lazy loading can fetch images before they become visible. The browser chooses how early based on its own conditions, so an image loading just below the screen is not proof of failure. Focus on prompt visible content, complete galleries and reduced unnecessary initial work rather than demanding that every request waits until its image touches the screen.
Keep the measured improvement and reverse broken behaviour
Rerun the same page test with the same device setting and compare the loading finding as well as the visible result. If an image remains blank, restore the last changed option, clear the affected cache and retest. Give the responsible tool's support team the image URL, page URL and steps that reproduce the failure.
Apply the proven setting to the live site and repeat the full-page check. Leave a note of the feature and any exclusions so a later plugin change does not enable a second loader. A higher score does not justify a missing product photo or a banner that requires scrolling to appear.
Get help with the next step
If image-loading settings conflict or the main banner remains delayed, BugShield can help identify which component controls it and test a focused correction.