Careeroza

Performance and SEO Questions

What are Core Web Vitals and how does Next.js help?

LCP (load, ≤ 2.5 s), INP (responsiveness, ≤ 200 ms), CLS (visual stability, ≤ 0.1). Next.js helps with server rendering and caching (fast LCP), Server Components and code splitting (less JS, better INP), next/image and next/font (no layout shift), next/script strategies, and useReportWebVitals for measurement.

What does next/image do?

Resizes and converts images on demand (WebP/AVIF), generates srcset so the browser downloads the right width, lazy-loads off-screen images, and requires dimensions (or fill) to prevent layout shift. Use priority for the LCP image, sizes for responsive images, and remotePatterns to allow external hosts.

How do you reduce client-side JavaScript?

  • Keep components on the server; push 'use client' to leaves.
  • Pass server JSX as children into client wrappers.
  • next/dynamic / import() for heavy, rarely used widgets.
  • Analyse the bundle; replace heavy libraries; optimizePackageImports.
  • Load third-party scripts with lazyOnload where possible.

How do you handle SEO in the App Router?

Static metadata or async generateMetadata (title, description, canonical, Open Graph), opengraph-image.tsx for share images, sitemap.ts and robots.ts, JSON-LD script tags for rich results, server-rendered content, clean slug URLs with permanent redirects to the canonical one, and good Core Web Vitals.