What Is Lazy Loading? Faster Starts Without Missing Images
Must every image load straight away? Some off-screen content can wait until it is needed.
1:47 · No narration: the video shows each step as text on screen, and every step is written out below, with buttons that jump the video to it.
Prefer YouTube? Watch this video on our YouTube channel (opens in a new tab).
The six points in the video
This is a silent video. The headings, explanations and labels below reproduce the information on screen.
-
Step 1: Start with the first view
Identify what visitors need as soon as the page opens.
On-screen labels: Main heading; Important content; First visible image.
-
Step 2: Defer suitable images
Pictures further down can load as visitors approach them.
On-screen labels: Off-screen gallery; Later sections; Browser lazy loading.
-
Step 3: Keep the main image eager
Lazy loading an important first image can delay it.
On-screen labels: Hero image; Early discovery; Prompt loading.
-
Step 4: Reserve the right space
Image dimensions help prevent content jumping around.
On-screen labels: Width and height; Aspect ratio; Stable reading.
-
Step 5: Review embedded players
Off-screen embeds can also add work to the first load.
On-screen labels: Video player; Map embed; Suitable loading choice.
-
Step 6: Scroll through the whole page
Check that images arrive in time on a slower connection.
On-screen labels: Slow connection test; Images appear; No empty sections.
A practical check for your business
Identify the images a visitor needs immediately and those further down the page. Check the initial view before adding lazy loading everywhere. Reserve image space and test what happens as someone scrolls through the real page.
Sources and further detail
Common questions
Must every image load straight away?
Some off-screen content can wait until it is needed. Make the first view useful and quick.
Go further
More video tips
All 205 videos →
Core Web Vitals Explained: LCP, INP and CLS in Plain English
Loading, response and stability.
Website Page Titles: 6 Checks for Clearer Search Results
Clear titles for useful pages.