Speed and SEO on a real Next.js site

Search visibility and user trust both suffer when a page feels slow. You do not need a mythology of micro-benchmarks. You need a repeatable Core Web Vitals checklist tied to the tools you already use in Next.js: the Image component, font loading, and script strategy for Analytics and AdSense.

This is the process I use on my own site and client projects when performance starts slipping after "just one more script."

Know which Vital you are fixing

LCP is about how quickly the main content appears — often a hero image or large heading block. INP is about how quickly the page responds to taps and clicks. CLS is about unexpected layout shift. Fixing the wrong Vital wastes a weekend.

1. Measure on mobile throttling, not only desktop cable internet.
2. Identify the LCP element in field or lab tooling.
3. Check whether scripts or long tasks are delaying interactivity.
4. Watch fonts, ads, and late-loading images for CLS.

Next.js Image for LCP and CLS

Use next/image for content images with real width and height, or fill inside a sized container. Mark the true LCP image with priority. Do not priority-load every image on the page. That turns a precision tool into a traffic jam.

1
import Image from "next/image";
2

3
export function BlogCover() {
4
  return (
5
    <Image
6
      src="/blog/seo.png"
7
      alt="Core Web Vitals and SEO checklist visual"
8
      width={1200}
9
      height={630}
10
      priority
11
      sizes="(max-width: 768px) 100vw, 720px"
12
    />
13
  );
14
}

Also compress source assets before upload. Next can optimize delivery, but it should not be asked to rescue a multi-megabyte PNG that never needed alpha.

Fonts without layout surprises

Layout shift from late fonts is still common. Prefer next/font so files are self-hosted and metrics can be adjusted. Limit family count. A portfolio does not need five display fonts in the first viewport.

If you must use a distinctive display face, load the weights you actually use and ensure fallback metrics are close enough that headings do not jump when the webfont swaps in.

Script strategy for GA and AdSense

Third-party scripts are where many otherwise clean Next sites lose their Vital scores. I load AdSense with next/script and an explicit strategy rather than a raw tag dumped into the document head without thought.

1
import Script from "next/script";
2

3
export default function GoogleAdSense({ clientId }: { clientId: string }) {
4
  return (
5
    <Script
6
      async
7
      src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${clientId}`}
8
      crossOrigin="anonymous"
9
      strategy="afterInteractive"
10
    />
11
  );
12
}

afterInteractive is a common choice for ads and analytics that must run for real users but should not block first render. For purely optional widgets, consider lazyOnload. Never put heavy marketing tags in a way that stalls the LCP image.

Also disclose ads and privacy practices clearly. Speed work does not replace consent and policy pages — especially when monetizing with AdSense.

A CWV checklist I reuse

1. One priority image max above the fold.
2. No unsized media in the hero.
3. Fonts via next/font with minimal weights.
4. Client JS reserved for interactive islands only.
5. Analytics and AdSense on explicit next/script strategies.
6. Avoid inserting ads that shove content after paint.
7. Compress images and remove dead dependencies.
8. Re-test on a mid-range phone after each change.

SEO benefits follow because users stay, crawl budget is not wasted on sluggish URLs, and your pages are less likely to frustrate on mobile. Speed is not a trick. It is respect for the reader's time — and on South African mobile networks, that respect is visible immediately.

JavaScript weight and App Router boundaries

Every "use client" boundary is a potential bundle cost. Menus, theme toggles, and games may need the client. Blog article bodies usually do not. Keep markdown or TSX content on the server so crawlers and users receive HTML without waiting on hydration for the words.

Barrel files that re-export large icon sets are a classic trap. Import the specific module you need. If bundle analysis shows a surprise library on a content route, treat it as a defect, not a mystery.

Dynamic import heavy islands. The homepage can mention a Phaser demo without shipping Phaser to the blog post about sitemaps.

Caching, hosting, and the boring basics

Use a host that fingerprints static assets and caches them aggressively. Make sure your images and fonts benefit from that. HTML for frequently edited pages can be fresher; hashed assets should be long-lived.

Compression and modern image formats help, but only after you remove waste. A perfectly encoded image that should not be in the hero still hurts LCP.

On mobile networks common in South Africa, round trips matter. Reducing third-party origins often helps more than micro-optimizing a CSS transition.

Connecting speed work to SEO outcomes

Faster pages support engagement and reduce frustration. They also make it more likely that crawlers can efficiently access content. Pair CWV work with substantive titles, internal links, and a sitemap that reflects reality.

When I improve speed, I re-check the page as a human: Can I read it? Can I tap the CTA? Do ads remain secondary to the article? SEO is not only scores. It is whether the page deserves to be found.

Make the checklist routine. Measure, change one variable, measure again. That discipline beats occasional panic optimizations after a bad Lighthouse screenshot.

Ad slots and CLS discipline

If you monetize with AdSense, reserve space for units so late-loading creatives do not shove article text downward. A shifting paragraph under a reader's finger is both a Vital problem and a trust problem.

Place ads where they do not displace the H1 or the primary CTA on mobile. Measure after enabling real production creatives, because placeholders understate the cost.

Speed work and monetization can coexist when script strategy, reserved layout, and content priority are deliberate. When they are not, the page feels like a trap. Readers leave, and SEO suffers for reasons no keyword tool will diagnose.

Re-run your CWV checklist after any third-party change. Treat new tags like production deployments of risk, because that is what they are.

A practical measurement loop

I pick one primary template — usually the homepage or a dense blog post — and measure it before changing anything. Then I change one class of issue at a time: images, fonts, scripts, or JS boundaries. Parallel changes make it impossible to learn what helped.

Lab tools are useful for reproduction. Field data, when available, tells you what real users felt. If you only have lab tools on a personal site, still test on a phone over cellular. That single habit catches problems desktop Lighthouse can understate.

Write down the before and after notes in the PR. Future performance work goes faster when you remember that the AdSense strategy change, not the CSS tweak, moved LCP.

Speed supports SEO when it protects readability and crawl access. Keep the checklist close, and treat third-party tags as first-class performance citizens.

Putting it all together

Improve LCP with disciplined Image and font work. Protect INP by reducing unnecessary client JavaScript. Protect CLS by sizing media and reserving ad space. Load GA and AdSense with explicit next/script strategies. Re-measure on mobile.

That loop is the whole game for most personal Next.js sites. Do it calmly and repeatedly, and both users and search engines get a better document.

One more reminder

Performance work compounds when it becomes routine. Keep Image, fonts, and script strategy on your definition of done for every page that ships.

When you add a new third-party tag, treat it like a feature launch: measure LCP and INP before and after on a mid-range phone. If the cost is too high, gate the script to production only or delay it until after the first interaction.

Do that consistently and speed stops being a rescue project. It becomes part of how you publish.