Safe implementation

Defer only images below the first screen

The easiest route is to send the task to your developer or CMS support team. Explicitly ask them not to lazy-load the LCP image, logo or anything visible immediately after opening the page.

Backup, selection of below-the-fold images, lazy-loading setup and tests on desktop and mobile
Back up first, protect first-screen images, implement and then verify.

Message for a developer

Configure lazy loading for images below the first screen.
Do not defer the LCP image, logo or immediately visible images.
Create a backup before making changes.
Test on desktop and mobile, without cache, on a slow connection
and after scrolling through the complete page.
Report the number of changed images and templates.

Implementation sequence

  1. Open the page at a mobile width and mark images visible without scrolling.
  2. Identify the LCP; it must not use loading="lazy".
  3. Find repeating card, gallery or list templates below the first screen.
  4. Add native loading="lazy" to ordinary offscreen img elements.
  5. For script-created images or backgrounds, use a tested CMS feature or a compact Intersection Observer solution.
  6. Clear only the necessary cache and compare requests before and after scrolling.
  7. Test dynamic tabs, sliders, filters and the mobile layout.

Technical notes

Ordinary image below the fold

<img src="/images/product.jpg"
     width="800" height="600"
     loading="lazy"
     decoding="async"
     alt="Image description">

Main page image

<img src="/images/hero.jpg"
     width="1200" height="800"
     loading="eager"
     fetchpriority="high"
     alt="Main image">

Do not replace real URLs with placeholders unnecessarily

Older data-src solutions require JavaScript and a fallback. Native loading is simpler and safer when the website and target browsers support it.

Rollback and verification

  • If pictures appear too late, check the viewport distance and script execution.
  • If the LCP disappears or slows down, remove lazy loading from the first screen.
  • If content disappears without JavaScript, restore the original src or provide a correct fallback.
  • After the change, run the independent request check.

Compression, formats, resizing, srcset, alt text and CLS repair are separate services.