First Input Delay (FID) là gì?

bởi Nguyễn Đức Anh
First Input Delay - trì hoãn đám cưới với người yêu

Vài lời của người dịch: FID là điều không thể tránh, khi người dùng thực hiện tương tác trong khi trình duyệt đang bận rộn tải trang về và thực hiện các hành động theo hướng dẫn (thường là JavaScript), buộc nó phải trì hoãn các yêu cầu tương tác khác. FID trở nên quan trọng vì nó là ấn tượng đầu tiên của người dùng về chuyện tương tác với trang. Trong khi FID không thế tránh, thì dĩ nhiên chúng ta nên tìm cách giảm giá trị này xuống càng nhỏ càng tốt. OK, giờ chúng ta bắt đầu thôi.

First Input Delay (FID) là một chỉ số quan trọng, lấy người dùng làm trung tâm để đo đạc đáp ứng tải, vì nó định lượng trải nghiệm của người dùng cảm thấy ra sao khi họ cố gắng tương tác với trang không phản hồi-FID thấp giúp đảm bảo trang dễ dùng hơn.

Tất cả chúng ta đều biết tầm quan trọng của việc tạo ra ấn tượng ban đầu tốt (good first impression). Nó quan trọng khi làm quen một người xa lạ, và nó cũng quan trọng khi xây dựng trải nghiệm trên web.

Trên web, ấn tượng tốt đầu tiên có thể tạo ra sự khác biệt giữa một người dùng trung thành hoặc họ sẽ rời đi mà không bao giờ quay trở lại. Câu hỏi là, điều gì tạo ra ấn tượng tốt, và cách bạn đo đạc kiểu ấn tượng nào đó mà bạn muốn tạo cho người dùng?

Trên web, các ấn tượng đầu tiên có thể có rất nhiều dạng thức khác nhau-chúng ta có ấn tượng đầu tiên về thiết kế và sự hấp dẫn trực quan của trang cũng như ấn tượng đầu tiên về tốc độ và phản hồi.

Trong khi khó mà đo đạc được người dùng thích thiết kế website như thế nào qua công cụ API, thì việc đo đạc tốc độ và phản hồi lại không bị như vậy!

Ấn tượng đầu tiên mà người dùng có về tốc độ tải của trang có thể được đo thông qua First Contentful Paint (FCP). Nhưng mức độ nhanh chóng mà trang của bạn có thể đưa pixel lên màn hình chỉ là một phần của câu chuyện. Quan trọng không kém là trang của bạn phản hồi nhanh như thế nào khi người dùng cố gắng tương tác với những pixels đó!

Chỉ số First Input Delay (FID) giúp bạn đo đạc được ấn tượng đầu tiên của người dùng về vấn đề tương tác và phản hồi trên trang của bạn.

FID là gì?

FID đo khoảng thời gian từ khi người dùng lần đầu tương tác với trang của bạn (ví dụ, khi họ click vào liên kết, nhấn vào nút, hoặc sử dụng một tùy chỉnh, điều khiển dựa trên sức mạnh của JavaScript) cho đến khi trình duyệt thực sự có khả năng phản hồi với tương tác đó.

Nhà phát triển – người viết mã phản hồi cho các sự kiện, thường giả định là đoạn mã đó sẽ chạy ngay lập tức, ngay khi sự kiện xảy ra. Nhưng người dùng thường trải nghiệm điều ngược lại-chúng ta tải trang web trên điện thoại, cố gắng tương tác với nó, và sau đó bực bội khi chẳng có gì xảy ra cả.

Nói chung, đỗ trễ đầu vào (input delay / input latency) xảy ra vì luồng nhiệm vụ chính của trình duyệt vẫn đang bận rộn làm điều gì đó, vì thế nó không (chưa) thể phản hồi cho người dùng được. Một lý do phổ biến cho điều này là có thể trình duyệt đang bận rộn phân tích cú pháp và thực thi (các) file JavaScript lớn. Trong khi nó làm điều đó, nó không thể chạy bất kỳ trình lắng nghe sự kiện nào, vì JavaScript mà nó đang tải có thể bảo nó làm việc gì đó khác.

Cùng xem xét timeline dưới đây về cách một trang web thông thường tải:

timeline các yêu cầu và dòng chính

Chú thích:

  • Network requests: các yêu cầu mạng
  • Main thread: luồng chính
  • Navigation start: bắt đầu điều hướng

Hình minh họa phía trên cho thấy trang tạo ra một số yêu cầu mạng cho các tài nguyên (rất có thể là các file CSS và JS), và-sau khi những tài nguyên này được tải xong-chúng được xử lý trên luồng chính (main thread).

Điều này dẫn đến các giai đoạn khi mà luồng chính bận rộn trong giây lát, cái được chỉ ra bằng các khối nhiệm vụ màu be ở bên dưới khối màu xám.

Các trì hoãn nhập vào đầu tiên kéo dài thường xuất hiện giữa First Contentful Paint (FCP)Time to Interactive (TTI) bởi vì trang đã xuất một số nội dung của nó nhưng vẫn chưa có được tương tác đáng tin cậy. Để minh họa cách điều này có thể xảy ra, FCP và TTI đã được đưa vào timeline:

Chú thích:

  • Styles are loaded and browser can paint content / CSS được tải về và trình duyệt có thể hiển thị nội dung
  • Main thread is idle for 5+ seconds / Luồng chính nhàn rỗi sau hơn 5 giây

Bạn có thể nhận thấy có khoảng thời gian hợp lý (bao gồm ba nhiệm vụ dài) giữa FCP và TTI, nếu người dùng cố gắng tương tác với trang trong thời gian này (ví dụ click vào liên kết), sẽ có sự trì hoãn giữa việc click và khi luồng chính có khả năng phản hồi.

Xem điều gì có thể xảy ra nếu người dùng cố gắng tương tác với trang gần thời điểm bắt đầu của tác vụ dài nhất:

FID đầy đủ

Chú thích:

  • Browser receives first user input: Trình duyệt nhận thông tin đầu vào đầu tiên từ người dùng
  • Browser can respond to the first user input: Trình duyệt có thể phản hồi thông tin đầu vào đầu tiên từ người dùng

Bởi vì đầu vào xuất hiện khi trình duyệt đang trong quá trình chạy tác vụ, nó phải đợi cho đến khi nhiệm vụ hoàn thành rồi mới có thể phản hồi đầu vào. Thời gian nó phải đợi chính là giá trị FID cho người dùng cụ thể đó trên trang cụ thể.

Lưu ý: Trong ví dụ trên người dùng chỉ tình cờ tương tác với trang tại thời điểm luồng chính bắt đầu giai đoạn bận rộn nhất. Nếu người dùng tương tác với trang chỉ vài khoảnh khắc trước đó (trong giai đoạn rảnh rỗi) trình duyệt có thể đáp ứng phản hồi ngay lập tức. Phương sai này trong độ trễ đầu vào nhấn mạnh tầm quan trọng của việc để ý đến việc phân phối các giá trị FID khi báo cáo các chỉ số. Bạn có thể tìm hiểu thêm về điều này trong phần dưới đây về việc phân tích và báo cáo dữ liệu FID.

Tại sao bạn chỉ quan tâm đến mục nhập đầu tiên?

Trong khi trì hoãn bất kỳ mục nhập nào đề có thể dẫn đến trải nghiệm người dùng tồi tệ, chúng ta chủ yếu được khuyên nên đo đạc trì hoãn mục nhập đầu tiên (first input delay) vì một vài lý do:

  • First Input Delay là ấn tượng đầu tiên của người dùng về khía cạnh khả năng phản hồi của trang, và ấn tượng đầu tiên rất quan trọng trong việc hình thành ấn tượng tổng thể về chất lượng trang và độ tin cậy.
  • Các vấn đề lớn nhất về tương tác mà chúng ta thấy trên thế giới web hiện này xuất hiện trong thời gian tải trang. Vì thế, chúng tôi tin rằng trước hết tập trung vào cải thiện tương tác đầu tiên của người dùng trên trang sẽ có ảnh hưởng lớn nhất trong việc cải thiện tương tác tổng thể trên web.
  • Các giải pháp được khuyến nghị cho website khắc phục first input delay (tách mã/code splitting, tải ít JavaScript upfront, vân vân) không nhất thiết tương đồng với các giải pháp khắc phục input delay chậm sau khi trang đã tải xong. Bằng cách chia tác các chỉ số này, chúng ta có khả năng cung cấp các hướng dẫn về hiệu suất cụ thể hơn cho nhà lập trình.

Làm thế nào biết được cái nào là mục nhập đầu tiên?

FID là chỉ số đo đạc khả năng phản hồi của trang trong khi trang tải. Vì lý do đó, nó chỉ tập trung vào sự kiện nhập vào từ các hành động rời rạc như click, chạm và nhấn phím.

Các tương tác khác, chẳng hạn như cuộn chuột và zoom, là các hành động liên tục và có những hạn chế hiệu suất hoàn toàn khác (ngoài ra, trình duyệt thường ẩn độ trễ của chúng bằng cách chạy chúng trên một luồng riêng biệt).

Nói cách khác, FID tập trung vào R (khả năng phản hồi/responsiveness) trong mô hình hiệu suất RAIL, trong khi cuộn chuột và zoom liên quan nhiều hơn đến A (ảnh động/animation), và chất lượng hiệu suất của chúng nên được đánh giá riêng.

Chuyện gì xảy ra nếu người dùng không bao giờ tương tác với trang của bạn

Không phải tất cả người dùng sẽ tương tác với trang của bạn. Và không phải tất cả các tương tác đều liên quan đến FID (như đã được đề cập trong phần trước). Ngoài ra, một số tương tác đầu tiên của người dùng sẽ diễn ra vào thời điểm tệ (khi luồng chính vẫn bận rộn trong một khoảng thời gian dài), và một số tương tác đầu tiên của người dùng sẽ diễn ra vào thời điểm tốt (khi luồng chính đã hoàn thành, và đang trong giai đoạn nghỉ ngơi).

Điều này có nghĩa là một số người dùng sẽ không có giá trị FID, một số người dùng sẽ có giá trị FID thấp, và một số người dùng có thể có giá trị FID cao.

Cách bạn theo dõi, báo cáo và phân tích FID có thể sẽ khác chút ít so với các số liệu khác mà bạn sử dụng. Phần tiếp theo giải thích cho bạn cách làm điều này tốt nhất.

Làm thế nào đo được FID

FID là chỉ số chỉ có thể đo đạc được thông qua môi trường tự nhiên (in the field), vì nó yêu cầu người dùng thực tương tác với trang của bạn. Bạn có thể đo đạc FID bằng các công cụ sau.

Đo đạc FID trong JavaScript

Bạn có thể đo đạc FID trong JavaScript bằng cách sử dụng Event Timing API. Ví dụ dưới đây cho thấy cách tạo PerformanceObserver để lắng nghe mục nhập đầu tiên, tính toán FID, và ghi lại giá trị vào console:

// Create the Performance Observer instance.
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const fid = entry.processingStart - entry.startTime;
    console.log('FID:', fid);
  }
});

// Start observing first-input entries.
observer.observe({
  type: 'first-input',
  buffered: true,
});

Phân tích và báo cáo dữ liệu FID

Do các giá trị FID được chờ đợi là biến thiên trong khoảng rộng, điều quan trọng khi báo cáo FID là bạn tập trung vào việc các giá trị này phân tán và để ý đến phân vị cao hơn. Trong thực tế, chúng tôi khuyến khích bạn tập trung vào phân vị cụ thể tại mức từ 95-99, vì điều này sẽ đại diện cho các trải nghiệm đầu tiên đặc biệt tệ hại mà người dùng đang có với trang web của bạn. Và nó sẽ cho thấy các khu vực mà bạn cần cải thiện nhất.

Điều này cũng đúng nếu bạn phân chia báo cáo theo nhóm hoặc kiểu thiết bị. Lấy ví dụ, nếu bạn chạy các báo cáo riêng biệt cho máy bàn và di động, giá trị FID bạn cần quan tâm nhất trên máy bạn phải có phân vị từ 95-99 cho người dùng máy bàn, và giá trị FID bạn quan tâm nhất trên di động phải có phân vị từ 95-99 cho người dùng di động.

Chỉ số FID có giá trị bao nhiêu thì được xem là ổn?

Để có được trải nghiệm người dùng tốt, các trang cần phải cố gắng đạt được First Input Delay ít hơn 100 mili giây. Để đảm bảo bạn đạt được mục tiêu đó cho phần đa người dùng, một ngưỡng tốt để đo là phân vị thứ 75 trong quá trình tải trang, được phân khúc trên cả thiết bị di động lẫn máy tính để bàn.

Làm thế nào để cải thiện FID

Để học cách cải thiện FID cho một trang cụ thể, bạn có thể chạy trình kiểm tra hiệu suất Lighthouse và dồn sự chú ý vào bất cứ cơ hội cụ thể nào mà trình kiểm tra gợi ý.

Trong khi FID là chỉ số được đo trong môi trường tự nhiên (và Lighthouse là công cụ đo trong môi trường thử nghiệm), hướng dẫn để cải thiện FID cũng giống như việc cải thiện chỉ số trong môi trường thử nghiệm Total Blocking Time (TBT).

Về tổng quan, để cải thiện FID cho bất kỳ trang nào, bạn có thể tham khao các chủ đề sau:

(Dịch từ bài viết First Input Delay, tác giả: Philip Walton, từ trang web[.]dev)

0 bình luận

Khu vực bình luận

avatar