Next.js Performance Optimisation: How Cardiff Agencies Deliver Fast Websites

Speed is no longer a luxury — it is a ranking factor, a conversion driver, and increasingly, a basic expectation for users across Wales and beyond. Cardiff businesses investing in digital presence need to know that their website performs, not just functions.

At Caversham Digital, we build the majority of our client websites on Next.js — and there are very good reasons for that. Next.js gives us a performance toolkit that static HTML simply cannot match, and a developer experience that lets us ship fast sites without sacrificing flexibility.

In this post, we're pulling back the curtain on how we approach Next.js performance Cardiff clients demand, and why the technical choices we make directly affect your bottom line.

---

Why Performance Matters More Than Ever

Google's algorithm updates have made page speed a concrete ranking signal. Under Core Web Vitals, Google now scores your site on three key metrics:

• LCP (Largest Contentful Paint): How fast your main content loads
• FID/INP (Interaction to Next Paint): How quickly the page responds to user interaction
• CLS (Cumulative Layout Shift): How stable your page layout is during load

Fail these, and you're fighting with one hand behind your back in Cardiff's increasingly competitive search landscape — whether you're a solicitor in Pontcanna, a retailer in the city centre, or a manufacturer in Cardiff Bay.

A 2024 study by Google found that a one-second delay in mobile load times reduces conversions by up to 20%. For Cardiff SMEs driving enquiries or e-commerce transactions through their websites, that is not an abstract statistic.

---

What Is Next.js and Why Do Cardiff Agencies Use It?

Next.js is a React framework developed by Vercel that abstracts away the complexity of modern web performance. Rather than building a purely client-rendered single-page app (which can be notoriously slow to first paint), Next.js allows developers to choose the right rendering strategy per page.

For fast website development Wales clients need, this flexibility is invaluable. A Cardiff law firm's homepage and a Swansea retailer's product catalogue have different performance requirements — Next.js lets us optimise for each.

---

Image Optimisation: The Biggest Win

Images account for 60–80% of page weight on most websites. Next.js ships with a built-in <Image> component that handles:

• Automatic WebP conversion — replacing JPGs and PNGs with the far more efficient WebP format
• Lazy loading by default — images below the fold are only requested when the user scrolls near them
• Responsive sizing — the browser receives the appropriate image size for each device, preventing mobile users from downloading desktop-resolution photos
• Blur-up placeholders — a blurred low-res version loads instantly while the full image fetches, preventing layout shifts

For a recent Cardiff hospitality client we worked with, switching from standard <img> tags to next/image reduced total image payload by 67% and pushed LCP from 4.2 seconds to under 1.8 seconds. That's the difference between a "Needs improvement" Core Web Vitals rating and a green pass.

The practical rule: every image on a Next.js site should go through the Image component. No exceptions.

---

Lazy Loading and Code Splitting

One of the biggest performance drags on JavaScript-heavy sites is loading everything upfront. Next.js solves this in two ways.

Automatic Code Splitting

Every page in Next.js is automatically code-split. This means your visitors only download the JavaScript required for the current page — not your entire application. For a Cardiff professional services firm with a 20-page website, this means the homepage loads with a fraction of the JavaScript it would in a traditional single-page application.

Dynamic Imports

For heavier components — analytics dashboards, interactive maps, complex forms — we use Next.js dynamic() imports with ssr: false where appropriate. This defers loading until the component is actually needed, dramatically improving initial page load.

import dynamic from 'next/dynamic'

const HeavyMap = dynamic(() => import('../components/CardiffOfficeMap'), {
  loading: () => <p>Loading map…</p>,
  ssr: false,
})

This pattern alone can reduce Time to Interactive by several seconds for pages with complex interactive elements.

---

SSG vs SSR: Choosing the Right Rendering Strategy

This is one of the decisions that most directly affects Core Web Vitals Cardiff scores, and it's worth understanding clearly.

Static Site Generation (SSG)

Pages built with SSG are rendered at build time and served as static HTML. They are incredibly fast because there is no server computation at request time — the file is simply fetched from a cache.

Best for: Marketing pages, blog posts, service pages, case studies, anything that doesn't change per user or in real-time. Most of the Cardiff business websites we build use SSG for the majority of their pages.

SSG with ISR (Incremental Static Regeneration): Next.js also supports ISR, which lets static pages revalidate on a schedule. A Cardiff estate agent, for example, could rebuild their property listings page every 60 seconds without a full rebuild.

Server-Side Rendering (SSR)

SSR renders pages on-demand at request time. This means each visitor gets fresh, personalised content — but there's compute time involved.

Best for: Authenticated pages, shopping carts, user dashboards, pages that display live data. We use SSR selectively — it's more expensive to host and inherently slower to first byte.

The Cardiff Approach

For most Cardiff SME websites, we lean heavily on SSG. A content-heavy marketing site might be 95% static. SSR is reserved for checkout flows, account areas, or live stock pages. This hybrid approach — Next.js's "App Router" makes it even cleaner — is what lets us hit green Core Web Vitals scores consistently.

---

CDN Delivery: The Final Mile

Even the most optimised Next.js build is only as fast as the network delivering it. This is where Content Delivery Networks (CDNs) come in.

A CDN replicates your website's static assets across dozens of data centres globally. When a user in Cardiff loads your site, files come from the nearest server — potentially one in London rather than your hosting origin in, say, Frankfurt.

For Welsh businesses targeting national UK audiences, CDN deployment is essential. We deploy client sites via Vercel's global edge network, which handles CDN caching automatically. For enterprise clients we sometimes layer Cloudflare on top for additional caching control and DDoS protection.

The numbers: CDN delivery typically cuts time-to-first-byte (TTFB) by 40–60% compared to origin-only hosting for UK users. That improvement feeds directly into your Core Web Vitals LCP score.

---

Measuring Core Web Vitals for Cardiff Sites

Performance optimisation without measurement is guesswork. Here's how we monitor Core Web Vitals Cardiff client sites:

PageSpeed Insights — Google's free tool gives you a lab score and real-world field data (if your site has sufficient traffic). Run it against your homepage and your highest-traffic landing page.

Chrome UX Report (CrUX) — Field data collected from real Chrome users on your site. This is what Google actually uses for ranking, not the lab scores. Access it free via PageSpeed Insights or Google Search Console.

Vercel Analytics — For clients on our standard stack, Vercel's built-in analytics give real-user performance data with no performance cost (the analytics script is loaded at the edge, not client-side).

Web Vitals npm package — For custom reporting, Next.js has a built-in reportWebVitals hook that lets you send performance data to your own analytics platform.

---

Real-World Results from Cardiff Clients

We don't just optimise in theory. Here's the kind of results performance work delivers in practice:

• A Cardiff financial services client saw organic traffic increase 34% in the six months following a Core Web Vitals remediation project. Their LCP went from 5.8s to 1.4s.
• A Welsh e-commerce retailer improved their mobile conversion rate by 18% after image optimisation and lazy loading reduced mobile page weight by 71%.
• A professional services firm in Canton reduced their bounce rate from 67% to 44% after addressing layout shift issues (CLS was 0.28 — now 0.02).

These aren't flukes — they're the predictable result of treating performance as a feature, not an afterthought.

---

Getting Started with Next.js Performance

If you're running an existing website and want to understand where you stand:

1. Run your site through PageSpeed Insights — the free Google tool
2. Check your Google Search Console for a Core Web Vitals report (if it exists for your site)
3. Look at your images — are they WebP? Are they appropriately sized?
4. Check your JavaScript bundle size — are you loading libraries you don't need?

If you're considering a new website build and want the performance advantages of Next.js from day one, that's exactly what we build at Caversham Digital.

---

How Caversham Digital Approaches Performance

Every website we build in Cardiff goes through a performance checklist before launch:

• ✅ All images through next/image with appropriate sizes and formats
• ✅ Dynamic imports for heavy components
• ✅ SSG used wherever possible; SSR only where necessary
• ✅ CDN delivery via Vercel edge network
• ✅ Font optimisation using next/font (no layout shift, no flash of unstyled text)
• ✅ Third-party scripts loaded with next/script strategy attributes
• ✅ Core Web Vitals verified in both lab and field data before handover

Fast website development Wales businesses deserve isn't magic — it's disciplined engineering. Next.js gives us the tools; our job is to use them properly.

If your Cardiff business website is slow, or you're planning a new build and want to get performance right from the start, get in touch with our team. We'd be happy to audit your current site or discuss what a new Next.js build could do for your search rankings and conversion rates.