Lazy Loading Vehicle Photos on Dealer Sites

Lazy loading and vehicle photos on a dealer website

Lazy loading means the browser waits to download an image until the shopper is about to see it. On a dealer site it belongs on the gallery photos further along and the vehicle cards lower on inventory pages. It must never be on the first vehicle photo, because that is the image Google's loading measure is usually timing.

Which photos to lazy-load

Lazy loading on each dealer page
Page	Load right away	Lazy-load
Vehicle detail page	The first gallery photo	Every other gallery photo
Inventory search page	The first row of vehicle cards	Cards further down the list
Homepage	The main banner	Offers and cards below the first screen

The first vehicle photo loads right away. The other gallery photos, shown as dashed frames with their space reserved, load only as the shopper swipes to them. — First photo now, the rest as the shopper swipes.

How lazy loading works

Modern browsers support it with one setting on the image: loading="lazy". The browser then fetches the image when it's close to coming into view. Google's guidance is to leave it off any image likely to be in the first screen.

Every lazy-loaded photo also needs its width and height set, so the space is held while it arrives. Without that, the page jumps when the photo lands, which counts against Cumulative Layout Shift.

Size photos for the screen

Lazy loading decides when a photo downloads; size decides how long it takes. A photo taken at full camera size and shown in a phone-sized slot wastes most of its download. Serve each photo at the size it's shown, in a modern format such as WebP or AVIF where the platform supports it.

How to check it's working

1
Run a vehicle page through PageSpeed Insights
Look for warnings about offscreen images and properly sized images.
2
Check the LCP element
The report names it. If it's the first vehicle photo and it's lazy-loaded, remove lazy loading from that one image.
3
Watch the gallery on a phone
Swipe through. Photos should appear as you reach them, without the page jumping.

Photos first, tools after

Even a well-sized first photo waits if chat and tracking tools are starting up at the same time. Site Speed Engine lets those tools load after the photo and price, on every vehicle page. More on vehicle detail page speed.

Sources

Questions

What is lazy loading images?

A browser feature that waits to download an image until the visitor is about to see it, so the first screen loads sooner and less data is used.

Is lazy loading good for SEO?

Yes, for images further down the page. It hurts when applied to the main image, because it delays Largest Contentful Paint.

How do I lazy load images in HTML?

Add loading="lazy" to the image tag, along with its width and height. Leave it off the first image on the screen.

Should the first vehicle photo be lazy loaded?

No. It's usually the largest element on the page, and lazy loading tells the browser to wait on it.

How do I test lazy loading?

Open Chrome's developer tools, go to the Network panel, filter to images, and scroll. Lazy-loaded images should appear in the list only as you scroll to them.

What size should vehicle photos be?

The size they're shown at. Serve smaller versions to phones and larger ones to desktops, rather than one full-size photo to everyone.