How we ship faster
What we cut to release weekly.
```
> The pixel dimensions in code samples are typical, not measured on your site.
Do not overthink the threshold. The browser has more context than you. It knows the connection, device and scroll speed. Let it decide when to fetch.
Always set width and height or aspect-ratio. That prevents layout shifts when the image arrives. CLS should stay under 0.1 for a good score.
Add decoding=async on images that do not block the first paint. The browser can decode them off the critical path.
```html
```
> Rule: never use loading=lazy on anything you expect to be the LCP element.
## Avoid the LCP trap: the hero image
A lazy hero image ruins LCP. The browser will not fetch it early, so the largest element renders late. Keep LCP under 2.5 s for a good field score.
1. **Remove lazy on the hero** On "/" replace loading="lazy" with nothing. Keep width and height.
2. **Give it priority** Add fetchpriority=high. This hints the browser to fetch it sooner.
3. **Use responsive sources** Serve WebP or AVIF with srcset and sizes so phones do not download desktop sizes.
4. **Preload when it is CSS** If the hero is a background-image, preload the file. Then keep it out of lazy logic.
5. **Render the HTML server-side** Name the hero image in the HTML. Do not insert it later with JavaScript.
```html
```
A fixed page shows LCP as that hero image, fetched with high priority, not lazy. Other images on "/" below the fold keep loading=lazy and decoding=async.
## Iframes: embeds, videos and maps
Lazy-load iframes that appear below the fold. The native attribute works here too. Embeds are heavy, so this saves a lot of work on first paint.
```html
```
Above the fold, replace the iframe with a static facade and load the iframe on interaction. This reduces third-party script cost and improves INP and TBT in lab runs.
```html
```
A fixed page uses loading=lazy on a below-the-fold map iframe on "/contact". The hero has a static image until you click Play. INP stays under 200 ms for clicks that do not mount the iframe.
## Background images and JavaScript-inserted content
CSS backgrounds do not support loading=lazy. The browser must discover them from CSS, which often happens late. If the image is below the fold, load it with IntersectionObserver.
```html
```
For content inserted by JavaScript, the same pattern applies. Use IntersectionObserver to load and mount when near the viewport. Avoid scroll handlers for this job.
> Google indexes lazy-loaded content when it loads without a user action. IntersectionObserver is fine. A scroll event handler that requires scrolling is not.
A fixed page moves a below-the-fold hero variant that used background-image to a proper img with preload if it was above the fold. This protects LCP and keeps CLS low with width and height in HTML.
## How Google sees lazy-loaded content
As of 2026, Googlebot uses a smartphone crawler. It can index lazy-loaded images and content that appear without a click or gesture. IntersectionObserver is supported by Googlebot rendering.
- Content that loads as it nears the viewport is fine.
- Content that needs a true user action is not indexed until it exists in the DOM.
- A scroll handler that only loads on scroll may not run in rendering. Use IntersectionObserver instead.
- Server-rendered HTML wins: include the key content in the document.
Check your pages with PageSpeed Insights and the URL Inspection tool. If an image is missing in the rendered HTML, Google may not index it. Do not gate it on scroll events or clicks.
## Prevent layout shifts when images load
Lazy-loading often exposes weak layout. Images arrive late and push content down. Reserve space so the layout does not jump. Aim for CLS under 0.1.
- Set width and height on every img. Modern browsers use them to set the aspect ratio.
- If you cannot, set aspect-ratio in CSS on the image box.
- Give ad and embed slots a min-height so banners and iframes do not push content.
- Avoid loading bars that insert above existing content. Use overlays for notices.
- Do not animate layout properties. Use transform for motion.
```html
```
A fixed page keeps the grid stable when images arrive. The scroll feels calm, and the field CLS assessment passes on mobile and desktop in Search Console.
## Measure the effect: field and lab data
Judge success with field data first. The Core Web Vitals assessment uses the 75th percentile of real Chrome users over 28 days. A URL passes when LCP, CLS and INP are all good.
- Good LCP is up to 2.5 s, poor above 4 s.
- Good CLS is up to 0.1, poor above 0.25.
- Good INP is up to 200 ms, poor above 500 ms.
Use PageSpeed Insights. The top section shows field data if there is enough traffic. That is what Google Search uses for the ranking signal, with content and relevance well ahead of it.
Use the lower section for lab checks. Lighthouse simulates a mid-range phone on throttled 4G. Scores vary between runs. Total Blocking Time weighs 30 percent there and is the proxy for INP in lab tests.
Expect the two to disagree. Field data wins. If a page has too few visits, the reports fall back to origin-level or show nothing. Keep testing as traffic grows.
## A simple lazy loading example that works
Here is a full pattern for images below the fold on "/blog". It uses srcset, sizes, lazy loading and decoding=async, and reserves space with width and height.
```html
What we cut to release weekly.