테크

INP thay FID trong Core Web Vitals (12/3/2024): đo và sửa thế nào

Ảnh minh hoạ: INP thay FID trong Core Web Vitals (12/3/2024): đo và sửa thế nào
Ảnh: 2427999 / Pixabay (Pixabay Content License)

Ngày 12/3/2024, chỉ số Interaction to Next Paint (INP) chính thức thay First Input Delay (FID) trong bộ ba Core Web Vitals. Nói đơn giản, thay vì chỉ đo lần chạm đầu tiên, Google giờ nhìn vào độ phản hồi của trang trong suốt quá trình người dùng sử dụng. Bài này giải thích INP là gì, đo ở đâu và cách sửa những nguyên nhân thường gặp.

INP là gì, khác FID ở đâu

Theo hướng dẫn của web.dev, INP đo độ trễ của các tương tác nhấp chuột, chạm màn hình và gõ phím trong suốt thời gian người dùng ở trên trang, rồi báo cáo một giá trị đại diện, gần với tương tác chậm nhất. Mỗi tương tác gồm ba phần: thời gian chờ trước khi xử lý (input delay), thời gian chạy mã xử lý sự kiện và thời gian cho đến khi trình duyệt vẽ lại khung hình tiếp theo. Cuộn, rê chuột và phóng to không được tính.

FID chỉ đo độ trễ đầu vào của lần tương tác đầu tiên. Vì vậy một trang có thể đạt FID tốt nhưng vẫn lag khi người dùng bấm nhiều lần, mở menu, lọc sản phẩm hay gõ vào ô tìm kiếm. INP phản ánh đúng hơn cảm giác “trang này mượt hay giật”.

기준 FID (cũ) INP (mới)
Đo gì Độ trễ đầu vào của tương tác đầu tiên Toàn bộ độ trễ của các tương tác trong suốt lượt xem trang
범위 Một lần Cả vòng đời trang
상태 Bị loại khỏi Core Web Vitals từ 12/3/2024 Core Web Vital chính thức từ 12/3/2024

Ngưỡng đánh giá

Theo web.dev, giá trị INP được đánh giá ở phân vị 75 của dữ liệu thực tế từ người dùng, tách riêng điện thoại và máy tính:

  • Tốt: từ 200 mili giây trở xuống.
  • Cần cải thiện: trên 200 đến 500 mili giây.
  • Kém: trên 500 mili giây.

Hãy nhớ đây là số liệu từ người dùng thật, không phải kết quả đo một lần trong phòng thí nghiệm.

Cách đo

Có hai nhóm cách đo:

  1. Dữ liệu thực tế (field): PageSpeed Insights hiển thị dữ liệu từ báo cáo trải nghiệm người dùng Chrome (CrUX) nếu website đủ điều kiện có đủ lượt truy cập. Nếu dùng dịch vụ giám sát người dùng thực (RUM), hãy kiểm tra xem họ đã hỗ trợ INP chưa. Dữ liệu CrUX và RUM có thể chênh lệch.
  2. Đo thử (lab): tự thao tác các luồng quen thuộc như mở menu, thêm vào giỏ, gửi form khi đang mở công cụ phát triển của trình duyệt. Chỉ số Total Blocking Time chỉ nên xem là thước đo gần đúng, không thay thế INP.

web.dev cũng cho biết FID bị loại khỏi Google Search Console từ 12/3/2024, còn PageSpeed Insights và CrUX giữ FID thêm sáu tháng trong giai đoạn ngừng dùng. Bạn nên dùng thời gian này để chuyển sang theo dõi INP.

Nguyên nhân hay gặp khiến INP cao

  • JavaScript nặng: nhiều tác vụ dài (long task) chiếm luồng chính, khiến trình duyệt không kịp phản hồi.
  • Script bên thứ ba: chat, theo dõi quảng cáo, bản đồ, mạng xã hội.
  • Giao diện lớn: cấu trúc trang (DOM) có quá nhiều phần tử.
  • Cập nhật giao diện tốn kém: tính toán lại bố cục lặp đi lặp lại, bộ chọn CSS phức tạp.
  • Kết xuất phía máy khách: trang tải xong nhưng còn phải chờ script dựng nội dung.
  • Plugin WordPress thừa thêm mã chạy trên mọi trang.

Các nguyên nhân trên cũng nằm trong nhóm lý do làm website chậm đã nêu ở bài website chậm: 7 nguyên nhân và cách kiểm tra.

Cách giảm INP

  1. Tìm tương tác chậm trước. Dùng dữ liệu thực để biết trang nào, thao tác nào chậm, rồi tái hiện trên máy.
  2. Chia nhỏ tác vụ dài. Tách công việc để trình duyệt có lúc nhường cho phản hồi người dùng.
  3. Giảm và trì hoãn script không cần thiết. Tải chat, bản đồ chỉ khi người dùng cần.
  4. Rút gọn DOM và tránh chèn quá nhiều phần tử cùng lúc.
  5. Phản hồi ngay bằng giao diện, ví dụ hiện trạng thái “đang xử lý” trước, rồi mới làm phần nặng.
  6. Kiểm tra lại sau mỗi thay đổi bằng cùng một cách đo.

Nếu website cũ nhiều lớp mã chồng chéo, hãy cân nhắc có nên làm mới hay không, như phân tích trong bài website cũ: khi nào làm mới, khi nào làm lại. Với trang nhiều người xem từ xa, các biện pháp như CDN và Cloudflare giúp tải nhanh hơn, tuy chủ yếu cải thiện tải trang hơn là INP.

Lưu ý về WordPress: khối giao diện, builder và plugin đều thêm mã. Bài WordPress 6.x và giao diện khối giúp bạn cân nhắc khi nào nên đổi cách dựng trang.

Nếu cần hỗ trợ đo và tối ưu tốc độ website, có thể liên hệ đội tối ưu tốc độ PageSpeed của HVSC, hoặc xem thêm dịch vụ 웹사이트 디자인.

2026년 업데이트: INP vẫn là chỉ số phản hồi trong Core Web Vitals. Xem thêm 기업 웹사이트를 위한 Core Web Vitals, tối ưu ảnh cho website 그리고 HTTP/3, Brotli, bộ nhớ đệm. Ngưỡng và công cụ đo có thể thay đổi nên hãy xem trang web.dev mới nhất.

자주 묻는 질문

INP đo bao nhiêu thì tốt?

Theo web.dev, từ 200 ms trở xuống là tốt, trên 500 ms là kém, ở phân vị 75 của dữ liệu thực.

Website nhỏ ít truy cập có thấy INP không?

Có thể không có dữ liệu thực nếu chưa đủ lượt truy cập. Khi đó hãy tự thao tác thử trên trang, hoặc dùng công cụ giám sát người dùng thực.

Sửa INP có làm tăng thứ hạng ngay không?

Không ai cam kết được. INP là một trong nhiều tín hiệu về trải nghiệm trang; cải thiện giúp người dùng dùng trang mượt hơn.

참고 자료

Cần tư vấn website, phần mềm hoặc bảo mật?

Mô tả bài toán, kỹ thuật HVSC trao đổi phạm vi và phương án phù hợp với doanh nghiệp.

자주 묻는 질문

INP đo bao nhiêu thì tốt?

Theo web.dev, từ 200 ms trở xuống là tốt, trên 500 ms là kém, ở phân vị 75 của dữ liệu thực.

Website nhỏ ít truy cập có thấy INP không?

Có thể không có dữ liệu thực nếu chưa đủ lượt truy cập. Khi đó hãy tự thao tác thử trên trang, hoặc dùng công cụ giám sát người dùng thực.

Sửa INP có làm tăng thứ hạng ngay không?

Không ai cam kết được. INP là một trong nhiều tín hiệu về trải nghiệm trang; cải thiện giúp người dùng dùng trang mượt hơn.

HVSC 편집팀 · Tổng hợpTổng hợp từ 11 nguồn chính thống, có dẫn nguồn · Cập nhật 13/03/24
Bài viết này có giúp ích cho bạn?Chạm vào số sao. Góp ý của bạn giúp Ban biên tập viết bài sát nhu cầu hơn.

📚 Bài viết cùng chủ đề

Xem thêm trong Công nghệ

HVSC 웹사이트는 계속 업그레이드되고 있어 일부 내용이 추가로 업데이트될 수 있습니다.