Performance is a product decision before it becomes an engineering score. Page hierarchy, media direction, type choices, and interaction design define much of the final loading cost.
01
Set the experience budget in design
A performance budget should describe the experience that must remain fast. Define the main entry pages, the most important action, the likely device conditions, and the content that must appear first. This gives the team a useful constraint instead of a score added near release.
Core Web Vitals provide clear targets for real user experience. A good result reaches Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint within 200 milliseconds, and Cumulative Layout Shift at 0.1 or less. Teams should assess these values at the 75th percentile of page visits.
02
Design the largest contentful element
The largest visible image or text block often becomes the Largest Contentful Paint element. Identify it in the design. If a hero image carries the message, give it a stable aspect ratio, a realistic crop, and high loading priority. If the headline carries the message, avoid blocking it with unnecessary font and script work.
Do not make every visual urgent. One above-the-fold image may need priority. The gallery below it can load later. This distinction protects the first view without removing the editorial depth that gives the page character.
03
Give media a delivery rule
Every approved image needs more than a filename. Record its role, focal point, expected aspect ratios, responsive sizes, loading behavior, and alternative text. This small step prevents a desktop asset from becoming an oversized mobile download.
Next.js Image can serve correctly sized modern formats, preserve visual stability, and lazy-load images below the viewport. Those benefits still depend on correct dimensions and an accurate sizes value. The design system should make these decisions repeatable.
- Purpose and focal point
- Desktop and mobile crop
- Intrinsic dimensions or stable container ratio
- Priority, eager, or lazy loading
- Useful alternative text
04
Spend interaction cost with intent
Client JavaScript is not free. Use it for behavior that improves the task. Keep content, navigation, and core structure in server-rendered output when possible. A visual effect should not delay the first useful action or make input feel slow.
Motion needs the same discipline. Prefer transform and opacity. Avoid layout changes that trigger repeated calculation. Respect reduced-motion preferences, and remove decorative transitions when users ask for less movement.
05
Measure journeys before release
Measure the homepage, but do not stop there. Test a service page, a detailed article, a form journey, and the heaviest project page. Use narrow screens, slower networks, repeat visits, and failure states. Check field data after release because laboratory tests cannot reproduce every device and connection.
Performance work becomes sustainable when the team records each result with the change that caused it. The goal is not one perfect report. The goal is a product system that protects speed as content and features evolve.
Primary sources