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 3 chỉ số Các chỉ số quan trọng về trang web. Chỉ số này đo lường độ không ổn định của nội dung bằng cách kết hợp mức độ dịch chuyển của nội dung hiển thị 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 về bố cục có thể làm người dùng bị phân tâm. Hãy tưởng tượng rằng bạn đang đọc một bài viết khi tất cả các yếu tố đột ngột thay đổi xung quanh trang, khiến bạn rời đi 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, ngay 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ó 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 đột ngột được thêm vào trang hoặc đổi kích thước.

Để cung cấp trải nghiệm tốt cho người dùng, các trang web nên phấn đấu đạ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 của 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 kết quả tính toán mức độ thay đổi và mức độ thay đổi của nội dung.

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 khiến CLS kém đi:

• 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, lượt 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ế

Thông thường, các nhà phát triển sẽ cho rằng CLS (Điểm số tổng hợp về mức thay đổi bố cục) được đo lường trong Báo cáo trải nghiệm người dùng trên Chrome (CrUX) không chính xác vì chỉ số 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ụ trong phòng 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ị CLS đầy đủ của một trang vì chúng thường tải trang đơn giản để đ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 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 Các chỉ số quan trọng về trang web. Do đó, CLS (Mức thay đổi bố cục tích luỹ) được đo lường trong suốt 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 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 được tìm nạp để hiển thị trang ban đầu, nhưng việc thay đổi bố cục cũng có thể xảy ra sau lần tải ban đầu. Nhiều thay đổi sau khi tải có thể xảy ra do một hoạt động tương tác của người dùng và do đó sẽ bị loại trừ khỏi điểm CLS vì chúng là những thay đổi dự kiến, miễn là chúng xảy ra trong vòng 500 mili giây kể từ thời điểm tương tác đó.

Tuy nhiên, có thể bao gồm các thay đổi sau tải khác mà người dùng không mong muốn khi không có tương tác đủ điều kiện — ví dụ: nếu bạn cuộn tiếp theo trang và nội dung tải từng phần được tải và điều đó gây ra thay đổi. Một số nguyên nhân phổ biến khác gây ra CLS sau khi 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 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 CLS CrUX và Lighthouse của Lighthouse được căn chỉnh tổng thể, điều này thường cho thấy đã có vấn đề về tải CLS mà Lighthouse đã phát hiện. Trong trường hợp này, Lighthouse sẽ giúp bạn thực hiện hai bước 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 quá trình tải trang cùng với phần đóng góp vào CLS. Bạn có thể xem những hoạt động kiểm tra này bằng cách lọc theo các bài 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 nêu bật những thay đổi về 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ố về mức thay đổi bố cục tích luỹ 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. Thao tác này đặc biệt hữu ích khi bạn muốn biết thêm thông tin về các vấn đề liên quan đến việc tải CLS, vì những vấn đề này có thể dễ dàng được sao chép qua 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 CrUX và CLS (Điểm số tổng hợp về mức độ hài lòng) của Lighthouse thường cho thấy điểm 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 tại hiện trường, hãy xem bài viết Đo lường các yếu tố CLS tại hiện trường.

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 khi tương tác với một trang, trên màn hình hiển thị nổi bật hoặc trong bảng điều khiển. Tại đây, bạn có thể nhận 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 các thay đổi về 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 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 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 phổ biến khác về CLS sau khi tải. Mọi sự thay đổi nội dung trong một trong hai hoạt động tương tác này đều được tính là ngoài dự kiế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 của Lighthouse để đảm bảo luồng người dùng thông thường không giảm tốc bằng cách thay đổi bố cục.

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

Việc giám sát CLS tại hiện trường có thể giúp ích rất nhiều trong việc xác định những trường hợp mà CLS diễn 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á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 hoạt động đo lường 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 Gỡ lỗi hiệu suất 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)

Sau khi xác định được nguyên nhân dẫn đến 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ẽ trình bày một số lý do phổ biến hơn dẫn đến CLS (Điểm số tổng hợp về mức thay đổi bố cục) và những việc bạn có thể làm để tránh các vấn đề đó.

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

Luôn thêm các 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 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 rằng trình duyệt có thể phân bổ đúng khoảng không gian trong tài liệu 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 thời kỳ đầ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 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 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 hình ảnh hay không.

Khi ra mắt Thiết kế web thích ứng, 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 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 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.

Đây là lúc cần sử dụng tỷ lệ khung hình. Tỷ lệ khung hình của 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 giá trị này được biểu thị 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 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 được 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 sẽ là 360 x (16 / 9) = 640px
• Nếu puppy.jpg có chiều rộng 640px, chiều cao sẽ là 640 x (9 / 16) = 360px

Việc biết tỷ lệ cỡ ảnh của 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 kết hợp.

Phương pháp hay nhất hiện đại để đặ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 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ử.

Công cụ này tính toán 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. Hàm này cung cấp thông tin này khi bắt đầu 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 khi HTML được xử lý, thay vì với biểu định kiểu Tác nhân người dùng mặc định (xem bài đăng này để tìm hiểu kỹ hơn về lý do), vì vậy, giá trị này được hiển thị hơi khác một chút. Ví dụ: Chrome hiển thị kiểu 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 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 lại sử dụng lớp này cho bố cục.

Phần auto trong 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, thì tỷ lệ này 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 cung cấp kích thước.

Để tìm hiểu chuyên sâu hơn về tỷ lệ khung hình và các hình ảnh thích ứng, hãy xem nội dung 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 ta đặ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 cũng như 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"
/>

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 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 về bố cục. Quảng cáo, nội dung nhúng, iframe và các nội dung được chèn động khác đều có thể khiến nội dung xuất hiện sau đó để 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. 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 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 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 biết được nội dung của mình lớn như thế 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 các tiện ích của chúng. Điều này khiến bố cục thay đổi khi 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 là mức độ kiểm soát của bạn đối với nội dung được chèn. Nếu kích thước này được chèn bởi bên thứ ba như đối tác quảng cáo, bạn có thể không biết kích thước chính xá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 diễn ra trong những lần nhúng đó.

Đặ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 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.

Một cách tiếp cận là thêm min-height quy tắc CSS để đặt trước không gian hoặc cho 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 các 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 của 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, 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 việc 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 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 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ẹ 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 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 như không có quảng cáo nào được trả về. Việc xoá khoảng trống dành cho các thành phần cũng có thể gây ra điểm CLS (Điểm số tổng hợp về mức thay đổi bố cục) giống như khi 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 chỗ cho nội dung được chèn vào, bạn nên đặt nội dung này vào lúc khác trên trang để giảm tác động đến CLS (Điểm số tổng hợp về mức thay đổi bố cục) của nội dung.

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

Có thể bạn đã gặp phải hiện tượ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 các biểu ngữ và biểu mẫu làm thay đổi phần nội dung còn lại của trang:

Nếu bạn cần hiển thị các loại thành phần tương tác cho giao diện người dùng này, hãy đặt 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 sẽ không di chuyển xung quanh một cách đáng kinh ngạc. Ngoài ra, hãy đảm bảo phần tử đó không nằm trong quy trình của tài liệu bằng cách phủ nội dung khi thích hợp. Hãy xem bài đăng Các phương pháp hay nhất để thông báo về 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 trong 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 đó:

• 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 các lượt nhấp hoặc lượt nhấn không chủ ý trong khi nội dung mới xuất hiện.
• Đề nghị người dùng bắt đầu tải nội dung mới để họ không bị bất ngờ bởi sự thay đổi này (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 diễn ra 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 "Cuộn lên").

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 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 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. Nội dung 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 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 đó, 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ữ trên web, gây ra lỗi Flash văn bản chưa định kiểu (FOUT).
• Văn bản "Ẩn" được hiển thị bằng phông chữ dự phòng cho đến khi phông chữ trên web có sẵn và văn bản hiển thị (FOIT — flash của văn bản ẩn).

Cả hai phương pháp đều có thể khiến bố cục thay đổi. Ngay cả khi văn bản không hiển thị, 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ữ trang 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 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 tạo bố cục ban đầu.
• Đả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 dùng trong khi tải "Google Sans". Việc không chỉ định phông chữ dự phòng chỉ bằng font-family: "Google Sans" có nghĩa là phông chữ mặc định sẽ được sử dụng, trên Chrome là "Times" – phông chữ serif kém 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ữ 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 tính năng dự phòng phông chữ.
• API Tải phông chữ có thể giúp giảm thời gian cần thiết để tải 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ữ tải trước sẽ có nhiều khả năng gặp nội dung hiển thị đầu tiên hơn. Trong trường hợp đó, bố cục không thay đổi.

Đọc 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 dùng bộ nhớ đệm cho thao tác tiến/lùi

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).

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 di chuyển. Vì vậy, nếu bạn quay lại, thì các trang đó 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ẽ có sẵn 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 được nêu trước đó.

Mặc dù điều này có thể vẫn có nghĩa là lượt 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 liên tục. Bạn nên luôn cố gắng tránh thay đổi ngay cả trong lần tải ban đầu, nhưng khi vấn đề đó khó giải quyết một cách đầy đủ hơn, í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ỳ thao tác điều hướng bfcache nào.

Thao tác 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.

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

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 dùng bfcache vì nhiều lý do. Hãy đọc hướng dẫn về bfcache để biết thêm thông tin về cách kiểm thử và xác định mọi vấn đề ngă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 nhằm giúp đạt được đ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 (Điểm số tổng hợp về mức thay đổi bố cục) như đã nêu chi tiết trong hướng dẫn này. Các chỉ số quan trọng về trang web được cho phép tích hợp trong các chỉ số quan trọng về trang web. Do đó, kể cả khi bạn không thể loại bỏ hoàn toàn CLS, thì việc sử dụng một vài kỹ thuật trong số này vẫn sẽ giúp bạn giảm thiểu tác động. Chúng tôi hy vọng điều này sẽ giúp bạn không vượt quá những giới hạn đó, nhờ đó tạo ra trải nghiệm tốt hơn cho người dùng trang web của bạn.