Tìm hiểu về kế hoạch của chúng tôi để cải thiện chỉ số Điểm số tổng hợp về mức thay đổi bố cục và cho chúng tôi biết ý kiến phản hồi.
Mức thay đổi bố cục tích luỹ (CLS) là chỉ số đo lường độ ổn định về hình ảnh của một trang web. Chỉ số này được gọi là mức thay đổi bố cục tích luỹ vì điểm của từng lượt chuyển riêng lẻ được tính tổng trong suốt thời gian hoạt động của trang.
Mặc dù tất cả các thay đổi về bố cục đều mang lại trải nghiệm không tốt cho người dùng, nhưng chúng làm tăng thêm nhiều hơn trên các trang mở lâu hơn. Đó là lý do Nhóm chỉ số tốc độ của Chrome bắt đầu cải thiện chỉ số CLS để trung tính hơn với thời gian trên một trang.
Điều quan trọng là chỉ số này phải tập trung vào trải nghiệm người dùng trong toàn bộ thời gian hoạt động của trang, vì chúng tôi nhận thấy rằng người dùng thường có trải nghiệm tiêu cực sau khi tải, trong khi cuộn hoặc điều hướng qua trang. Tuy nhiên, chúng tôi được biết một số người dùng lo ngại về việc điều này ảnh hưởng như thế nào đến các trang tồn tại lâu dài, tức là những trang mà người dùng thường mở trong một thời gian dài. Có nhiều loại trang thường mở lâu hơn; một số loại trang phổ biến nhất là các ứng dụng mạng xã hội có chức năng cuộn vô hạn và ứng dụng một trang.
Một bản phân tích nội bộ về các trang tồn tại dài có điểm CLS cao cho thấy hầu hết vấn đề là do các quy luật sau:
- Trình cuộn vô hạn thay đổi nội dung khi người dùng cuộn.
- Trình xử lý đầu vào mất hơn 500 mili giây để cập nhật giao diện người dùng nhằm phản hồi tương tác của người dùng mà không có bất kỳ loại phần giữ chỗ hoặc mẫu khung nào.
Mặc dù khuyến khích nhà phát triển cải thiện những trải nghiệm người dùng đó, nhưng chúng tôi cũng đang nỗ lực cải thiện chỉ số này và thu thập ý kiến phản hồi về những cách tiếp cận khả thi.
Làm cách nào để chúng tôi quyết định xem một chỉ số mới có tốt hơn hay không?
Trước khi đi sâu vào thiết kế chỉ số, chúng tôi muốn đảm bảo rằng chúng tôi đã đánh giá các ý tưởng của mình trên nhiều trang web và trường hợp sử dụng thực tế. Để bắt đầu, chúng tôi đã thiết kế một nghiên cứu nhỏ về người dùng.
Đầu tiên, chúng tôi ghi lại các video và dấu vết trên Chrome về 34 hành trình của người dùng trên nhiều trang web. Khi lựa chọn hành trình của người dùng, chúng tôi tập trung vào một số điều sau:
- Nhiều loại trang web khác nhau, chẳng hạn như trang web tin tức và trang web mua sắm.
- Nhiều hành trình của người dùng, chẳng hạn như lượt tải trang đầu tiên, thao tác cuộn, thao tác trên ứng dụng một trang và lượt tương tác của người dùng.
- Sự thay đổi về số lượng và cường độ của từng bố cục trên các trang web.
- Ít trải nghiệm tiêu cực trên các trang web ngoài thay đổi bố cục.
Chúng tôi mời 41 đồng nghiệp xem 2 video cùng lúc và đánh giá cặp video nào có sự thay đổi bố cục tốt hơn. Từ những xếp hạng này, chúng tôi đã tạo ra một thứ tự xếp hạng lý tưởng cho các trang web. Kết quả xếp hạng người dùng đã khẳng định điều chúng tôi nghi ngờ rằng các đồng nghiệp của chúng tôi, giống như hầu hết người dùng, thực sự thất vọng về sự thay đổi bố cục sau khi tải, đặc biệt là trong quá trình cuộn và điều hướng ứng dụng một trang. Chúng tôi thấy rằng một số trang web có trải nghiệm người dùng tốt hơn nhiều trong những hoạt động này so với các trang web khác.
Vì chúng tôi đã ghi lại dấu vết trên Chrome cùng với video nên chúng tôi có tất cả thông tin chi tiết về sự thay đổi bố cục riêng lẻ trong mỗi hành trình của người dùng. Chúng tôi đã sử dụng các số liệu đó để tính toán giá trị chỉ số cho từng ý tưởng cho từng hành trình của người dùng. Nhờ đó, chúng ta có thể thấy cách mỗi biến thể chỉ số xếp hạng hành trình của người dùng và điểm khác biệt giữa mỗi biến thể so với thứ hạng lý tưởng.
Chúng tôi đã thử nghiệm những ý tưởng nào về chỉ số?
Chiến lược kết xuất cửa sổ
Thông thường, các trang có nhiều lần thay đổi bố cục được nhóm gần nhau do các phần tử có thể thay đổi nhiều lần khi nội dung mới được ghép từng phần. Điều này thôi thúc chúng tôi thử các kỹ thuật để nhóm các ca làm việc lại với nhau. Để làm được điều đó, chúng tôi đã xem xét 3 phương pháp tạo cửa sổ:
- Cửa sổ nhàu
- Cửa sổ trượt
- Thời lượng phiên
Trong mỗi ví dụ này, bố cục trang có sự thay đổi về mức độ nghiêm trọng khác nhau theo thời gian. Mỗi thanh màu xanh dương đại diện cho một lần thay đổi bố cục và độ dài đại diện cho điểm số của lần thay đổi đó. Hình ảnh minh hoạ các cách nhóm các chiến lược cửa sổ khác nhau để nhóm thay đổi bố cục theo thời gian.
Cửa sổ nhàu
Cách đơn giản nhất là chia trang thành các cửa sổ có kích thước bằng nhau. Đây được gọi là cửa sổ bật xuống. Bạn sẽ nhận thấy ở trên rằng thanh thứ tư trông thực sự nên được nhóm vào cửa sổ nhào lộn thứ hai, nhưng do các cửa sổ đều có kích thước cố định nên thanh này sẽ nằm trong cửa sổ đầu tiên. Nếu có sự khác biệt nhỏ về thời gian tải hoặc tương tác của người dùng trên trang, thì những thay đổi tương tự về bố cục có thể nằm ở các phía khác nhau của ranh giới cửa sổ bật/tắt.
Cửa sổ trượt
Một phương pháp giúp chúng ta thấy được nhiều nhóm có cùng thời lượng hơn là liên tục cập nhật khoảng thời gian tiềm năng theo thời gian. Hình ảnh ở trên hiển thị mỗi lần một cửa sổ trượt, nhưng chúng ta có thể xem xét tất cả các cửa sổ trượt có thể có hoặc một tập hợp con các cửa sổ trượt đó để tạo chỉ số.
Thời lượng phiên
Nếu muốn tập trung vào việc xác định các vùng trên trang có hàng loạt thay đổi bố cục, chúng ta có thể bắt đầu từng cửa sổ trong một ca thay đổi và tiếp tục mở rộng cửa sổ đó cho đến khi nhận thấy khoảng cách về một kích thước nhất định giữa các lần thay đổi bố cục. Phương pháp này nhóm các thay đổi về bố cục với nhau và bỏ qua hầu hết trải nghiệm người dùng không thay đổi. Một vấn đề có thể xảy ra là nếu không có khoảng trống trong quá trình thay đổi bố cục, thì một chỉ số dựa trên thời lượng của phiên hoạt động có thể tăng lên không bị ràng buộc giống như chỉ số CLS (Mức thay đổi bố cục tích luỹ) hiện tại. Vì vậy, chúng tôi cũng đã thử điều này với kích thước cửa sổ tối đa.
Kích thước cửa sổ
Chỉ số này có thể cho kết quả rất khác nhau tuỳ thuộc vào kích thước thực sự của các cửa sổ, vì vậy chúng tôi đã thử nhiều kích thước cửa sổ khác nhau:
- Mỗi lượt chuyển dưới dạng cửa sổ riêng (không có cửa sổ)
- 100 mili giây
- 300 mili giây
- 1 giây
- 5 giây
Tóm tắt
Chúng tôi đã thử nhiều cách để tóm tắt các cửa sổ khác nhau.
Phân vị
Chúng tôi đã xem xét giá trị cửa sổ tối đa, cũng như phân vị thứ 95, phân vị thứ 75 và trung vị.
Trung bình
Chúng tôi đã xem xét giá trị trung bình của cửa sổ.
Ngân sách
Chúng tôi tự hỏi liệu có thể có một số điểm thay đổi bố cục tối thiểu nào đó mà người dùng sẽ không nhận thấy hay không, và chúng tôi chỉ có thể tính mức thay đổi bố cục so với "ngân sách" đó trong điểm số. Vì vậy, đối với các giá trị "ngân sách" tiềm năng khác nhau, chúng tôi đã xem xét tỷ lệ phần trăm chuyển đổi so với ngân sách và tổng điểm chuyển đổi so với ngân sách.
Các chiến lược khác
Chúng tôi cũng đã xem xét nhiều chiến lược không liên quan đến cửa sổ, như tổng số lần thay đổi bố cục chia theo thời gian trên trang và giá trị trung bình của N lần thay đổi riêng lẻ kém nhất.
Kết quả ban đầu
Nhìn chung, chúng tôi đã thử nghiệm 145 định nghĩa chỉ số khác nhau dựa trên hoán vị của các ý tưởng ở trên. Đối với mỗi chỉ số, chúng tôi xếp hạng tất cả hành trình của người dùng theo điểm số theo chỉ số này, sau đó xếp hạng các chỉ số theo mức độ tiến gần đến thứ hạng lý tưởng.
Để lấy đường cơ sở, chúng tôi cũng xếp hạng tất cả các trang web theo điểm CLS (Mức thay đổi bố cục tích luỹ) hiện tại. CLS đứng ở vị trí thứ 32, cùng với 13 chiến lược khác, vì vậy tốt hơn so với hầu hết các trường hợp hoán vị của các chiến lược trên. Để đảm bảo kết quả có ý nghĩa, chúng tôi cũng thêm 3 thứ tự ngẫu nhiên. Đúng như dự kiến, các thứ tự ngẫu nhiên còn tệ hơn so với mọi chiến lược được thử nghiệm.
Để biết liệu chúng tôi có thể đang sử dụng quá mức cho tập dữ liệu hay không, sau khi phân tích, chúng tôi đã ghi lại một số dấu vết và video thay đổi bố cục mới, xếp hạng các video và dấu vết đó theo cách thủ công và thấy rằng thứ hạng chỉ số rất giống nhau giữa tập dữ liệu mới và tập dữ liệu ban đầu.
Một vài chiến lược nổi bật trong bảng xếp hạng.
Các chiến lược tốt nhất
Khi xếp hạng các chiến lược, chúng tôi nhận thấy có 3 loại chiến lược đứng đầu trong danh sách này. Mỗi chiến dịch đều có hiệu suất gần như tương đương nhau, vì vậy, chúng tôi dự định sẽ tiếp tục phân tích sâu hơn về cả ba loại chiến dịch này. Chúng tôi cũng muốn nghe ý kiến phản hồi của nhà phát triển để tìm hiểu xem có yếu tố nào ngoài trải nghiệm người dùng mà chúng tôi nên cân nhắc khi quyết định giữa các yếu tố đó hay không. (Xem bên dưới để biết cách gửi ý kiến phản hồi.)
Phân vị cao của cửa sổ dài
Một số chiến lược cửa sổ hoạt động tốt với kích thước cửa sổ dài:
- Cửa sổ trượt 1 giây
- Thời lượng phiên bị giới hạn là 5 giây và chênh lệch 1 giây
- Đã bỏ giới hạn cửa sổ phiên với khoảng trống 1 giây
Tất cả các trang này đều có thứ hạng rất tốt ở cả bách phân vị thứ 95 lẫn cực đại.
Nhưng đối với các kích thước cửa sổ lớn như vậy, chúng tôi lo ngại về việc sử dụng phân vị thứ 95, thường là chúng tôi chỉ xem xét các cửa sổ 4-6 và lấy phân vị thứ 95 của đó là rất nhiều nội suy. Chưa rõ tác dụng của phép nội suy xét theo giá trị chỉ số. Giá trị tối đa rõ ràng hơn rất nhiều, vì vậy chúng tôi quyết định tiếp tục kiểm tra giá trị tối đa.
Giá trị trung bình của khoảng thời gian phiên hoạt động có khoảng thời gian trống dài
Việc tính trung bình điểm số của tất cả các thời lượng của phiên không bị giới hạn với khoảng cách giữa các phiên hoạt động là 5 giây hoạt động rất tốt. Chiến lược này có một vài đặc điểm thú vị:
- Nếu trang không có khoảng trống giữa các lần thay đổi bố cục, thì trang đó sẽ trở thành một khoảng thời gian dài trong một phiên có cùng điểm số với CLS (Mức thay đổi bố cục tích luỹ) hiện tại.
- Chỉ số này không trực tiếp xem xét thời gian không hoạt động mà chỉ xem xét các thay đổi xảy ra trên trang chứ không xem xét tại các thời điểm khi trang không thay đổi.
Phân vị cao của cửa sổ ngắn
Cửa sổ trượt tối đa 300 mili giây được xếp hạng rất cao, cũng như phân vị thứ 95. Đối với kích thước cửa sổ ngắn hơn, có ít nội suy phân vị hơn so với kích thước cửa sổ lớn hơn, nhưng chúng tôi cũng lo ngại về cửa sổ trượt "lặp lại" — nếu một tập hợp thay đổi bố cục xảy ra trên hai khung, thì có nhiều cửa sổ 300 mili giây bao gồm các cửa sổ đó. Việc lấy giá trị tối đa sẽ rõ ràng và đơn giản hơn nhiều so với việc lấy tại phân vị thứ 95. Vì vậy, một lần nữa chúng tôi quyết định tiến hành kiểm tra mức tối đa.
Những chiến lược không hiệu quả
Hiệu quả của các chiến lược thử xem xét trải nghiệm "trung bình" về thời gian dành cho cả hai khi không có thay đổi bố cục và khi thay đổi bố cục đạt hiệu quả rất kém. Không có bản tóm tắt trung vị hoặc phân vị thứ 75 nào của bất kỳ chiến lược kết xuất cửa sổ nào xếp hạng tốt cho các trang web. Tổng bố cục cũng không thay đổi theo thời gian.
Chúng tôi đã đánh giá một số "ngân sách" khác nhau cho những thay đổi về bố cục có thể chấp nhận được:
- Tỷ lệ phần trăm thay đổi bố cục trên một số mức ngân sách. Đối với các ngân sách khác nhau, tất cả các ngân sách này đều được xếp hạng khá kém.
- Mức thay đổi bố cục trung bình vượt quá một mức nào đó. Hầu hết các biến thể trong chiến lược này hoạt động kém hiệu quả, nhưng mức trung bình vượt quá trong một phiên dài với khoảng cách lớn hoạt động gần bằng mức trung bình của các khoảng thời gian của phiên có khoảng cách dài. Chúng tôi quyết định chỉ tiến hành thử nghiệm vì phương án này đơn giản hơn.
Các bước tiếp theo
Phân tích trên quy mô lớn
Chúng tôi đã triển khai các chiến lược hàng đầu được liệt kê ở trên trong Chrome, nhờ đó, chúng tôi có thể nhận dữ liệu về mức sử dụng thực tế cho số lượng trang web lớn hơn nhiều. Chúng tôi dự định sử dụng phương pháp xếp hạng trang web tương tự dựa trên điểm số liệu của các trang web đó để thực hiện phân tích trong quy mô lớn hơn:
- Xếp hạng tất cả các trang web theo CLS (Mức thay đổi bố cục tích luỹ) và theo từng chỉ số đề xuất mới.
- Những trang web nào được xếp hạng khác nhau nhất theo CLS (Mức thay đổi bố cục tích luỹ) và từng ứng cử viên? Chúng tôi có thấy điều gì bất ngờ khi xem những trang web này không?
- Sự khác biệt lớn nhất giữa các chỉ số mới đề xuất là gì? Có điểm khác biệt nào là ưu điểm hoặc nhược điểm của một ứng cử viên cụ thể không?
- Lặp lại phân tích ở trên, nhưng phân nhóm theo thời gian dành cho mỗi lần tải trang. Chúng ta có nhận thấy sự cải thiện dự kiến đối với lượt tải trang dài hạn với sự thay đổi bố cục chấp nhận được không? Chúng tôi có thấy bất kỳ kết quả không mong muốn nào cho các trang ngắn hạn không?
Ý kiến phản hồi về phương pháp tiếp cận của chúng tôi
Chúng tôi rất mong nhận được ý kiến phản hồi của các nhà phát triển web về các phương pháp này. Sau đây là một số điều cần lưu ý khi xem xét các phương pháp mới:
Nội dung không thay đổi
Chúng tôi muốn làm rõ rằng rất nhiều thứ sẽ không thay đổi khi áp dụng một phương pháp mới:
- Chúng tôi không có ý tưởng nào về chỉ số thay đổi cách tính điểm thay đổi bố cục cho từng khung hình, mà chỉ có cách chúng tôi tóm tắt nhiều khung hình. Điều này có nghĩa là API JavaScript cho việc thay đổi bố cục sẽ không thay đổi và các sự kiện cơ bản trong dấu vết Chrome mà các công cụ dành cho nhà phát triển sử dụng cũng sẽ giữ nguyên, do đó, các kích cỡ khuôn hình chữ nhật thay đổi bố cục trong các công cụ như WebPageTest và Chrome Công cụ cho nhà phát triển sẽ tiếp tục hoạt động như cũ.
- Chúng tôi sẽ tiếp tục nỗ lực để giúp nhà phát triển dễ dàng áp dụng các chỉ số này, bao gồm cả việc đưa các chỉ số này vào thư viện web-vitals, ghi lại trên web.dev và báo cáo các chỉ số đó trong công cụ dành cho nhà phát triển như Lighthouse.
Sự đánh đổi giữa các chỉ số
Một trong những chiến lược hàng đầu tóm tắt các cửa sổ thay đổi bố cục dưới dạng trung bình, và các chiến lược còn lại báo cáo cửa sổ tối đa. Đối với các trang đã mở trong một thời gian rất dài, giá trị trung bình có thể báo cáo giá trị đại diện cao hơn, nhưng nhìn chung, nhà phát triển có thể dễ dàng hành động trên một cửa sổ duy nhất — họ có thể ghi nhật ký thời điểm xảy ra, các phần tử thay đổi, v.v. Chúng tôi rất mong nhận được ý kiến phản hồi về vấn đề quan trọng hơn đối với nhà phát triển.
Bạn có thấy cửa sổ trượt hoặc cửa sổ phiên dễ hiểu hơn không? Bạn có quan tâm đến sự khác biệt không?
Cách cung cấp phản hồi
Bạn có thể dùng thử các chỉ số mới về việc thay đổi bố cục trên mọi trang web bằng cách sử dụng mẫu triển khai JavaScript hoặc nhánh mở rộng Core Web Vitals của chúng tôi.
Vui lòng gửi ý kiến phản hồi qua email cho nhóm Google web-vitals-feedback của chúng tôi, trong đó có "[Layout Shift Metrics]" ở dòng tiêu đề. Chúng tôi rất mong nhận được ý kiến của bạn!