Fast Pages: Images, Lazy Loading and Layout Shift

Page speed affects everyone who visits a website. Slow pages lose visitors, frustrate people on mobile data and rank less well in search. The good news is that most of what makes pages slow is fixable with a handful of habits, and most of those habits involve images.

Here is how we approach speed on our platform and our own sites, in practical terms.

Measure what visitors feel

Search engines summarize page experience with a few measurements. Three matter most for most sites:

• Largest contentful paint: how quickly the biggest visible element, often a hero image or headline, appears
• Interaction to next paint: how quickly the page responds when someone taps or clicks
• Cumulative layout shift: how much content jumps around while the page loads

Our platform can collect these measurements from real visitors, with the owner's settings controlling how often, and can run on-demand tests through a public page speed service. Real visitor data is the most honest guide, because it reflects real devices and connections.

Right-sized images

The single biggest win on most pages is serving images at the size they are displayed. A photo displayed four hundred pixels wide does not need to be four thousand pixels wide. When images are uploaded to our media library, smaller versions are created in the background, so pages can serve a size that fits the screen.

Compression matters too. Modern image formats and sensible quality settings can cut file sizes dramatically without visible loss. For example, the cover images on this blog are generated at a fixed size that suits both the blog and social sharing, and compressed to keep them light.

Lazy load what is below the fold

Images further down a page do not need to load before the visitor sees the top. Lazy loading tells the browser to fetch them only as they come close to the screen. That frees bandwidth for what matters first.

The opposite rule matters just as much: the main image at the top of the page should not be lazy loaded, and should not be hidden waiting for an animation. If it is, the page's most important element appears late.

Do not hide the main content behind animation

We learned this lesson while building this site. Our hero visuals were first set to animate in using the same script-driven effect as other sections, which kept them invisible until the script ran. That made the page feel slower and would have hurt the largest contentful paint measurement. We changed them to appear immediately, with only a light fade done in CSS. You can read more about motion choices in supporting reduced motion.

Reserve space to prevent layout shift

Nothing is more irritating than reaching for a button just as the page jumps and you tap an advertisement instead. Layout shift happens when content loads without its space being reserved: an image without dimensions, a font that swaps and changes line lengths, a banner injected at the top.

We prevent it by giving images their dimensions or aspect ratio, reserving space for embedded content and choosing font loading settings that minimize reflow. Fonts are also self-hosted, which removes a slow connection to a third-party server, as described in why we self-host every font.

Keep scripts in proportion

Every script a page loads must be downloaded, parsed and run, which competes with everything else. We avoid loading scripts a page does not need, load animation helpers only when a page uses animations and prefer CSS for effects that CSS can do. Third-party tags, such as analytics, are optional and controlled by the site owner, with built-in analytics available as a lighter alternative.

Cache sensibly

Pages and assets that rarely change can be cached by browsers and servers so repeat visits are faster. Our platform caches rendered pieces such as menus, settings and sitemaps, always with keys that include the specific website, which we explain in why every cache key includes the customer.

Small habits, big results

None of these techniques are exotic. They are habits: right-size images, lazy load the rest, show the main content immediately, reserve space and keep scripts lean. Applied consistently across a platform, they make every site faster without each owner needing to become a performance expert.

Frequently asked questions

What slows down most websites?

Oversized images are the most common cause, followed by heavy scripts, slow third-party resources and fonts loaded from external services.

Should I lazy load every image?

No. Lazy load images below the visible area, but load the main image at the top of the page right away so it appears quickly.

What causes content to jump while a page loads?

Usually images or embeds without reserved space, late-loading fonts or banners inserted at the top. Reserving space for them prevents the shift.