Trang của bạn tải nhanh nhưng vẫn cảm thấy chậm?
Báo cáo Lighthouse của bạn hiển thị màu xanh. Các chỉ số LCP và CLS của bạn trông rất tốt. Trang của bạn tải nhanh. Thế rồi các chỉ số thực tế của bạn lại giảm xuống. Bạn không biết tại sao.
Vấn đề thường nằm ở INP.
INP là viết tắt của Interaction to Next Paint. Nó đã thay thế FID để trở thành một Core Web Vital vào tháng 3 năm 2024. FID chỉ đo lường độ trễ của lần nhấp chuột đầu tiên. INP đo lường mọi tương tác trong khi người dùng sử dụng trang của bạn. Nó báo cáo tương tác chậm nhất.
INP không phải là một chỉ số về tốc độ tải. Nó là một chỉ số về độ phản hồi. Nó đặt ra một câu hỏi: khi bạn nhấp chuột hoặc nhập liệu, mất bao lâu để màn hình thay đổi?
Google sử dụng các quy tắc 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 không đạt. Tải nhanh và phản hồi nhanh là hai nhiệm vụ khác nhau.
Lighthouse không nhấn 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 và một điểm field màu đỏ cùng một lúc.
Để thấy con số thực tế, hãy đo lường các tương tác ngay khi chúng xảy ra. 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ử đứng sau nó. Giờ đây, bạn có thể khắc phục các vấn đề thực tế thay vì phải đoán mò.
Các vấn đề về INP xảy ra khi main thread đang bận. Trình duyệt không thể paint phản hồi cho đến khi một tác vụ JavaScript hoàn tất. Một long task sẽ chặn tương tác.
Các nguyên nhân phổ biến:
- Các event handler nặng nề thực hiện quá nhiều việc trong mỗi lần nhấp chuột.
- Các script của bên thứ ba như chat widgets hoặc analytics đang chạy các long task.
- Layout thrash do việc đọc và ghi vào DOM trong một vòng lặp.
- Các quá trình framework hydration.
Bạn có thể khắc phục điều này bằng cách chia nhỏ các long task. Hãy để trình duyệt được "thở".
async function onClick() { doUrgentPart(); await yieldToMain(); doExpensivePart(); }
Mục tiêu là paint phản hồi trước khi các tác vụ nặng nề bắt đầu.
Các bước khác cần thực hiện:
- Defer các script mà trang không cần dùng ngay lập tức.
- Audit các widget của bên thứ ba.
- Debounce các handler tốn kém.
- Batch các thao tác đọc và ghi DOM của bạn.
Đừng chỉ nhìn chằm chằm vào LCP nếu báo cáo lab của bạn màu xanh nhưng điểm thực tế lại màu đỏ. Hãy đi đo lường các tương tác của bạn.
Source: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn