Tối Ưu INP: Hướng Dẫn Chi Tiết Giảm Độ Trễ Nhập Liệu, Xử Lý và Hiển Thị

Tại sao INP lại quan trọng?

Interaction to Next Paint (INP) là một chỉ số quan trọng đo lường khả năng phản hồi tổng thể của trang web. Thay vì chỉ đo độ trễ nhập liệu như FID (First Input Delay), INP xem xét toàn bộ vòng đời của một tương tác, từ lúc người dùng click hoặc gõ phím cho đến khi trang web hiển thị kết quả.

Ba thành phần cốt lõi của INP

Mỗi tương tác của người dùng có thể được chia thành ba giai đoạn:

1. Độ trễ nhập liệu (Input Delay)

Đây là khoảng thời gian từ khi người dùng bắt đầu tương tác (ví dụ: click chuột, chạm màn hình) cho đến khi các event callbacks (hàm xử lý sự kiện) cho tương tác đó bắt đầu chạy.

Nguyên nhân phổ biến: Trình duyệt đang bận xử lý các tác vụ khác trên luồng chính (main thread), chẳng hạn như tải script, phân tích CSS, hoặc chạy các tác vụ dài (long tasks). Tương tác của bạn có thể không phải là nguyên nhân trực tiếp gây ra INP chậm.

2. Thời gian xử lý (Processing Duration)

Đây là toàn bộ thời gian cần thiết để các event callbacks chạy đến khi hoàn thành. Nếu thời gian này cao, thì chính các trình xử lý sự kiện là nguyên nhân trực tiếp gây ra INP chậm.

3. Độ trễ hiển thị (Presentation Delay)

Sau khi các callbacks kết thúc, trình duyệt cần thời gian để vẽ (render) frame tiếp theo hiển thị kết quả của tương tác. Đây chính là presentation delay. Độ trễ này thường liên quan đến công việc render của trình duyệt.

Các khuyến nghị hành động cụ thể

Nguyên tắc chung: Giữ mọi thứ càng ngắn càng tốt

"Generally speaking, you want to keep every part of an interaction as short as possible so that your website has the best chance of meeting the Interaction to Next Paint (INP) metric's 'good' threshold." Đừng chỉ tập trung vào input delay, hãy tối ưu cả ba thành phần.

Xử lý độ trễ nhập liệu (Input Delay) cao

Khi input delay cao, hãy điều tra các tác vụ khác đang chiếm dụng main thread trước khi callbacks của tương tác có thể bắt đầu. Bản thân tương tác "may not have been the direct cause of slow INP." Giải pháp là tránh các tác vụ nặng trên main thread khi người dùng đang cố gắng tương tác.

Xử lý thời gian xử lý (Processing Duration) cao

Đây là dấu hiệu cho thấy các event handlers là thủ phạm. Hãy giảm hoặc trì hoãn công việc mà chúng thực hiện.

Kiểm tra tất cả các event listener: "Any code running in any event listener will delay the interaction. That includes listeners registered from different scripts and framework or library code that runs in listeners, such as a state update that triggers a component render. Not only your own code, but also all third party scripts."

Các kỹ thuật có thể áp dụng:

• Code-splitting và tải dần (progressive loading): Chia nhỏ JavaScript để chỉ tải những gì cần thiết.
• Chia nhỏ tác vụ dài (breaking up long tasks): Giúp main thread có cơ hội xử lý các tương tác khác.
• Trì hoãn công việc không cần thiết: Nếu các tương tác đến liên tiếp và việc xử lý tốn kém, hãy cố tình trì hoãn bắt đầu công việc để có thể hủy bỏ nếu cần.

Xử lý độ trễ hiển thị (Presentation Delay) cao

Hãy tập trung vào công việc render của trình duyệt sau khi callbacks kết thúc. Mặc dù tài liệu không cung cấp hướng dẫn chi tiết đầy đủ, nhưng nguyên tắc chung là giảm thiểu các thay đổi layout và repaint không cần thiết.

Công cụ hỗ trợ

Sử dụng Performance insights trong Chrome DevTools để phân tích chi tiết từng thành phần của INP. Bản ghi "INP breakdown" sẽ chỉ ra phase nào (input delay, processing duration, hay presentation delay) là chậm nhất, giúp bạn tập trung tối ưu đúng nguyên nhân gốc rễ.

Lưu ý: Tài liệu gốc tại URL

developer.chrome.com/docs/web-platform/optimize-inp