Chỉ số INP (Interaction to Next Paint) là gì? 4 Kỹ thuật tối ưu độ nhạy tương tác

Google đã chính thức đưa chỉ số INP (Interaction to Next Paint - Thời gian tương tác đến phản hồi màn hình tiếp theo) làm chỉ số Core Web Vitals chính thức thay thế cho FID cũ. Nếu website của bạn bị trễ khi người dùng nhấp nút bấm, mở menu hay gõ phím, điểm PageSpeed sẽ bị đánh tụt thảm hại!

1. Chỉ số INP khác gì với chỉ số FID cũ?

• FID (First Input Delay): Chỉ đo thời gian phản hồi của lần tương tác đầu tiên khi mới vào trang.
• INP (Interaction to Next Paint): Đo lường TOÀN BỘ các tương tác trong suốt thời gian người dùng ở trên trang (nhấp chuột, gõ phím, chạm màn hình).

Ngưỡng đánh giá INP của Google: Tốt (< 200ms), Cần cải thiện (200ms - 500ms), Kém (> 500ms).

2. 4 Kỹ thuật tối ưu chỉ số INP trong Next.js

1. Chia nhỏ các tác vụ JavaScript dài (Break up Long Tasks)

Các tác vụ JavaScript chạy mất trên 50ms (Long Tasks) sẽ làm đóng băng luồng xử lý Main Thread. Sử dụng setTimeout hoặc requestIdleCallback để chia nhỏ công việc.

2. Giảm bớt dung lượng JavaScript không cần thiết

Loại bỏ các thư viện JS quá nặng. Thay vì dùng Moment.js nặng 300KB, chuyển sang dùng Day.js siêu nhẹ 2KB. Áp dụng kỹ thuật Lazy Loading Component.

3. Trì hoãn xử lý các script bên thứ 3

Nạp chậm các script quảng cáo, Facebook Pixel bằng component <Script strategy="lazyOnload" /> (xem bài trì hoãn script bên thứ 3).

4. Tránh hiện tượng Layout Thrashing trong React

Tránh việc đọc và ghi thuộc tính DOM liên tục trong cùng một hàm làm trình duyệt phải tính toán lại bố cục (Reflow) liên tục.

Kết luận

Tối ưu chỉ số INP giúp website phản hồi tức thì với mọi thao tác của người dùng, mang lại trải nghiệm mượt mà. Uwmee Software tối ưu hóa luồng JavaScript Next.js đảm bảo chỉ số INP đạt chuẩn xanh tốt dưới 200ms. Đọc thêm bài viết tối ưu Core Web Vitals.