Image Optimization
PerformanceCompressing, resizing, and serving images in modern formats so pages load faster without losing visible quality — usually the single biggest performance win…
Performance
Lazy Loading
Deferred Loading
Lukas HorvathCo-founder
What is Lazy Loading?
Lazy loading is a performance technique where images, videos, and other heavy assets are loaded only when they're about to enter the visitor's viewport. Instead of loading every asset on the page upfront, the browser fetches them as needed. This reduces initial page weight and speeds up first paint.
Why it matters
Most pages waste bandwidth loading content nobody scrolls to. A homepage with twelve images forces the browser to download all twelve before the visitor sees anything — even if they bounce after the hero. Lazy loading flips the math. The hero loads instantly. The rest loads as the visitor moves down. Faster perceived speed, better Core Web Vitals, fewer bounces. It is the cheapest performance win in modern web development, and yet half the sites we audit still don't use it.
How it works
On modern browsers, you add `loading="lazy"` to an image tag and the browser handles the rest. For videos and iframes, the same attribute applies. For more aggressive control — like delaying a Calendly embed or a YouTube player until the visitor scrolls — developers use the Intersection Observer API to trigger loads at specific thresholds. Done right, the visitor sees the top of the page in under a second, and the deeper content arrives invisibly as they scroll. Done wrong, you get content popping in awkwardly. The fix: reserve space with width and height attributes so layout doesn't shift.
Related terms
Page Speed
PerformanceHow quickly a web page loads and becomes usable for a visitor — measured in seconds and milliseconds, and treated by Google as a confirmed ranking signal…
Largest Contentful Paint
PerformanceThe Core Web Vital that measures how long it takes for the biggest visible element on a page — usually the hero image or main headline — to finish loading in…
Core Web Vitals
PerformanceGoogle's three benchmark metrics that measure how fast a page loads, how quickly it responds to clicks, and how stable the layout feels as it renders — used in…
Caching
PerformanceStoring a copy of a page, image, or piece of data so it can be served instantly the next time it's requested — instead of regenerating it from scratch on every…
Content Delivery Network
PerformanceA global network of servers that stores copies of your site close to visitors, so pages load fast in São Paulo, Sydney, and Stockholm without every request…