What it is
Images and heavy blocks are not loaded all at once but when the visitor scrolls to them. The first screen appears faster, and a phone does not waste data on what the visitor never sees.
How we use it
On the studio site product screenshots in cases and cover images load this way: the first screen opens at once and the rest arrives as you scroll.
Where it helps a business
- Pages have many photos: a catalogue, a portfolio, case studies.
- Visitors come from phones and mobile internet.
How we use it
- Images below the first screen. On the studio site product screenshots in cases and cover images load when the visitor scrolls to them. Images have set sizes, so their space is reserved and text does not jump.
- The first screen at once. The main image and the logo at the top are never deferred: they are what people see first.
Common problems
- The first-screen image deferred. The page appears empty and the speed score gets worse, not better.
- No sizes. An image loads and pushes away the text someone is already reading.
When you do not need it
On a short page with one or two images there is almost no gain.