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 đối với một trang web, thay vì các chi tiết kỹ thuật đằng sau cách tạo hoặc tải trang web. Ba chỉ số Core Web Vitals được tạo dưới dạng chỉ số tập trung vào người dùng – một sự 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 thời gian thường không liên quan đến cách người dùng cảm nhận hiệu suất của trang. Do đó, công nghệ dùng để xây dựng trang web không được ảnh hưởng đến điểm số, miễn là trang web hoạt động hiệu quả.

Thực tế luôn phức tạp hơn một chút so với lý tưởng và kiến trúc Ứng dụng trang đơn phổ biến chưa bao giờ được các chỉ số Core Web Vitals hỗ trợ đầy đủ. Thay vì tải các trang web 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 được gọi là "đ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 ảnh 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 đó vào nhật ký của trình duyệt để cho phép nút quay lại và chuyển tiếp hoạt động như người dùng mong đợi.

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

Nhóm Chrome đã cân nhắc vấn đề này trong một thời gian và đang tìm cách chuẩn hoá định nghĩa về "thao tác điều hướng mềm" cũng như cách đo lường Các chỉ số quan trọng về trang web cho loại thao tác này, tương tự như cách đo lường các trang web được triển khai trong cấu trúc nhiều trang (MPA) thông thường. Mặc dù vẫn đang ở giai đoạn đầu, nhưng nhóm chúng tôi hiện đã sẵn sàng cung cấp rộng rãi những tính năng đã được triển khai để các trang web có thể thử nghiệm. Điều này sẽ cho phép các trang web đưa ra ý kiến phản hồi về phương pháp này cho đế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ề chế độ điều hướng mềm:

  • Di chuyển được bắt đầu bằng một hành động của người dùng.
  • Thao tác điều hướng này sẽ dẫn đến việc thay đổi URL hiển thị cho người dùng và thay đổi nhật ký.
  • Thao tác điều hướng dẫn đến thay đổi DOM.

Đối với một số trang web, các phương pháp phỏng đoán này có thể dẫn đến kết quả dương tính giả (người dùng không thực sự coi là đã có "hành vi điều hướng") hoặc kết quả âm tính giả (người dùng coi là đã có "hành vi điều hướng" 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 tại kho lưu trữ thông số kỹ thuật điều hướng mềm về các phương pháp phỏng đoán.

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

Sau khi bạn bật tính năng phỏng đoán điều hướng mềm (xem thêm về tính năng 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 Chỉ số quan trọng chính của trang web (và một số chỉ số chẩn đoán liên quan) trên mỗi thao tác điều hướng trang, mặc dù có một số điểm khác biệt nhỏ cần được xem xét.

Tác động của việc bật thao tác tạm thời 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 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 giám sát Đo lường người dùng thực (RUM) trên trang web của bạn. Hãy kiểm tra với nhà cung cấp RUM nếu bạn lo ngại việc này sẽ ảnh hưởng đến các phép đo đó. Hãy xem phần về cách đo lường Chỉ số quan trọng chính của trang web trong quá trình điều hướng mềm.
  • Bạn có thể cần xem xét thuộc tính navigationID mới (và không bắt buộc) trên các mục nhập hiệu suất trong mã ứng dụng bằng cách sử dụng các mục nhập 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 chỉ có trong trình duyệt dựa trên Chromium, nhưng một số chỉ số (FCP, LCP) 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 trình duyệt dựa trên Chromium mới nhất. Vì vậy, hãy lưu ý rằng một số người dùng có thể không báo cáo các chỉ số điều hướng mềm.
  • Đây là một tính năng mới thử nghiệm và không được bật theo mặc định. Do đó, các trang web nên thử nghiệm tính năng này để đảm bảo không có bất kỳ tác dụng phụ nào ngoài mong muốn.

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

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

Tính năng đ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 tính năng này bằng cách bật rõ ràng tính năng này.

Đối với nhà phát triển, bạn 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 khởi chạy Chrome.

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

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

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

Bạn có thể sử 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 sẽ ghi lại các mục điều hướng mềm vào 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 tuỳ chọn buffered:

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

Bạn có thể sử dụng thông tin này để hoàn tất các chỉ số trang trọn đời cho lượt điều hướng trước đó.

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

Vì các thao tác điều hướng tạm thời chỉ xuất hiện sau khi chúng diễn ra, nên một số chỉ số cần được tổng kết trong sự kiện này rồi được báo cáo cho URL trước đó, vì URL hiện tại giờ đây sẽ cho biết URL được cập nhật cho trang mới.

Bạn có thể sử 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 thông tin 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;

pageUrl này nên được sử dụng để báo cáo các chỉ số theo đúng URL, thay vì URL hiện tại mà các chỉ số có thể đã sử dụng trước đây.

Nhận startTime của các 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 của lượt tương tác ban đầu (ví dụ: một lượt nhấp vào nút) đã bắt đầu thao tác điều hướng mềm.

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

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

Để đưa các mục chỉ số điều hướng mềm vào, 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});

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

Thời gian vẫn sẽ được trả về theo thời gian bắt đầu điều hướng "cứng" ban đầu. Ví dụ: để tính LCP cho một thành phần đ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ư đã nêu chi tiết trước đó để lấy thời gian tương ứng với thành phầ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});

Theo truyền thống, một số chỉ số được đo lường trong suốt thời gian hoạt động của trang: ví dụ: LCP có thể thay đổi cho đến khi có lượt tương tác. Bạn có thể cập nhật CLS (Mức thay đổi bố cục tích luỹ) và INP (Lượt tương tác đến nội dung hiển thị tiếp theo) cho đến khi người dùng rời khỏi trang. Do đó, mỗi "lần điều hướng" (bao gồm cả lần đ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 bình thường.

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

Nội dung không thay đổi giữa các thao tác điều hướng nên được xử lý 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 nội dung hiển thị mới. Điều này có thể dẫn đến một LCP khác, chẳng hạn như từ một lượt tải nguội của thành phần điều hướng mềm đó sang một lượt tải mềm.

Ví dụ: hãy lấy 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 đó thay đổi theo từng thao tác điều hướng mềm. Lần tải trang ban đầu sẽ gắn cờ ảnh biểu ngữ là phần tử LCP và căn thời gian cho LCP. Đối với các thao tác điều hướng mềm tiếp theo, văn bản bên dưới sẽ là phần tử lớn nhất được vẽ sau thao tác điều hướng mềm và sẽ là phần tử LCP mới. Tuy nhiên, nếu một trang mới được tải bằng đường liên kết sâu vào URL điều hướng mềm, thì hình ảnh biểu ngữ sẽ là một lần vẽ 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 thành phần đ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 tải trang, 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.

Làm cách nào để đo lường TTFB?

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

Đối với thao tác điều hướng mềm, đây là một câu hỏi khó hơn. Chúng ta có nên đo lường yêu cầu đầu tiên được thực hiện 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 phương thức tìm nạp trước thì sao? Điều gì sẽ xảy ra nếu một yêu cầu không liên quan đến điều hướng mềm theo quan điểm của người dùng (ví dụ: đó là một 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 bằng 0 cho các thao tác điều hướng mềm – theo cách tương tự như chúng tôi đề xuất để 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 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ể đo lường TTFB chính xác hơn. Tuy nhiên, đó không phải là một phần của thử nghiệm hiện tại.

Làm thế nào để đo lường cả 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 "khó" để khớp với những gì CrUX sẽ đo lường và báo cáo dưới dạng tập dữ liệu chính thức của sáng kiến Các chỉ số quan trọng về trang web.

Ngoài những thao tác này, bạn cũng nên đo lường thao tác điều hướng mềm để biết cách đo lường các thao tác này trong tương lai và để có cơ hội gửi ý kiến phản hồi cho nhóm Chrome về cách triển khai thao tác 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 ý 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), đồng thời xử lý các sự kiện này một cách phù 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 các thao tác điều hướng mềm.

Sử 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 để xem xét mọi điểm khác biệt là sử dụng thư viện JavaScript web-vitals. Thư viện này có hỗ trợ thử nghiệm cho quá trình điều hướng mềm trong một soft-navs branch riêng biệt (cũng có sẵn trên npm và unpkg). Bạn có thể đo lường thời gian này theo cách sau (thay thế doTraditionalProcessing và doSoftNavProcessing nếu thích 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 theo đú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
TTFB Đã báo cáo là 0.
FCP (hiển thị nội dung đầu tiên) Chỉ có FCP đầu tiên của trang được báo cáo.
LCP (Thời gian hiển thị nội dung lớn nhất) Thời gian của lần hiển thị nội dung lớn tiếp theo, so với thời gian bắt đầu điều hướng mềm. Các lớp phủ hiện có từ thao tác điều hướng trước đó sẽ không được xem xét. Do đó, LCP sẽ là >= 0. Như thường lệ, chỉ số này sẽ được báo cáo sau một lượt tương tác hoặc khi trang chạy ở chế độ nền, vì chỉ khi đó thì LCP mới có thể được hoàn tất.
CLS (Điểm số tổng hợp về mức thay đổi bố cục) Khoảng thời gian chuyển đổi lớn nhất giữa các lần di chuyển. Như thường lệ, đây là thời điểm trang chạy ở chế độ nền vì chỉ khi đó CLS mới có thể được hoàn tất. Hệ thống sẽ báo cáo giá trị 0 nếu không có ca làm việc.
INP INP giữa các thời điểm điều hướng. Thông thường, điều này sẽ được báo cáo sau một lượt tương tác hoặc khi trang chạy ở chế độ nền vì chỉ khi đó, INP mới có thể được hoàn tất. Giá trị 0 sẽ 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 các phép đo lường Chỉ số quan trọng chính của trang web không?

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

Chúng tôi trân trọng ý kiến phản hồi của các 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 thử nghiệm này phản ánh chính xác hơn trải nghiệm của bạn 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ù các lỗi riêng lẻ trong quá trình triển khai điều hướng mềm của Chrome phải đượ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?

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

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

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

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

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 các địa điểm sau:

Nhật ký thay đổi

Vì API này đang trong giai đoạn thử nghiệm nên sẽ có nhiều thay đổi hơn so với các API ổn định. Bạn có thể xem Nhật ký thay đổi về phương pháp tìm kiếm thông tin điều hướng mềm để biết thêm thông tin 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 mẫu phổ biến trên web hiện đại mà các chỉ số của chúng tôi hiện chưa đo lường được. Mặc dù thử nghiệm này vẫn còn ở giai đoạn đầu và vẫn còn nhiều việc phải làm, nhưng việc cung cấp tiến trình cho đến nay 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, những ai quan tâm đến việc phát triển này nên tận dụng cơ hội này để giúp định hình API nhằm đảm bảo API đó thể hiện được những gì chúng tôi muốn đo lường.

Lời cảm ơn

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