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 độ bất ổn định của nội dung bằng cách kết hợp mức độ thay đổi của nội dung hiển thị trong khung nhìn với khoảng cách di chuyển của các phần tử bị ảnh hưởng.
Sự thay đổi bố cục có thể 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 thường gây khó chịu và khó chịu về mặt hình ảnh. Lỗi này thường xảy ra khi các phần tử hiển thị 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 chính khác về trang web (là những giá trị theo thời gian được đo bằng giây hoặc mili giây), điểm CLS là một giá trị không đơn vị dựa trên kết quả tính toán lượng nội dung và khoảng thời gian thay đổi.
Trong hướng dẫn này, chúng tôi sẽ đề cập đến việc tối ưu hoá các nguyên nhân phổ biến gây ra sự thay đổi bố cục.
Sau đây là những nguyên nhân phổ biến nhất 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 mà không có kích thước.
- Phông chữ trên web.
Tìm hiểu nguyên nhân dẫn đến việc thay đổi bố cục
Trước khi bắt đầu tìm hiểu 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 (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ì 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ụ của Chrome cho nhà phát triển 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ị CLS đầy đủ của một trang vì chúng thường thực hiện một tải đơn giản trên trang để đo lường một số chỉ số hiệu suất web và cung cấp một số hướng dẫn (mặc dù luồng người dùng Lighthouse cho phép bạn đo lường ngoài 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 Chỉ số quan trọng chính 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ần tải trang đầu tiên mà các công cụ 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 tải là do hoạt động tương tác của quá trình chuyển đổi, chẳng hạn như trên Ứng dụng trang đơn. Quá trình này mất nhiều thời gian hơn 500 mili giây.
PageSpeed Insights hiển thị cả thông tin mà người dùng nhận thấy CLS (Mức thay đổi bố cục tích luỹ) trong một URL trong mục "Khám phá trải nghiệm của người dùng thực tế" và CLS về tải dựa trên phòng thí nghiệm trong mục "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 các vấn đề về CLS về tải
Khi điểm số CrUX và CLS của PageSpeed Insights được căn chỉnh rộng rãi, điều này thường cho thấy rằng Lighthouse đã phát hiện vấn đề về tải CLS. 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 Công cụ cho nhà phát triển cũng nêu 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 khi bạn muốn biết thêm thông tin chi tiết về các vấn đề CLS (Mức thay đổi bố cục tích luỹ) khi tải vì việc này có thể dễ dàng được sao chép bằng hồ sơ hiệu suất tải lại.
Layout Shift. Khi nhấp vào bản ghi, bạn có thể xem thông tin chi tiết về các yếu tố bị ảnh hưởng bằng cách hiện thông tin chi tiết như "đã chuyển đi" và "đã chuyển tới" các mục nhập 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
Bất đồng giữa điểm số CrUX và CLS (Mức thay đổi bố cục tích luỹ) thường cho thấy CLS sau tải. Những thay đổi này có thể khó theo dõi nếu không có dữ liệu thực địa. Để biết thông tin về cách thu thập dữ liệu tại hiện trường, hãy xem bài viết Đo lường các yếu tố CLS (Mức thay đổi bố cục tích luỹ) trong trường.
Bạn có thể sử dụng tiện ích 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 (Mức thay đổi bố cục tích luỹ) sau khi tải. CLS thường xảy ra trong lúc người dùng cuộn qua một trang, khi nội dung tải từng phần tải đầy đủ mà không có đủ không gian. Nội dung 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 về nội dung trong một trong những hoạt động tương tác này được tính là không mong muốn, ngay cả khi xảy ra trong vòng 500 mili giây.
Để biết thêm thông tin, hãy xem bài viết Gỡ lỗi thay đổi bố cục.
Sau khi xác định được 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 trong khoảng thời gian của Lighthouse để đảm bảo luồng người dùng thông thường không thay đổi bố cục.
Đo lường các phần tử CLS trong trường
Việc giám sát CLS tại hiện trường có thể vô cùng hữu ích trong việc xác định những trường hợp CLS xảy ra và thu hẹp các nguyên nhân có thể xảy ra. Giống như hầu hết các công cụ trong phòng thí nghiệm, công cụ tại hiện trường chỉ đo lường những yếu tố đã thay đổi, nhưng thường cung cấp đủ thông tin để xác định nguyên nhân. Bạn cũng có thể sử dụng 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ê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 thực tế. Các nhà cung cấp dịch vụ rum khác cũng đã bắt đầu thu thập và trình bày dữ liệu này theo cách tương tự.
Các nguyên nhân phổ biến gây ra CLS
Sau khi xác định được các nguyên nhân gây ra CLS, bạn có thể bắt đầu tìm cách khắc phục vấn đề. Trong phần này, chúng tôi sẽ cho bạn biết một số lý do phổ biến gây ra CLS và những việc bạn có thể làm để tránh những lý do này.
Hình ảnh không có kích thước
Luôn thêm thuộc tính kích thước width và height vào các thành phần hình ảnh và video. Ngoài ra, bạn có thể đặt trước chỗ trống cần thiết qua CSS aspect-ratio hoặc một dịch vụ tương tự. Phương pháp này đảm bảo rằng trình duyệt có thể phân bổ đúng lượng không gian trong tài liệu khi hình ảnh đang tải.
Nhật ký về các thuộc tính width và height trên hình ảnh
Ở thời kỳ đầu của web, nhà phát triển sẽ thêm thuộc tính width và height vào thẻ <img> để đảm bảo phân bổ đủ dung lượng trên trang trước khi trình duyệt bắt đầu tìm nạp hình ảnh. Điều này sẽ giú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 "pixel" này kích thước sẽ đảm bảo rằng trình duyệt dành riêng một vùng 640x360 trong bố cục của trang. Hình ảnh sẽ kéo dài để vừa với không gian này, bất kể kích thước thực có khớp với hình ảnh hay không.
Khi 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 một hình ảnh là tỷ lệ giữa chiều rộng và chiều cao. Thông thường, bạn sẽ thấy biểu đồ này được biểu diễn dưới dạng hai số được phân tách bằng dấu hai chấm (ví dụ: 16:9 hoặc 4:3). Đối với tỷ lệ khung hình x:y, hình ảnh có chiều rộng x đơn vị và chiều cao y đơn vị.
Điều này có nghĩa là nếu chúng ta biết một trong các tham số, tham số còn lại có thể được xác định. Đối với tỷ lệ khung hình 16:9:
- Nếu puppy.jpg có chiều cao là 360px, chiều rộng là 360 x (16 / 9) = 640px
- Nếu puppy.jpg có chiều rộng 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 các 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">
Mọi trình duyệt sẽ thêm một tỷ lệ khung hình mặc định dựa trên các thuộc tính width và height hiện có của phần tử.
Thao tác này sẽ tính tỷ lệ khung hình dựa trên thuộc tính width và height trước khi hình ảnh được tải. 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ó 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 cũng hoạt động tương tự, sử dụng nguồn kiểu Thuộc tính HTML. Firefox hoàn toàn không hiển thị aspect-ratio đã tính toán này trong bảng điều khiển Inspector (Trình kiểm tra), nhưng sử dụng 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 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ĩ 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 sẽ xác định những hình ảnh mà bạn cho phép trình duyệt chọn và kích thước của mỗi hình ảnh. Để đảm bảo có thể đặt các thuộc tính chiều rộng và chiều cao <img>, mỗi hình ảnh phải sử dụng cùng một tỷ lệ khung hình.
<img
width="1000"
height="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
alt="Puppy with balloons"
/>
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 trễ khác
Hình ảnh không phải là loại nội dung duy nhất có thể khiến bố cục thay đổi. Quảng cáo, nội dung nhúng, iframe và nội dung được chèn động khác đều có thể khiến nội dung xuất hiện sau khi chuyển xuống, làm tăng CLS (Mức thay đổi bố cục tích luỹ).
Quảng cáo là một trong những yếu tố đó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 linh độ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 không gian cho các tiện ích của mình, đ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 giá trị này do bên thứ ba chèn vào như đối tác quảng cáo thì có thể bạn sẽ không biết kích thước chính xác của nội dung sẽ được chèn vào cũng như không thể kiểm soát mọi thay đổi về bố cục xảy ra trong các lượt nhúng đó.
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 nhỏ hơn được phân phát, nhà xuất bản có thể tạo kiểu cho một vùng chứa lớn hơn để tránh thay đổi bố cục hoặc chọn kích thước phù hợp nhất cho vùng quảng cáo dựa trên dữ liệu lịch sử. Nhược điểm của phương pháp này là làm tăng nhiều không gian trống trên trang.
Thay vào đó, bạn có thể đặt kích thước ban đầu thành kích thước nhỏ nhất sẽ được sử dụng và chấp nhận một 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 đâ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á 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 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 đó vào lúc khác trên trang để giảm tác động đến CLS (Mức thay đổi bố cục tích luỹ).
Tránh chèn nội dung mới khi chưa có sự tương tác của người dùng
Bạn có thể đã gặp phải tình trạng 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. Xem bài đăng Các phương pháp hay nhất về thông báo cookie để biết thêm đề xuất về các loại thành phần này.
Trong một số trường hợp, việc thêm nội dung một cách linh động là một phần quan trọng trong trải nghiệm người dùng. Ví dụ: khi tải thêm sản phẩm vào một danh sách mặt hàng hoặc khi cập nhật nội dung nguồn cấp dữ liệu trực tiếp. Có một số cách để tránh 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 hiệu ứng chuyển đổi hoàn tất để tránh việc người dùng vô tình nhấn hoặc nhấp vào trong khi nội dung mới sẽ xuất hiện.
- Yêu cầu người dùng bắt đầu tải nội dung mới để họ không bị 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ải trước nội dung trước khi người dùng tương tác để nội dung đó xuất hiện ngay lập tức. Xin lưu ý rằng những thay đổi về bố cục xảy ra trong vòng 500 mili giây kể từ khi người dùng có hoạt động đầu vào không được tính vào CLS (Mức thay đổi bố cục tích luỹ).
- Tải nội dung liền mạch 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. Trong đó có việc sử dụng ảnh động transform để dịch, điều chỉnh tỷ lệ, xoay hoặc làm lệch các phần tử.
Ảnh động tổng hợp sử dụng translate không thể ảnh hưởng đến các phần tử khác, do đó sẽ không được tính vào CLS. Ả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à hiển thị phông chữ trên web thường được xử lý theo một trong hai cách trước khi phông chữ trên web được tải xuống:
- Phông chữ dự phòng được hoán đổi với phông chữ web, làm phát sinh một Flash văn bản không được định kiểu (FOUT).
- "Ẩn mặt" văn bản được hiển thị bằng phông chữ dự phòng cho đến khi có phông chữ trên web và văn bản được hiển thị (FOIT — nhấp nháy văn bản không hiển thị).
Cả hai phương pháp 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ữ trên web tải, khối văn bản và nội dung xung quanh sẽ thay đổi theo cách tương tự như đối với phông chữ hiển thị.
Các công cụ sau đây có thể giúp bạn giảm thiểu việc dịch chuyển văn bản:
font-display: 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 trong khi"Google Sans"đang 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. - 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ữ 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 (Mức thay đổi bố cục tích luỹ) bằng cách đảm bảo các trang đủ điều kiện để thêm vào bộ nhớ đệm
Một kỹ thuật 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 được tải đầy đủ sẽ truy cập được ngay lập tức mà không có bất kỳ thay đổi nào thường thấy trong quá trình tải vì bất kỳ lý do nào đã nêu trước đó.
Mặc dù điều này có thể vẫn có nghĩa là 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 chuyển đổi ngay cả trong lần tải ban đầu, nhưng nếu khó giải quyết hoàn toàn hơn nữa, ít nhất bạn có thể giảm tác động bằng cách tránh chúng trên bất kỳ điều hướng bfcache nào.
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 tính năng này được triển khai cho Chrome, chúng tôi nhận thấy những điểm cải thiện đáng kể về CLS.
bfcache được sử dụng theo mặc định bởi tất cả trình duyệt, nhưng một số trang web không đủ điều kiện cho bfcache vì nhiều lý do. Hãy đọc hướng dẫn về bfcache để biết thêm chi tiết về cách kiểm tra và xác định mọi vấn đề ngăn việc sử dụng bfcache nhằm đảm bảo bạn có thể khai thác tối đa tính năng này để giúp tăng điểm CLS (Mức thay đổi bố cục tích luỹ) tổng thể cho trang web của bạn.
Kết luận
Có một số kỹ thuật để xác định và cải thiện CLS như đã nêu chi tiết ở phần trước trong hướng dẫn này. Trong Các chỉ số quan trọng về trang web, chúng tôi cũng đưa ra một số điều khoản cho phép. Vì vậy, ngay cả khi bạn không thể loại bỏ hoàn toàn CLS, việc sử dụng một số kỹ thuật này vẫn giúp bạn giảm thiểu tác động. Hy vọng việc này sẽ giúp bạn không vượt quá những giới hạn đó, tạo ra trải nghiệm tốt hơn cho người dùng trang web của bạn.