0Pricing
Next.js 15 Fullstack Web Apps · บทเรียน

ตัวชี้วัดหลักของเว็บและการตรวจติดตาม

ทำความเข้าใจ LCP, INP และ CLS วัดค่าจากผู้ใช้จริง และใช้ความสามารถของ Next.js กับเครื่องมือสังเกตการณ์เพื่อให้แอปที่ใช้งานจริงยังคงทำงานได้รวดเร็ว

ตัวชี้วัดหลักของเว็บและการตรวจติดตาม เป็นบทเรียน Next.js 15 Fullstack Web Apps ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Next.js 15 Fullstack Web Apps และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Next.js 15 Fullstack Web Apps มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

What Are Core Web Vitals

Core Web Vitals are Google's user-centric performance metrics that influence both UX and SEO ranking. The three current metrics are:

  • LCP — Largest Contentful Paint (loading)
  • INP — Interaction to Next Paint (responsiveness)
  • CLS — Cumulative Layout Shift (visual stability)

LCP: Loading Speed

LCP measures when the largest visible element (often a hero image or heading) finishes rendering. Aim for under 2.5s. Improve it with image optimization, priority loading, and server rendering.

import Image from 'next/image';

<Image src="/hero.jpg" alt="Hero" width={1200} height={600} priority />

INP: Responsiveness

INP replaced FID. It measures the latency of user interactions across the whole visit. Aim for under 200ms. Long JavaScript tasks on the main thread hurt INP most.

CLS: Visual Stability

CLS quantifies unexpected layout shifts. Aim for under 0.1. Always set explicit width and height on images and reserve space for ads and embeds.

Lab vs Field Data

Lab data comes from a controlled run (Lighthouse). Field data (RUM) comes from real users on real devices. Field data is the source of truth for ranking; lab data is great for debugging.

Reporting with useReportWebVitals

Next.js exposes useReportWebVitals to collect real-user metrics and send them to your analytics endpoint.

'use client';
import { useReportWebVitals } from 'next/web-vitals';

export function Vitals() {
  useReportWebVitals((metric) => {
    navigator.sendBeacon('/api/vitals', JSON.stringify(metric));
  });
  return null;
}

Bucketing a Metric

Classify a metric value into good / needs-improvement / poor. Pure logic you can run anywhere.

function rateLCP(ms) {
  if (ms <= 2500) return 'good';
  if (ms <= 4000) return 'needs-improvement';
  return 'poor';
}
console.log(rateLCP(1800));
console.log(rateLCP(3200));
console.log(rateLCP(5000));

Reducing Main-Thread Work

To improve INP, ship less JavaScript and defer non-critical work. Use dynamic imports to code-split heavy client components.

import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('./Chart'), { ssr: false });

Server Components Help

React Server Components render on the server and send no JavaScript to the client for that part of the tree, directly reducing bundle size and improving INP and LCP.

Production Monitoring Tools

Set up continuous observability:

  • Vercel Speed Insights for built-in RUM.
  • Vercel Analytics for traffic.
  • Sentry / OpenTelemetry for errors and traces.

Alert when a metric regresses past its threshold.

Set a Performance Budget

Define budgets (e.g. LCP < 2.5s, JS < 170KB) and enforce them in CI so regressions fail the build before they reach users.

Quick Check

Which Core Web Vital measures the responsiveness of user interactions, and what is its target?

Recap

You learned to keep production fast:

  • LCP (loading), INP (responsiveness), and CLS (stability) with their targets.
  • The difference between lab and field data.
  • Collecting RUM with useReportWebVitals.
  • Reducing JS via code splitting and Server Components, plus monitoring and budgets.

คำถามที่พบบ่อย

บทเรียน “ตัวชี้วัดหลักของเว็บและการตรวจติดตาม” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวชี้วัดหลักของเว็บและการตรวจติดตาม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Next.js 15 Fullstack Web Apps ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Next.js 15 Fullstack Web Apps มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวชี้วัดหลักของเว็บและการตรวจติดตาม”

ทำความเข้าใจ LCP, INP และ CLS วัดค่าจากผู้ใช้จริง และใช้ความสามารถของ Next.js กับเครื่องมือสังเกตการณ์เพื่อให้แอปที่ใช้งานจริงยังคงทำงานได้รวดเร็ว คุณปฏิบัติ Next.js 15 Fullstack Web Apps ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Next.js 15 Fullstack Web Apps หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Next.js 15 Fullstack Web Apps บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ตัวชี้วัดหลักของเว็บและการตรวจติดตาม” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Next.js 15 Fullstack Web Apps นี้ได้ไหม

ได้ บทเรียน Next.js 15 Fullstack Web Apps ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การนำไปใช้งานบน Vercel และ Netlify
  2. การปรับแต่งรูปภาพและแบบอักษร
  3. การวิเคราะห์บันเดิลและตรวจสอบประสิทธิภาพ
  4. ตัวชี้วัดหลักของเว็บและการตรวจติดตาม
← กลับไปที่ Next.js 15 Fullstack Web Apps