Ảnh hưởng của cấu trúc SPA đến Các chỉ số quan trọng về trang web

Giải đáp các câu hỏi thường gặp về SPA, Các chỉ số quan trọng về trang web và kế hoạch của Google nhằm giải quyết các hạn chế hiện tại về việc đo lường.

Kể từ lần đầu ra mắt sáng kiến Các chỉ số quan trọng về trang web vào tháng 5 năm 2020, nhóm Chrome đã nhận được nhiều câu hỏi và ý kiến phản hồi hữu ích về chương trình này.

Có lẽ chủ đề mà chúng tôi nhận được nhiều câu hỏi nhất, cũng có lẽ là câu hỏi khó trả lời nhất, đó là cách đo lường Các chỉ số quan trọng về trang web trong một ứng dụng trang đơn (SPA), cũng như cách cấu trúc SPA ảnh hưởng đến điểm của Các chỉ số quan trọng về trang web.

Những câu hỏi này rất khó trả lời vì vấn đề có nhiều sắc thái. Vì vậy, trong bài đăng này, chúng tôi sẽ cố gắng trả lời các câu hỏi thường gặp nhất, cung cấp nhiều chi tiết và ngữ cảnh nhất có thể.

Tuy nhiên, trước khi đi vào các chi tiết cụ thể, bạn cần lưu ý rằng Google không ưu tiên kiến trúc hoặc công nghệ nào được dùng để xây dựng một trang web. Chúng tôi tin rằng SPA và ứng dụng nhiều trang (MPA) đều có khả năng mang lại trải nghiệm chất lượng cao cho người dùng và ý định của chúng tôi với sáng kiến Web Vitals là cung cấp các chỉ số đo lường trải nghiệm độc lập với công nghệ. Mặc dù hiện tại không thể làm được điều này trong mọi trường hợp (do những hạn chế trong nền tảng web), nhưng chúng tôi đang tích cực tìm cách thu hẹp những khoảng cách đó.

Câu hỏi thường gặp

Chỉ số Các chỉ số quan trọng về trang web có bao gồm quá trình chuyển đổi tuyến SPA không?

Không. Mỗi chỉ số Các chỉ số quan trọng về trang web được đo lường tương ứng với giao diện điều hướng trên trang cấp cao nhất hiện tại. Nếu một trang tự động tải nội dung mới và cập nhật URL của trang trong thanh địa chỉ, thì việc này sẽ không ảnh hưởng đến cách đo lường các chỉ số quan trọng về trang web. Giá trị chỉ số không được đặt lại và URL được liên kết với mỗi phép đo chỉ số là URL mà người dùng đã di chuyển đến đã bắt đầu tải trang.

Các chỉ số quan trọng về trang web có thể xử lý các thay đổi về tuyến SPA giống như tải trang truyền thống không?

Rất tiếc là không. Vẫn chưa.

Hiện nay, không có cách chuẩn hoá nào để xây dựng SPA, và ngay cả trong số các SPA và thư viện định tuyến phổ biến, trải nghiệm người dùng có thể rất khác nhau giữa các ứng dụng:

  • Một số SPA chỉ cập nhật URL khi tải nội dung "toàn trang" mới, trong khi các trang web khác cập nhật URL khi có thay đổi nhỏ về nội dung hoặc thậm chí chỉ là thay đổi trạng thái giao diện người dùng.
  • Một số SPA cập nhật URL bằng cách sử dụng API Lịch sử, trong khi một số khác sử dụng thay đổi hàm băm để hỗ trợ các trình duyệt cũ hơn (và một số khác hoàn toàn không cập nhật URL).
  • Một số SPA sẽ tải nội dung rồi cập nhật URL, trong khi một số khác cập nhật URL trước khi tải nội dung.
  • Một số SPA tải nội dung cùng lúc một cách đồng bộ trong một tác vụ JavaScript, trong khi một số SPA chuyển đổi nội dung một cách không đồng bộ trên nhiều tác vụ (không có sự kiện kết thúc chuyển đổi rõ ràng).
  • Một số SPA luôn tải nội dung từ mạng, trong khi một số khác sẽ tải trước tất cả nội dung để các thay đổi về tuyến đường tải ngay lập tức từ bộ nhớ.

Những điểm khác biệt này khiến việc xác định và xác định những yếu tố tạo nên thay đổi về tuyến SPA hoặc thậm chí là chính SPA, rất khó để thực hiện trên quy mô lớn.

Trong một số trường hợp, việc thay đổi tuyến SPA về mặt logic sẽ giống với tải trang MPA và trong những trường hợp như vậy, sẽ rất tốt nếu có thể áp dụng các chỉ số Các chỉ số quan trọng về trang web hiện có.

Tuy nhiên, nếu không có thông tin phỏng đoán chắc chắn để xác định chính xác các thay đổi về tuyến "thực" từ mọi thay đổi khác về URL (cũng như các tín hiệu rõ ràng đánh dấu điểm bắt đầu và kết thúc của quá trình chuyển đổi đó), thì việc báo cáo chỉ số Các chỉ số quan trọng về trang web trong những trường hợp này sẽ làm rối dữ liệu và làm cho dữ liệu trở nên kém hữu ích hoặc kém phản ánh hơn về trải nghiệm thực của người dùng trên trang web.

Các SPA có khó hoạt động tốt hơn về Các chỉ số quan trọng về trang web so với MPA không?

Không có gì vốn có trong cấu trúc SPA có thể ngăn một trang trong SPA tải nhanh như vậy – và chấm điểm tất cả các chỉ số quan trọng về trang web – như một trang tương tự trong MPA.

Tuy nhiên, các MPA được tối ưu hoá đúng cách có một số ưu điểm trong việc đáp ứng ngưỡng Chỉ số quan trọng chính của trang web mà các SPA hiện chưa làm được. Lý do là vì với cấu trúc MPA, mỗi "trang" được tải dưới dạng thành phần điều hướng toàn trang (thay vì tìm nạp động nội dung và chèn vào trang hiện có). Điều này có nghĩa là người dùng truy cập vào MPA có nhiều khả năng tải nhiều trang từ trang web đó, tức là tỷ lệ phần trăm phân phối lớn hơn trong số tất cả tải trang cho một MPA sẽ liên quan đến một số hoặc toàn bộ tài nguyên phụ được lưu vào bộ nhớ đệm.

Tuy nhiên, để một MPA hoạt động hiệu quả hơn các chỉ số Chỉ số quan trọng chính của trang web so với SPA, bạn cần đáp ứng một số điều kiện sau:

  • MPA cần tối ưu hoá việc lưu tài nguyên phụ vào bộ nhớ đệm để đảm bảo lượt tải trang cùng nguồn gốc thực sự nhanh hơn lượt tải trang trên nhiều nguồn gốc ở phân vị thứ 75.
  • Người dùng truy cập MPA cần phải truy cập vào nhiều trang để trang web nhận được các lợi ích của việc lưu vào bộ nhớ đệm, giúp tải trang nhanh hơn.

Vì kết quả đánh giá Các chỉ số quan trọng về trang web xem xét tỷ lệ truy cập trang 75%, nên việc có nhiều lượt truy cập trang có hiệu suất cao trong tập dữ liệu sẽ làm tăng khả năng lượt truy cập ở phân vị thứ 75 của phạm vi phân phối sẽ nằm trong ngưỡng đề xuất.

Xin lưu ý rằng một điều quan trọng cần cân nhắc khi so sánh điểm Các chỉ số quan trọng về trang web là cách tổng hợp dữ liệu, tức là tập dữ liệu trong bản phân phối có bao gồm tất cả các trang thuộc trang web hoặc nguồn gốc của bạn, hay chỉ là lượt tải trang cho một URL trang cụ thể.

Khi tổng hợp điểm của tất cả các trang trong một nguồn gốc, từng trang nhanh riêng lẻ có thể cải thiện phân vị thứ 75 cho toàn bộ nguồn gốc. Tuy nhiên, khi tổng hợp theo từng trang riêng lẻ, điểm số của một trang sẽ không ảnh hưởng đến điểm của trang tiếp theo. Nói cách khác, khi tổng hợp điểm của một MPA theo trang, các lượt tải bộ nhớ đệm nhanh trên trang thanh toán sẽ không cải thiện điểm số của các lượt tải ban đầu chậm xảy ra trên trang đích của trang web.

Bạn có thể kiểm tra điểm của trang web của mình cho các phương thức tổng hợp khác nhau bằng PageSpeed Insights hoặc API Báo cáo trải nghiệm người dùng của Chrome. Đây là những công cụ báo cáo điểm cho cả URL trang riêng lẻ và toàn bộ nguồn gốc.

Một cách khác mà cấu trúc SPA có thể ảnh hưởng đến điểm số Các chỉ số quan trọng về trang web là đối với các chỉ số xem xét toàn bộ thời gian hoạt động của một trang. Vì người dùng truy cập SPA có xu hướng ở trên cùng một "trang" trong toàn bộ phiên, nên các chỉ số tích luỹ theo thời gian có thể khắc nghiệt hơn trong SPA so với MPA.

Vào tháng 4 năm 2021, chúng tôi đã thông báo các thay đổi đối với chỉ số CLS nhằm giải quyết một phần vấn đề này. Trước đây, CLS sẽ tích luỹ trong toàn bộ thời gian hoạt động của trang, nhưng hiện tại chỉ tích luỹ trong một khoảng thời gian cụ thể – về cơ bản là đợt thay đổi bố cục tồi tệ nhất trên một trang nhất định.

Tuy nhiên, ngay cả với định nghĩa CLS mới, SPA vẫn gặp bất lợi vì giá trị CLS không "đặt lại" sau khi chuyển đổi tuyến như đối với việc tải toàn bộ trang trong MPA. Điều này cũng có thể gây nhầm lẫn vì sự thay đổi bố cục xảy ra sau khi chuyển đổi tuyến sẽ được quy cho URL của trang khi được tải, chứ không phải URL trong thanh địa chỉ tại thời điểm chuyển (xem thêm thông tin chi tiết bên dưới).

Nếu cấu trúc SPA giúp cải thiện trải nghiệm người dùng, thì sự cải thiện đó có được phản ánh trong các chỉ số không?

Có. Mặc dù như đã đề cập trước đây, việc định lượng trải nghiệm đã cải thiện đến mức nào rất khó thực hiện trên quy mô lớn, vì tất cả các cách triển khai SPA khác nhau trên web hiện nay.

Sự thật là ngành hiệu suất web (bao gồm cả Google) trước đây không đầu tư nhiều thời gian và công sức vào việc phát triển các chỉ số tập trung vào người dùng cho hiệu suất sau khi tải của một trang cũng như cho chính lượt tải trang. Điều này không phải vì hiệu suất sau tải không quan trọng, mà là do trải nghiệm người dùng sau khi tải và các hoạt động tương tác đa dạng hơn nhiều và không được xác định rõ ràng – khiến việc thiết kế các chỉ số cho các hoạt động đó trở nên khó khăn.

Nhưng ngay cả khi đã xác định rõ các chỉ số sau tải để đo lường hiệu suất của SPA, chúng tôi vẫn không muốn bỏ qua trải nghiệm tải chỉ vì trải nghiệm tải sau khi tải đã được cải thiện.

Một trong những mục tiêu của sáng kiến Các chỉ số quan trọng về trang web là quảng bá và khuyến khích trải nghiệm tốt cho người dùng trên nhiều khía cạnh của quá trình tải và sử dụng một trang web. Chúng tôi không muốn khuyến khích các tình huống mà trải nghiệm xấu là hợp lý nếu bạn có đủ trải nghiệm tốt để bù đắp cho trải nghiệm đó. Người dùng muốn các trang tải nhanh chuyển đổi sang nội dung mới nhanh chóng. Vì vậy, chúng tôi đã cố gắng thiết kế các chỉ số ưu tiên các loại trải nghiệm đó.

Vì vậy, mặc dù phiên bản MPA của một trang web có thể hoạt động tốt hơn ở các chỉ số quan trọng về trang web ở phân vị thứ 75 so với phiên bản SPA của cùng trang web đó, nhưng phiên bản SPA vẫn phải cố gắng đáp ứng ngưỡng "tốt". Nếu phiên bản API (SPA) không đáp ứng được ngưỡng "tốt" cho hầu hết người dùng, thì trải nghiệm tải ban đầu có thể vẫn được cho là không tốt, ngay cả khi trải nghiệm điều hướng trong trang tiếp theo là rất tốt.

Trong tương lai, chúng tôi dự định phát triển các chỉ số khuyến khích trải nghiệm tuyệt vời sau khi tải và chúng tôi tin rằng đây là lộ trình tốt nhất để thúc đẩy trải nghiệm chất lượng cao cho các ứng dụng linh hoạt (SPA) theo cách không ảnh hưởng đến trải nghiệm tải ban đầu. Chúng tôi đã cung cấp một chỉ số mới có tên là Lượt tương tác với lượt hiển thị tiếp theo (INP). Chỉ số này giúp đo lường độ trễ tương tác trong toàn bộ vòng đời của trang. Chúng tôi cũng đang tích cực nghiên cứu các chỉ số khác sau khi tải, bao gồm cả các chỉ số đo lường lượt chuyển đổi tuyến SPA (xem bên dưới).

Chúng tôi đã chuyển trang web của mình từ MPA sang SPA và điểm số của chúng tôi đã giảm. Có đúng như vậy không?

Còn tùy. Có một số lý do khiến điểm của bạn có thể thay đổi sau quá trình di chuyển cấu trúc lớn, nhưng việc giảm số lượng tải bộ nhớ đệm ấm có thể dẫn đến một số thay đổi.

Bạn có thể kiểm tra nhanh bằng cách kiểm tra cả phiên bản MPA và SPA của một trong các trang đích bằng Lighthouse. Nếu điểm Lighthouse thấp hơn trong bất kỳ chỉ số Chỉ số quan trọng chính nào về trang web của phiên bản SPA, thì có thể trải nghiệm tải đã trở nên kém hơn sau khi cập nhật.

Tôi có nên chuyển trang web của mình từ SPA sang MPA để đạt điểm số Các chỉ số quan trọng về trang web tốt hơn không?

Thường là không. Bạn chỉ nên chuyển từ SPA sang MPA nếu không hài lòng với ngăn xếp SPA và bạn có lý do để tin rằng MPA sẽ mang lại trải nghiệm người dùng tốt hơn.

Theo thời gian, khi các chỉ số Các chỉ số quan trọng về trang web được cải thiện và bao quát hơn với trải nghiệm duyệt web đầy đủ, các nhóm có SPA được xây dựng tốt với trải nghiệm người dùng chất lượng cao sẽ kỳ vọng thấy được điểm số của Các chỉ số quan trọng về trang web phản ánh điều đó.

Nếu điểm số Các chỉ số quan trọng về trang web chỉ được báo cáo cho các trang đích của SPA, thì làm cách nào để khắc phục sự cố xảy ra trên "trang" sau khi chuyển đổi tuyến đường?

Các công cụ của Google báo cáo dữ liệu trường cho chỉ số Các chỉ số quan trọng về trang web (như Search Console và PageSpeed Insights) sẽ lấy dữ liệu từ Báo cáo trải nghiệm người dùng trên Chrome (CrUX). Và CrUX tổng hợp dữ liệu theo nguồn gốc hoặc theo URL của trang (tức là URL của trang tại thời điểm tải).

Vì tất cả những lý do đã nêu ở trên, CrUX không thể tổng hợp dữ liệu theo tuyến SPA. Tuy nhiên, là chủ sở hữu trang web quen thuộc với kiến trúc của riêng bạn, bạn có thể tự đo lường chỉ số này. Nhiều công cụ phân tích cho phép bạn đưa ra tín hiệu khi có sự thay đổi về tuyến SPA và cập nhật dữ liệu đo lường cho phù hợp.

Khi đo lường chỉ số Các chỉ số quan trọng về trang web bằng công cụ phân tích, hãy đảm bảo bạn đang đo lường cả URL tuyến hiện tại và URL trang gốc. Nhờ vậy, bạn có thể gỡ lỗi từng vấn đề riêng lẻ xảy ra trong suốt vòng đời của trang cũng như tổng hợp theo URL của trang gốc để khớp với cách các công cụ của Google đo lường và báo cáo về các chỉ số.

Để biết thêm thông tin chi tiết và các phương pháp hay nhất về chủ đề này, hãy xem bài viết: Gỡ lỗi hiệu suất trong trường.

Google đang làm gì để đảm bảo MPA không có lợi thế không công bằng so với SPA?

Như đã đề cập ở trên, trong một số trường hợp, một MPA được tối ưu hoá đúng cách có thể báo cáo điểm Các chỉ số quan trọng về trang web tốt hơn ở phân vị thứ 75 vì trên thực tế, MPA đó sẽ có tỷ lệ phần trăm số lượt truy cập trang được lưu vào bộ nhớ đệm cao hơn. Ngược lại, những cải thiện thực sự đối với trải nghiệm người dùng trong các SPA được tối ưu hoá đúng cách hiện không được bất kỳ chỉ số nào của Các chỉ số quan trọng về trang web nắm bắt.

Tại Google, chúng tôi nhận thấy rằng điều này tạo ra các chương trình khuyến khích không hoàn toàn phù hợp với mục tiêu của sáng kiến Các chỉ số quan trọng về trang web. Do đó, chúng tôi đang tích cực tìm cách khắc phục vấn đề này. Hiện tại, chúng tôi đang khám phá 2 giải pháp tiềm năng, một giải pháp ngắn hạn và một giải pháp dài hạn hơn:

  1. Đánh giá riêng các lượt truy cập trang trên nhiều nguồn gốc và cùng nguồn gốc.
  2. Thiết kế các API mới giúp đo lường SPA hiệu quả hơn.

Đánh giá riêng các lượt truy cập trang trên nhiều nguồn gốc và cùng nguồn gốc

Hiện nay, các chỉ số Các chỉ số quan trọng về trang web sẽ tổng hợp tất cả lượt truy cập trang vào một nhóm duy nhất. Các chỉ số này không phân biệt giữa lượt truy cập mới với lượt truy cập cũ/trang đích với trang thanh toán hoặc bất kỳ loại tổng hợp nào khác mà trạng thái bộ nhớ đệm có thể ảnh hưởng đến hiệu suất.

Một cách để bình thường hoá sự khác biệt giữa hiệu suất của SPA và MPA là áp dụng trọng số riêng cho nhiều loại lượt truy cập, thậm chí có thể áp dụng các đề xuất về ngưỡng hoàn toàn khác nhau.

Mặc dù chúng tôi chắc chắn muốn đền đáp những hoạt động triển khai bộ nhớ đệm hiệu quả, nhưng chúng tôi không muốn các thao tác điều hướng nhanh trong trang web có thể bù đắp cho việc tải trang đích chậm. Chúng tôi cũng không muốn khuyến khích các trang web chia các trang dài thành một tập hợp các trang ngắn hơn chỉ nhằm mục đích cải thiện điểm số trong chỉ số.

Bằng cách đánh giá riêng các lượt truy cập trang nhiều nguồn gốc và cùng nguồn gốc, chúng tôi có thể đảm bảo rằng cả hai loại trải nghiệm đều quan trọng mà không để mức độ phổ biến tương đối của một loại trên một trang web nhất định làm sai lệch sự phân phối của bất kỳ chỉ số cụ thể nào.

Thiết kế các API mới giúp đo lường SPA hiệu quả hơn

Một giải pháp khác đang được chúng tôi nghiên cứu (song song với giải pháp trên) là API Nhật ký ứng dụng mới. API này sẽ giúp chuẩn hoá các mẫu SPA hiện tại, đồng thời giúp bạn dễ dàng đo lường và hiểu rõ mức sử dụng SPA trên quy mô lớn.

API Lịch sử ứng dụng giới thiệu một sự kiện navigate mới, sự kiện này có hai tính năng chính dành riêng cho hoạt động đo lường SPA:

  • Cờ userInitiated sẽ chỉ được đặt thành true nếu hoạt động điều hướng được bắt đầu thông qua việc nhấp vào đường liên kết, gửi biểu mẫu hoặc giao diện người dùng quay lại hoặc tiến của trình duyệt.
  • Phương thức transitionWhile(), với lời hứa cho phép nhà phát triển ra tín hiệu về thời điểm hoàn tất công việc họ đã bắt đầu thực hiện việc điều hướng.

Bạn có thể sử dụng cờ userInitiated để xác định điểm bắt đầu về mặt ngữ nghĩa cho quá trình chuyển đổi tuyến SPA, cho biết ý định rõ ràng của người dùng. Lời hứa transitionWhile() sẽ được phân giải có thể giúp trình duyệt liên hệ các màu sơn với quá trình chuyển đổi tuyến đường cụ thể, nhờ đó trình duyệt có thể xác định thời gian hiển thị nội dung lớn nhất liên quan đến quá trình chuyển đổi đó.

Dựa trên ý tưởng đã trình bày trong phần trước, bạn thậm chí có thể tổng hợp thời gian chuyển đổi tuyến SPA vào cùng một bộ chứa khi tải trang cùng nguồn gốc trong MPA. Điều này thật thú vị vì tính năng này sẽ cho phép một trang web di chuyển từ MPA sang SPA để thực sự so sánh hiệu suất trước và sau.

Tất nhiên, chúng tôi cần nghiên cứu thêm trước khi biết được liệu có thể đưa ra những quyết định này chính xác hay không. Nếu bạn có đề xuất hoặc ý kiến phản hồi về các đề xuất này, vui lòng gửi email đến địa chỉ web-vitals-feedback@googlegroups.com.

Những chỉnh sửa cuối

Google thực sự cam kết cải thiện các chỉ số Các chỉ số quan trọng về trang web và đảm bảo các chỉ số này đo lường cũng như khuyến khích người dùng nhận được trải nghiệm chất lượng cao và quan trọng. Dù vậy, chúng tôi cũng xác nhận rằng còn tồn tại chênh lệch trong hoạt động đo lường hiện nay. Các chỉ số này hiện không bao quát mọi khía cạnh về trải nghiệm người dùng, nhưng chúng tôi đang tích cực nỗ lực để thu hẹp khoảng cách này.

Mặc dù có những hạn chế hiện tại, chúng tôi tin rằng các khía cạnh mà các chỉ số hiện có thu thập được có ý nghĩa rất quan trọng đối với tình trạng và sự thành công của web. Chúng tôi tin rằng trong trường hợp các trang web (bất kể cấu trúc) không đáp ứng các ngưỡng đề xuất, chúng tôi tin rằng vẫn có thể cải thiện.

Tôi hy vọng bài đăng này đã giúp làm sáng tỏ chủ đề phức tạp và chi tiết này. Như thường lệ, nếu bạn có ý kiến phản hồi về các chỉ số hiện tại hoặc trong tương lai liên quan đến Các chỉ số quan trọng về trang web, vui lòng gửi email đến địa chỉ web-vitals-feedback@googlegroups.com.