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

Mức thay đổi bố cục tích luỹ (CLS) là một trong ba chỉ số Các chỉ số quan trọng chính của trang web. Chỉ số này đo lường mức độ không ổn định của nội dung bằng cách kết hợp lượng nội dung hiển thị đã dịch chuyển trong khung nhìn với khoảng cách mà các phần tử bị ảnh hưởng đã di chuyển.

Sự thay đổi bố cục có thể làm người dùng mất tập trung. Hãy tưởng tượng bạn đang đọc một bài viết thì đột nhiên các phần tử trên trang di chuyển, khiến bạn mất dấu và phải tìm lại vị trí của mình. Hiện tượng này rất phổ biến trên web, bao gồm 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". Những trải nghiệm như vậy gây khó chịu và khó nhìn. Lỗi này thường xảy ra khi các phần tử hiển thị bị buộc di chuyển do một phần tử khác đột ngột được thêm vào trang hoặc đổi kích thước.

Để đem lại 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% lượt truy cập trang.

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

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 khiến 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ó kích thước.
• Nội dung được chèn động như quảng cáo, nội dung nhúng và iframe không có phương diện.
• Phông chữ trên web.

Tìm hiểu nguyên nhân gây ra sự thay đổi bố cục

Trước khi bắt đầu tìm hiểu các giải pháp cho các vấn đề thường gặp về CLS, bạn cần hiểu rõ điểm CLS và nguyên nhân dẫn đến sự thay đổi.

CLS trong công cụ thử nghiệm so với thực tế

Thường thì các nhà phát triển cho rằng CLS do Báo cáo trải nghiệm người dùng trên Chrome (CrUX) đo lường là không chính xác vì không khớp với CLS mà họ đo lường bằng Công cụ dành cho nhà phát triển Chrome hoặc các công cụ thử nghiệm khác. 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ị đầy đủ CLS của một trang vì các công cụ này thường chỉ tải trang một cách đơn giản để đo lường một số chỉ số hiệu suất web và đưa ra 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 quy trình 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 Chỉ số quan trọng chính của trang web. Do đó, CLS được đo lường trong suốt thời gian hoạt động của trang chứ không chỉ trong lần tải trang đầu tiên mà các công cụ trong phòng thí nghiệm thường đo lường.

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

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

PageSpeed Insights cho thấy cả CLS mà người dùng nhận thấy từ một URL trong phần "Khám phá nội dung người dùng thực tế của bạn đang trải nghiệm" và CLS tải dựa trên phòng thí nghiệm trong phần "Chẩn đoán 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 sau khi tải.

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

Khi điểm CLS của CrUX và Lighthouse trong PageSpeed Insights có sự tương đồng, điều này thường cho thấy Lighthouse đã phát hiện thấy vấn đề về CLS khi tải. Trong trường hợp này, Lighthouse sẽ giúp bạn thực hiện hai quy trình 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 phần tử đã thay đổi khi tải trang cùng với mức đóng góp CLS của các phần tử đó. Bạn có thể xem các quy trình kiểm tra này bằng cách lọc theo quy trình kiểm tra CLS:

Bảng điều khiển Hiệu suất trong DevTools cũng làm nổi bật các 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 dịch chuyển bố cục tích luỹ cũng như lớp phủ hình chữ nhật cho thấy các khu vực bị ảnh hưởng. Điều này đặc biệt hữu ích để biết thêm thông tin chi tiết về các vấn đề về CLS tải, vì vấn đề này dễ dàng được tái hiện bằng hồ sơ hiệu suất tải lại.

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

Sự khác biệt giữa điểm số CLS của CrUX và Lighthouse thường cho biết CLS sau khi tải. Bạn có thể gặp khó khăn khi theo dõi những thay đổi này nếu không có dữ liệu trường. Để biết thông tin về cách thu thập dữ liệu thực địa, hãy xem bài viết Đo lường các phần tử CLS trong thực địa.

Bạn có thể sử dụng tiện ích Các chỉ số quan trọng về 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ị nhanh 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ử bị dịch chuyển.

Ngoài việc sử dụng tiện ích, bạn có thể duyệt xem trang web của mình trong khi ghi lại các thay đổi về bố cục bằ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 sau khi tải. CLS thường xảy ra khi người dùng cuộn qua một trang, khi nội dung tải lười tải đầy đủ mà không có không gian dành riêng cho nội dung đó. Nội dung dịch chuyển 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 sau khi tải. Mọi thay đổi nội dung trong một trong hai lượt tương tác này đều được coi là không mong muốn, ngay cả khi thay đổi xảy ra trong vòng 500 mili giây.

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

Sau khi bạn xác định được mọi 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 theo khoảng thời gian của Lighthouse để đảm bảo luồng người dùng thông thường không bị hồi quy bằng cách áp dụng các thay đổi về bố cục.

Đo lường các phần tử CLS trong trường

Việc theo dõi CLS trong thực tế có thể rất hữu ích trong việc xác định 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ụ thực địa chỉ đo lường các phần tử đã dịch chuyển, 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 các phép đo trong trường CLS để xác định những vấn đề cần khắc phục có mức độ ưu tiên cao nhất.

Thư viện web-vitals có các hàm phân bổ cho phép bạn thu thập thông tin bổ sung này. Để biết thêm thông tin, hãy xem bài viết Gỡ lỗi hiệu suất trong thực tế. Các nhà cung cấp 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 thường gặp gây ra CLS

Sau khi xác định được nguyên nhân gây ra CLS, bạn có thể bắt đầu khắc phục vấn đề. Trong phần này, chúng tôi sẽ trình bày 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 đó.

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 trên các phần tử hình ảnh và video. Ngoài ra, hãy đặt trước không gian cần thiết bằng CSS aspect-ratio hoặc tương tự. Phương pháp này đảm bảo trình duyệt có thể phân bổ đúng dung lượng trong tài liệu trong khi hình ảnh đang tải.

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

Trong những ngày đầu của web, các nhà phát triển sẽ thêm thuộc tính width và height vào thẻ <img> để đảm bảo có đủ không gian được phân bổ 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úp giảm thiểu việc luồng lại 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 kích thước "pixel" này sẽ đảm bảo rằng trình duyệt đã đặt trước một vùng 640x360 trong bố cục của trang. Hình ảnh sẽ kéo giãn để vừa với không gian này, bất kể kích thước thực có khớp với không gian đó hay không.

Khi Thiết kế web thích ứng được 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 hình ảnh tải, văn bản sẽ dịch chuyển xuống dưới trang để tạo không gian cho hình ảnh, tạo ra trải nghiệm khó hiểu và gây khó chịu cho người dùng.

Đây là lúc tỷ lệ khung hình phát huy tác dụng. Tỷ lệ khung hình của hình ảnh là tỷ lệ giữa chiều rộng và chiều cao của hình ảnh. Thông thường, bạn sẽ thấy tỷ lệ khung hình được biểu thị bằng hai con 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 y đơn vị.

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

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

Khi biết tỷ lệ khung hình của hình ảnh, trình duyệt có thể tính toán và dành đủ không gian cho chiều cao và khu vực liên kết.

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

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 thuộc tính width và height của hình ảnh, nên bạn có thể ngăn việc thay đổi bố cục bằng cách đặt các thuộc tính đó trên hình ảnh và đưa CSS trước đó vào trang 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">

Sau đó, tất cả trình duyệt sẽ thêm 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 các thuộc tính width và height trước khi hình ảnh tải. Phương thứ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ó 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 các trình duyệt lớn tính toán khi HTML được xử lý, thay vì bằng một trang kiểu Tác nhân người dùng mặc định (xem bài đăng này để tìm hiểu sâu về lý do), vì vậy, giá trị này hiển thị hơi khác. 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 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 được tính toán này trong bảng điều khiển Inspector (Trình kiểm tra), nhưng sử dụng aspect-ratio này cho bố cục.

Phần auto của mã trước đó 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 hình ảnh tải xuống. Nếu kích thước hình ảnh khác nhau, điều này vẫn gây ra một số thay đổi về bố cục sau khi hình ảnh tải, nhưng điều này đảm bảo tỷ lệ khung hình hình ảnh vẫn được sử dụng khi có sẵn, trong 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 tỷ lệ khung hình mặc định, tỷ lệ khung hình đó vẫn gây ra ít sự thay đổi bố cục hơn so với kích thước mặc định 0x0 của hình ảnh không có kích thước được cung cấp.

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

Nếu hình ảnh nằm trong một vùng chứa, bạn có thể sử dụng CSS để đổi kích thước hình ảnh theo 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 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 từng 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"
/>

Tỷ lệ khung hình của hình ảnh cũng có thể thay đổi tuỳ thuộc vào hướng dẫn nghệ thuật của bạn. Ví dụ: bạn có thể muốn đưa một ảnh chụp được cắt bớt vào khung nhìn hẹp 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ợ việc đặt width và height trên các 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 muộn khác

Hình ảnh không phải là loại nội dung duy nhất có thể gây ra sự thay đổi bố cục. 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 đó bị dịch chuyển xuống, làm tăng CLS.

Quảng cáo là một trong những yếu tố đóng góp lớn nhất vào việc thay đổi bố cục trên web. Các 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à có nhiều quảng cáo cạnh tranh hơn trong phiên đấu giá. Rất tiếc, điều này có thể dẫn đến trải nghiệm người dùng không tối ưu do quảng cáo đẩy nội dung hiển thị mà bạn đang xem xuống cuối trang.

Tiện ích có thể nhúng cho phép bạn đưa nội dung web di động vào trang của mình, chẳng hạn như video trên YouTube, bản đồ trên Google Maps và bài đăng trên mạng xã hội. Tuy nhiên, các tiện ích này thường không biết kích thước nội dung của chúng 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 không gian cho các tiện ích của chúng, điều này khiến bố cục thay đổi khi các tiện ích này 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 của bạn đối với nội dung sẽ được chèn. Nếu nội dung này do bên thứ ba (chẳng hạn như đối tác quảng cáo) chèn, thì bạn có thể không biết chính xác kích thước của nội dung sẽ được chèn, cũng như không thể kiểm soát bất kỳ thay đổi bố cục nào xảy ra trong các nội dung được nhúng đó.

Giữ lại dung lượng cho nội dung tải muộn

Khi đặt nội dung tải muộn trong luồng nội dung, bạn có thể tránh được việc thay đổi bố cục bằng cách đặt trước không gian cho 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 như quảng cáo, chẳng hạn – sử dụng thuộc tính CSS aspect-ratio theo cách tương tự như cách trình duyệt tự động sử dụng thuộc tính này cho hình ảnh có kích thước được cung cấp.

Bạn có thể cần tính đến sự khác biệt nhỏ về kích thước quảng cáo hoặc phần giữ chỗ trên các kiểu dáng thiết bị bằng cách 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 thể đặt trước chính xác không gian cần thiết để loại bỏ hoàn toàn sự dịch chuyển bố cục. Nếu quảng cáo có kích thước nhỏ hơn được phân phát, nhà xuất bản có thể tạo kiểu cho vùng chứa lớn hơn để tránh thay đổi bố cục hoặc chọn kích thước có nhiều khả năng nhất cho vị trí quảng cáo dựa trên dữ liệu trong quá khứ. Nhược điểm của phương pháp này là làm tăng khoảng 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 mức độ dịch chuyển nhất định đối với nội dung lớn hơn. Việc sử dụng min-height, như đã đề xuất trước đó, cho phép phần tử mẹ phát triển khi cần thiết trong khi 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 được đặt trước bằng cách hiển thị phần giữ chỗ nếu không có quảng cáo nào được trả về. Việc xoá không gian dành riêng cho các phần tử có thể gây ra CLS nhiều như việc chèn nội dung.

Đặt nội dung tải muộn ở vị 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 sự thay đổi bố cục lớn hơn so với nội dung được chèn thấp hơn 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 đó ở phần sau của trang để giảm tác động đến CLS của trang.

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

Bạn có thể đã gặp phải tình trạng thay đổi bố cục 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 mẫu làm dịch chuyển nội dung còn lại của trang:

Nếu bạn cần hiển thị các loại tính năng hỗ trợ trên giao diện người dùng này, hãy dành đủ không gian trong khung nhìn cho tính năng đó trước (ví dụ: sử dụng phần giữ chỗ hoặc giao diện người dùng khung) để khi tải, tính năng đó không làm nội dung trong trang bị dịch chuyển 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 ở những nơi phù hợp. Hãy xem bài đăng Các phương pháp hay nhất cho thông báo về cookie để biết thêm các đề xuất về những 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 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 sự 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 một vùng chứa có kích thước cố định hoặc sử dụng băng chuyền và xoá 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 quá trình chuyển đổi hoàn tất để tránh các lượt nhấp hoặc nhấn vô tình trong khi nội dung mới đang tải.
• Yêu cầu người dùng bắt đầu tải nội dung mới để họ không bị bất ngờ khi nội dung thay đổi (ví dụ: bằng 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 các thay đổi về bố cục xảy ra trong vòng 500 mili giây sau khi người dùng nhập dữ liệu sẽ không được tính vào CLS.
• Tải liền mạch nội dung ngoài màn hình và phủ 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ị 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, kích hoạt việc bố cục lại, vẽ và kết hợp. Việc thay đổi thuộc tính top và left cũng khiến bố cục thay đổi, 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 việc bố cục lại. Các hiệu ứng này bao gồm việc sử dụng ảnh động transform để dịch, điều chỉnh tỷ lệ, xoay hoặc làm xiên 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 đó không được tính vào CLS. Ảnh động không kết hợp cũng không gây ra việc bố cục lại. Để tìm hiểu thêm về những thuộc tính CSS kích hoạt việc thay đổi bố cục, hãy xem phần Ảnh động hiệu suất cao.

Phông chữ trên web

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

• Phông chữ dự phòng được hoán đổi với phông chữ web, gây ra hiện tượng Chớp văn bản không có kiểu (FOUT).
• Văn bản "Không hiển thị" sẽ hiển thị bằng phông chữ dự phòng cho đến khi có phông chữ web và văn bản được hiển thị (FOIT – hiện thoáng qua văn bản không hiển thị).

Cả hai phương pháp này đề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ữ web tải, khối văn bản và nội dung xung quanh sẽ dịch chuyển giống 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 việc bố cục lại vì phông chữ web chỉ được sử dụng nếu có sẵn tại thời điểm bố cục ban đầu.
• Đảm bảo sử dụng phông chữ dự phòng phù 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 trong khi "Google Sans" đang tải. Nếu bạn không chỉ định phông chữ dự phòng chỉ bằng font-family: "Google Sans", thì 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 bằng 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ữ 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.
• API Tải phông chữ có thể giảm thời gian cần thiết để tải các phông chữ cần thiết.
• Tải phông chữ web quan trọng càng sớm càng tốt bằng <link rel=preload>. Phông chữ được tải trước sẽ có nhiều khả năng đáp ứng lần vẽ đầu tiên hơn, trong trường hợp này, bố cục sẽ không bị dịch chuyển.

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 bằng cách đảm bảo các trang đủ điều kiện sử dụng bfcache

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

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 rời khỏi trang. Vì vậy, nếu bạn quay lại các trang đó, thì các trang đó sẽ được khôi phục chính xác như khi bạn rời khỏi. Điều này có nghĩa là trang đã tải đầy đủ sẽ có sẵn ngay lập tức mà không có bất kỳ thay đổi nào thường thấy trong quá trình tải do bất kỳ lý do nào nêu trên.

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

Thao tác điều hướng quay lại và chuyển tiếp thường xuất hiệ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.

Khi triển khai tính năng này cho Chrome, chúng tôi nhận thấy CLS được cải thiện đáng kể.

Theo mặc định, tất cả trình duyệt đều sử dụng bfcache, nhưng một số trang web không đủ điều kiện sử dụng bfcache vì nhiều lý do. Hãy đọc hướng dẫn về bfcache để biết thêm thông tin chi tiết về cách kiểm thử và xác định mọi vấn đề ngăn cản việc sử dụng bfcache nhằm đảm bảo bạn đang khai thác tối đa tính năng này để cải thiện điểm CLS tổng thể cho trang web của mình.

Kết luận

Có một số kỹ thuật để xác định và cải thiện CLS như đã nêu chi tiết ở phần trước trong hướng dẫn này. Chỉ số quan trọng chính của trang web có các mức dung sai tích hợp sẵn. Vì vậy, ngay cả khi không thể loại bỏ hoàn toàn CLS, việc sử dụng một số kỹ thuật này sẽ giúp bạn giảm thiểu tác động. Hy vọng rằng điều này sẽ giúp bạn tuân thủ các giới hạn đó, mang lại trải nghiệm tốt hơn cho người dùng trang web của bạn.