Treat images visible on arrival differently from images that appear much later in the page.
Create three loading groups
Make a list of images visible on arrival, images just beyond the initial screen and images far down the page. Google's guidance recommends eager loading for initially visible images, especially the LCP image, and lazy loading for offscreen images. The practical task is to classify the actual rendered layout rather than apply a universal rule.
Inspect the first screen on each device
A desktop hero may become a different component on a phone. Open both layouts and identify which image readers see first. Inspect its loading attribute and request start time. Check that a theme and an optimization plugin are not applying competing loading techniques to the same element. Keep the original configuration recorded before changing anything.
Reserve image space
Give the layout enough information to reserve image dimensions while the file loads. Then watch the page, not just the final screenshot. If paragraphs move when a gallery item arrives, the issue needs a space-reservation investigation. If the image arrives too late during normal scrolling, examine its loading behavior and connection conditions.
Exercise carousels and hidden panels
Use the gallery, switch tabs and advance a carousel. Hidden images can behave differently depending on how the component hides them. Write down whether a newly visible slide appears promptly and whether its container jumps. Avoid adding a second lazy-loading script without first understanding the behavior already supplied by the browser or component.
Keep a component-specific decision
Record which hero is eager, which article images are lazy and which interactive gallery needs its own treatment. Recheck after changing the theme or builder. This audit helps make exceptions intentional. It does not establish a universal setting for every plugin because the rendered markup and the visitor's first viewport are what matter.
Put it into practice
- Classify images by the actual initial viewport.
- Inspect the main image request and loading attribute.
- Check reserved dimensions during loading.
- Exercise carousels, tabs and galleries.
- Keep a record of component-specific exceptions.
AI-assisted educational content prepared for the Velonic resource library. How these guides are prepared.