Frontend Performance

Frontend performance has settled on three user-centred metrics, and knowing what each one measures tells you what to fix.

Largest Contentful Paint measures loading: when the biggest element in the viewport finishes rendering. Good is 2.5 seconds or less. It is usually dominated by the hero image or heading, so the fixes are getting that resource discovered and delivered early — preloading it, not lazy-loading it, and shortening the chain of requests before it.

Interaction to Next Paint measures responsiveness: the delay between a user interacting and the screen updating, across the whole visit. Good is 200 milliseconds or less. It replaced First Input Delay because FID only measured the first interaction and only the delay before handling began, which flattered slow applications. INP is usually hurt by long JavaScript tasks blocking the main thread — the fix is doing less work, breaking up long tasks, and deferring what is not needed for the interaction.

Cumulative Layout Shift measures visual stability. Good is 0.1 or less. The causes are boringly consistent: images and embeds without explicit dimensions, content injected above existing content, and web fonts that reflow text when they swap. Reserving space is nearly the whole solution.

JavaScript is the expensive part of a page. Bytes must be downloaded, parsed, compiled, and executed, and unlike images that work happens on the main thread where it blocks interaction. Code splitting so a route only loads what it needs, tree shaking, and simply having fewer dependencies all move the number.

Images are usually the largest bytes. Modern formats, correctly sized variants, explicit dimensions, and lazy-loading everything except the LCP element.

Fonts cause both delay and shift. font-display: swap shows text immediately in a fallback, preloading the file shortens the swap, and a closely matched fallback metric limits the reflow when it arrives.

Measure in the field, not only on your machine. Lab tools tell you what is possible on a fast laptop; real-user data tells you what your users experience on a mid-range phone.