Trang của bạn tải nhanh nhưng cảm giác vẫn chậm? Đó là do INP
Báo cáo Lighthouse của bạn hiển thị màu xanh. LCP ổn. CLS ổn. Trang tải rất nhanh.
Thế rồi điểm số thực tế (real-world scores) của bạn lại giảm. Bạn không biết tại sao.
Vấn đề có khả năng nằm ở INP. Interaction to Next Paint đã thay thế FID vào tháng 3 năm 2024. FID chỉ đo lường độ trễ đầu tiên. INP đo lường mọi tương tác trong khi người dùng ở lại trên trang của bạn. Nó báo cáo tương tác chậm nhất.
INP không phải là chỉ số về tốc độ tải (loading metric). Nó là chỉ số về độ phản hồi (responsiveness metric). Nó trả lời một câu hỏi: khi bạn nhấp chuột hoặc gõ phím, mất bao lâu để màn hình thay đổi?
Google sử dụng các ngưỡng sau:
- 200ms hoặc ít hơn là tốt.
- Trên 500ms là kém.
Một trang web có thể tải trong một giây nhưng vẫn bị đánh giá kém. Tải nhanh và phản hồi nhanh là hai nhiệm vụ khác nhau.
Các công cụ Lighthouse thường bỏ lỡ INP. Lighthouse không nhấp vào các nút của bạn. Nó chỉ đưa ra một con số ước tính. Bạn có thể có một báo cáo lab màu xanh nhưng điểm field lại màu đỏ.
Để xem con số thực tế, hãy sử dụng đoạn mã này:
import { onINP } from 'web-vitals';
onINP(function (metric) {
console.log('INP', metric.value, metric.entries);
});
Đoạn mã này sẽ ghi lại tương tác chậm và phần tử cụ thể đó.
Các vấn đề về INP xảy ra do main thread đang bận. Trình duyệt không thể vẽ (paint) phản hồi cho đến khi một tác vụ JavaScript hoàn tất.
Các nguyên nhân phổ biến:
- Các trình xử lý sự kiện (event handlers) nặng chạy sau mỗi lần nhấp.
- Các script của bên thứ ba như widget chat hoặc analytics.
- Layout thrashing do việc đọc và ghi DOM liên tục.
- Các tác vụ framework hydration.
Hãy khắc phục bằng cách chia nhỏ các tác vụ dài. Hãy để trình duyệt "thở" giữa các bước:
async function onClick() {
doUrgentPart();
await yieldToMain();
doExpensivePart();
}
Sử dụng yieldToMain để cho phép trình duyệt vẽ giao diện (UI) trước khi bắt đầu các công việc nặng.
Các cách khắc phục khác:
- Trì hoãn (defer) các script không cần thiết ngay lập tức.
- Kiểm tra (audit) các widget của bên thứ ba.
- Sử dụng debounce cho các trình xử lý tốn kém.
- Gom nhóm (batch) các thao tác đọc và ghi DOM.
Đừng chỉ nhìn chằm chằm vào LCP nếu điểm số thực tế của bạn thấp. Thay vào đó, hãy đo lường các tương tác của bạn.
Nguồn: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn