Images, fonts and scripts: the classic performance trio

This topic covers the performance side. Images as a traffic channel — alt text, image search, ImageObject schema — live in Image SEO.

Images. next/image gives you lazy loading, AVIF/WebP, and correct sizing — but only if you configure it honestly:

import Image from "next/image";

// The LCP image: priority, no lazy loading
<Image
  src="/hero.jpg"
  alt="Team building a product roadmap"
  width={1200}
  height={630}
  priority
  sizes="(max-width: 768px) 100vw, 1200px"
/>;

• priority on the LCP image only (usually the hero). Everything below the fold stays lazy.
• sizes must match your layout — without it, mobile devices download desktop-sized files.
• alt text describes the image for both screen readers and image search. Empty alt="" only for purely decorative images.

Fonts. next/font self-hosts Google Fonts, eliminates the third-party request, and sets font-display: swap automatically:

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"], display: "swap" });

Scripts. Every third-party script competes with your content for the main thread:

import Script from "next/script";

// Analytics: after the page becomes interactive
<Script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXX" strategy="afterInteractive" />

// Chat widgets, heatmaps: only when the browser is idle
<Script src="https://widget.example.com/chat.js" strategy="lazyOnload" />

Audit what you load: run a Lighthouse trace and question every script that isn't core to the page. A tag manager full of forgotten pixels is the most common INP killer we see in audits.

Checklist:

• Hero image has priority, correct sizes, meaningful alt
• All fonts through next/font, no external font CSS
• Third-party scripts on afterInteractive or lazyOnload
• No layout shift from images (width/height always set)