Lazy Loading and Caching: Noticeably Improving Loading Time

Two terms keep coming up when a fast website is the topic: lazy loading and caching. They sound technical, but behind them is a very simple idea, namely to send the visitor only what they need right now, and not to load anything twice. That's exactly what makes a page noticeably faster.

Here I'll explain what the two mean, why they belong together and how much speed they really bring, without technobabble, with pictures from everyday life.

What lazy loading really means

Imagine you walk into a restaurant and the waiter immediately puts every dish on the entire menu on your table, starter, main course, dessert, all at once. Nonsensical, right? You get the dessert when you're at the dessert.

That's exactly how lazy loading, or deferred loading, works. Instead of loading the whole page with all its images in one go, the browser first fetches only what's visible at the top. The images further down are loaded only once you scroll there.

This has a tangible effect: the first impression is there in a fraction of the time. And if the visitor doesn't scroll all the way to the bottom, the lower images were never transferred unnecessarily, that saves loading time and data volume, especially on mobile.

What caching means

Caching is the counterpart. Here it's not about what gets loaded, but how often. A cache is a temporary store: content that hardly ever changes is set aside so that it doesn't have to be fetched from the server again next time.

Think of your local pub. On the first visit the landlord has to get to know you, take your order, everything is new. By the tenth time he already knows what you drink. That's faster, because a lot is already known. A cache remembers website building blocks in exactly this way.

Caching happens in several places:

• In the visitor's browser: logo, fonts and layout are stored locally. On the second page view they're there immediately.
• On the server: finished pages are kept ready instead of being reassembled on every request.
• In the delivery network (CDN): content sits on servers near the visitor, so the routes are short.

Why the two belong together

Lazy loading and caching pull in the same direction, but tackle the problem from two sides. One ensures that on the first visit not too much is loaded at once. The other ensures that on the second visit much doesn't have to be loaded anew at all.

Together this gives a page that builds up quickly on the first click and gets even nippier with each further click. Exactly this feeling, that it simply moves along, keeps visitors engaged and ensures Google rates your page as pleasant.

How much does this bring in practice?

More than many think. Images are almost always the biggest chunk of a website. If you have an image-heavy page and half the images only load on scrolling, often what's transferred at the start already halves. The first impression is thereby there considerably sooner.

With caching the jump is biggest on repeat visits. Anyone who has already opened your page often loads only a fraction on the second time, the rest is already in the temporary store. For regulars who drop by regularly, the page thereby feels almost delay-free.

Do I have to take care of it myself?

The honest answer: you should know that it exists, taking care of it is the job of whoever builds your page. On a cleanly made website, lazy loading and sensible caching are set up by default. You don't have to flip any switches.

What you can pay attention to:

• Images should load only when they come into view, that's standard today with a small addition in the code.
• Your server or host should cache content and deliver it with the right settings.
• After bigger changes the cache has to be cleared, otherwise visitors may still see the old version.

With page-builder sites, the last point in particular is a common pitfall: you change something but still see the old version yourself, because your own browser is showing a cached version. No reason to panic, a quick clear usually does the trick.

Speed you don't see, but feel

The nice thing about lazy loading and caching is that they work invisibly. Nobody notices them directly. Only the result is noticeable: the page is there instantly, the scrolling runs smoothly, on the second visit everything goes even faster. It's this effortlessness that sticks in the mind.

I build my websites so that this technology runs along from the start, lean code, optimised images, a well-thought-out cache. If you'd like to know what speed there is to gain on your page, feel free to look at more posts or get in touch directly via the contact form. I'll tell you honestly where the biggest lever lies.