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 về 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 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. 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ị 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.
Để đ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 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ó 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 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 này.
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ị đầ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 của 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 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 hiển thị cả CLS mà người dùng nhận thấy từ một URL trong phần "Khám phá xem người dùng thực sự của bạn đang trải nghiệm gì" và CLS 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 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.
Layout Shift. Khi nhấp vào bản ghi, bạn có thể xem thông tin chi tiết về các thành phần bị ảnh hưởng bằng cách hiển thị những thông tin như các mục "đã chuyển từ" và "đã chuyển đến" trong hình ảnh này.
Xác định các vấn đề về CLS (Mức thay đổi bố cục tích luỹ) 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. 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 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.
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 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 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 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 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ụ 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 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ẽ 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ý về 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 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ổ dung lượng 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 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 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 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ể 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à thêm CSS trước đó vào bảng đị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ử.
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 lớn 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 để tìm hiểu kỹ hơn lý do), vì vậy, giá trị sẽ 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 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 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 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 để đổ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 đáp ứng, srcset xác định 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"
/>
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 bao gồm một ảnh chụp bị cắ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ợ 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à 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 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 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 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 đó.
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 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 đặ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 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 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 đượ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á khoảng trống được dành riêng 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 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 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 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 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. 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 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 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 đó hiển thị 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 nội dung ngoài màn hình một cách liền mạch 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ữ 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, gây ra hiện tượng Chớp văn bản không có kiểu (FOUT).
- Văn bản "ẩ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 này đều có thể gây ra sự thay đổi bố cục. Ngay cả khi 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ư 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: optionalcó 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òngsans-serifcủa trình duyệt được sử dụng khi"Google Sans"được tải. Nếu bạn không chỉ định phông chữ dự phòng chỉ bằngfont-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-serifmặ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-overridevàline-gap-overridemớ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ữ đượ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 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).
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ũng 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 những điểm 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 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 (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. 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.