Tối ưu hoá điểm số tổng hợp về mức thay đổi bố cục

Tìm hiểu cách tránh thay đổi bố cục đột ngột để cải thiện trải nghiệm người dùng

Điểm số tổng hợp về mức thay đổi bố cục (CLS) là một trong ba chỉ số Core Web Vitals. Chỉ số này đo lường mức độ bất ổn định của nội dung bằng cách kết hợp mức độ thay đổi của nội dung hiển thị trong khung nhìn với khoảng cách di chuyển của các phần tử bị ảnh hưởng.

Sự thay đổi bố cục có thể gây mất tập trung cho người dùng. Hãy tưởng tượng bạn đang bắt đầu đọc một bài viết thì tất cả các thành phần đột ngột di chuyển xung quanh trang, khiến bạn mất tập trung và yêu cầu bạn phải tìm lại vị trí của mình. Điều này rất phổ biến trên web, kể cả khi đọc tin tức hoặc cố gắng nhấp vào các nút 'Tìm kiếm' hoặc 'Thêm vào giỏ hàng' các nút. Những trải nghiệm như vậy thường gây khó chịu và khó chịu về mặt hình ảnh. Lỗi này thường xảy ra khi các phần tử hiển thị buộc phải di chuyển vì một phần tử khác đột nhiên được thêm vào trang hoặc được đổi kích thước.

Để mang đến trải nghiệm tốt cho người dùng, các trang web nên cố gắng đạt CLS từ 0,1 trở xuống cho ít nhất 75% số lượt truy cập trang.

Không giống như các Chỉ số quan trọng chính khác về trang web (là những giá trị theo thời gian được đo bằng giây hoặc mili giây), điểm CLS là một giá trị không đơn vị dựa trên kết quả tính toán lượng nội dung và khoảng thời gian thay đổi.

Trong hướng dẫn này, chúng tôi sẽ đề cập đến việc tối ưu hoá các nguyên nhân phổ biến gây ra sự thay đổi bố cục.

Sau đây là những nguyên nhân phổ biến nhất gây ra CLS kém:

• Hình ảnh không có kích thước.
• Quảng cáo, nội dung nhúng và iframe không có phương diện.
• Nội dung được chèn động như quảng cáo, nội dung nhúng và iframe mà không có kích thước.
• Phông chữ trên web.

Tìm hiểu nguyên nhân dẫn đến việc thay đổi bố cục

Trước khi bắt đầu tìm hiểu giải pháp cho các vấn đề CLS (Mức thay đổi bố cục tích luỹ) thường gặp, bạn cần hiểu rõ điểm số CLS (Mức thay đổi bố cục tích luỹ) và nguồn gốc của những thay đổi.

CLS (Mức thay đổi bố cục tích luỹ) trong các công cụ trong phòng thí nghiệm so với thực địa

Thông thường, các nhà phát triển sẽ cho rằng CLS mà Báo cáo trải nghiệm người dùng trên Chrome (CrUX) đo lường được là không chính xác vì giá trị này không khớp với CLS mà họ đo lường bằng Công cụ của Chrome cho nhà phát triển hoặc các công cụ khác trong phòng thí nghiệm. Các công cụ trong phòng thí nghiệm hiệu suất web như Lighthouse có thể không hiển thị CLS đầy đủ của một trang vì chúng thường thực hiện một tải đơn giản trên trang để đo lường một số chỉ số hiệu suất web và cung cấp một số hướng dẫn (mặc dù luồng người dùng Lighthouse cho phép bạn đo lường ngoài kiểm tra tải trang mặc định).

CrUX là tập dữ liệu chính thức của chương trình Các chỉ số quan trọng về trang web. Do đó, CLS được đo lường trong toàn bộ thời gian hoạt động của trang, chứ không chỉ trong lượt tải trang ban đầu mà các công cụ trong phòng thí nghiệm thường đo lường.

Việc thay đổi bố cục là rất phổ biến trong quá trình tải trang, vì tất cả các tài nguyên cần thiết sẽ được tìm nạp để hiển thị trang lúc đầu. Tuy nhiên, thay đổi về bố cục cũng có thể xảy ra sau lần tải đầu tiên. Nhiều thay đổi sau khi tải có thể xảy ra do một lượt tương tác của người dùng, và do đó sẽ bị loại trừ khỏi điểm CLS vì đó là những thay đổi dự kiến, miễn là chúng xảy ra trong vòng 500 mili giây từ lượt tương tác đó.

Tuy nhiên, các thay đổi khác sau khi tải mà người dùng không mong đợi có thể được đưa vào khi không có tương tác đủ điều kiện, ví dụ: nếu bạn cuộn thêm dọc theo trang và nội dung tải từng phần được tải và điều đó gây ra sự thay đổi. Các nguyên nhân phổ biến khác gây ra CLS sau tải là do hoạt động tương tác của quá trình chuyển đổi, chẳng hạn như trên Ứng dụng trang đơn. Quá trình này mất nhiều thời gian hơn 500 mili giây.

PageSpeed Insights hiển thị cả thông tin mà người dùng nhận thấy CLS (Mức thay đổi bố cục tích luỹ) trong một URL trong mục "Khám phá trải nghiệm của người dùng thực tế" và CLS về tải dựa trên phòng thí nghiệm trong phần "Chẩn đoán các vấn đề về hiệu suất" . Sự khác biệt giữa các giá trị này có thể là do CLS (Mức thay đổi bố cục tích luỹ) sau khi tải.

Xác định các vấn đề về CLS về tải

Khi điểm số CrUX và CLS (Mức thay đổi bố cục tích luỹ) của PageSpeed Insights được căn chỉnh rộng rãi, điều này thường cho thấy rằng Lighthouse đã phát hiện vấn đề về tải CLS (Mức thay đổi bố cục tích luỹ). Trong trường hợp này, Lighthouse sẽ giúp thực hiện 2 lượt kiểm tra để cung cấp thêm thông tin về những hình ảnh gây ra CLS do thiếu chiều rộng và chiều cao, đồng thời liệt kê tất cả các yếu tố đã thay đổi trong lượt tải trang cùng với mức đóng góp CLS (Mức thay đổi bố cục tích luỹ). Bạn có thể xem những hoạt động kiểm tra này bằng cách lọc theo các kết quả kiểm tra CLS:

Bảng điều khiển Hiệu suất trong Công cụ cho nhà phát triển cũng làm nổi bật những thay đổi về bố cục trong phần Trải nghiệm. Chế độ xem Tóm tắt cho bản ghi Layout Shift bao gồm đi��m số tích luỹ về mức thay đổi bố cục cũng như lớp phủ hình chữ nhật cho thấy những khu vực chịu ảnh hưởng. Điều này đặc biệt hữu ích khi bạn muốn biết thêm thông tin chi tiết về các vấn đề CLS (Mức thay đổi bố cục tích luỹ) khi tải vì việc này có thể dễ dàng được sao chép bằng hồ sơ hiệu suất tải lại.

Xác định các vấn đề về CLS (Mức thay đổi bố cục tích luỹ) sau khi tải

Bất đồng giữa điểm số CrUX và CLS (Mức thay đổi bố cục tích luỹ) thường cho thấy CLS sau tải. Những thay đổi này có thể khó theo dõi nếu không có dữ liệu thực địa. Để biết thông tin về cách thu thập dữ liệu tại hiện trường, hãy xem bài viết Đo lường các yếu tố CLS (Mức thay đổi bố cục tích luỹ) trong trường.

Bạn có thể sử dụng tiện ích Chỉ số quan trọng của trang web của Chrome để theo dõi CLS khi tương tác với một trang, trong màn hình hiển thị quan trọng hoặc trong bảng điều khiển. Tại đây, bạn có thể xem thêm thông tin chi tiết về các phần tử đã thay đổi.

Thay vì sử dụng tiện ích này, bạn có thể duyệt xem trang web của mình trong khi ghi lại nội dung thay đổi bố cục bằng cách sử dụng Trình quan sát hiệu suất được dán vào bảng điều khiển.

Sau khi thiết lập tính năng giám sát ca làm việc, bạn có thể thử tái tạo mọi vấn đề về CLS (Mức thay đổi bố cục tích luỹ) sau khi tải. CLS thường xảy ra trong lúc người dùng cuộn qua một trang, khi nội dung tải từng phần tải đầy đủ mà không có đủ không gian. Nội dung thay đổi khi người dùng giữ con trỏ trên đó là một nguyên nhân phổ biến khác gây ra CLS (Mức thay đổi bố cục tích luỹ) sau khi tải. Mọi thay đổi về nội dung trong một trong những hoạt động tương tác này được tính là không mong muốn, ngay cả khi xảy ra trong vòng 500 mili giây.

Để biết thêm thông tin, hãy xem bài viết Gỡ lỗi thay đổi bố cục.

Sau khi xác định được nguyên nhân phổ biến gây ra CLS, bạn cũng có thể sử dụng chế độ luồng người dùng trong khoảng thời gian của Lighthouse để đảm bảo luồng người dùng thông thường không thay đổi bố cục.

Đo lường các yếu tố CLS (Mức thay đổi bố cục tích luỹ) tại hiện trường

Việc giám sát CLS tại hiện trường có thể vô cùng hữu ích trong việc xác định những trường hợp CLS xảy ra và thu hẹp các nguyên nhân có thể xảy ra. Giống như hầu hết các công cụ trong phòng thí nghiệm, công cụ tại hiện trường chỉ đo lường những yếu tố đã thay đổi, nhưng thường cung cấp đủ thông tin để xác định nguyên nhân. Bạn cũng có thể sử dụng kết quả đo lường tại trường CLS để xác định vấn đề nào cần ưu tiên khắc phục nhất.

Thư viện web-vitals có các hàm phân bổ cho phép bạn thu thập thêm thông tin này. Để biết thêm thông tin, hãy xem bài viết Gỡ lỗi hiệu suất trong trường này. Các nhà cung cấp dịch vụ rum khác cũng đã bắt đầu thu thập và trình bày dữ liệu này theo cách tương tự.

Các nguyên nhân phổ biến gây ra CLS

Sau khi xác định được các nguyên nhân gây ra CLS, bạn có thể bắt đầu tìm cách khắc phục vấn đề. Trong phần này, chúng tôi sẽ cho bạn biết một số lý do phổ biến gây ra CLS và những việc bạn có thể làm để tránh những lý do này.

Hình ảnh không có kích thước

Luôn thêm thuộc tính kích thước width và height vào các thành phần hình ảnh và video. Ngoài ra, bạn có thể đặt trước chỗ trống cần thiết thông qua CSS aspect-ratio hoặc một dịch vụ tương tự. Phương pháp này đảm bảo rằng trình duyệt có thể phân bổ đúng lượng không gian trong tài liệu khi hình ảnh đang tải.

Nhật ký về các thuộc tính width và height trên hình ảnh

Ở thời kỳ đầu của web, nhà phát triển sẽ thêm thuộc tính width và height vào thẻ <img> để đảm bảo phân bổ đủ dung lượng trên trang trước khi trình duyệt bắt đầu tìm nạp hình ảnh. Điều này sẽ giảm thiểu quy trình chỉnh lại luồng và bố cục lại.

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

width và height trong ví dụ này không bao gồm đơn vị. Các "pixel" này kích thước sẽ đảm bảo rằng trình duyệt dành riêng một vùng 640x360 trong bố cục của trang. Hình ảnh sẽ kéo dài để vừa với không gian này, bất kể kích thước thực có khớp với hình ảnh hay không.

Khi tính năng Thiết kế web đáp ứng ra mắt, các nhà phát triển bắt đầu bỏ qua width và height và bắt đầu sử dụng CSS để đổi kích thước hình ảnh:

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

Tuy nhiên, vì kích thước hình ảnh không được chỉ định nên không thể phân bổ không gian cho hình ảnh cho đến khi trình duyệt bắt đầu tải hình ảnh xuống và có thể xác định kích thước của hình ảnh. Khi tải hình ảnh, văn bản di chuyển xuống dưới trang để tạo không gian cho hình ảnh, tạo ra trải nghiệm người dùng khó hiểu và khó chịu.

Đây là lúc tỷ lệ khung hình phát huy tác dụng. Tỷ lệ khung hình của một hình ảnh là tỷ lệ giữa chiều rộng và chiều cao. Thông thường, bạn sẽ thấy biểu đồ này được biểu diễn dưới dạng hai số được phân tách bằng dấu hai chấm (ví dụ: 16:9 hoặc 4:3). Đối với tỷ lệ khung hình x:y, hình ảnh có chiều rộng x đơn vị và chiều cao đơn vị y.

Điều này có nghĩa là nếu chúng ta biết một trong các tham số, tham số còn lại có thể được xác định. Đối với tỷ lệ khung hình 16:9:

• Nếu puppy.jpg có chiều cao là 360px, chiều rộng là 360 x (16 / 9) = 640px
• Nếu puppy.jpg có chiều rộng là 640px, chiều cao là 640 x (9 / 16) = 360px

Việc biết tỷ lệ khung hình cho hình ảnh cho phép trình duyệt tính toán và dành đủ không gian cho chiều cao và khu vực được liên kết.

Phương pháp hay nhất hiện đại để đặt kích thước hình ảnh

Bởi vì các trình duyệt hiện đại đặt tỷ lệ khung hình mặc định của hình ảnh dựa trên các thuộc tính width và height của hình ảnh, bạn có thể tránh việc thay đổi bố cục bằng cách đặt các thuộc tính đó trên hình ảnh và bao gồm CSS trước đó trong biểu định kiểu.

<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

Mọi trình duyệt sẽ thêm một tỷ lệ khung hình mặc định dựa trên các thuộc tính width và height hiện có của phần tử.

Thao tác này sẽ tính tỷ lệ khung hình dựa trên thuộc tính width và height trước khi hình ảnh được tải. Công cụ này cung cấp thông tin này ngay từ đầu quá trình tính toán bố cục. Ngay khi hình ảnh được yêu cầu có một chiều rộng nhất định (ví dụ: width: 100%), tỷ lệ khung hình sẽ được dùng để tính chiều cao.

Giá trị aspect-ratio này được tính toán bởi các trình duyệt chính khi HTML được xử lý, thay vì với biểu định kiểu của Tác nhân người dùng mặc định (xem bài đăng này để biết thêm chi tiết về lý do), vì vậy, giá trị được hiển thị hơi khác một chút. Ví dụ: Chrome hiển thị như sau trong phần Kiểu của bảng điều khiển Phần tử:

img[Attributes Style] {
  aspect-ratio: auto 640 / 360;
}

Safari cũng hoạt động tương tự, sử dụng nguồn kiểu Thuộc tính HTML. Firefox hoàn toàn không hiển thị aspect-ratio đã tính toán này trong bảng điều khiển Inspector (Trình kiểm tra), nhưng sử dụng nó cho bố cục.

Phần auto trong mã trên rất quan trọng, vì phần này khiến kích thước hình ảnh ghi đè tỷ lệ khung hình mặc định sau khi tải hình ảnh xuống. Nếu kích thước hình ảnh khác nhau, bố cục vẫn sẽ thay đổi sau khi tải hình ảnh. Tuy nhiên, việc này giúp đảm bảo tỷ lệ khung hình của hình ảnh vẫn được sử dụng khi có sẵn, phòng trường hợp HTML không chính xác. Ngay cả khi tỷ lệ khung hình thực tế khác với mặc định, tỷ lệ này vẫn ít gây ra sự thay đổi về bố cục so với kích thước mặc định 0x0 của một hình ảnh không được cung cấp kích thước.

Để tìm hiểu sâu hơn về tỷ lệ khung hình và suy nghĩ kỹ hơn về hình ảnh thích ứng, hãy xem bài viết quá trình tải trang không bị giật với tỷ lệ khung hình của nội dung nghe nhìn.

Nếu hình ảnh của bạn nằm trong một vùng chứa, bạn có thể sử dụng CSS để thay đổi kích thước hình ảnh thành chiều rộng của vùng chứa. Chúng ta đặt height: auto; để tránh sử dụng giá trị cố định cho chiều cao hình ảnh.

img {
  height: auto;
  width: 100%;
}

Còn hình ảnh thích ứng thì sao?

Khi làm việc với hình ảnh thích ứng, srcset sẽ xác định những hình ảnh mà bạn cho phép trình duyệt chọn và kích thước của mỗi hình ảnh. Để đảm bảo có thể đặt các thuộc tính chiều rộng và chiều cao <img>, mỗi hình ảnh phải sử dụng cùng một tỷ lệ khung hình.

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

Hình ảnh của bạn tỷ lệ khung hình cũng có thể thay đổi tuỳ thuộc vào hướng dẫn nghệ thuật. Ví dụ: Bạn có thể muốn bao gồm một cảnh cắt hình ảnh cho khung nhìn và hiển thị hình ảnh đầy đủ trên máy tính:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>

Chrome, Firefox và Safari hiện hỗ trợ cài đặt width và height trên Phần tử <source> trong một phần tử <picture> nhất định:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" width="480" height="400" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" width="800" height="400" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" width="800" height="400" />
</picture>

Quảng cáo, nội dung nhúng và nội dung tải trễ khác

Hình ảnh không phải là loại nội dung duy nhất có thể khiến bố cục thay đổi. Quảng cáo, nội dung nhúng, iframe và nội dung được chèn động khác đều có thể khiến nội dung xuất hiện sau khi chuyển xuống, làm tăng CLS (Mức thay đổi bố cục tích luỹ).

Quảng cáo là một trong những yếu tố quan trọng nhất ảnh hưởng đến việc thay đổi bố cục trên web. Mạng quảng cáo và nhà xuất bản thường hỗ trợ kích thước quảng cáo động. Kích thước quảng cáo làm tăng hiệu suất/doanh thu do tỷ lệ nhấp cao hơn và nhiều quảng cáo cạnh tranh trong phiên đấu giá hơn. Rất tiếc, điều này có thể dẫn đến trải nghiệm người dùng dưới mức tối ưu do quảng cáo đẩy nội dung hiển thị mà bạn đang xem xuống dưới trang.

Các tiện ích có thể nhúng cho phép bạn đưa nội dung di động trên web vào trang của mình, chẳng hạn như video từ YouTube, bản đồ từ Google Maps và các bài đăng trên mạng xã hội. Tuy nhiên, các tiện ích này thường không nhận biết được nội dung của chúng lớn đến mức nào trước khi tải. Do đó, các nền tảng cung cấp tính năng nhúng không phải lúc nào cũng dành riêng không gian cho tiện ích, điều này khiến bố cục thay đổi khi chúng tải xong.

Các kỹ thuật để xử lý những vấn đề này đều tương tự nhau. Điểm khác biệt chính là mức độ kiểm soát bạn có đ��i với nội dung sẽ được chèn. Nếu giá trị này do bên thứ ba chèn vào như đối tác quảng cáo thì có thể bạn sẽ không biết kích thước chính xác của nội dung sẽ được chèn vào cũng như không thể kiểm soát mọi thay đổi về bố cục xảy ra trong các lượt nhúng đó.

Dành riêng không gian cho nội dung tải sau

Khi đưa nội dung tải trễ vào luồng nội dung, bạn có thể tránh thay đổi bố cục bằng cách dành riêng không gian cho những nội dung đó trong bố cục ban đầu.

Một phương pháp là thêm quy tắc CSS min-height để đặt trước không gian hoặc đối với nội dung thích ứng, chẳng hạn như quảng cáo, hãy sử dụng thuộc tính CSS aspect-ratio theo cách tương tự như cách các trình duyệt tự động sử dụng quy tắc này cho hình ảnh có kích thước được cung cấp.

Bạn có thể cần tính đến những khác biệt nhỏ về kích thước quảng cáo hoặc phần giữ chỗ trên các hệ số hình dạng khi sử dụng truy vấn nội dung nghe nhìn.

Đối với nội dung có thể không có chiều cao cố định, chẳng hạn như quảng cáo, bạn có thể không đặt trước được lượng không gian chính xác cần thiết để loại bỏ hoàn toàn sự thay đổi bố cục. Nếu quảng cáo nhỏ hơn được phân phát, nhà xuất bản có thể tạo kiểu cho một vùng chứa lớn hơn để tránh thay đổi bố cục hoặc chọn kích thước phù hợp nhất cho vùng quảng cáo dựa trên dữ liệu lịch sử. Nhược điểm của phương pháp này là làm tăng nhiều không gian trống trên trang.

Thay vào đó, bạn có thể đặt kích thước ban đầu thành kích thước nhỏ nhất sẽ được sử dụng và chấp nhận một số mức thay đổi đối với nội dung lớn hơn. Việc sử dụng min-height, như đề xuất trước đây, cho phép phần tử mẹ tăng trưởng khi cần thiết, đồng thời giảm tác động của việc thay đổi bố cục, so với kích thước mặc định 0px của phần tử trống.

Cố gắng tránh thu gọn không gian đặt trước bằng cách hiển thị một phần giữ chỗ nếu không có quảng cáo nào được trả về chẳng hạn. Việc xoá khoảng trống được dành cho các phần tử có thể gây ra CLS (Mức thay đổi bố cục tích luỹ) tương đương với việc chèn nội dung.

Đặt nội dung tải trễ thấp hơn trong khung nhìn

Nội dung được chèn động ở gần đầu khung nhìn thường gây ra thay đổi bố cục nhiều hơn so với nội dung được chèn xuống phía dưới trong khung nhìn. Tuy nhiên, việc chèn nội dung vào bất kỳ vị trí nào trong khung nhìn vẫn gây ra một số thay đổi. Nếu không thể đặt trước không gian cho nội dung được chèn, bạn nên đặt nội dung đó vào lúc khác trên trang để giảm tác động đến CLS (Mức thay đổi bố cục tích luỹ).

Tránh chèn nội dung mới khi chưa có sự tương tác của người dùng

Bạn có thể đã gặp phải tình trạng bố cục thay đổi do giao diện người dùng bật lên ở đầu hoặc cuối khung nhìn khi bạn đang cố gắng tải một trang web. Tương tự như quảng cáo, điều này thường xảy ra với biểu ngữ và biểu ngữ làm thay đổi phần còn lại của nội dung trang:

Nếu bạn cần hiển thị các loại thuộc tính tương tác trên giao diện người dùng này, hãy dành trước đủ không gian trong khung nhìn (ví dụ: sử dụng phần giữ chỗ hoặc giao diện người dùng khung) để khi tải, nội dung trong trang không bị thay đổi một cách bất ngờ. Ngoài ra, hãy đảm bảo phần tử đó không thuộc luồng tài liệu bằng cách phủ nội dung ở nơi thích hợp. Xem bài đăng Các phương pháp hay nhất về thông báo cookie để biết thêm đề xuất về các loại thành phần này.

Trong một số trường hợp, việc thêm nội dung một cách linh động là một phần quan trọng trong trải nghiệm người dùng. Ví dụ: khi tải thêm sản phẩm vào một danh sách mặt hàng hoặc khi cập nhật nội dung nguồn cấp dữ liệu trực tiếp. Có một số cách để tránh thay đổi bố cục ngoài dự kiến trong những trường hợp đó:

• Thay thế nội dung cũ bằng nội dung mới trong vùng chứa có kích thước cố định hoặc sử dụng băng chuyền và loại bỏ nội dung cũ sau khi chuyển đổi. Hãy nhớ tắt mọi đường liên kết và chế độ điều khiển cho đến khi hiệu ứng chuyển đổi hoàn tất để tránh việc người dùng vô tình nhấn hoặc nhấp vào trong khi nội dung mới sẽ xuất hiện.
• Yêu cầu người dùng bắt đầu tải nội dung mới để họ không bị ngạc nhiên bởi việc chuyển đổi (ví dụ: với nút "Tải thêm" hoặc "Làm mới"). Bạn nên tìm nạp trước nội dung trước khi người dùng tương tác để nội dung đó xuất hiện ngay lập tức. Xin lưu ý rằng những thay đổi về bố cục xảy ra trong vòng 500 mili giây kể từ khi người dùng có hoạt động đầu vào không được tính vào CLS (Mức thay đổi bố cục tích luỹ).
• Tải nội dung ngoài màn hình một cách liền mạch và phủ một thông báo cho người dùng biết rằng nội dung đó có sẵn (ví dụ: bằng nút "Cuộn lên").

Ảnh động

Các thay đổi đối với giá trị của thuộc tính CSS có thể yêu cầu trình duyệt phản ứng với những thay đổi này. Một số giá trị, chẳng hạn như box-shadow và box-sizing, sẽ kích hoạt bố cục lại, tô màu và kết hợp. Việc thay đổi các thuộc tính top và left cũng gây ra sự thay đổi về bố cục, ngay cả khi phần tử đang được di chuyển nằm trên lớp riêng. Tránh tạo ảnh động bằng các thuộc tính này.

Bạn có thể thay đổi các thuộc tính CSS khác mà không cần kích hoạt bố cục lại. Trong đó có việc sử dụng ảnh động transform để dịch, điều chỉnh tỷ lệ, xoay hoặc làm lệch các phần tử.

Ảnh động tổng hợp sử dụng translate không thể ảnh hưởng đến các phần tử khác, do đó sẽ không được tính vào CLS. Các ảnh động không được kết hợp cũng không gây ra bố cục lại. Để tìm hiểu thêm về những thuộc tính CSS nào kích hoạt việc thay đổi bố cục, hãy xem bài viết Ảnh động có hiệu suất cao.

Phông chữ trên web

Việc tải xuống và hiển thị phông chữ trên web thường được xử lý theo một trong hai cách trước khi phông chữ trên web được tải xuống:

• Phông chữ dự phòng được hoán đổi với phông chữ web, làm phát sinh một Flash văn bản không được định kiểu (FOUT).
• "Ẩn mặt" văn bản được hiển thị bằng phông chữ dự phòng cho đến khi có phông chữ trên web và văn bản được hiển thị (FOIT — nhấp nháy văn bản không hiển thị).

Cả hai phương pháp đều có thể gây ra sự thay đổi bố cục. Ngay cả khi văn bản không hiển thị, văn bản vẫn được bố trí bằng phông chữ dự phòng. Vì vậy, khi phông chữ trên web tải, khối văn bản và nội dung xung quanh sẽ thay đổi theo cách tương tự như đối với phông chữ hiển thị.

Các công cụ sau đây có thể giúp bạn giảm thiểu việc dịch chuyển văn bản:

• font-display: optional có thể tránh bố cục lại vì phông chữ web chỉ được dùng nếu có sẵn tại thời điểm bố cục ban đầu.
• Hãy đảm bảo sử dụng phông chữ dự phòng thích hợp. Ví dụ: việc sử dụng font-family: "Google Sans", sans-serif; sẽ đảm bảo phông chữ dự phòng sans-serif của trình duyệt được sử dụng khi "Google Sans" được tải. Nếu không chỉ định phông chữ dự phòng chỉ bằng font-family: "Google Sans", phông chữ mặc định sẽ được sử dụng (trên Chrome là "Times") – một phông chữ serif không phù hợp hơn so với phông chữ sans-serif mặc định.
• Giảm thiểu sự khác biệt về kích thước giữa phông chữ dự phòng và phông chữ trên web bằng cách sử dụng các API size-adjust, ascent-override, descent-override và line-gap-override mới như được nêu chi tiết trong bài đăng Cải thiện phông chữ dự phòng.
• Font Loading API có thể làm giảm thời gian tải phông chữ cần thiết.
• Tải phông chữ quan trọng trên web càng sớm càng tốt bằng <link rel=preload>. Phông chữ tải trước sẽ có khả năng cao hơn để vẽ đầu tiên, trong trường hợp này thì bố cục sẽ không thay đổi.

Hãy đọc bài viết Các phương pháp hay nhất về phông chữ để biết các phương pháp hay nhất khác về phông chữ.

Giảm CLS (Mức thay đổi bố cục tích luỹ) bằng cách đảm bảo các trang đủ điều kiện để thêm vào bộ nhớ đệm

Một kỹ thuật hiệu quả cao để duy trì điểm CLS ở mức thấp là đảm bảo các trang web của bạn đủ điều kiện dùng bộ nhớ đệm cho thao tác tiến/lùi (bfcache).

Bộ nhớ đệm bfcache lưu giữ các trang trong bộ nhớ của trình duyệt trong một khoảng thời gian ngắn sau khi bạn điều hướng khỏi chúng. Vì vậy, nếu bạn quay lại các trang này, chúng sẽ được khôi phục chính xác như khi bạn thoát. Điều này có nghĩa là trang được tải đầy đủ sẽ truy cập được ngay lập tức mà không có bất kỳ thay đổi nào thường thấy trong khi tải vì bất kỳ lý do nào đã nêu trước đó.

Mặc dù điều này có thể vẫn có nghĩa là tải trang ban đầu gặp phải sự thay đổi về bố cục, nhưng khi người dùng quay lại các trang, họ không thấy cùng một bố cục thay đổi nhiều lần. Bạn phải luôn cố gắng tránh chuyển đổi ngay cả trong lần tải ban đầu, nhưng nếu khó giải quyết hoàn toàn hơn nữa, ít nhất bạn có thể giảm tác động bằng cách tránh chúng trên bất kỳ điều hướng bfcache nào.

Điều hướng tiến và lùi phổ biến trên nhiều trang web. Ví dụ: quay lại trang nội dung, trang danh mục hoặc kết quả tìm kiếm.

Trong quá trình triển khai tính năng này cho Chrome, chúng tôi nhận thấy những điểm cải thiện đáng kể về CLS.

bfcache được sử dụng theo mặc định bởi tất cả trình duyệt, nhưng một số trang web không đủ điều kiện cho bfcache vì nhiều lý do. Hãy đọc hướng dẫn về bfcache để biết thêm chi tiết về cách kiểm tra và xác định mọi vấn đề ngăn việc sử dụng bfcache nhằm đảm bảo bạn có thể khai thác tối đa tính năng này để giúp tăng điểm CLS (Mức thay đổi bố cục tích luỹ) tổng thể cho trang web của bạn.

Kết luận

Có một số kỹ thuật để xác định và cải thiện CLS (Mức thay đổi bố cục tích luỹ) được nêu chi tiết ở phần trên của hướng dẫn này. Trong Các chỉ số quan trọng về trang web, chúng tôi cũng đưa ra một số điều khoản cho phép. Vì v��y, ngay cả khi bạn không thể loại bỏ hoàn toàn CLS, việc sử dụng một số kỹ thuật này vẫn giúp bạn giảm thiểu tác động. Hy vọng việc này sẽ cho phép bạn không vượt quá những giới hạn đó, tạo ra trải nghiệm tốt hơn cho người dùng trang web của bạn.