Why Is My Next.js Site Slow?
Updated · Vanta Foundry
Short answer
What usually makes a Next.js website slow, and how is it fixed?
A Next.js site is usually slow for one of a few reasons: pages rendered on every request that could be static or cached, large images served without optimisation, too much JavaScript sent to the browser, slow data fetching that blocks the page, or third-party scripts loading first. Measure before changing anything: field data in Search Console shows which pages are slow for real visitors, and the browser's performance tools show why.
Rendering Every Request
Next.js can build a page once and serve it from a cache, or render it on the server for every visitor. Product, service and article pages rarely need fresh rendering each time. Pages that read cookies, headers or uncached data are rendered per request, often by accident. Make content pages static or cache them with a sensible revalidation interval, and keep per-request rendering for pages that genuinely change per visitor.
Images
Large photos are the most common cause of a slow first paint. Use the framework's image component with real width and height, the right sizes for each screen, and priority only for the main image in view. Reserve space for every image so the layout doesn't shift.
Too Much JavaScript
Marking whole pages or layouts as client components ships their code to every visitor. Keep components on the server unless they need state or event handlers, push interactivity down to the small parts that need it, and check the size of every library you add. A long task in the browser is what makes taps feel slow.
Slow Data and Blocking Requests
A page waits for its slowest data request. Fetch in parallel instead of one after another, cache results that don't change per visitor, and stream slower sections in after the main content so visitors see the page sooner.
Third-Party Scripts
Chat widgets, tag managers, heatmaps and ad pixels often cost more than the site's own code. Load them after the page is interactive, remove the ones nobody uses, and test with them switched off to see their real cost.
How We Approach It
We build in Next.js and React, and test speed on phones before launch. For an existing site, we measure first, fix the largest cause, and measure again. See ecommerce website development or website maintenance and support, and Core Web Vitals explained for the measurements themselves.
Related services