Thử nghiệm việc đo lường thao tác điều hướng mềm

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Kể từ khi ra mắt, sáng kiến Các chỉ số quan trọng về trang web đã tìm cách đo lường trải nghiệm thực tế của người dùng trên một trang web, thay vì đo lường các chi tiết kỹ thuật đằng sau cách một trang web được tạo hoặc tải. 3 chỉ số Các chỉ số quan trọng về trang web được tạo dưới dạng chỉ số tập trung vào người dùng. Đây là phiên bản phát triển so với các chỉ số kỹ thuật hiện có (như DOMContentLoaded hoặc load) đo lường các mốc thời gian thường không liên quan đến cảm nhận của người dùng về hiệu suất của trang. Do đó, công nghệ dùng để xây dựng trang web sẽ không ảnh hưởng đến việc chấm điểm giúp trang web hoạt động tốt.

Thực tế luôn phức tạp hơn một chút so với lý tưởng và cấu trúc Ứng dụng một trang phổ biến chưa bao giờ được các chỉ số quan trọng về trang web hỗ trợ đầy đủ. Thay vì tải các trang web riêng lẻ, riêng biệt khi người dùng di chuyển trên trang web, các ứng dụng web này sử dụng tính năng "điều hướng mềm", trong đó nội dung trang được thay đổi bằng JavaScript. Trong các ứng dụng này, ảo tưởng về cấu trúc trang web thông thường được duy trì bằng cách thay đổi URL và đẩy các URL trước đó trong lịch sử của trình duyệt để cho phép các nút quay lại và tiến lên hoạt động như mong đợi của người dùng.

Nhiều khung JavaScript sử dụng mô hình này, nhưng mỗi khung theo cách khác nhau. Vì đây nằm ngoài những gì mà trình duyệt thường hiểu là một "trang", nên việc đo lường điều này luôn khó khăn: đâu là dòng được vẽ giữa một lượt tương tác trên trang hiện tại, so với việc coi đây là một trang mới?

Hiện tại, nhóm Chrome đã xem xét thách thức này và đang tìm cách chuẩn hoá định nghĩa về khái niệm "điều hướng mềm" và cách đo lường Các chỉ số quan trọng về trang web cho vấn đề này theo cách tương tự như cách đo lường các trang web được triển khai trong kiến trúc nhiều trang thông thường (MPA). Tuy chỉ đang ở giai đoạn đầu, nhưng nhóm này hiện đã sẵn sàng cung cấp rộng rãi hơn những tính năng đã triển khai cho các trang web để họ thử nghiệm. Điều này sẽ cho phép các trang web cung cấp ý kiến phản hồi về phương pháp tiếp cận tính đến thời điểm hiện tại.

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

Chúng tôi đã đưa ra định nghĩa sau đây về điều hướng mềm:

  • Thao tác điều hướng bắt đầu bằng hành động của người dùng.
  • Điều hướng dẫn đến thay đổi về URL hiển thị cho người dùng và thay đổi lịch sử.
  • Quá trình điều hướng dẫn đến thay đổi DOM.

Đối với một số trang web, những thông tin phỏng đoán này có thể dẫn đến kết quả dương tính giả (tức là người dùng sẽ không thực sự xem là "điều hướng" đã xảy ra) hoặc âm tính giả (trong đó người dùng xem là "điều hướng" đã xảy ra mặc dù không đáp ứng các tiêu chí này). Chúng tôi hoan nghênh ý kiến phản hồi về các phương pháp phỏng đoán tại kho lưu trữ thông số kỹ thuật điều hướng mềm.

Chrome triển khai thao tác điều hướng mềm như thế nào?

Sau khi bật suy nghiệm điều hướng mềm (tìm hiểu thêm về nội dung này trong phần tiếp theo), Chrome sẽ thay đổi cách báo cáo một số chỉ số hiệu suất:

Những thay đổi này sẽ cho phép đo lường Các chỉ số quan trọng về trang web (và một số chỉ số chẩn đoán liên quan) theo từng thành phần điều hướng trang, mặc dù có một số điểm khác biệt mà bạn cần phải xem xét.

Ảnh hưởng của việc bật tính năng điều hướng mềm trong Chrome là gì?

Sau đây là một số thay đổi mà chủ sở hữu trang web cần cân nhắc sau khi bật tính năng này:

  • Các sự kiện FP, FCP và LCP bổ sung có thể được phát lại cho các thao tác điều hướng mềm. Báo cáo trải nghiệm người dùng trên Chrome (CrUX) sẽ bỏ qua các giá trị bổ sung này, nhưng điều này có thể ảnh hưởng đến mọi hoạt động theo dõi Đo lường người dùng thực (rum) trên trang web của bạn. Hãy liên hệ với nhà cung cấp rum của bạn nếu bạn lo ngại liệu điều này có ảnh hưởng đến các kết quả đo lường hay không. Xem phần về cách đo lường Các chỉ số quan trọng về trang web đối với thao tác điều hướng mềm.
  • Thuộc tính navigationID mới (và không bắt buộc) trên các mục hiệu suất có thể cần được xem xét trong mã xử lý ứng dụng của bạn bằng cách sử dụng các mục này.
  • Chỉ các trình duyệt dựa trên Chromium mới hỗ trợ chế độ mới này. Mặc dù nhiều chỉ số mới trong số này chỉ có trong các trình duyệt dựa trên Chromium, nhưng một số chỉ số (FCP, LCP) lại có trong các trình duyệt khác và không phải ai cũng có thể đã nâng cấp lên phiên bản mới nhất của trình duyệt dựa trên Chromium. Vì vậy, hãy lưu ý rằng một số người dùng có thể không báo cáo chỉ số điều hướng mềm.
  • Vì đây là một tính năng thử nghiệm mới không được bật theo mặc định, nên các trang web cần kiểm thử tính năng này để đảm bảo không có bất kỳ tác dụng phụ không mong muốn nào khác.

Để biết thêm thông tin về cách đo lường các chỉ số cho điều hướng mềm, hãy xem phần Đo lường Các chỉ số quan trọng về trang web cho mỗi điều hướng mềm.

Làm cách nào để bật điều hướng mềm trong Chrome?

Thao tác điều hướng mềm không được bật theo mặc định trong Chrome, nhưng bạn có thể thử nghiệm trên Chrome 110 bằng cách bật tính năng này một cách rõ ràng.

Đối với nhà phát triển, họ có thể bật tính năng này bằng cách bật cờ tính năng Nền tảng web thử nghiệm tại chrome://flags/#enable-experimental-web-platform-features hoặc bằng cách sử dụng đối số dòng lệnh --enable-experimental-web-platform-features khi chạy Chrome.

Đối với một trang web muốn bật tính năng này cho tất cả khách truy cập để thấy tác động, có một bản dùng thử theo nguyên gốc đang chạy từ Chrome 117. Bạn có thể bật bản dùng thử này bằng cách đăng ký bản dùng thử và bao gồm một phần tử meta có mã bản dùng thử theo nguyên gốc trong tiêu đề HTML hoặc HTTP. Hãy xem bài đăng Bắt đầu dùng bản dùng thử theo nguyên gốc để biết thêm thông tin.

Chủ sở hữu trang web có thể chọn đưa bản dùng thử theo nguyên gốc vào các trang của họ cho tất cả hoặc chỉ cho một nhóm nhỏ người dùng. Hãy lưu ý phần ngụ ý phía trước về việc thay đổi này sẽ thay đổi cách báo cáo các chỉ số của bạn như thế nào, đặc biệt là khi bạn bật bản dùng thử theo nguyên gốc này cho một tỷ lệ lớn người dùng. Xin lưu ý rằng CrUX sẽ tiếp tục báo cáo các chỉ số theo cách hiện tại bất kể chế độ cài đặt điều hướng mềm này không chịu ảnh hưởng của những hệ quả đó. Bạn cũng nên lưu ý rằng các bản dùng thử theo nguyên gốc cũng chỉ giới hạn ở việc bật các tính năng thử nghiệm trên tối đa 0,5% tổng số lượt tải trang Chrome với trung bình trong 14 ngày.Tuy nhiên, đây chỉ là vấn đề đối với những trang web rất lớn.

Làm cách nào để đo lường thao tác điều hướng mềm?

Sau khi bật thử nghiệm điều hướng mềm, các chỉ số sẽ được báo cáo bằng cách sử dụng API PerformanceObserver như thường lệ. Tuy nhiên, có một số chỉ số mà bạn cần xem xét thêm.

Báo cáo điều hướng mềm

Bạn có thể dùng PerformanceObserver để quan sát các thao tác điều hướng mềm. Sau đây là một đoạn mã mẫu ghi lại các mục điều hướng mềm trên bảng điều khiển, bao gồm cả các thao tác điều hướng mềm trước đó trên trang này bằng cách sử dụng tuỳ chọn buffered:

const observer = new PerformanceObserver(console.log);
observer.observe({ type: "soft-navigation", buffered: true });

Bạn có thể sử dụng công cụ này để hoàn tất các chỉ số về trang đầy đủ cho thao tác điều hướng trước đó.

Báo cáo các chỉ số về URL thích hợp

Vì bạn chỉ có thể xem thao tác điều hướng mềm sau khi xuất hiện, nên bạn cần phải hoàn tất một số chỉ số dựa trên sự kiện này rồi báo cáo cho URL trước đó, vì URL hiện tại sẽ phản ánh URL đã cập nhật cho trang mới.

Bạn có thể dùng thuộc tính navigationId của PerformanceEntry thích hợp để liên kết sự kiện đó với URL chính xác. Bạn có thể tra cứu nội dung này bằng API PerformanceEntry:

const softNavEntry =
  performance.getEntriesByType('soft-navigation').filter(
    (entry) => entry.navigationId === navigationId
  )[0];
const hardNavEntry = performance.getEntriesByType('navigation')[0];
const navEntry = softNavEntry || hardNavEntry;
const pageUrl = navEntry?.name;

Bạn nên sử dụng pageUrl này để báo cáo các chỉ số dựa trên đúng URL, thay vì URL hiện tại mà các chỉ số đó có thể đã sử dụng trong quá khứ.

Lấy startTime của thao tác điều hướng mềm

Bạn có thể lấy thời gian bắt đầu điều hướng theo cách tương tự:

const softNavEntry =
  performance.getEntriesByType('soft-navigation').filter(
    (entry) => entry.navigationId === navigationId
  )[0];
const hardNavEntry = performance.getEntriesByType('navigation')[0];
const navEntry = softNavEntry || hardNavEntry;
const startTime = navEntry?.startTime;

startTime là thời gian xảy ra lượt tương tác đầu tiên (ví dụ: lượt nhấp vào nút) để khởi động thao tác điều hướng mềm.

Tất cả dấu thời gian về hiệu suất, bao gồm cả thời gian cho các thao tác điều hướng mềm, đều được báo cáo là thời gian tính từ thời điểm điều hướng trang "cứng" ban đầu. Do đó, cần có thời gian bắt đầu điều hướng mềm để làm cơ sở cho thời gian của chỉ số tải điều hướng mềm (ví dụ: LCP), so với thời gian của chỉ số điều hướng mềm này.

Đo lường Các chỉ số quan trọng về trang web theo từng thao tác điều hướng mềm

Để bao gồm các mục nhập chỉ số điều hướng mềm, bạn cần đưa includeSoftNavigationObservations: true vào lệnh gọi observe của trình quan sát hiệu suất.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout Shift time:', entry);
  }
}).observe({type: 'layout-shift', buffered: true, includeSoftNavigationObservations: true});

Cần có cờ includeSoftNavigationObservations bổ sung trên phương thức observe ngoài việc bật tính năng điều hướng mềm trong Chrome. Việc chọn sử dụng rõ ràng ở cấp trình quan sát hiệu suất là nhằm đảm bảo những người quan sát hiệu suất hiện tại không bị bất ngờ bởi những mục nhập bổ sung này, vì cần xem xét một số điểm khác khi đo lường Các chỉ số quan trọng về trang web đối với các thao tác điều hướng mềm.

Thời gian sẽ vẫn được trả về theo thời gian bắt đầu điều hướng "cố định" ban đầu. Ví dụ: để tính toán LCP cho điều hướng mềm, bạn cần lấy thời gian LCP và trừ đi thời gian bắt đầu điều hướng mềm thích hợp như thông tin chi tiết trước đó để có được thời gian liên quan đến điều hướng mềm. Ví dụ: đối với LCP:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const softNavEntry =
      performance.getEntriesByType('soft-navigation').filter(
        (navEntry) => navEntry.navigationId === entry.navigationId
      )[0];
    const hardNavEntry = performance.getEntriesByType('navigation')[0];
    const navEntry = softNavEntry || hardNavEntry;
    const startTime = navEntry?.startTime;
    console.log('LCP time:', entry.startTime - startTime);
  }
}).observe({type: 'largest-contentful-paint', buffered: true, includeSoftNavigationObservations: true});

Một số chỉ số thường được đo trong suốt thời gian hoạt động của trang: ví dụ: LCP có thể thay đổi cho đến khi xảy ra một lượt tương tác. CLS và INP có thể được cập nhật cho đến khi người dùng chuyển đến trang đó. Do đó, mỗi "thao tác" (bao gồm cả thao tác điều hướng ban đầu) có thể cần phải hoàn tất các chỉ số của trang trước khi mỗi lần điều hướng mềm mới xảy ra. Điều này có nghĩa là các chỉ số điều hướng "cứng" ban đầu có thể được hoàn tất sớm hơn như thường lệ.

Tương tự, khi bắt đầu đo lường các chỉ số cho thao tác điều hướng mềm mới đối với các chỉ số dài hạn này, các chỉ số cần được "đặt lại" hoặc "khởi tạo lại" và được coi là chỉ số mới mà không có bộ nhớ của các giá trị đã được đặt cho các "trang" trước đó.

Nên xử lý nội dung không thay đổi giữa các thao tác điều hướng như thế nào?

FP, FCP và LCP cho các thao tác điều hướng mềm sẽ chỉ đo lường các phiên bản vẽ mới. Điều này có thể dẫn đến một LCP khác, chẳng hạn như từ tải nguội của điều hướng mềm đó sang tải mềm.

Ví dụ: dùng một trang có hình ảnh biểu ngữ lớn là phần tử LCP, nhưng văn bản bên dưới hình ảnh này thay đổi theo từng điều hướng mềm. Lượt tải trang ban đầu sẽ gắn cờ hình ảnh biểu ngữ là phần tử LCP và dựa trên thời gian LCP đó. Đối với các thành phần điều hướng mềm tiếp theo, văn bản bên dưới sẽ là thành phần lớn nhất được vẽ sau thành phần điều hướng mềm và sẽ là thành phần LCP mới. Tuy nhiên, nếu một trang mới được tải bằng một đường liên kết sâu đến URL điều hướng mềm, thì ảnh biểu ngữ sẽ là một nội dung hiển thị mới và do đó sẽ đủ điều kiện để được coi là phần tử LCP.

Như ví dụ này cho thấy, phần tử LCP cho điều hướng mềm có thể được báo cáo theo cách khác nhau, tuỳ thuộc vào cách trang được tải — tương tự như việc tải một trang có đường liên kết neo ở phía dưới trang có thể dẫn đến một phần tử LCP khác.

Cách đo lường TTFB?

Thời gian đến byte đầu tiên (TTFB) đối với một lượt tải trang thông thường thể hiện thời gian mà các byte đầu tiên của yêu cầu ban đầu được trả về.

Đối với điều hướng mềm, đây là một câu hỏi phức tạp hơn. Chúng tôi có nên đo lường yêu cầu đầu tiên được đưa ra cho trang mới không? Nếu tất cả nội dung đã có trong ứng dụng và không có yêu cầu nào khác thì sao? Nếu yêu cầu đó được thực hiện trước bằng quá trình tìm nạp trước thì sao? Điều gì xảy ra nếu một yêu cầu không liên quan đến điều hướng mềm từ góc độ người dùng (ví dụ: yêu cầu phân tích)?

Một phương pháp đơn giản hơn là báo cáo TTFB là 0 cho các thao tác điều hướng mềm – theo cách tương tự như cách chúng tôi đề xuất cho việc khôi phục bộ nhớ đệm cho thao tác tiến/lùi. Đây là phương thức mà thư viện web-vitals hiện đang sử dụng cho các thao tác điều hướng mềm.

Trong tương lai, chúng tôi có thể hỗ trợ các cách chính xác hơn để biết yêu cầu nào là "yêu cầu điều hướng" của điều hướng mềm và có thể có các phép đo TTFB chính xác hơn. Nhưng đó không phải là một phần của thử nghiệm hiện tại.

Làm cách nào để đo lường cả dữ liệu cũ và mới?

Trong quá trình thử nghiệm này, bạn nên tiếp tục đo lường Các chỉ số quan trọng về trang web theo cách hiện tại, dựa trên các thao tác điều hướng trang "cứng" để khớp với những gì mà CrUX sẽ đo lường và báo cáo dưới dạng tập dữ liệu chính thức trong sáng kiến Các chỉ số quan trọng về trang web.

Ngoài các yếu tố này, bạn cũng nên đo lường các thao tác điều hướng mềm để xem cách đo lường các yếu tố này trong tương lai, cũng như tạo cơ hội để bạn đưa ra ý kiến phản hồi cho nhóm Chrome về cách hoạt động của phương thức triển khai này trong thực tế. Điều này sẽ giúp bạn và nhóm Chrome định hình API trong tương lai.

Để đo lường cả hai, bạn cần lưu ý đến các sự kiện mới có thể được phát hành khi ở chế độ điều hướng mềm (ví dụ: nhiều sự kiện FCP và LCP bổ sung) và xử lý các sự kiện này một cách thích hợp bằng cách hoàn tất các chỉ số này vào thời điểm thích hợp, đồng thời bỏ qua các sự kiện trong tương lai chỉ áp dụng cho thao tác điều hướng mềm.

Dùng thư viện web-vitals để đo lường Các chỉ số quan trọng về trang web cho thao tác điều hướng mềm

Cách dễ nhất để tính đến tất cả các sắc thái là sử dụng thư viện JavaScript web-vitals có hỗ trợ thử nghiệm cho thao tác điều hướng mềm trong một soft-navs branch riêng (cũng có sẵn trên npm và unpkg). Bạn có thể đo lường điều này theo cách sau (thay thế doTraditionalProcessing và doSoftNavProcessing nếu phù hợp):

import {
  onTTFB,
  onFCP,
  onLCP,
  onCLS,
  onINP,
} from 'https://unpkg.com/web-vitals@soft-navs/dist/web-vitals.js?module';

onTTFB(doTraditionalProcessing);
onFCP(doTraditionalProcessing);
onLCP(doTraditionalProcessing);
onCLS(doTraditionalProcessing);
onINP(doTraditionalProcessing);

onTTFB(doSoftNavProcessing, {reportSoftNavs: true});
onFCP(doSoftNavProcessing, {reportSoftNavs: true});
onLCP(doSoftNavProcessing, {reportSoftNavs: true});
onCLS(doSoftNavProcessing, {reportSoftNavs: true});
onINP(doSoftNavProcessing, {reportSoftNavs: true});

Đảm bảo các chỉ số được báo cáo dựa trên đúng URL như đã lưu ý trước đó.

Thư viện web-vitals báo cáo các chỉ số sau đây cho thao tác điều hướng mềm:

Chỉ số Thông tin chi tiết
Mạng TTFB Đã báo cáo là 0.
FCP (hiển thị nội dung đầu tiên) Hiện tại, chỉ có FCP đầu tiên của trang là thư viện web-vitals báo cáo.
LCP (Thời gian hiển thị nội dung lớn nhất) Thời gian hiển thị nội dung lớn nhất tiếp theo, so với thời gian bắt đầu điều hướng mềm. Các màu sơn hiện có từ thanh điều hướng trước sẽ không được xem xét. Do đó, LCP sẽ >= 0. Như thường lệ, nội dung này sẽ được báo cáo khi có một lượt tương tác hoặc khi trang chạy ở chế độ nền, vì chỉ khi đó mới có thể hoàn tất LCP.
CLS (Mức thay đổi bố cục tích luỹ) Khoảng thời gian chuyển đổi lớn nhất giữa các lần điều hướng. Như thường lệ, khi trang chạy ở chế độ nền chỉ khi đó mới có thể hoàn tất CLS. Giá trị 0 được báo cáo nếu không có thay đổi nào.
INP INP giữa các thời gian điều hướng. Như thường lệ, nội dung này sẽ được báo cáo khi có một lượt tương tác hoặc khi trang được chạy ở chế độ nền thì chỉ khi đó INP mới được hoàn tất. Giá trị 0 không được báo cáo nếu không có lượt tương tác.

Những thay đổi này có được đưa vào đo lường Các chỉ số quan trọng về trang web không?

Thử nghiệm điều hướng mềm này chính xác là một thử nghiệm. Chúng tôi muốn đánh giá phương pháp phỏng đoán và xem liệu chúng có phản ánh chính xác hơn trải nghiệm người dùng hay không trước khi chúng tôi đưa ra quyết định về việc liệu phương pháp này có được tích hợp vào sáng kiến Các chỉ số quan trọng về trang web hay không. Chúng tôi rất vui mừng về khả năng của thử nghiệm này, nhưng chúng tôi không thể đảm bảo về việc liệu thử nghiệm này có thay thế các phép đo hiện tại hay không.

Chúng tôi đánh giá cao ý kiến phản hồi của nhà phát triển web về thử nghiệm, các phương pháp phỏng đoán được sử dụng và liệu bạn có cảm thấy ý kiến phản hồi đó phản ánh chính xác hơn trải nghiệm hay không. Kho lưu trữ GitHub về điều hướng mềm là nơi tốt nhất để cung cấp ý kiến phản hồi, mặc dù từng lỗi với việc triển khai của Chrome sẽ được nêu trong công cụ theo dõi lỗi của Chrome.

Thao tác điều hướng mềm sẽ được báo cáo như thế nào trong CrUX?

Cách báo cáo chính xác về các thành phần điều hướng mềm trong CrUX, nếu thử nghiệm này thành công, cũng vẫn cần được xác định. Việc xử lý không nhất thiết sẽ giống như các thao tác điều hướng "cứng" hiện tại.

Trên một số trang web, điều hướng mềm gần giống với tải toàn bộ trang tính theo mối quan tâm của người dùng và việc sử dụng công nghệ Ứng dụng một trang chỉ là chi tiết triển khai. Trong những trường hợp khác, quảng cáo có thể gần giống với việc tải một phần nội dung bổ sung hơn.

Do đó, chúng tôi có thể quyết định báo cáo riêng những thao tác điều hướng mềm này trong CrUX, hoặc có thể tính trọng số khi tính toán Các chỉ số quan trọng về trang web cho một trang hoặc một nhóm trang nhất định. Chúng ta cũng có thể loại trừ hoàn toàn điều hướng mềm tải một phần, vì phương pháp phỏng đoán phát triển.

Hiện tại, nhóm đang tập trung vào việc triển khai kỹ thuật và phỏng đoán, điều này sẽ cho phép chúng tôi đánh giá mức độ thành công của thử nghiệm này. Vì vậy, không có quyết định nào được đưa ra về những khía cạnh này.

Ý kiến phản hồi

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

Nhật ký thay đổi

Vì API này đang trong quá trình thử nghiệm nên có một số thay đổi đang diễn ra so với API ổn định. Bạn có thể xem Nhật ký thay đổi điều hướng mềm để biết thêm chi tiết.

Kết luận

Thử nghiệm điều hướng mềm là một phương pháp thú vị để phát triển sáng kiến Các chỉ số quan trọng về trang web nhằm đo lường một quy luật phổ biến trên web hiện đại hiện chưa có trong các chỉ số của chúng tôi. Mặc dù thử nghiệm này chỉ mới bắt đầu và vẫn còn nhiều việc phải làm nhưng việc triển khai tiến trình này cho đến thời điểm hiện tại cho cộng đồng web rộng lớn hơn để thử nghiệm là một bước quan trọng. Việc thu thập ý kiến phản hồi từ thử nghiệm này là một phần quan trọng khác của thử nghiệm, vì vậy, chúng tôi thực sự khuyến khích những người quan tâm đến sự phát triển này sử dụng cơ hội này để giúp định hình API, đảm bảo API đại diện cho những gì chúng tôi hy vọng có thể đo lường được với điều này.

Xác nhận

Hình thu nhỏ của Jordan Madrid trên Unsplash