INP (Interaction to Next Paint): Kỹ thuật tối ưu hóa khả năng phản hồi

1. Cấu trúc của một tương tác (3 giai đoạn của INP)

Cấu trúc của một tương tác trong INP gồm 3 giai đoạn. Input delay là thời gian chờ tác vụ nền trên main thread kết thúc. Processing time là thời gian chạy các event listener JavaScript. Presentation delay là thời gian trình duyệt tính lại bố cục và vẽ lại giao diện.

Để tối ưu INP, bạn cần can thiệp vào 3 giai đoạn mà trình duyệt phải xử lý:

1. Input Delay (Trễ đầu vào): Thời gian chờ các tác vụ nền (background tasks) đang chạy dở trên Main Thread kết thúc.
2. Processing Time (Thời gian xử lý): Thời gian thực thi các hàm JavaScript (Event Listeners) liên quan đến tương tác.
3. Presentation Delay (Trễ hiển thị): Thời gian trình duyệt tính toán lại bố cục (Reflow) và vẽ lại giao diện (Repaint).

2. Kỹ thuật tối ưu hóa "Hardcore" cho INP

Kỹ thuật tối ưu hóa "Hardcore" cho INP gồm ba hướng giải phóng Main Thread. Chia nhỏ Long Task chạy trên 50ms bằng scheduler.yield() hoặc setTimeout. Đổi giao diện trước rồi mới xử lý dữ liệu, đẩy tracking vào requestIdleCallback. Tránh Layout Thrashing bằng cách đọc hết giá trị trước rồi ghi style một lượt.

Để xử lý “Kỹ thuật tối ưu hóa Hardcore cho INP” mà không phá vỡ phần đang chạy, Khóa Học SEO Master đi vào thứ tự thay đổi và cách theo dõi sau mỗi lần sửa.

2.1. Phá vỡ các tác vụ dài (Breaking up Long Tasks)

Bất kỳ tác vụ JS nào chạy liên tục trên 50ms đều bị coi là "Long Task", nó sẽ khóa Main Thread và khiến người dùng không thể tương tác.

• Kỹ thuật: Sử dụng yield hoặc scheduler.yield() (API mới) để chia nhỏ code.
• Thực thi: Sử dụng setTimeout(() => {... }, 0) để đẩy các tác vụ không quan trọng xuống hàng đợi, nhường chỗ cho phản hồi giao diện.

2.2. Tối ưu hóa Event Listeners (Xử lý sự kiện)

Hai kỹ thuật ở đây đều nhằm giải phóng luồng chính của trình duyệt. Đừng xử lý nặng ngay khi người dùng bấm mà nên đổi giao diện trước rồi mới tính, và đẩy các việc như gửi dữ liệu đo lường vào lúc trình duyệt rảnh. Người dùng cần thấy phản hồi, không cần thấy kết quả ngay.

• Tránh xử lý nặng trong Event: Đừng thực hiện các phép tính phức tạp ngay khi người dùng click. Hãy thay đổi giao diện trước (hiện loading), sau đó mới xử lý dữ liệu.
• Sử dụng requestIdleCallback: Đẩy các logic như gửi dữ liệu tracking, analytics vào thời điểm trình duyệt đang rảnh rỗi.

2.3. Giảm thiểu "Layout Thrashing" (Xáo trộn bố cục)

Việc liên tục đọc và ghi các thuộc tính hình học (như offsetWidth, style.left) trong một vòng lặp sẽ ép trình duyệt phải tính toán lại bố cục nhiều lần.

• Hành động: Luôn đọc các giá trị trước, sau đó mới ghi (thay đổi style) một lượt để trình duyệt thực hiện Batch Update.

3. Tối ưu hóa phản hồi thị giác (Presentation)

Người dùng cảm thấy "mượt" khi họ thấy phản hồi ngay lập tức, dù tác vụ bên dưới chưa xong.

• Phản hồi tức thì (Immediate Feedback): Khi người dùng nhấp vào nút "Thêm vào giỏ hàng", hãy đổi màu nút hoặc hiện icon xoay ngay lập tức thay vì đợi API trả về kết quả thành công.
• Sử dụng content-visibility: auto: Giúp trình duyệt bỏ qua việc render các phần tử nằm ngoài khung hình (off-screen), giải phóng tài nguyên cho các tương tác hiện tại.

4. Công cụ Debug INP chuyên sâu

Để tối ưu INP, bạn không thể chỉ nhìn vào điểm số, bạn phải tìm được "thủ phạm" gây lag:

1. Web Vitals Extension: Theo dõi INP trực tiếp khi bạn tương tác trên trang web.
2. Chrome DevTools (Performance Tab): Tìm các dải màu đỏ (Long Tasks) và xem "Main Thread" đang bị nghẽn ở hàm JS nào.
3. PageSpeed Insights (Field Data): Xem dữ liệu thực tế từ người dùng (CrUX report) để biết trang nào trên site đang có INP kém.

5. Checklist thực hành đạt điểm xanh INP

Checklist thực hành đạt điểm xanh INP gồm năm điểm. Không tác vụ JS nào chạy quá 50ms, script quảng cáo và chatbot được defer, hàm onClick và onScroll dùng Debounce hoặc Throttle, người dùng thấy phản hồi thị giác trong vòng 100ms, và hiệu ứng chuyển động dùng will-change để GPU xử lý.

Một kỹ năng chỉ chắc khi lặp lại được trên website khác với website đã tập. Khóa Học SEO bố trí nhiều lần lặp như vậy.

• [ ] 1. Long Tasks: Đã quét toàn bộ trang để đảm bảo không có tác vụ JS nào chạy quá 50ms chưa?
• [ ] 2. Thư viện bên thứ ba: Đã trì hoãn (defer) các script quảng cáo, chatbot... để chúng không chiếm Main Thread lúc trang đang tải chưa?
• [ ] 3. Trình xử lý sự kiện: Các hàm onClick, onScroll đã được tối ưu bằng kỹ thuật Debounce hoặc Throttle chưa?
• [ ] 4. Feedback: Người dùng có nhận được phản hồi thị giác trong vòng 100ms sau khi tương tác không?
• [ ] 5. CSS Animation: Các hiệu ứng chuyển động có đang sử dụng thuộc tính will-change để ép GPU xử lý không?

6. Kết luận: INP và sự thống trị của Trải nghiệm (UX)

Google chuyển từ FID sang INP vì muốn đo lường trải nghiệm trong suốt phiên làm việc, không chỉ lần tương tác đầu tiên.

1. Tín hiệu hài lòng: Một trang web có INP thấp tạo ra cảm giác tin cậy. Người dùng sẽ ở lại lâu hơn, đọc nhiều nội dung hơn.
2. Lợi thế AI Overview: Google AI ưu tiên các nguồn tin mà người dùng có thể tương tác mượt mà. Nếu trang web của bạn bị treo khi người dùng cố gắng mở một menu hoặc xem ảnh, điểm chất lượng của trang sẽ bị hạ thấp nghiêm trọng.

Lời kết: Tối ưu INP là yêu cầu nâng cao trong SEO Kỹ thuật. Nó đòi hỏi sự phối hợp giữa tư duy lập trình tối ưu và sự tinh tế trong thiết kế giao diện. Khi bạn làm chủ được INP, bạn đã tạo ra một website không chỉ nhanh ở tốc độ tải, mà còn "nhạy" ở mọi lần chạm.