Login

Core Web Vitals và tốc độ tải trang: hiểu LCP, INP, CLS để tối ưu đúng chỗ

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Ai cũng đã từng bỏ một website vì tải quá chậm, hoặc bấm nhầm nút vì trang bỗng nhảy giật. Core Web Vitals là bộ chỉ số do Google đề xuất để đo chính những trải nghiệm đó. Hiểu ba chỉ số này giúp bạn tối ưu đúng chỗ thay vì tối ưu mò.

Ba chỉ số cốt lõi

LCP: Largest Contentful Paint

Đo thời gian để phần tử nội dung lớn nhất trong khung nhìn (thường là ảnh banner hoặc khối tiêu đề lớn) hiển thị xong. Nó phản ánh cảm giác "trang đã tải xong chưa". Ngưỡng tốt thường được nêu là dưới 2,5 giây.

INP: Interaction to Next Paint

Đo độ nhanh nhạy khi người dùng tương tác (nhấp, chạm, gõ phím): từ lúc bấm đến khi giao diện phản hồi thay đổi. Chỉ số này thay thế chỉ số cũ FID. Ngưỡng tốt thường là dưới khoảng 200 mili giây.

CLS: Cumulative Layout Shift

Đo mức độ nhảy bố cục bất ngờ trong lúc tải, ví dụ chữ bị đẩy xuống khi ảnh hay quảng cáo tải xong. Giá trị càng nhỏ càng tốt, ngưỡng tốt thường là dưới 0,1.

Các ngưỡng cụ thể có thể được cập nhật, hãy kiểm tra tài liệu mới nhất của web.dev khi cần.

Cách đo

  • Lighthouse trong Chrome DevTools: kiểm thử trong phòng thí nghiệm, cho điểm và gợi ý cụ thể. Nên chạy ở chế độ ẩn danh để tiện ích mở rộng không làm sai lệch.
  • PageSpeed Insights: kết hợp dữ liệu phòng thí nghiệm với dữ liệu thực tế từ người dùng nếu trang đủ lượng truy cập.
  • Tab Performance trong DevTools: ghi lại và xem chi tiết từng giai đoạn, tìm tác vụ JavaScript nặng.
  • Thư viện web-vitals: đo trên người dùng thật và gửi về hệ thống phân tích của bạn.

Lưu ý: dữ liệu phòng thí nghiệm là mô phỏng, còn dữ liệu thực địa phản ánh thiết bị và mạng thật của người dùng. Hãy dùng cả hai và đừng chạy theo con số điểm tuyệt đối.

Cải thiện LCP

  1. Tối ưu ảnh lớn nhất: định dạng hiện đại (WebP, AVIF), kích thước phù hợp, nén tốt.
  2. Đừng lazy-load ảnh đầu trang. Nên thêm fetchpriority='high' hoặc preload cho ảnh LCP.
  3. Giảm thời gian phản hồi máy chủ: caching, CDN, tối ưu truy vấn.
  4. Loại bỏ CSS và JavaScript chặn hiển thị: nạp CSS tối thiểu cần thiết, dùng defer cho script.
  5. Tải trước phông chữ quan trọng và dùng font-display: swap.

Cải thiện INP

  1. Chia nhỏ tác vụ JavaScript dài để không chặn luồng chính.
  2. Giảm lượng JavaScript gửi đi: loại thư viện không cần, tách mã theo trang.
  3. Tránh tính toán nặng trong trình xử lý sự kiện; hoãn việc không khẩn cấp.
  4. Trong React, tránh render lại không cần thiết, dùng memo cẩn thận và tách state cục bộ.

Cải thiện CLS

  1. Luôn khai báo width và height cho ảnh và video, hoặc dùng CSS aspect-ratio, để trình duyệt giữ chỗ trước.
  2. Dành sẵn không gian cho quảng cáo, banner và nội dung tải động.
  3. Không chèn nội dung mới phía trên nội dung đang xem, trừ khi là phản hồi cho thao tác của người dùng.
  4. Dùng transform thay vì thay đổi top, height cho hiệu ứng.
<img src='banner.webp' width='1200' height='600' alt='Banner khóa học'
  style='max-width:100%;height:auto'>

Quy trình tối ưu hợp lý

  1. Đo trước để biết chỉ số nào đang kém.
  2. Tìm nguyên nhân gốc bằng DevTools thay vì đoán.
  3. Sửa một thứ mỗi lần và đo lại.
  4. Ưu tiên việc mang lại thay đổi lớn nhất: thường là ảnh, JavaScript thừa và phông chữ.
  5. Theo dõi liên tục, vì hiệu năng dễ tụt khi thêm tính năng mới.

Những thói quen giúp giữ trang nhanh về lâu dài

  • Đặt ngân sách hiệu năng: ví dụ giới hạn dung lượng JavaScript cho mỗi trang, và kiểm tra trong quy trình CI.
  • Xem xét kỹ mỗi thư viện trước khi thêm vào dự án, vì từng thư viện đều làm tăng lượng mã người dùng phải tải.
  • Dùng cache hợp lý cho file tĩnh và đặt tên file kèm mã băm để cập nhật không bị kẹt cache cũ.
  • Bật nén (gzip hoặc brotli) trên máy chủ cho văn bản như HTML, CSS, JavaScript.
  • Kiểm thử trên thiết bị tầm trung và mạng chậm, vì nhiều người dùng không có máy mạnh như máy của lập trình viên.

Kết luận

LCP đo tốc độ hiển thị, INP đo độ nhạy, CLS đo độ ổn định. Thay vì cố đạt điểm số tuyệt đối, hãy nhìn các chỉ số này như những câu hỏi về trải nghiệm: trang có hiện nhanh không, có phản hồi nhanh không, có đứng yên không. Trả lời tốt cả ba, người dùng sẽ cảm nhận được sự khác biệt.

Nếu bạn muốn học cách xây website nhanh và chuẩn kỹ thuật ngay từ đầu, hãy khám phá các khóa học tại codebem.com.

author_photo
Nguyễn Đình Cường

0 comment