Tìm hiểu xem chỉ số INP mới ảnh hưởng như thế nào đến trải nghiệm của các trang web được tạo bằng khung và thư viện JavaScript.
Gần đây, Chrome đã ra mắt chỉ số khả năng phản hồi thử nghiệm mới trong báo cáo Báo cáo trải nghiệm người dùng trên Chrome. Chỉ số này hiện được gọi là Lượt tương tác với nội dung hiển thị tiếp theo (INP) đo lường khả năng phản hồi tổng thể đối với các lượt tương tác của người dùng trên trang. Hôm nay, chúng tôi muốn chia sẻ thông tin chi tiết về vị trí của các trang web được tạo bằng khung JavaScript hiện đại có liên quan đến chỉ số này. Chúng ta muốn thảo luận về lý do khiến INP có liên quan đến khung cũng như cách Aurora và khung hoạt động để tối ưu hoá khả năng phản hồi.
Thông tin khái quát
Chrome sử dụng Độ trễ đầu vào đầu tiên (FID) trong Chỉ số quan trọng chính của trang web (CWV) để đo lường khả năng phản hồi tải của trang web. FID đo lường thời gian chờ từ lần tương tác đầu tiên của người dùng đến thời điểm trình duyệt có thể xử lý những trình xử lý sự kiện được kết nối với tương tác. Thời gian này không bao gồm thời gian để xử lý trình xử lý sự kiện, xử lý các hoạt động tương tác tiếp theo trên cùng một trang hoặc hiển thị khung tiếp theo sau khi các lệnh gọi lại sự kiện chạy. Tuy nhiên, khả năng phản hồi là yếu tố quan trọng đối với trải nghiệm người dùng trong suốt vòng đời của trang vì người dùng dành khoảng 90% thời gian trên trang sau khi trang tải.
INP đo thời gian cần thiết để một trang web phản hồi với tương tác của người dùng, kể từ khi người dùng bắt đầu tương tác cho đến thời điểm khung tiếp theo hiển thị trên màn hình. Với INP, chúng tôi hy vọng có thể đo lường tổng hợp độ trễ dự kiến của tất cả các lượt tương tác trong vòng đời của trang. Chúng tôi tin rằng INP sẽ cung cấp số liệu ước tính chính xác hơn về số trang web khả năng phản hồi khi tải và thời gian chạy.
Vì FID chỉ đo độ trễ đầu vào của tương tác đầu tiên, nên có thể các nhà phát triển web chưa chủ động tối ưu hoá các tương tác tiếp theo trong quá trình cải thiện CWV của họ. Do đó, các trang web, đặc biệt là những trang web có mức độ tương tác cao, sẽ phải bắt đầu nỗ lực để làm tốt chỉ số này.
Vai trò của khung
Vì nhiều trang web dựa vào JavaScript để cung cấp tính tương tác, nên điểm INP sẽ chủ yếu bị ảnh hưởng bởi lượng JavaScript được xử lý trên chuỗi chính. Khung JavaScript là một phần thiết yếu trong quá trình phát triển giao diện người dùng hiện đại trên web, cung cấp cho nhà phát triển những bản tóm tắt có giá trị để định tuyến, xử lý sự kiện và sắp xếp mã JavaScript theo ngăn. Do đó, chúng đóng vai trò trọng tâm trong việc tối ưu hoá khả năng phản hồi và trải nghiệm người dùng của các trang web sử dụng chúng.
Các khung có thể đã thực hiện một số bước để thích ứng tốt hơn bằng cách cải thiện FID cho các trang web sớm hơn. Tuy nhiên, giờ đây họ sẽ phải phân tích dữ liệu chỉ số về khả năng thích ứng hiện có và nỗ lực giải quyết mọi lỗ hổng đã xác định được. Nhìn chung, INP thường có tỷ lệ vượt qua thấp hơn và sự khác biệt trong quá trình đo lường đòi hỏi bạn phải tối ưu hoá thêm mã. Bảng sau đây tóm tắt lý do.
Nhóm Aurora trong Chrome phối hợp với các khung web nguồn mở để giúp nhà phát triển cải thiện nhiều khía cạnh của trải nghiệm người dùng, trong đó có hiệu suất và chỉ số CWV. Cùng với sự ra mắt của INP, chúng tôi muốn chuẩn bị sẵn sàng cho sự thay đổi về chỉ số CWV của các trang web dựa trên khung. Chúng tôi đã thu thập dữ liệu dựa trên chỉ số khả năng phản hồi thử nghiệm trong các báo cáo CrUX. Chúng tôi sẽ chia sẻ thông tin chi tiết và các việc cần làm để dễ dàng chuyển đổi sang chỉ số INP cho các trang web dựa trên khung.
Dữ liệu chỉ số khả năng phản hồi thử nghiệm
INP dưới hoặc bằng 200 mili giây cho biết khả năng phản hồi tốt. Dữ liệu báo cáo CrUX và Báo cáo công nghệ CWV của tháng 6 năm 2023 cung cấp cho chúng tôi những thông tin sau về khả năng phản hồi đối với các khung JavaScript phổ biến.
Bảng này cho thấy tỷ lệ phần trăm nguồn gốc trên mỗi khung có điểm phản hồi tốt. Những con số này rất đáng khích lệ nhưng cho chúng tôi biết rằng vẫn còn nhiều điểm cần cải thiện.
JavaScript ảnh hưởng như thế nào đến INP?
Giá trị INP trong trường này tương quan tốt với Tổng thời gian chặn (TBT) được quan sát trong phòng thí nghiệm. Điều này có thể ngụ ý rằng bất kỳ tập lệnh nào chặn luồng chính trong thời gian dài sẽ gây hại cho INP. Việc thực thi JavaScript nặng sau bất kỳ tương tác nào cũng có thể chặn luồng chính trong một khoảng thời gian dài và trì hoãn phản hồi cho tương tác đó. Một số nguyên nhân phổ biến dẫn đến việc chặn tập lệnh là:
JavaScript không được tối ưu hoá: Mã thừa hoặc chiến lược tải và phân tách mã kém có thể khiến JavaScript mở rộng và chặn luồng chính trong thời gian dài. Việc chia tách mã, tải tăng dần và chia nhỏ các tác vụ dài có thể cải thiện đáng kể thời gian phản hồi.
Tập lệnh của bên thứ ba: Tập lệnh của bên thứ ba, đôi khi không cần thiết để xử lý lượt tương tác (ví dụ: tập lệnh quảng cáo), có thể chặn chuỗi chính và gây ra sự chậm trễ không cần thiết. Việc ưu tiên các tập lệnh thiết yếu có thể giúp giảm tác động tiêu cực của các tập lệnh bên thứ ba.
Nhiều trình xử lý sự kiện: Nhiều trình xử lý sự kiện được liên kết với mỗi lượt tương tác (mỗi trình xử lý chạy một tập lệnh khác nhau) có thể can thiệp lẫn nhau và có thể gây ra sự chậm trễ trong thời gian dài. Một số tác vụ trong số này có thể không cần thiết và có thể được lên lịch cho nhân viên web hoặc khi trình duyệt ở trạng thái rảnh.
Mức hao tổn khung khi xử lý sự kiện: Khung có thể có thêm tính năng/cú pháp để xử lý sự kiện. Ví dụ: Vue sử dụng v-on để đính kèm trình nghe sự kiện vào các phần tử, trong khi Angular bao gồm các trình xử lý sự kiện của người dùng. Việc triển khai những tính năng này yêu cầu mã khung bổ sung phía trên JavaScript vanilla.
Hydhydation: Khi sử dụng khung JavaScript, máy chủ thường tạo HTML ban đầu cho một trang, sau đó cần được tăng cường bằng trình xử lý sự kiện và trạng thái ứng dụng để trang đó có thể tương tác trong trình duyệt web. Chúng tôi gọi quá trình này là quá trình hydrat hoá. Đây có thể là một quá trình tốn nhiều công sức trong quá trình tải, tuỳ thuộc vào thời gian tải JavaScript và quá trình hydrat hoá hoàn tất. Điều này cũng có thể khiến các trang trông giống như có tính tương tác dù thực chất không phải như vậy. Thường thì quá trình cấp nước diễn ra tự động trong quá trình tải trang hoặc từng phần (ví dụ: khi người dùng tương tác) và có thể ảnh hưởng đến INP hoặc thời gian xử lý do việc lên lịch tác vụ. Trong các thư viện như React, bạn có thể tận dụng
useTransitionđể một phần của quá trình kết xuất thành phần nằm trong khung hình tiếp theo và mọi hiệu ứng phụ tốn kém hơn sẽ được để lại cho các khung hình trong tương lai. Do đó, việc cập nhật trong quá trình chuyển đổi để tạo ra các bản cập nhật khẩn cấp hơn như số lượt nhấp có thể là một cách làm phù hợp với INP.Tìm nạp trước: Việc chủ động tìm nạp trước các tài nguyên cần thiết cho các thao tác điều hướng tiếp theo có thể giúp nâng cao hiệu suất nếu được thực hiện đúng cách. Tuy nhiên, nếu bạn tìm nạp trước và kết xuất các tuyến SPA một cách đồng bộ, bạn có thể tác động tiêu cực đến INP vì tất cả hoạt động kết xuất tốn kém này cố gắng hoàn thành trong một khung hình duy nhất. Ngược lại với việc không tìm nạp trước tuyến đường của bạn, thay vào đó, bắt đầu công việc cần thiết (ví dụ:
fetch()) và bỏ chặn vẽ. Bạn nên kiểm tra lại xem liệu phương pháp tìm nạp trước trong khung của bạn có mang lại trải nghiệm người dùng tối ưu không và tác động của việc này (nếu có) đến INP như thế nào.
Từ nay trở đi, để đạt điểm INP tốt, nhà phát triển sẽ phải tập trung vào việc xem xét mã thực thi sau mỗi lượt tương tác trên trang, đồng thời tối ưu hoá việc phân đoạn, bù nước, tải các chiến lược và kích thước của mỗi bản cập nhật kết xuất() đối với cả tập lệnh của bên thứ nhất và bên thứ ba.
Aurora và các khung giải quyết các vấn đề về INP như thế nào?
Aurora kết hợp với các khung bằng cách kết hợp các phương pháp hay nhất để đưa ra các giải pháp tích hợp cho các vấn đề thường gặp. Chúng tôi đã làm việc với Next.js, Nuxt.js, Gatsby và Angular về các giải pháp cung cấp các tùy chọn mặc định mạnh mẽ trong khung để tối ưu hóa hiệu suất. Sau đây là những điểm nổi bật về hoạt động của chúng tôi trong bối cảnh này:
React và Next.js: Thành phần tập lệnh Next.js giúp giải quyết các vấn đề gây ra do việc tải tập lệnh của bên thứ ba không hiệu quả. Tính năng phân đoạn chi tiết được giới thiệu trong Next.js để cho phép các phân đoạn có kích thước nhỏ hơn cho mã được chia sẻ. Điều này giúp giảm lượng mã chung không dùng đến được tải xuống trên tất cả các trang. Chúng tôi cũng đang làm việc với Next.js để cung cấp dữ liệu INP trong dịch vụ Analytics của họ.
Angular: Aurora đang hợp tác với nhóm Angular để khám phá các cải tiến về khả năng kết xuất và bổ sung nước phía máy chủ. Chúng tôi cũng dự định xem xét các tinh chỉnh trong việc xử lý sự kiện và phát hiện thay đổi để cải thiện INP.
Vue và Nuxt.js: Chúng tôi đang tìm hiểu các phương án cộng tác, chủ yếu liên quan đến việc tải và hiển thị tập lệnh.
Các khuôn khổ suy nghĩ như thế nào về việc cải thiện INP?
React và Next.js
Tính năng phân tách thời gian React.js, được triển khai thông qua startTransition và Suspense, cho phép bạn chọn sử dụng quá trình bổ sung nước có chọn lọc hoặc tăng dần. Điều này có nghĩa là quá trình hydrat hoá không phải là một khối đồng bộ. Việc này được thực hiện thành các phần nhỏ có thể gây gián đoạn bất cứ lúc nào.
Việc này sẽ giúp cải thiện INP và cho phép bạn phản hồi nhanh hơn với thao tác nhấn phím, hiệu ứng di chuột trong quá trình chuyển đổi và lượt nhấp. Điều này cũng giúp đảm bảo các ứng dụng React có khả năng thích ứng ngay cả đối với các quá trình chuyển đổi lớn như tự động hoàn tất.
Next.js đã triển khai một khung định tuyến mới sử dụng startTransition theo mặc định để chuyển đổi tuyến đường. Điều này cho phép chủ sở hữu trang web Next.js áp dụng tính năng cắt thời gian React và cải thiện khả năng phản hồi của việc chuyển đổi tuyến.
Angular
Nhóm Angular đang tìm hiểu một số ý tưởng cũng có thể giúp ích cho INP:
- Không theo vùng: Cắt giảm kích thước gói ban đầu và các mã bắt buộc phải tải trước khi ứng dụng có thể hiển thị bất kỳ nội dung nào.
- Lượng nước uống: Uống nước theo kiểu đảo để hạn chế mức độ ứng dụng cần được đánh thức khi tương tác.
- Giảm mức hao tổn của CD: Ví dụ: giảm chi phí phát hiện thay đổi, tìm cách kiểm tra ít ứng dụng hơn và tận dụng tín hiệu phản ứng về những thay đổi.
- Phân tách mã chi tiết hơn: Thu nhỏ gói ban đầu.
- Hỗ trợ tốt hơn cho chỉ báo tải: Ví dụ như trong quá trình kết xuất lại SSR, trong khi điều hướng tuyến đường và trong hoạt động tải từng phần.
- Công cụ lập hồ sơ: Công cụ tốt hơn dành cho nhà phát triển để hiểu chi phí tương tác, đặc biệt là chi phí phát hiện thay đổi cho các tương tác cụ thể.
Thông qua những cải tiến này, chúng tôi có thể giải quyết nhiều vấn đề dẫn đến khả năng phản hồi và trải nghiệm người dùng kém, đồng thời tăng cường các chỉ số CWV và chỉ số INP mới cho các trang web dựa trên khung.
Kết luận
Chúng tôi kỳ vọng điểm INP sẽ là kim chỉ nam hiệu quả hơn cho các trang web để cải thiện khả năng phản hồi và hiệu suất trong tương lai. Chúng tôi sẽ tiếp tục xây dựng hướng dẫn hiện có về INP để cung cấp thêm nhiều mẹo thiết thực cho nhà phát triển khung trong năm 2023. Chúng tôi hy vọng đạt được điều này bằng cách:
- Tạo kênh để dễ dàng truy cập vào dữ liệu thực địa trên INP cho các khung và nhà phát triển web.
- Làm việc với các khung để xây dựng các tính năng giúp cải thiện INP theo mặc định.
Chúng tôi hoan nghênh ý kiến phản hồi của người dùng khung khi họ bắt đầu hành trình tối ưu hoá INP.