A designer hands over a polished Figma file, and a few weeks later the live site feels slower than the mockup promised. The hero image pops in late, the headline font flickers, and a banner pushes the page down just as someone reaches for a button.
Most of that traces back to decisions made at the design stage. Next.js has good tools for images, fonts and layout stability, and they work best when the design gives developers the information those tools need.
Why Design Choices Show Up In Page Speed
Google’s Core Web Vitals measure three things a visitor feels: how fast the main content appears (LCP), how quickly the page responds to input (INP) and how much the layout shifts (CLS). The largest element on screen is usually a design decision, often a hero image, and layout shifts usually come from elements nobody reserved space for.
That makes the designer a co-owner of performance. The good thresholds in Google’s web.dev guidance are LCP within 2.5 seconds, INP of 200 milliseconds or less and CLS of 0.1 or less, and each of them can be won or lost in the design file.
Images: Hand Over Sizes Along With The Files
The Next.js Image component resizes images, generates a srcset so each device downloads a suitable size, and lazy-loads images by default until they come near the viewport. It needs two things from design: the aspect ratio of every image slot, so the browser can reserve space, and how wide each image appears at each breakpoint.
Export source images large enough for the widest slot on a high-density screen, and mark which image is the hero on each template. Developers can then load that one eagerly with high fetch priority while the rest wait for the visitor to scroll. For photos that take a moment to arrive, a blurred placeholder keeps the slot from looking empty.
Fonts: Fewer Files, Loaded The Right Way
Every font family and weight is another file to download. The next/font module self-hosts fonts, including Google Fonts, fetching them at build time so the browser sends no requests to Google, and it generates an adjusted fallback font to reduce layout shift. The Next.js documentation recommends variable fonts and using multiple fonts conservatively.
In practice, pick one or two families, prefer a variable version that covers every weight in one file, and check the licence, since a desktop licence does not always cover self-hosting on a website. Tell developers which weights the design actually uses, so nobody ships nine weights for a page that needs three.
Layouts That Do Not Jump
Layout shift happens when something appears after the page has started rendering and pushes content aside: a cookie banner, an embedded video, a promo bar, an image without dimensions. Design each of those with a fixed slot or an overlay position, so the rest of the page stays put once a visitor starts reading.
Loading states belong in the design file too. A skeleton the same size as the final card keeps the grid stable while data loads, and a promo bar drawn as an overlay does less damage than one that pushes the header down.
Stable layouts and light assets add up at launch. Pagepro, a Next.js and Sanity migration specialist (https://pagepro.co/services/nextjs-development), shipped the Toolbox marketing website with a PageSpeed Insights desktop Performance score of 100/100, LCP 0.4s and CLS 0 (captured 4 Aug 2022, Lighthouse 9.6.4).
A Handover Checklist For Designers
Treat the handover as a short specification stored next to the design file. It should answer the questions a developer would otherwise guess at, because guesses are where the live page and the mockup drift apart. The list below covers what performance depends on; add the brand and accessibility notes your team already uses.
- Aspect ratio and breakpoint widths for every image slot
- The hero image on each template, marked for eager loading
- Font families, the exact weights used and the web licence
- Reserved space or overlay positions for banners, embeds and promo bars
- Loading, empty and error states for every dynamic component
- Hover and keyboard focus states for every interactive element
Clients with exacting design standards notice when those details land. Adam Harvey, CEO of Proofed, described the working relationship this way:
“Pagepro came recommended to us, and we immediately saw them as a partner rather than a service provider. We had very specific requirements on UX and design and the Pagepro team has consistently delivered excellence in Front-end development.”
Before your next handover, open the most image-heavy template, run it through the checklist and write every answer into the design file before the developers start building.