Prioritizing images instead of lazily loading everything
Visible main images must load early; media further down the page can wait. General lazy loading otherwise worsens the first impression.
For web developers and website operators, the most important factors when "selective image loading instead of general lazy loading" are "visibility class" and "correct variant." "Delayed main image" serves as a control.
Published: 3 min read · Author: Sebastian Geier
Which images should a website prioritize and which should load with a delay?
The LCP or hero image is detected early, appropriately sized, and loaded with a suitable priority without lazy loading. Images below the visible area can be delayed, provided space is reserved and the loading threshold is appropriate for scrolling behavior.
Stable layout
Control signal
Signal 1
Start and end times of the visible main image relative to other early resources.
Control signal
Signal 2
Image bytes transferred before use, as well as empty or shifted image areas during scrolling.
Visibility Class
Visibility Class – Template and viewport determine which images are visible on entry, quickly accessible, or located further down.
Correct Variant – Dimensions, format, and responsive selection provide sufficient quality without transferring unnecessarily large files.
Stable layout – Width, height, or aspect ratio reserve the space needed later, regardless of the loading time.
Delayed Main Image
Delayed Main Image – A lazy-loaded LCP image often only starts loading after script execution or layout check, negatively impacting the visible entry point.
Priority Overload – If every gallery image receives high priority, it competes with the one truly important image.
Threshold Too Late – Fast scrolling can reveal empty areas if nearby content is only requested upon entering the viewport.
Use Case: “Delayed Main Image”
An article page initially loads the cover image, author photo, and ten gallery images all in a lazy fashion. The cover image is prioritized immediately, while the gallery remains delayed and reserves its space; during fast scrolling, the next group starts loading in a timely manner.
Correct Variant
Images are classified per template and viewport according to entry visibility and typical scrolling proximity.
The central early image receives direct HTML discovery, the correct variant, and appropriate priority; distant images are delayed.
Waterfall rendering, LCP (Layer Configuration Process), layout stability, and fast scrolling are tested simultaneously across multiple devices.
What "selective image loading instead of lazy loading" means for related tasks.
Improving LCP without damaging the visible design Answers the next practical question: How to improve LCP without damaging the visible page design?
Clearly distinguish between lazy rendering and lazy loading continues this line of thought with another question: What are the consequences of late loading versus late rendering for public content?
If you want to practically implement "selective rather than general lazy loading of images," you can refer to Robust Website Systems This section focuses on "optimizing LCP, CLS, and INP" and "visibility class."
Conclusion: Selective rather than general lazy loading of images
A good image strategy prioritizes visibility and user journey rather than a general loading method. The most important image appears early; later images only consume resources when needed.
Sources and Further Information
The primary sources define the technical framework for "selective rather than general lazy loading of images."
Optimize Largest Contentful Paint – web.devOfficial Chrome team guidance on decomposing LCP and prioritizing resources needed early.
Optimize Cumulative Layout Shift – web.devOfficial diagnosis of common CLS causes in images, embeds, dynamic content, and web fonts.
Optimize Interaction to Next Paint – web.devOfficial guidance on analyzing and improving input lag, event handling, and rendering.
Key Thesis
Images in the first visible area, and especially the LCP motif, receive early detection and appropriate priority. Only media that are definitely outside the critical loading path use lazy loading with fixed dimensions.
What This Is Not About
Lazy loading is not a universal standard for every image and must not intentionally remove visible main images from the critical loading path.
What it's about
Image prioritization distinguishes between media that are visible early, those that are likely to be visible soon, and those that are initially removed, based on position, layout, and actual use.
Core Web Vitals & Performance
Load web fonts without layout breaks or invisible text.
A separate test step for "selectively loading images instead of using lazy loading across the board" is: How do you load web fonts without creating visible layout breaks or long stretches of invisible text?
Core Web Vitals & Performance
Reduce large DOM structures without hiding content.
Adds a separate decision to "selectively load images instead of using lazy loading across the board": How do you reduce a large DOM structure without simply hiding important content?
Insights Overview
All VELUNO Insights at a Glance
Further analyses on Website Systems, digital visibility, and robust working models.
Visibility class: a specific checkpoint
A central template should be mapped according to visible and removed images. Then, only the discovery, priority, and lazy loading thresholds of the respective class are adjusted.