คุณจะเพิ่มประสิทธิภาพและ Core Web Vitals ใน Next.js ได้อย่างไร

Question

Accepted Answer

Next.js ให้เครื่องมือประสิทธิภาพหลายอย่างแก่คุณ การใช้อย่างดีช่วยให้คุณกำหนดเป้าหมาย Core Web Vitals — LCP (การโหลด) CLS (เสถียรภาพของเลย์เอาต์) และ INP (การมีปฏิสัมพันธ์)

ลดการใช้ JavaScript ฝั่งไคลเอ็นต์ (คันโยกที่ใหญ่ที่สุด)

tsx

// ✅ Keep components as Server Components; ship "use client" only at interactive leaves
// A Server Component sends ZERO JS for itself → smaller bundle → better INP/load

จุดแข็งของ App Router คือการส่ง JS ที่น้อยลง ตรรมชาติและการจัดรูปแบบข้อมูลหนักอยู่บนเซิร์ฟเวอร์ "เกาะ" ที่มีการโต้ตอบแต่เพียงเท่านั้นกลายเป็น Client Components

เพิ่มประสิทธิภาพรูปภาพ LCP

// priority = load eagerly (don't lazy-load the LCP image); width/height prevent CLS ``` ## เพิ่มประสิทธิภาพแบบอักษร (CLS + การโหลด) ```tsx import { Inter } from "next/font/google"; const inter = Inter({ subsets: ["latin"], display: "swap" }); // self-hosted, no layout shift ``` ## แยกรหัสส่วนประกอบไคลเอ็นต์ที่หนัก ```tsx import dynamic from "next/dynamic"; const Chart = dynamic(() => import("./Chart"), { ssr: false }); // load only when needed ``` โหลดส่วนประกอบไคลเอ็นต์ขนาดใหญ่ที่ไม่สำคัญ (แผนภูมิ บรรณาธิการ โมดัล) อย่างเกียจคร่านเพื่อไม่ให้บวมกำพร้า bundle เริ่มต้น ## เนื้อหาที่เคลื่อนไหวช้า ```tsx }> // ship the shell instantly, stream slow data → better TTFB/FCP ``` ## แคชอย่างก้าวร้าวและตรวจสอบความถูกต้องอย่างแม่นยำ ```tsx fetch(url, { next: { revalidate: 3600, tags: ["x"] } }); // static speed + controlled freshness ``` ## รายการตรวจสอบที่แมปไปยังเมตริก ```text LCP ↓ : next/image + priority, streaming, CDN/static caching, preconnect CLS ↓ : image width/height, next/font, reserve space for dynamic content INP ↓ : less client JS (Server Components), code-splitting, avoid heavy effects ``` ## วัด อย่าเดา ```text next build → see per-route JS sizes Lighthouse / PageSpeed Insights, the Web Vitals lib, Vercel Analytics → real metrics @next/bundle-analyzer → find what's bloating the bundle ``` ## ทำไมจึงเป็นเรื่องสำคัญ ประสิทธิภาพ Next.js ส่วนใหญ่เกี่ยวกับ **การส่ง JavaScript น้อยลง** (Server Components การแยกรหัส) และการใช้ตัวปรับให้เหมาะสมในตัว (`next/image` `next/font` streaming caching) — แต่ละรายการแมปโดยตรงไปยัง Core Web Vital การรู้ว่าเครื่องมือใดแก้ไขเมตริกใด (และการวัดด้วย `next build`/Lighthouse แทนที่จะเดา) เป็นวิธีที่คุณบรรลุคะแนน LCP/CLS/INP ที่ดีอย่างเป็นระบบ