First Input Delay (FID) là một trong những chỉ số nằm trong bộ chỉ số Core Web Vitals nhằm đo thời gian cần thiết để xử lý lần tương tác đầu tiên của người dùng với một trang. Trong hướng dẫn này, chuyên gia về Web Code Tốt sẽ giúp bạn tìm hiểu First Input Delay là gì và cách khắc phục chỉ số này trong Core Web Vitals này để đạt kết quả tốt nhất.
Bài viết nằm trong series phân tích các chỉ số Core Web Vitals được chuyên gia về Web Code Tốt phân tích và đưa ra các gợi ý tối ưu.
First Input Delay là gì
First Input Delay (FID) là chỉ số xác định thời gian độ trễ từ thời gian người dùng tương tác và phản hồi của trình duyệt. Chỉ số này không dễ để xác định, vì nó yêu cầu có hành vi của người dùng thật. Tuy vậy, FID lại là một phần quan trọng để mang lại trải nghiệm cho khách hàng truy cập website của mỗi doanh nghiệp.
Đặc biệt hơn nữa, First Input Delay còn là một chỉ số được Google Experience (Trải nghiệm người dùng) xếp vào nhóm Core Web Vitals và có ảnh hưởng tới thứ hạng website, nên các công ty thiết kế web và cả những công ty SEO đều nên quan tâm tới việc tối ưu website cho chỉ số này.
FID theo dõi thời gian cần thiết để trình duyệt bắt đầu xử lý tương tác đầu tiên của người dùng trên một trang. FID đo độ trễ sau các hành động riêng biệt như nhấp chuột hoặc nhấn. Cuộn và thu phóng không kích hoạt số liệu này.
Xem thêm những bài viết hữu ích của Code Tốt tại đây:
- Bảo trì website là gì
- Cải thiện chỉ số Core Web Vitals hiệu quả năm 2023 – Code Tốt
- Hướng dẫn sử dụng PageSpeed Insight hiệu quả – Code Tốt
Mục tiêu tối ưu chỉ số First Input Delay
Để vượt qua đánh giá, First Input Delay của trang phải nhỏ hơn 100 mili giây cho 75% tổng số lần tải trang.
Nói chung, 100 mili giây (0.1s) là một ngưỡng quan trọng đối với người dùng phổ thông khi truy cập website.
“0,1 giây là giới hạn để người dùng cảm thấy rằng hệ thống đang phản ứng ngay lập tức, nghĩa là không cần phản hồi đặc biệt nào ngoại trừ để hiển thị kết quả”
Jakob Nielsen (tác giả cuốn sách “Usability Engineering” năm 1993)
Google cũng coi 100ms là ranh giới giữa hai yếu tố First Input Delay tốt và xấu.
Hiện tại, First Input Delay theo dõi thời gian delay chỉ sau lần nhập đầu tiên. Tại sao vậy?
Với người dùng, ấn tượng đầu tiên là tất cả mọi thứ đang có trên web. Khách hàng thường không ở lại lâu nếu việc tương tác đầu tiên với một trang web không thành công. Đó là lý do tại sao giữ chỉ số First Input Delay thấp là rất quan trọng.
FID cũng độc đáo theo một cách khác: đó là số liệu chỉ dành cho đối tượng trên web có thể tương tác.
Nó yêu cầu người dùng thực tế cần tương tác vào một thời điểm trên website. Nếu không có hành vi nào, không có yếu tố để đo lường chỉ số này. Và một người dùng nhấp vào cùng một nút vào các thời điểm khác nhau sẽ tạo ra một kết quả khác nhau, tùy thuộc vào tác vụ nào đang chạy trên luồng chính. Code Tốt sẽ nói nhiều hơn về chủ đề chính sau trong bài viết này.
Các công cụ xác định chỉ số First Input Delay
Báo cáo trải nghiệm người dùng Chrome
Báo cáo trải nghiệm người dùng Chrome là báo cáo giúp nhà phát triển cải thiện khả năng sử dụng trang web. Nó là một tập hợp các số liệu về khả năng sử dụng chính dựa trên dữ liệu người dùng.
Báo cáo các chỉ số quan trọng về trang web cốt lõi của Search Console
Báo cáo Các chỉ số quan trọng về trang web trong Google Search Console tóm tắt cách một trang web đáp ứng tiêu chí Các chỉ số quan trọng về trang web trong 90 ngày qua.
Để theo dõi với thời gian dài trong Search Console và đảm bảo tối ưu thành công, bạn nên cân nhắc sử dụng dịch vụ bảo trì website của Code Tốt.
Package JavaScript của web Vitals (dành cho môi trường dev)
Đây là một thư viện JS web-vitals tối giản được xây dựng để giám sát giao diện người dùng. Công cụ này hiệu quả nhất hiện nay vì nó cho phép bạn theo dõi hiệu suất trong thời gian ngắn với độ chính xác rất cao ngay trong việc lập trình và phát triển dự án.
PageSpeed Insights
Dịch vụ PageSpeed Insights hoạt động để nhanh chóng kiểm tra hiệu suất của một URL. Nó bao gồm dữ liệu Core Web Vitals cho trang này.
Lighthouse trong DevTools của Chrome
Với sự trợ giúp của Lighthouse, bạn có thể đánh giá tầm quan trọng của tốc độ tải, tính tương tác và nhận các đề xuất về cách cải thiện trải nghiệm người dùng.
Bây giờ bạn đã biết cách theo dõi Độ trễ đầu vào đầu tiên, đã đến lúc tìm hiểu cách tối ưu hóa nó. Đọc tiếp để tìm hiểu tất cả các bí quyết cải thiện điểm Độ trễ đầu vào đầu tiên.
Các vấn đề nào ảnh hưởng tới chỉ số First Input Delay?
Thời gian delay kéo dài xảy ra do luồng chính của trình duyệt đang bận làm việc khác nên không phản hồi cho người dùng. First Input Delay chậm thường xảy ra nhất do trang web đang đợi các phần tử JavaScript và/hoặc CSS tải xong. Mọi thứ dường như đang hoạt động, nội dung đã được tải nhưng trang chưa thể đáp ứng yêu cầu tương tác của người dùng.
JavaScript nặng
Các package JavaScript lớn trong code của website thường là lý do chính khiến thời gian phản hồi của trang chậm hơn. Người dùng phải đợi trang tải tất cả JavaScript rồi mới có thể tương tác.
Các website thường sử dụng các framework như Bootstrap (và đính kèm bootstrap.min.js), chạy popup, hiệu ứng animation,… Tất cả tạo ra một số lượng tài nguyên lớn, đặc biệt là khi thực hiện combine JS (gộp nhiều JS vào làm 1 file để giảm request nhiều lần lên trình duyệt).
Task Javascript chạy lâu hoặc bị lỗi
Nếu trang web của bạn có mã được tối ưu hóa kém hoặc lỗi mã hóa, thì điều này có thể làm chậm yêu cầu của khách hàng và tăng điểm FID. Vấn đề này dễ gặp trên các website cũ trước đây của bên khác mà Code Tốt thực hiện công việc tối ưu website lại.
Chẳng hạn, khi inspector trên trình duyệt ở phần Console, nhiều website thể hiện rất nhiều tác vụ lỗi. Điều này do phần code được lập trình viên của các website này viết cẩu thả, không theo đúng quy tắc điều kiện của Javascript, thiếu cả phương pháp kiểm thử phần mềm cơ bản dẫn tới các lỗi ví dụ như:
item is not defined;
FAQItem is not class constructor;Tải Javascript nhưng không sử dụng
Việc gọi bừa bãi Javascript vào ngay khi website đang tải sẽ ảnh hưởng nặng tới chỉ số First Input Delay.
Chẳng hạn, bạn có một khu vực hiển thị slider thư viện ảnh, NHƯNG nó nằm ở cuối trang, nơi người dùng không cần xem tới khi mới tải trang trong màn hình đầu tiên. Nếu bạn vẫn cứ tải tiếp Javascript cho mục này thì là quá sớm và quá thừa với một người dùng đang sử dụng điện thoại di động với tốc độ băng thông không cao.
Một trường hợp khác là gọi Javascript mà không hề sử dụng vì không kiểm tra điều kiện trang, ví dụ trên trang chủ không có slider nào nhưng package slider (vd slick-slider) được gọi trên mọi trang.
Làm cách nào để cải thiện chỉ số First Input Delay?
Không chắc bạn đọc xong và làm theo cũng sẽ đạt kết quả do sự khác nhau giữa các nền tảng code và trình độ giữa các công ty thiết kế website, cũng như khả năng xử lý về mặt kỹ thuật cho các vấn đề phức tạp xảy ra của nền tảng website bạn đang sử dụng.
Nếu First Input Delay không tốt và bạn muốn cải thiện nó, thì bạn nên tìm hiểu dịch vụ tối ưu website của Code Tốt.
Tối ưu hóa mã nhúng vào website
Tối ưu hóa tất cả các tập lệnh của bên thứ ba, chẳng hạn như các nút truyền thông xã hội, phân tích và quảng cáo để chúng KHÔNG làm tăng thời gian tải trang web của bạn. Ngoài ra, bạn có thể sử dụng lazy loading cho các tập lệnh mà bạn cần.
Trong website giờ đây thường có nhiều mã nhúng, ví dụ của Google Tag Manager, Google Analytics, Facebook Pixel, Tiktok Tracking, các mã live chat, bot chat tự động hay popup builder của OptinMonster. Càng nhiều mã, càng có khả năng gây ảnh hưởng tới website của bạn về chỉ số First Input Delay. Bởi vậy, hãy tìm phương án lazyload (tải chậm) các đoạn mã Javascript nhúng này vào, vì thực tế chậm vài giây để tải những mã nhúng trên cũng không ảnh hưởng tới số
Tăng tốc JavaScript
Một mẹo hữu ích khác là chia nhỏ các nhiệm vụ dài hạn thành các nhiệm vụ nhỏ hơn. Trong khoảng thời gian giữa quá trình xử lý NHỮNG tác vụ ngắn NÀY, trình duyệt sẽ dành thời gian để tối ưu hóa yêu cầu của người dùng.
Giảm thiểu hỗ trợ trên trình duyệt cũ
Nếu bạn có các polyfill (những đoạn mã được tích hợp để sử dụng trên các trình duyệt cũ, vd như IE11) mà bạn KHÔNG sử dụng trên trang web, thì hãy cân nhắc xoá bỏ chúng. Trên báo cáo của Core Web Vitals, bạn cũng có thể nhìn thấy các cảnh báo này.
Tối ưu code CSS
Giảm thời gian tải CSS là cần thiết. Điều này giúp màn hình đầu tiên hiện ra các đối tượng mà không bị nhảy hay thu gọn – dài ra – đổi màu sắc,.. bất thường dẫn tới mất thời gian render trình duyệt, gây ảnh hưởng tới FID.
Để tối ưu file CSS trong website thì cần lưu ý hai phương án:
- Giảm kích thước file CSS, bằng cách nén file CSS nhỏ nhất. Hầu hết các bên tối ưu website sẽ làm công việc này và sử dụng các plugin có sẵn (trả phí hoặc miễn phí).
- Nâng cao hơn (cách mà Code Tốt làm trong gói dịch vụ chăm sóc và bảo trì website), bạn sẽ cần phân tích các màn hình và trải nghiệm của người dùng các trang để đưa ra phương án tách CSS cho từng màn hình cụ thể.
- Cao cấp hơn nữa (và Code Tốt cũng đã làm), đó là sử dụng các mô hình scan và chia tách màn hình đầu tiên theo template và sử dụng critical-css (tức chỉ tải các CSS quan trọng ngay khi tải và delay phần CSS bên dưới màn hình tải sau khi tải xong màn hình đầu tiên).
Delay JavaScript không sử dụng
Phân tích và chắc chắn bạn không tải Javascript thừa. Bạn không chắc mã Javascript nào ư? Vậy tham khảo báo cáo chỉ số trong Lighthouse của Chrome để xác định số lượng Javascript thừa.
Caching
Với sự trợ giúp của caching (bộ nhớ đệm), bạn có thể lưu trữ nội dung đã tải xuống trước đó và nội dung đó sẽ không được tải xuống lại khi người dùng truy cập lại. Chẳng hạn, có thể sử dụng memcached, redis và caching lại trên tầng máy chủ để giảm thiểu số lần truy vấn vào cùng một trang, hoặc sử dụng phương án CDN caching cho JS, CSS với thời gian caching hơn 1 tháng.
Nén ảnh
Thực tế, hình ảnh không ảnh hưởng đến hướng không phản hồi của trang. Tuy vậy, nếu hình ảnh xuất hiện trong màn hình đầu tiên hoặc kể cả nó không trong màn hình đầu tiên nhưng được trình duyệt tải xuống, hãy cân nhắc tối ưu và nén ảnh cho kích thước nhỏ nhất. Tỷ lệ ảnh nén trên mobile thường là 80% và trên máy tính là 90% sẽ hợp lý, không bị ảnh quá mờ, nhoè.
Kết luận
Đừng nghĩ rằng tối ưu chỉ số First Input Delay để phục vụ công việc SEO. Thực tế, SEO ngày nay gắn liền rất nhiều với trải nghiệm trang của người dùng thực tế, và First Input Delay là một trong các yếu tố bạn cần thực sự quan tâm để mang lại sự thoải mái của người dùng khi tiếp cận nội dung trên website của bạn. Hãy bảo trì web để website của bạn được tối ưu nhất có thể.
