Image and font optimization

The two easiest wins in web performance

The image component resizes, converts, and lazily loads images for you, and refuses to render without dimensions — which is precisely what stops the page jumping as images arrive. Mark the hero image as priority so it is not lazily loaded; it is usually the element the browser measures as the largest contentful paint.

Fonts are the other half. Self-hosting through the font loader removes a third-party connection from the critical path and generates a matched fallback so the swap from fallback to webfont does not reflow the paragraph beneath it.

Both problems are invisible on a fast local network and obvious on a phone on mobile data, which is why they survive so long in production.