Thiết Kế Website
INP kém trên WordPress: tìm thao tác chậm và cách giảm INP
Báo cáo Core Web Vitals trong Search Console ghi INP “Cần cải thiện” hoặc “Kém” dù điểm PageSpeed của trang khá cao là tình huống nhiều website WordPress gặp từ khi INP thay FID. Bài này chỉ cách tìm đúng thao tác đang chậm và sửa nguyên nhân trên WordPress, thay vì cài thêm plugin tăng tốc.
INP đo thời gian từ khi khách bấm, chạm hoặc gõ phím đến khi màn hình phản hồi; tốt là từ 200 ms trở xuống, kém là trên 500 ms. Trên WordPress, INP cao thường do JavaScript chiếm luồng chính: page builder, script bên thứ ba (pixel, Tag Manager), widget chat, plugin jQuery cũ, menu và bộ lọc nặng. Cách sửa: tìm thao tác chậm bằng Chrome DevTools, bớt và hoãn script, thay widget bằng liên kết đơn giản.
INP đo gì và ngưỡng bao nhiêu là đạt?
INP (Interaction to Next Paint) đo độ trễ của các lần bấm chuột, chạm màn hình và nhấn phím trong suốt lượt truy cập, rồi lấy gần như lần chậm nhất làm giá trị của trang. Theo tài liệu INP trên web.dev, ngưỡng tính ở phân vị 75 lượt tải trang, tách riêng điện thoại và máy tính:
| Mức | INP | Nhãn trong Search Console |
|---|---|---|
| Tốt | ≤ 200 ms | Tốt |
| Cần cải thiện | > 200 ms đến 500 ms | Cần cải thiện |
| Kém | > 500 ms | Kém |
Mỗi lần tương tác gồm ba phần, và biết phần nào dài giúp bạn sửa đúng chỗ:
- Độ trễ đầu vào: thời gian chờ vì trình duyệt đang bận chạy việc khác, thường là script đang tải hoặc khởi động.
- Thời gian xử lý: thời gian chạy mã gắn với thao tác đó, ví dụ mã mở menu, mã thêm vào giỏ hàng.
- Độ trễ hiển thị: thời gian để trình duyệt vẽ lại màn hình, dài khi trang có cấu trúc HTML quá lớn.
Phần lý thuyết chung về ba chỉ số LCP, INP, CLS và cách Google dùng chúng có ở bài Core Web Vitals là gì; bài này chỉ tập trung vào INP trên WordPress.
Làm sao tìm ra thao tác nào đang chậm?
Bắt đầu từ dữ liệu người dùng thật để biết nhóm trang nào kém, sau đó tự thao tác trên trang đó để tìm thao tác cụ thể. Điểm hiệu suất của PageSpeed Insights không giúp được ở đây, vì bài kiểm tra mô phỏng chỉ tải trang, không bấm gì nên không đo được INP.
- Mở Báo cáo Core Web Vitals trong Search Console, chọn Điện thoại, xem các vấn đề về INP. Bấm vào để thấy nhóm URL và cột “INP nhóm”. URL cùng nhóm có cấu trúc giống nhau, nên thường cùng nguyên nhân (ví dụ toàn bộ trang sản phẩm).
- Chọn một URL đại diện và chạy PageSpeed Insights để xem phần dữ liệu thực tế. Nếu chỉ có dữ liệu cấp nguồn gốc, đó là số chung cho toàn website.
- Mở trang trong Chrome trên máy tính, bật DevTools, vào bảng Performance. Bảng này hiển thị INP trực tiếp khi bạn thao tác, kèm danh sách từng lượt tương tác và thời gian của nó. Bật giới hạn CPU (CPU throttling) để mô phỏng điện thoại tầm trung.
- Thao tác như khách thật: bấm mở menu, bấm nút gọi, nút Zalo, mở bảng giá dạng tab, thêm vào giỏ, gõ vào ô tìm kiếm, bấm khi trang còn đang tải. Ghi lại thao tác nào vượt 200 ms.
- Ghi hình (Record) thao tác chậm nhất để xem tác vụ dài thuộc tệp script nào. Tên tệp thường cho biết plugin hoặc dịch vụ gây ra, ví dụ thư mục
/wp-content/plugins/ten-plugin/hoặc tên miền của bên thứ ba.
Bảng tra: thao tác chậm, nguyên nhân trên WordPress và cách sửa
Sau khi biết thao tác nào chậm, đối chiếu với bảng dưới. Các dòng được sắp theo mức hay gặp trên website doanh nghiệp làm bằng WordPress:
| Thao tác chậm | Nguyên nhân hay gặp | Cách sửa |
|---|---|---|
| Bấm bất kỳ đâu trong vài giây đầu đều chậm | Độ trễ đầu vào: page builder, slider, Tag Manager nhiều thẻ, pixel quảng cáo cùng khởi động | Bỏ thẻ và plugin không dùng; tải script không thiết yếu sau; bỏ slider đầu trang nếu không cần |
| Mở menu trên điện thoại | Menu dựng bằng plugin jQuery, có hiệu ứng, hoặc menu hàng trăm mục | Rút gọn menu; dùng menu có sẵn của theme; tắt hiệu ứng trượt phức tạp |
| Bấm nút chat, Messenger, Zalo nổi | Widget chat nhúng nặng, tải iframe và script lớn | Thay bằng nút liên kết đơn giản (https://zalo.me/…, tel:); nếu cần widget, chỉ tải khi khách bấm |
| Popup hiện ra hoặc bấm đóng popup | Plugin popup nạp thư viện hiệu ứng, chạy trên mọi trang | Chỉ bật popup ở trang cần; bỏ hiệu ứng; cân nhắc bỏ popup |
| Bấm “Thêm vào giỏ hàng” | Cập nhật giỏ hàng mini, nhiều sự kiện theo dõi (pixel, GA4) chạy cùng lúc | Cập nhật giao diện trước, gửi sự kiện theo dõi sau; giảm số công cụ theo dõi trùng nhau |
| Gõ vào ô tìm kiếm | Plugin tìm kiếm trực tiếp gửi yêu cầu và vẽ lại kết quả theo từng phím | Đặt độ trễ chờ khách gõ xong; giới hạn số kết quả; hoặc dùng tìm kiếm thường |
| Bấm bộ lọc sản phẩm | Vẽ lại danh sách lớn, nhiều sản phẩm mỗi trang | Giảm số sản phẩm mỗi trang; dùng bộ lọc tải trang mới thay vì lọc tại chỗ quá nặng |
| Bấm tab, accordion, “xem thêm” trên trang dài | HTML quá lớn do page builder lồng nhiều lớp khối, cột | Giảm lớp lồng nhau; tách trang dài thành nhiều trang; bỏ khối ẩn trên điện thoại thay vì chỉ ẩn bằng CSS |
| Bấm “Gửi” form liên hệ | Kiểm tra dữ liệu, CAPTCHA, sự kiện chuyển đổi chạy đồng bộ | Hiện trạng thái “đang gửi” ngay, phần còn lại xử lý sau |
Nhóm script bên thứ ba đáng rà kỹ nhất là những gì được dán vào phần đầu trang qua plugin chèn mã: Tag Manager, pixel Facebook, TikTok, mã theo dõi cuộc gọi, công cụ ghi lại phiên. Mỗi đoạn trông nhỏ, nhưng cộng lại chiếm luồng chính đúng lúc khách bắt đầu bấm. Thứ tự rà plugin và mã bên thứ ba đầy đủ có trong bài cách tăng tốc website WordPress.
Tính năng “trì hoãn JavaScript” của plugin cache có giúp INP không?
Có thể giúp, nhưng cũng có thể làm INP tệ hơn; đây là điểm nhiều hướng dẫn bỏ qua. Tính năng này (trong WP Rocket, LiteSpeed Cache và một số plugin khác) hoãn tải script cho tới khi khách tương tác lần đầu. Kết quả là điểm PageSpeed tăng, vì bài kiểm tra mô phỏng không bấm gì. Nhưng khi khách thật bấm lần đầu, toàn bộ script bị hoãn chạy cùng lúc, và chính lần bấm đó phải chờ.
- Sau khi bật, kiểm tra lại bằng bảng Performance: bấm mở menu ngay sau khi trang hiện. Nếu lượt bấm đầu tiên chậm hơn trước, hãy loại các script cần cho thao tác đầu (menu, nút gọi) khỏi danh sách hoãn.
- Chỉ hoãn script thật sự không cần ngay: chat, bản đồ nhúng, video, mạng xã hội, công cụ ghi phiên.
- Bớt script vẫn tốt hơn hoãn script. Mã không tải thì không bao giờ làm chậm thao tác nào.
Một chi tiết kỹ thuật cho người làm theme: từ WordPress 6.3, khi đăng ký script có thể khai báo chiến lược tải defer hoặc async, nên không cần chỉnh thẻ script thủ công. Với mã tự viết xử lý nặng, hãy tách thành nhiều tác vụ nhỏ để trình duyệt kịp vẽ lại màn hình giữa các bước.
Thứ tự xử lý INP trên website WordPress
Làm từ việc ít rủi ro, tác động rộng tới việc tốn công hơn. Sao lưu và ghi lại số liệu trước mỗi bước:
- Kiểm kê script: liệt kê plugin đang bật và mã chèn vào phần đầu, chân trang. Đánh dấu cái nào còn dùng, ai cần nó.
- Gỡ những gì không dùng: plugin cài thử rồi bỏ đó, pixel của chiến dịch đã dừng, thẻ trùng giữa Tag Manager và plugin. Danh sách plugin tối thiểu theo loại website có ở bài plugin WordPress cần thiết.
- Chỉ tải script ở trang cần: script form liên hệ chỉ ở trang liên hệ, script WooCommerce không chạy ở trang tin tức. Một số plugin quản lý tài nguyên cho phép tắt theo từng trang.
- Thay widget bằng liên kết: nút Zalo, Messenger, gọi điện dạng liên kết thường nhẹ hơn nhiều so với khung chat nhúng.
- Giảm độ nặng của page builder: bỏ hiệu ứng chuyển động, giảm khối lồng nhau, không dựng hai phiên bản giao diện cho máy tính và điện thoại trên cùng trang.
- Cuối cùng mới xét đổi theme hoặc builder nếu các bước trên không đủ; đây là việc lớn, nên làm khi có kế hoạch làm lại giao diện.
Sau khi sửa, kiểm tra lại bằng bảng Performance ngay. Dữ liệu thực tế trong Search Console là số cộng dồn 28 ngày, nên phải chờ khoảng bốn tuần mới phản ánh đủ; có thể bấm “Bắt đầu theo dõi” trong báo cáo để Google theo dõi lại nhóm URL đã sửa. Quy trình đo chi tiết có ở bài cách kiểm tra tốc độ website.
Khi nào INP kém chưa phải việc cần làm trước?
INP chỉ là một phần của trải nghiệm trang, và Google nói rõ đạt Core Web Vitals không bảo đảm xếp hạng cao. Vì vậy có vài trường hợp nên ưu tiên việc khác:
- LCP đang kém nặng (trang hiện nội dung chính quá chậm): khách rời đi trước khi kịp bấm, sửa LCP trước.
- Báo cáo ghi không đủ dữ liệu: website ít truy cập, con số trong công cụ là ước lượng, đừng đập đi làm lại vì nó.
- Muốn gỡ widget chat đang mang về khách: đo số tin nhắn từ widget trước. Nếu đó là kênh chính, hãy chọn cách tải khi bấm thay vì gỡ hẳn. Website có lượt truy cập mà ít người liên hệ thì nên xem bài website có lượt truy cập nhưng không ai gọi trước khi chỉnh kỹ thuật.
- Theo đuổi điểm 100 trên PageSpeed: điểm mô phỏng không chứa INP; dùng thời gian đó để sửa thao tác chậm thật.
Nếu bạn không có người kỹ thuật để rà script và thử từng thay đổi, dịch vụ tối ưu website xử lý tốc độ tải trang (hai mức 3 triệu và 7 triệu tùy quy mô website); riêng việc giảm INP cần rà từng script và plugin nên được báo giá theo hiện trạng sau khi kiểm tra. Với website cần người theo dõi plugin, cập nhật và kiểm tra lại sau mỗi lần thêm tính năng, xem gói bảo trì website WordPress. Bạn có thể gửi link website qua Zalo 0332 942 567 để được xem nhanh thao tác nào đang chậm.
Câu hỏi thường gặp
Vì sao điểm PageSpeed cao mà INP vẫn kém?
Vì điểm hiệu suất của PageSpeed Insights đến từ bài kiểm tra mô phỏng chỉ tải trang, không có thao tác bấm, nên không đo INP. INP trong phần dữ liệu thực tế đến từ người dùng Chrome thật, bấm thật trên điện thoại của họ.
Plugin nào giúp giảm INP trên WordPress?
Không có plugin nào tự sửa INP cho mọi website. Plugin cache và tối ưu tài nguyên có thể hoãn hoặc bỏ bớt script, nhưng cần kiểm tra lại từng thao tác sau khi bật. Cách hiệu quả hơn thường là gỡ plugin và mã không cần, thay widget nặng bằng liên kết đơn giản.
Elementor hay Flatsome có làm INP cao không?
Page builder và theme nhiều tính năng có thể làm HTML lớn và tải nhiều script, nhưng mức độ phụ thuộc cách dựng trang. Trang dựng gọn, ít hiệu ứng, ít khối lồng nhau vẫn có thể đạt INP tốt; trang nhiều slider, hiệu ứng và widget thì dễ kém.
Sửa INP xong bao lâu Search Console cập nhật?
Khoảng bốn tuần. Báo cáo dùng dữ liệu người dùng thật cộng dồn 28 ngày, nên số liệu cải thiện dần. Bấm Bắt đầu theo dõi trong báo cáo Core Web Vitals để Google theo dõi nhóm URL đã sửa trong 28 ngày.
INP có ảnh hưởng thứ hạng Google không?
Có, INP là một trong ba chỉ số Core Web Vitals mà hệ thống xếp hạng của Google sử dụng. Tuy vậy mức ảnh hưởng nhỏ hơn mức liên quan và hữu ích của nội dung; tác động rõ hơn thường nằm ở việc khách bấm nút gọi, nút đặt hàng có phản hồi ngay hay không.
Cần người làm giúp phần này?
Mô tả ngắn nhu cầu hoặc gửi link website. Chúng tôi phản hồi bằng đánh giá cụ thể trước khi báo giá.
