FID / INP

FID / INP là gì?

FID (First Input Delay) là chỉ số đo độ trễ giữa lần đầu người dùng tương tác với trang (như nhấn nút, chọn menu, nhập văn bản) và thời điểm trình duyệt bắt đầu xử lý tương tác đó. FID chỉ tính các sự kiện đầu tiên trong phiên, không bao gồm cuộn (scroll) hay phóng to/thu nhỏ (zoom).

Từ tháng 3/2024, Google chính thức thay thế FID bằng INP (Interaction to Next Paint). INP đánh giá toàn bộ chuỗi tương tác — từ lúc người dùng thao tác, đến khi trình duyệt phản hồi và hiển thị thay đổi (paint) tiếp theo. INP lấy giá trị cao nhất trong 75% số tương tác trên trang (theo phân vị 75), giúp phản ánh trải nghiệm thực tế hơn FID.

Giá trị INP tốt là ≤ 200ms; cần cải thiện nếu nằm trong khoảng 201–500ms; kém nếu > 500ms. Đây là một trong ba chỉ số Core Web Vitals được Google sử dụng để đánh giá trải nghiệm người dùng trong xếp hạng tìm kiếm.

Tại sao quan trọng trong SEO?

FID và INP ảnh hưởng trực tiếp đến thứ hạng trang trên Google — đặc biệt với các trang có nội dung cạnh tranh cao hoặc mục tiêu thiết bị di động. Từ năm 2021, Core Web Vitals (bao gồm INP thay FID từ 2024) là yếu tố xếp hạng chính thức. Trang có INP cao thường đi kèm với tỷ lệ thoát cao, thời gian ở lại ngắn và chuyển đổi thấp — những tín hiệu gián tiếp mà Google cũng xem xét.

Với WordPress — nền tảng chiếm hơn 43% website toàn cầu — việc tối ưu INP đặc biệt quan trọng vì nhiều chủ đề và plugin mặc định gây tải JavaScript nặng, chặn luồng render hoặc trì hoãn xử lý sự kiện.

Cách hoạt động

INP đo thời gian từ lúc người dùng tương tác (click, tap, phím nhấn) đến khi trình duyệt hoàn tất xử lý sự kiện và vẽ lại giao diện (next paint). Quá trình gồm ba giai đoạn:

1. Input delay: Thời gian trình duyệt bận xử lý tác vụ khác (ví dụ: chạy script dài, render phức tạp) nên không thể phản hồi ngay.
2. Processing time: Thời gian xử lý sự kiện (chạy event listener, cập nhật DOM…).
3. Presentational delay: Thời gian từ khi xử lý xong đến khi màn hình hiển thị thay đổi (paint).

INP chọn giá trị lớn nhất trong số các tương tác được ghi nhận — nhưng chỉ tính các tương tác có paint sau đó, loại trừ scroll và zoom.

Hướng dẫn thực hiện

Dưới đây là các bước cụ thể để tối ưu INP cho website WordPress:

1. Đo lường hiện trạng: Dùng PageSpeed Insights hoặc Web.dev Measure. Kiểm tra báo cáo Core Web Vitals — đảm bảo dữ liệu lấy từ thực tế người dùng (field data), không chỉ lab data.
2. Giảm khối lượng JavaScript: Vô hiệu hóa plugin không cần thiết; dùng plugin như Autoptimize để gộp và trì hoãn script (defer); loại bỏ inline script nặng trong theme.
3. Tối ưu xử lý sự kiện: Thay onclick bằng event delegation; sử dụng passive: true cho sự kiện scroll/touch; tránh event.preventDefault() không cần thiết.
4. Phân chia công việc nặng: Chia script xử lý dài thành các phần nhỏ bằng setTimeout hoặc queueMicrotask; dùng requestIdleCallback cho tác vụ nền.
5. Cập nhật chủ đề và plugin: Chọn theme nhẹ (Astra, Kadence, Blocksy), hỗ trợ native lazy-load và không dùng jQuery thừa. Cập nhật plugin lên phiên bản mới nhất — nhiều bản vá INP đã được đưa vào từ 2023–2024.
6. Kiểm tra server-side: Đảm bảo PHP 8.0+, OPcache bật, dùng CDN hỗ trợ cache HTML động (ví dụ: Cloudflare, BunnyCDN).

Lỗi thường gặp

• Lỗi: Plugin tạo hàng chục script đồng thời → Gây tắc main thread. Cách khắc phục: Dùng plugin Plugin Dependency Detector để xác định plugin nào load script không cần thiết; tắt hoặc thay thế bằng giải pháp nhẹ hơn.
• Lỗi: Theme gọi jQuery phiên bản cũ + nhiều script phụ thuộc → Khiến xử lý sự kiện chậm. Cách khắc phục: Tắt jQuery trong theme (nếu không dùng), hoặc dùng wp_deregister_script('jquery') kết hợp load phiên bản mới qua CDN.
• Lỗi: Sự kiện click kích hoạt hàm xử lý DOM nặng (ví dụ: render lại toàn bộ danh sách sản phẩm) → Làm tăng INP đột ngột. Cách khắc phục: Áp dụng kỹ thuật virtualization hoặc pagination; cập nhật DOM từng phần thay vì toàn bộ.
• Lỗi: Sử dụng animation CSS không tối ưu (ví dụ: animate width, height) → Gây layout thrashing. Cách khắc phục: Chỉ dùng transform và opacity cho animation; kiểm tra bằng DevTools > Rendering > “Paint flashing”.

Ví dụ thực tế

Một website bán hàng WordPress dùng theme Divi và plugin WooCommerce Product Bundles. Trước tối ưu, INP đo được là 680ms do:

• Plugin bundles chạy script kiểm tra tồn kho mỗi lần click “Thêm vào giỏ”;
• Theme Divi load 4 file JS đồng thời khi mở menu;
• Không có lazy-load cho ảnh trong modal.

Sau khi áp dụng các bước: thay Divi bằng Kadence, thay plugin bundles bằng giải pháp custom nhẹ hơn, trì hoãn script giỏ hàng, INP giảm còn 142ms — đồng thời tỷ lệ chuyển đổi tăng 22% trong 30 ngày.

Câu hỏi thường gặp

INP có thay thế hoàn toàn FID trong Google Search Console?

Có. Từ tháng 3/2024, Google Search Console chỉ hiển thị INP trong báo cáo Core Web Vitals. FID vẫn xuất hiện trong một số công cụ lab (như Lighthouse phiên bản cũ), nhưng không còn được dùng để đánh giá xếp hạng.

WordPress hosting ảnh hưởng đến INP không?

Có — nhưng gián tiếp. Hosting chậm làm tăng thời gian TTFB (Time to First Byte), kéo dài thời gian tải HTML ban đầu, từ đó làm chậm khởi tạo JavaScript và xử lý sự kiện. Tuy nhiên, INP chủ yếu phụ thuộc vào cách mã front-end được viết và thực thi, không phải tốc độ server thuần túy. Một hosting nhanh không cứu được INP nếu theme chạy 5s script trước khi phản hồi click.

Có cần tối ưu INP cho trang tĩnh (không có form, nút tương tác)?

Tùy trường hợp. Nếu trang không có bất kỳ sự kiện tương tác nào (không nút, không menu dropdown, không search bar), INP sẽ không được tính — nhưng Google vẫn yêu cầu ít nhất một tương tác hợp lệ để có dữ liệu. Với trang giới thiệu đơn giản, ưu tiên tập trung vào LCP và CLS. Tuy nhiên, đa số trang WordPress đều có ít nhất menu hoặc nút CTA — nên INP luôn cần kiểm tra.

Chỉ số	FID	INP
Thời điểm ra đời	2020	2022 (thử nghiệm), chính thức thay FID từ 03/2024
Đo lường	Chỉ sự kiện đầu tiên	Phân vị 75% của tất cả tương tác có paint
Loại trừ	Scroll, zoom	Scroll, zoom, tương tác không dẫn đến paint
Giá trị tốt	≤ 100ms	≤ 200ms