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