Performance

Budgets

Performance is a design constraint, not a cleanup task. Agree the budget before the page is built, because most of the weight is decided at design time.

Metric	Target	What it measures
LCP (Largest Contentful Paint)	under 2.5s	When the main content appears
INP (Interaction to Next Paint)	under 200ms	How quickly the page responds to input
CLS (Cumulative Layout Shift)	under 0.1	How much the layout jumps while loading
JavaScript transferred	under 200KB compressed	Parse and execute cost
Hero image	under 150KB	Usually the LCP element

Measure against field data where possible. Lab tools run on a fast machine with a warm cache and flatter the result.

Images

Images are the largest slice of most pages.

• Serve modern formats. AVIF or WebP, with a fallback if the audience needs one.
• Always set width and height, or an aspect ratio. Missing dimensions are the most common cause of layout shift.
• Lazy-load below the fold with loading="lazy". Never lazy-load the LCP image.
• Add fetchpriority="high" to the hero image so it is requested early.
• Ship responsive sources with srcset and sizes rather than one desktop-sized file.

Fonts

• Two families at most, and only the weights actually used.
• Subset to the character ranges the site needs.
• font-display: swap so text is readable before the webfont arrives.
• Preload the one font file used above the fold, and no more than that.
• Pick a fallback with similar metrics so the swap does not reflow the page.

JavaScript

• Server-render what can be server-rendered. Hydration is a cost, not a default.
• Split by route, and load below-the-fold interactivity on demand.
• Defer anything not needed for first paint.
• Keep long tasks under 50ms. Long tasks are what INP actually measures.
• Audit dependencies by transferred size, not by download count.

CSS

• Ship the stylesheet the page needs, not the whole system.
• Inline only genuinely critical CSS, and keep it small enough to stay in the first packet.
• Animate transform and opacity. Animating layout properties forces reflow.
• Avoid @import in production CSS. It serialises requests.

Third-party scripts

Third-party code is the most common reason a well-built page is slow.

• Every tag needs an owner and a reason to exist. Remove the ones that have neither.
• Load tags asynchronously and after first paint.
• Reserve space for anything a third party injects, such as a chat widget or a banner.
• Re-measure after each tag is added. The cost is rarely what the vendor claims.

Measuring

• Lighthouse for a quick local check while building.
• WebPageTest for a throttled run that resembles a real connection.
• Field data from real users for the number that actually matters.
• Re-run on every significant content change, not only at launch.