The built-in tools Next.js gives you to ship less, and load it smarter.
next/image automatically resizes images, serves modern formats like WebP or AVIF where the browser supports them, and lazy-loads images below the fold — while requiring explicit width and height (or fill) up front specifically to reserve layout space and prevent cumulative layout shift. next/font self-hosts and preloads fonts at build time, removing the extra network request and layout shift that comes from pulling fonts from an external source like Google Fonts directly in the browser.
Beyond assets, automatic code-splitting means each route ships only the JavaScript it actually needs, next/dynamic lets you defer loading a component until it's genuinely needed (or skip server-rendering it entirely), and bundle analysis tooling helps catch when a single dependency is unexpectedly bloating a route's JS payload. The consistent theme across all of these: ship less to the client, and defer whatever isn't needed for the first meaningful paint.
What you'll walk away knowing