Bản dùng thử theo nguyên gốc mới cho tính năng Điều hướng mềm

Barry Pollard

Michal Mocny

Ngày xuất bản: 31 tháng 7 năm 2025

Chrome đang ra mắt một bản dùng thử theo nguyên gốc mới từ Chrome 139 cho API Điều hướng mềm mà chúng tôi đã thử nghiệm trước đây. Bản dùng thử theo nguyên gốc này cho phép các trang web dùng thử API trên trang web của họ với người dùng thực để kiểm thử API trong thực tế và gửi ý kiến phản hồi cho nhóm Chrome.

Điều hướng mềm là gì?

Điều hướng mềm là khi JavaScript chặn một thao tác điều hướng (ví dụ: nhấp vào một đường liên kết) và cập nhật nội dung trên trang hiện có, thay vì tải một trang mới rồi cập nhật URL trong thanh địa chỉ (với trạng thái lịch sử để cho phép điều hướng mềm về phía trước và phía sau). Đối với người dùng, các thao tác này trông giống như thao tác điều hướng thông thường, nhưng đối với trình duyệt, trang này vẫn là trang gốc.

Lý do cần có API Điều hướng mềm

API Điều hướng mềm là một API được đề xuất để cho phép phát hiện dựa trên phương pháp phỏng đoán về cái gọi là "điều hướng mềm" như được sử dụng bởi các trang web Ứng dụng một trang (SPA). Vì không có thao tác điều hướng trang thực tế nào xảy ra đối với thao tác điều hướng mềm, nên điều này có nghĩa là một số thao tác thường xảy ra đối với thao tác điều hướng cần được JavaScript quản lý theo cách thủ công. Một số thao tác, chẳng hạn như quản lý nhật ký điều hướng, có thể thực hiện được bằng các API hiện tại. Tuy nhiên, các thao tác khác, chẳng hạn như đo lường Core Web Vitals, không thể thực hiện được đối với các thao tác điều hướng này.

API Điều hướng mềm cho phép quan sát các thao tác điều hướng mềm. Mặc dù JavaScript khởi tạo thao tác điều hướng mềm (thường là một khung JavaScript) nhận biết được thời điểm xảy ra thao tác điều hướng, nhưng JavaScript khác và chính trình duyệt sẽ không nhận biết được.

Core Web Vitals và SPA

Một trong những yếu tố chính thúc đẩy việc tạo API Điều hướng mềm là cho phép đo lường Core Web Vitals cho ứng dụng trang đơn (SPA). Core Web Vitals được đo lường bằng cả trình duyệt (để hiển thị trong các công cụ như Báo cáo trải nghiệm người dùng trên Chrome) và bằng các thư viện JavaScript Giám sát người dùng thực (RUM).

Khung JavaScript có thể đo lường một số khía cạnh của Core Web Vitals. Đặc biệt, Lượt tương tác đến nội dung hiển thị tiếp theo (INP) và Mức thay đổi bố cục tích luỹ (CLS) dựa trên các thành phần cơ bản (API Thời gian sự kiện và API Độ bất ổn định bố cục tương ứng) có thể được đo lường trong bất kỳ khoảng thời gian nào để tính toán các chỉ số INP và CLS. Tuy nhiên, vì trình duyệt báo cáo và hoàn tất Nội dung lớn nhất hiển thị (LCP) dựa trên các thao tác điều hướng và tương tác trên trang, nên các khung JavaScript không có khả năng hiển thị bất kỳ nội dung nào khác ngoài hiệu suất tải ban đầu cho ứng dụng trang đơn (SPA).

Cách API Điều hướng mềm cho phép đo lường Core Web Vitals cho SPA

Lần lặp đầu tiên của API Điều hướng mềm đã kết hợp phương pháp phỏng đoán điều hướng mềm với việc đặt lại LCP. Sau khi đặt lại, LCP có thể được phát lại cho các thao tác điều hướng mềm đối với nội dung hiển thị mới, cho phép đo lường chỉ số này cho các thao tác điều hướng mềm.

Lần lặp mới nhất này áp dụng một phương pháp khác và tách các khái niệm này thành API Điều hướng mềm và một mục nhập hiệu suất Lượt tương tác đến nội dung hiển thị. Mục nhập interaction-contentful-paint đo lường "nội dung hiển thị" sau các lượt tương tác. Hiện tại, mục nhập này chỉ được phát cho các thao tác điều hướng mềm, nhưng điều này sẽ mở ra các trường hợp sử dụng tiềm năng khác ngoài LCP nếu được bật cho tất cả các lượt tương tác.

API cũng mở rộng từng mục nhập hiệu suất largest-contentful-paint, interaction-contentful-paint, event-timing và layout-shift để bao gồm một giá trị nhận dạng cho thao tác điều hướng mà mục nhập đó dành cho. Các mục nhập hiệu suất được phát sau sự kiện mà chúng đang đo lường – thường là trong thời gian rảnh. Điều này có nghĩa là URL thường sẽ thay đổi vào thời điểm mục nhập hiệu suất được phát. Việc đưa thao tác điều hướng vào mục nhập giúp bạn dễ dàng đo lường Core Web Vitals cho URL đã cho mà không cần phải khớp thời gian mục nhập hiệu suất với thời gian mục nhập điều hướng mềm.

Tại sao cần có phương pháp phỏng đoán?

API Điều hướng mềm xem xét một thao tác điều hướng mềm khi xảy ra những điều sau:

Xảy ra một lượt tương tác dựa trên người dùng (các bản cập nhật URL mà không có lượt tương tác của người dùng không được tính)
… dẫn đến việc sửa đổi DOM và một nội dung hiển thị
… và xảy ra một bản cập nhật URL
Bản cập nhật URL, bao gồm cả thay đổi lịch sử.

API sử dụng phương pháp dựa trên phương pháp phỏng đoán này thay vì cho phép khung JavaScript "phát" một thao tác điều hướng mềm hoặc được xây dựng dựa trên API Điều hướng vì điều này cho phép hiểu nhất quán về những gì tạo nên một thao tác điều hướng mềm bất kể khung hoặc cách nhà phát triển sử dụng khung đó.

Các khung hoặc nhà phát triển có thể cập nhật URL cho một thao tác điều hướng mềm ngay cả khi không có lượt tương tác của người dùng hoặc bản cập nhật DOM mà chúng tôi coi là những gì người dùng sẽ thấy là một thao tác điều hướng. Họ cũng có thể cập nhật URL vào những thời điểm khác nhau – khi bắt đầu lượt tương tác hoặc chỉ khi kết thúc khi hoàn tất – hoặc ở bất kỳ trạng thái nào ở giữa.

Thay vì dựa vào lựa chọn khung, việc xây dựng tính năng phát hiện thao tác điều hướng mềm vào trình duyệt sẽ thiết lập "phương pháp phỏng đoán" chính tắc (với ý kiến phản hồi của bạn từ bản dùng thử theo nguyên gốc này), cho phép chúng tôi đo lường Core Web Vitals cho các thao tác điều hướng mềm ở quy mô lớn và so sánh các phép đo như vậy ở quy mô lớn.

Các khung và nhà phát triển cũng có thể bỏ qua phương pháp phỏng đoán API Điều hướng mềm và sử dụng các API Thời gian sự kiện, Độ bất ổn định bố cục và Lượt tương tác đến nội dung hiển thị cơ bản để đo lường các chỉ số hiệu suất bổ sung theo ý muốn, nhưng bạn nên sử dụng Core Web Vitals bằng phương pháp phỏng đoán để cho phép đo lường trên các trang web.

Cần trợ giúp để kiểm thử API Điều hướng mềm

Chúng tôi cần trợ giúp để kiểm thử API Điều hướng mềm nhằm kiểm thử xem heuristic có khớp chính xác với kỳ vọng của bạn về thời điểm xảy ra thao tác điều hướng mềm hay không. Có trường hợp nào API không báo cáo các thao tác điều hướng mềm khi bạn cho rằng chúng đã xảy ra không? Ngược lại, API có lặp lại các thao tác điều hướng mà bạn không coi là thao tác điều hướng mềm không?

Các ví dụ mà chúng tôi đã thấy gây ra vấn đề bao gồm khi một URL được cập nhật bằng replaceState thay vì thêm lịch sử hoặc khi xảy ra một thao tác điều hướng không do người dùng khởi tạo (ví dụ: đăng xuất khi hết thời gian chờ). Cả hai trường hợp đều được giải thích bằng cách không khớp với phương pháp phỏng đoán và nhóm Chrome cảm thấy thoải mái khi không đưa các trường hợp này vào, nhưng chúng tôi muốn nghe ý kiến của nhà phát triển web nếu họ đồng ý. Và chúng tôi đặc biệt muốn nghe về những trường hợp mà phương pháp phỏng đoán có vẻ được đáp ứng nhưng API vẫn không nhận ra thao tác điều hướng mềm.

Ngoài ra, chúng tôi muốn hiểu liệu API này và thành phần cơ bản Lượt tương tác đến nội dung hiển thị mới có giải quyết trường hợp sử dụng chính là cho phép đo lường Core Web Vitals cho ứng dụng trang đơn (SPA) hay không.

Chúng tôi muốn API hữu ích nhất có thể và điều đó dễ xảy ra hơn nhiều trước khi API được ra mắt và các trang web bắt đầu phụ thuộc vào một cách triển khai. Do đó, chúng tôi yêu cầu các nhà phát triển ứng dụng trang đơn (SPA) và những người quan tâm đến việc đo lường hiệu suất web cho các trang web này dùng thử API này và cho chúng tôi biết API hoạt động như thế nào đối với bạn.

Cách kiểm tra

Bạn có thể kiểm thử API cục bộ bằng các cờ Chrome hoặc tuỳ chọn dòng lệnh. Ngoài ra, bạn có thể kiểm thử API trong thực tế bằng bản dùng thử theo nguyên gốc.

Tham khảo tài liệu của chúng tôi hoặc kho lưu trữ GitHub để biết thêm thông tin chi tiết kỹ thuật về API, đặc biệt là cách đo lường Core Web Vitals. Ngoài ra, một phiên bản điều hướng mềm thử nghiệm của thư viện web-vitals cũng có sẵn.

Phản hồi

Chúng tôi đang tích cực tìm kiếm ý kiến phản hồi về thử nghiệm này ở những nơi sau:

Ý kiến phản hồi về API phải được nêu ra dưới dạng vấn đề trên GitHub.
Lỗi về cách triển khai Chromium phải được nêu ra trên trình theo dõi lỗi của Chrome, nếu đây chưa phải là một trong những vấn đề đã biết yet.
Bạn có thể chia sẻ ý kiến phản hồi chung về các chỉ số quan trọng của trang web tại web-vitals-feedback@googlegroups.com.

Nếu bạn không chắc chắn, đừng lo lắng quá nhiều. Chúng tôi muốn nghe ý kiến phản hồi ở một trong hai nơi và sẽ sẵn lòng phân loại các vấn đề ở cả hai nơi cũng như chuyển hướng các vấn đề đến đúng vị trí.