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

Điểm số tổng hợp về mức thay đổi bố cục (CLS) là một trong 3 chỉ số Các chỉ số quan trọng về trang web. Chỉ số này đo lường sự 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 về bố cục có thể làm người dùng bị phân tâm. Hãy tưởng tượng bạn đang đọc một bài viết khi tất cả các yếu tố đột ngột di chuyển xung quanh trang, khiến bạn rời bỏ và yêu cầu bạn tìm lại vị trí của mình. Điều 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 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ó chịu về mặt thị giác. Lỗi này thường xảy ra khi các phần tử hiển thị bị buộc di chuyển vì một phần tử khác được thêm đột ngột vào trang hoặc đổi kích thước.

Để cung cấp trải nghiệm tốt cho người dùng, trang web phải có 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 chính khác về trang web (là các giá trị dựa trên thời gian tính bằng giây hoặc mili giây), điểm CLS là một giá trị vô đơn vị dựa trên phép tính về lượng nội dung thay đổi và khoảng thời gian thay đổi.

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

Sau đây là những nguyên nhân phổ biến nhất dẫn đến điểm CLS kém:

• Hình ảnh không có kích thước.
• Quảng cáo, lượt 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 khiến bố cục thay đổi

Trước khi bắt đầu xem xét giải pháp cho các vấn đề thường gặp về CLS, bạn cần phải hiểu rõ điểm số CLS và nguồn gốc của sự thay đổi đó.

CLS (Điểm số tổng hợp về mức thay đổi bố cục) về các công cụ trong phòng thí nghiệm so với lĩnh vực thực tế

Các nhà phát triển thường cho rằng CLS được đo lường trong Báo cáo trải nghiệm người dùng của Chrome (CrUX) là không chính xác vì nó 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ị toàn bộ CLS (Điểm số tổng hợp về mức thay đổi bố cục) 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ố về hiệu suất web và cung cấp một số hướng dẫn. Tuy nhiên, luồng người dùng Lighthouse cho phép bạn đo lường ngoài bà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. CLS (Điểm số tổng hợp về mức thay đổi bố cục) đo lường trong toàn bộ thời gian hoạt động của một 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 rất phổ biến trong quá trình tải trang, vì đó là khi hệ thống tìm nạp tất cả tài nguyên cần thiết để hiển thị trang, nhưng việc thay đổi 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 xảy ra do hoạt động tương tác của người dùng và do đó bị loại trừ khỏi điểm CLS. Miễn là chúng xảy ra trong vòng 500 mili giây kể từ lượt tương tác đó, thì chúng được tính là các thay đổi dự kiến.

Tuy nhiên, các thay đổi ngoài dự kiến sau tải có thể được tính đến khi không có hoạt động tương tác đủ điều kiện – ví dụ: nếu nội dung tải từng phần được tải đầy đủ trong khi người dùng cuộn qua một trang. Các nguyên nhân phổ biến khác dẫn đến CLS sau khi tải xuất phát từ hoạt động tương tác giữa các lượt chuyển đổi, chẳng hạn như trên Ứng dụng một trang. Quá trình này mất nhiều thời gian hơn 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á những gì mà người dùng thực sự của bạn đang trải qua" và CLS tải trong 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à kết quả của CLS sau khi tải.

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

Khi điểm CrUX và Lighthouse CLS trên PageSpeed Insights tương tự nhau, điều đó thường có nghĩa là Lighthouse đã phát hiện thấy vấn đề về tải CLS. Trong trường hợp này, Lighthouse có thể cung cấp 2 lượt kiểm tra để biết thêm thông tin: một quy trình kiểm tra những hình ảnh gây ra CLS do thiếu chiều rộng và chiều cao và một quy trình kiểm tra cho tất cả các thành phần thay đổi trong quá trình tải trang cùng với phần đóng góp vào CLS. Để xem các hoạt động kiểm tra này, hãy lọc tìm chúng như trong hình ảnh sau:

Bảng điều khiển Hiệu suất trong Công cụ cho nhà phát triển cũng nhấn mạnh việc thay đổi bố cục trong phần Trải nghiệm. Chế độ xem Tóm tắt cho một bản ghi Layout Shift bao gồm điểm số CLS cũng như một lớp phủ hình chữ nhật cho thấy các khu vực bị ảnh hưởng. Các chỉ số này đặc biệt hữu ích trong việc xác định các vấn đề về tải CLS vì chúng cho phép bạn tái tạo trải nghiệm người dùng với hồ sơ hiệu suất tải lại.

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

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

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

Thay vì sử dụng tiện ích này, bạn có thể duyệt trang web của mình trong khi ghi lại các thay đổi về bố cục bằng cách sử dụng một Trình quan sát hiệu suất đã 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 diễn ra trong lúc người dùng cuộn qua một trang, khi nội dung tải từng phần sẽ tải hoàn toàn mà không có không gian dành riêng cho nội dung đó. Việc thay đổi nội dung khi người dùng giữ con trỏ trên nó là một nguyên nhân CLS thường gặp sau khi tải. Mọi sự thay đổi nội dung trong một trong hai lượt tương tác này đều được tính là ngoài dự kiến, ngay cả khi diễn 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 khoảng thời gian của Lighthouse để đảm bảo việc thay đổi bố cục không làm hỏng luồng người dùng thông thường.

Đo lường các yếu tố CLS tại hiện trường

Việc theo dõi CLS tại hiện trường có thể giúp ích rất nhiều trong việc xác định những tình huống xảy ra CLS 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ác công cụ tại hiện trường chỉ đo lường các yếu 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 trường CLS để xác định những vấn đề được ưu tiên cao nhất cần khắc phục.

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 Hiệu suất gỡ lỗi trong trường này. 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ự.

Nguyên nhân phổ biến dẫn đến CLS (Điểm số tổng hợp về mức thay đổi bố cục)

Phần này trình bày một số lý do phổ biến hơn dẫn đến CLS và những chiến lược để tránh việc này.

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

Hãy luôn thêm các thuộc tính kích thước width và height vào các phần tử hình ảnh và video của bạn hoặc đặt trước không gian cần thiết bằng cách sử dụng CSS aspect-ratio. Điều này cho phép trình duyệt phân bổ đúng không gian trong tài liệu khi hình ảnh tải.

width, height và aspect-ratio

Trong thời kỳ đầu của web, các nhà phát triển đã thêm các 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. Việc này sẽ giảm thiểu việc 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 kích thước "pixel" này sẽ đảm bảo rằng trình duyệt dành riêng khu vực 640x360. 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 kích thước đó hay không.

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

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 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ẽ di chuyển xuống dưới trang để tạo không gian cho chúng, tạo ra trải nghiệm người dùng khó hiểu và khó chịu.

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

Vì các trình duyệt hiện đại thiết lập 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 bảng tính kiểu.

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

Sau đó, 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ử, nhờ đó, trình duyệt có thể xác định khoảng không gian cần đặt trước cho hình ảnh khi bắt đầu tính toán bố cục.

Vì các trình duyệt chính tính toán tỷ lệ khung hình mặc định khi HTML được xử lý, nên mỗi trình duyệt sẽ hiển thị giá trị hơi khác nhau. (Để biết thông tin chi tiết về lý do tại sao điều này xảy ra, hãy xem phần Gợi ý trình bày về chiều rộng và chiều cao.)

Ví dụ: Chrome hiển thị tỷ lệ khung hình 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ự như vậy, 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 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 tải hình ảnh 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 của 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ệ mặc định, tỷ lệ này vẫn gây ra ít sự dịch chuyển bố cục hơn so với kích thước mặc định 0x0 của hình ảnh không được cung cấp kích thước.

Để tìm hiểu chuyên sâu hơn về tỷ lệ khung hình và triết lý của hình ảnh thích ứng, hãy xem phần Tải trang không bị giật với tỷ lệ khung hình cho nội dung nghe nhìn.

Nếu hình ảnh của bạn nằm trong vùng chứa, bạn có thể sử dụng CSS để đổi kích thước hình ảnh thành chiều rộng của vùng chứa. Chúng tôi đặt height: auto; để tránh sử dụng một giá trị cố định cho chiều cao của 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 các 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>, hãy sử dụng cùng một tỷ lệ khung hình cho mỗi hình ả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 hình ảnh của bạn. Ví dụ: có thể bạn sẽ muốn thêm một bức ảnh bị cắt bớt cho 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ợ chế độ cài đặt width và height trên phần tử con source của phần tử picture:

<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 về 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 khi chúng dịch chuyển xuống, làm tăng CLS (Điểm số tổng hợp về mức thay đổi bố cục) của bạn.

Quảng cáo là một trong những yếu tố góp phần 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 và quảng cáo lớn hơn thường tạo ra doanh thu cao hơn các quảng cáo nhỏ hơn. Tuy nhiên, việc quảng cáo tải đột ngột và đẩy nội dung hiển thị xuống dưới trang sẽ ảnh hưởng xấu đến trải nghiệm người dùng.

Các 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 từ YouTube, bản đồ từ 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 được nội dung của mình 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 dung lượng cho các tiện ích của chúng. Điều này khiến bố cục thay đổi khi chúng tải cuối cùng.

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 nằm ở mức độ kiểm soát của bạn đối với nội dung được chèn. Các bên thứ ba như đối tác quảng cáo thường sẽ không cung cấp cho bạn bất kỳ thông tin hữu ích nào về nội dung được chèn hoặc bất kỳ chế độ kiểm soát nào đối với sự thay đổi bố cục của các tệp nhúng này.

Đặt trước không gian 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 hiện tượng thay đổi bố cục bằng cách dành riêng không gian cho chúng trong bố cục ban đầu.

Việc này có thể đơn giản như thêm kiểu min-height để đặt trước không gian hoặc sử dụng thuộc tính CSS aspect-ratio mới theo cách tương tự như các trình duyệt dùng thuộc tính này tự động cho hình ảnh đối với nội dung thích ứng như quảng cáo.

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 hệ số hình dạng bằng cách sử dụng các 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, 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 có nhiều khả năng nhất cho vùng 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 lượng 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. Như đã đề xuất trước đó, việc sử dụng min-height cho phép phần tử mẹ phát triển 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 làm thu gọn không gian dành riêng bằng cách hiển thị phần giữ chỗ nếu chẳng hạn như 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 thành phần có thể gây ra CLS lượng lớn như chèn nội dung.

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

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

Nội dung biểu ngữ lớp phủ

Biểu ngữ và biểu mẫu xuất hiện không mong muốn trên một trang là một nguyên nhân phổ biến khác gây ra việc thay đổi bố cục ngoài dự kiến.

Nếu không thể dành riêng không gian cho loại nội dung này, bạn có thể phủ nội dung này lên nội dung hiện có để nội dung không nằm trong quy trình của tài liệu. Để được tư vấn về thời điểm sử dụng phương pháp này, hãy xem bài viết Các phương pháp hay nhất về thông báo về cookie.

Cho phép tương tác của người dùng kích hoạt thay đổi bố cục dự kiến

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, chẳng hạn như khi tải thêm sản phẩm vào danh sách mặt hàng hoặc 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 việc thay đổi bố cục không mong muốn trong những trường hợp đó:

• Hãy 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ế độ kiểm soát cho đến khi quá trình chuyển đổi hoàn tất để ngăn việc vô tình nhấp hoặc nhấn trong khi nội dung mới đang tải.
• Cho phép người dùng bắt đầu tải nội dung mới, chẳng hạn như bằng nút Load more (Tải thêm) hoặc Refresh (Làm mới) để việc chuyển đổi này không gây bất ngờ. Bạn nên tìm nạp trước nội dung mới 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 việc thay đổi bố cục trong vòng 500 mili giây từ hoạt động đầu vào của người dùng 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ủ một thông báo cho người dùng rằng nội dung đó có sẵn (ví dụ: bằng nút Scroll to top (Di chuyển lên đầu)).

Hoạt ảnh

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 tính năng bố cục lại, vẽ và kết hợp. Việc thay đổi các 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 bố cục lại. Có thể kể đến một số cách như sử dụng ảnh động transform để dịch, chuyển 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 kích hoạt việc thay đổi bố cục, hãy xem bài viết Ảnh động hiệu suất cao.

Phông chữ trên web

Việc tải 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 tải phông chữ trên web xuống:

• Phông chữ dự phòng được hoán đổi với phông chữ web, sử dụng Flash của văn bản chưa định kiểu (FOUT).
• Văn bản "Ẩn" hiển thị bằng phông chữ dự phòng cho đến khi phông chữ web có sẵn và văn bản hiển thị bằng Flash của Văn bản ẩn (FOIT).

Cả hai phương pháp đều có thể khiến bố cục thay đổi. Ngay cả khi văn bản bị ẩn, văn bản đó vẫn được bố trí bằng cách sử dụ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ẽ 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 sự dịch chuyển văn bản này:

• font-display: optional khiến phông chữ web chỉ được sử dụng nếu có sẵn trong thời điểm tạo bố cục ban đầu.
• Dùng phông chữ dự phòng tương tự như phông chữ trên web. Ví dụ: việc sử dụng font-family: "Google Sans", sans-serif; sẽ khiến trình duyệt sử dụng phông chữ dự phòng sans-serif trong khi "Google Sans" tải. Việc không chỉ định phông chữ dự phòng (chỉ sử dụng font-family: "Google Sans") sẽ khiến Chrome sử dụng phông chữ serif mặc định, điều này sẽ còn tệ hơn.
• 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. Để biết thông tin chi tiết, hãy xem phần Cải thiện tính năng dự phòng phông chữ.
• API Tải phông chữ có thể làm giảm thời gian tải phông chữ.
• 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ữ tải trước có nhiều khả năng sẽ sẵn sàng cho lần hiển thị đầu tiên và không có sự thay đổi về bố cục.

Để biết thêm thông tin, hãy xem bài viết Các phương pháp hay nhất về phông chữ.

Làm cho các trang của bạn đủ điều kiện sử dụng bfcache

Một kỹ thuật hiệu quả cao để duy trì điểm CLS 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 lưu giữ các trang trong bộ nhớ của trình duyệt trong một thời gian ngắn sau khi bạn điều hướng, để nếu bạn quay lại, các trang đó sẽ được khôi phục chính xác khi bạn rời khỏi chúng. Tức là trang được tải đầy đủ sẽ xuất hiện ngay lập tức mà không có bất kỳ sự thay đổi nào có thể xảy ra khi tải trang.

Mặc dù điều này vẫn có thể có nghĩa là lượt tải trang ban đầu có sự thay đổi về bố cục, nhưng cách này cho phép người dùng tránh tình trạng thay đổi bố cục nhiều lần. Điều này làm giảm tác động của việc thay đổi bố cục mà bạn có thể gặp khó khăn khi giải quyết theo những cách khác.

Thao tác tiến và lùi thường thấy trên nhiều trang web, chẳng hạn như khi quay lại trang nội dung, trang danh mục hoặc kết quả tìm kiếm.

Theo mặc định, tất cả các trình duyệt đều sử dụng bfcache, nhưng một số trang web không đủ điều kiện dùng bộ nhớ đệm này vì nhiều lý do. Xem bài viết 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 việc sử dụng bfcache.