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