# Image Lazy Loading Best Practices: What to Load First > Learn image lazy loading best practices: keep first-view images eager, defer later images, review HTML settings, and test the published page. Canonical: https://www.getdexseo.com/blog/website-performance-optimization/image-lazy-loading-best-practices/ Author: Dex SEO, Editorial team Published: Oct 20, 2026 · Updated: Oct 20, 2026 ## Key takeaways - Keep images needed in the first view out of lazy loading. - Use native loading for suitable images farther down the page. - Reserve image space and check the published HTML. - Test first-view loading and scrolling under matching conditions. Image lazy loading best practices start with one choice. Load images needed for the first view as usual. Defer suitable images farther down the page. Then test the published result. If you lazy-load every image, you may delay what people came to see. This guide covers that choice, the HTML settings, and a practical review process. For a wider review of speed and Core Web Vitals, use our [website performance optimization guide](https://www.getdexseo.com/blog/website-performance-optimization/). Here, the goal is to make sure each image loads at the right stage of the visit. ## What is image lazy loading? Lazy loading lets the browser defer an image until it is near the visible part of the page. That visible area is the viewport. The image can start to load before the reader scrolls it into view. It does not need to wait for a click. Use this for images that are not needed at the start. It does not shrink a large file or fix a broken image URL. Those are separate checks. Our [image SEO guide](https://www.getdexseo.com/blog/image-seo/) covers the wider work of choosing, describing, and delivering useful images. Define the intended result before changing a setting. For example: the main image should appear promptly, while later examples should arrive as readers approach them. That gives the reviewer something specific to check. ## Which images should load immediately? If the document itself is late, [diagnose the initial response delay](https://www.getdexseo.com/blog/website-performance-optimization/diagnose-slow-ttfb/) before assigning the whole wait to an image. Do not lazy-load images in the first view. This is key for an image that is the page’s Largest Contentful Paint element. LCP marks when the largest piece of content that counts toward this metric is shown. It is not always an image. Check the actual layout instead of relying on an image’s name. A file called “hero” might sit below a tall introduction on mobile. A product photo might be visible at once on a wide screen. Review the page sizes your readers use. Write down which image matters for the first view and why. Avoid making the whole gallery urgent just because one photo is important. Base the choice on the page and the task. Do not use a blanket rule that all images matter just as much. ## Which images are suitable for lazy loading? Images well below the first view are common choices. Think of later screenshots in a long guide, examples farther down a case study, or photos near the end of an article. Check the first view again if the layout changes. Consider a fictional repair guide with one opening photo and six later step images. A useful starting plan is to load the opening photo normally and defer suitable later images. This is a plan, not a claim of a measured speed gain. Check what the reader sees while moving through the guide. If a key step stays blank when it is needed, check the setup and how the file is sent. A lazy attribute alone does not prove that the page works well. ## How to use the HTML loading attribute If a custom loader blocks page actions, [trace the JavaScript work](https://www.getdexseo.com/blog/website-performance-optimization/reduce-javascript-execution-time/) separately from the image request. For an image below the first view, plain HTML can be enough: ``` Hinge screws marked on the open cabinet door ``` This is sample markup, not an image embedded in this article. Use the path, alt text, width, and height that match the real file. The `loading="lazy"` value asks the browser to wait. The `eager` value loads as usual. Leaving out the attribute also uses the default. The browser chooses how near the viewport an image needs to be. Do not build your review around one fixed pixel threshold. Keep a real image source in the published markup. If a script uses placeholder fields, ask the developer to check how the browser finds and loads the image. The native `loading` attribute belongs on an image element, not a CSS background declaration. ## How do loading and fetch priority differ? Review [font requests and visible text](https://www.getdexseo.com/blog/website-performance-optimization/web-font-loading-best-practices/) when planning other early file needs. Do not make every asset urgent. Loading controls whether an image waits. Fetch priority is a separate hint about how much it matters. Setting `fetchpriority="high"` does not undo `loading="lazy"`. For an important opening image, a developer may use normal loading and a high-priority hint. Do not apply high priority to every image. It cannot make all downloads first in line. Review each setting against a clear reason. If the page already performs well and no evidence supports a change, avoid adding attributes solely to make the markup look optimized. Keep notes that explain why an image needs a different setting. ## Set image dimensions to prevent layout shifts Use the [image and embed layout-shift checks](https://www.getdexseo.com/blog/website-performance-optimization/fix-layout-shifts-images-embeds/) if a reserved slot changes when the file arrives. Give images the right width and height. This lets the browser leave space before the file arrives. Styles can still let the image fit a smaller screen. Check the shape as well as the numbers. If the reserved space does not match the final image, nearby text can still move. On the test page, watch the content above and below each image as it appears. Keep this check narrow: does the image have space, and does the layout stay stable? Review other moving parts in a separate layout check. This keeps the image check focused on its own task. ## Check CMS settings and avoid duplicate lazy loading Use a [controlled plugin performance test](https://www.getdexseo.com/blog/website-performance-optimization/test-wordpress-plugin-performance/) to isolate overlapping loading features. A theme, CMS, plugin, or custom component may already control image loading. Check the published output before adding another layer. With two systems, it may be hard to tell which one causes a delay. Ask the template owner to find out what controls image loading. Make one change at a time. Use a test site when you can. Check more than one page that uses the same template before rolling it out. For a guide about a changed software interface, keep image accuracy in the review too. Our process for updating outdated tutorials covers checking the steps and screenshots. A fast screenshot is still unhelpful if it shows the wrong screen. ## How to test lazy-loaded images after publishing First [check whether the current page and files reach readers](https://www.getdexseo.com/blog/website-performance-optimization/how-to-test-website-caching/). An old stored version can hide your loading change. Use the same page, screen size, and test setup each time. Record any other changes made at the same time. One faster visit does not prove that lazy loading caused the change. 1. **Open a fresh page load.** Check the first view before scrolling. The main image should not depend on a scroll action. 2. **Inspect the published image elements.** Confirm which images have lazy loading and whether their source and dimensions are present. 3. **Review image requests in browser developer tools.** Check their timing as you move down the page. Images may be requested before they become visible. 4. **Scroll through the full article.** Look for blank examples, broken images, and text that moves when images arrive. 5. **Repeat on a smaller screen.** Check the layout and the images that now appear in the first view. 6. **Review performance evidence.** Repeat the tests with the same setup. Check that the change took effect. Use a content SEO audit to review the wider page, and the CMS publishing checklist to confirm the live release. Keep the browser loading test as its own check. DEX Health helps review page quality and SEO, including on the free plan. Pair its findings with the checks above. A Health score does not replace a request-timing trace or establish which image was the LCP element. Keep the final decision simple: identify the first-view images, defer suitable later ones, and verify the visitor’s path. Save the test conditions and any issues that need a developer so the next review starts with evidence. ## FAQ ### Should I lazy-load the main image? Keep images needed in the first view out of lazy loading, especially an image that is the LCP element. Check the actual mobile and desktop layout. ### Does high fetch priority cancel lazy loading? No. Loading controls deferral, while fetch priority is a separate hint. Do not rely on high priority to undo a lazy-loading setting. ### Does the loading attribute work on CSS background images? No. Native image loading uses the img element. Review background-image delivery separately with the person who manages the template. ## Sources - [Browser-level image lazy loading for the web](https://web.dev/articles/browser-level-image-lazy-loading) — Google web.dev