Khi truy cập vào một website, người dùng thường cảm thấy khó chịu nếu có một phần tử nào đó bất ngờ xuất hiện khiến cho nội dung họ cần xem bị đẩy ra khỏi màn hình hiển thị. Để ngăn chặn điều này xảy ra thường xuyên gây ảnh hưởng tiêu cực đến trải nghiệm người dùng, bạn cần theo dõi và giữ cho chỉ số CLS luôn ở mức tối thiểu. Tham khảo ngay nguyên nhân và cách cải thiện CLS hiệu quả được chia sẻ qua bài viết sau.
Nguyên nhân của sự thay đổi bố cục (layout shift)
Trước khi bắt đầu tìm kiếm cách giải quyết cho các vấn đề thường gặp của Cumulative Layout Shift (CLS), bạn cần hiểu rõ về điểm số CLS của mình và lý do vì sao các phần tử trên trang di chuyển.
Sự khác nhau giữa CLS được đo lường trong môi trường giả lập với thực tế
Hầu hết các nhà phát triển website đều cho rằng CLS được đo lường trong Chrome UX Report (CrUX) là không chính xác. Bởi vì chúng không trùng khớp với chỉ số CLS mà Chrome DevTools và các công cụ thử nghiệm khác cung cấp.
Điều này có thể bắt nguồn từ việc các công cụ thử nghiệm (chẳng hạn như Google Lighthouse) thường không hiển thị đầy đủ CLS của một trang, mà chúng chỉ thực hiện một tải trang đơn giản để đo lường các chỉ số hiệu suất và cung cấp cho người dùng một số hướng dẫn thích hợp. Tuy nhiên, user flow của Lighthouse lại cho phép bạn đo lường ngoài phạm vi kiểm tra mặc định của trang.
Trong khi đó, CrUX là bộ dữ liệu chính thức được sử dụng trong chương trình Web Vitals để đo lường hiệu suất website. CrUX sẽ phản ánh điểm CLS trong toàn bộ thời gian hoạt động của trang, thay vì chỉ đo lường CLS ở lần tải trang đầu tiên như các công cụ thử nghiệm. Như vậy, sự khác biệt trong cách thức đo lường đã dẫn đến tình trạng không trùng khớp số liệu như trên.
Trong quá trình tải trang, chúng ta không thể tránh khỏi việc xuất hiện tình trạng layout shift (thay đổi bố cục) vì đây là quá trình hệ thống cần tải tất cả các tài nguyên cần thiết cho việc hiển thị. Tuy nhiên, layout shift cũng có thể xảy ra trong lần tải đầu tiên, thường là do người dùng tương tác. Trong trường hợp này, nếu thay đổi diễn ra trong vòng 500 mili giây kể từ khi người dùng tương tác, chúng sẽ được coi là thay đổi có dự kiến (expected shift) và không bị tính vào điểm CLS.
Bên cạnh đó, còn tồn tại một số nguyên nhân khiến trang thay đổi bố cục mà không phải do người dùng tương tác, chẳng hạn như cơ chế tải chậm (lazy loading) có thể gây ra các thay đổi không mong muốn khi hiển thị nội dung. Ngoài ra, tình trạng này cũng có thể bắt nguồn từ sự tương tác của những phần tử trên trang web giữa các lần chuyển đổi, nhất là trên các Single Page App và thời gian cần để tải thường mất trên 500 mili giây.
Để nhận biết sự khác biệt giữa CLS trong thử nghiệm và trên thực tế, bạn có thể sử dụng công cụ PageSpeed Insights. Công cụ này cung cấp cả CLS mà người dùng trải nghiệm trong mục “Discover what your real users are experiencing” và CLS trong môi trường thử nghiệm tại mục “Diagnose performance issues“. Sự khác biệt giữa hai giá trị này có thể là kết quả của CLS sau khi trang đã được tải.
Xác định các vấn đề về CLS trong khi tải trang
Tại PageSpeed Insights, nếu bạn nhận thấy điểm CLS trên CrUX và Lighthouse đang bằng nhau, điều này đồng nghĩa với việc Lighthouse đã phát hiện ra một số vấn đề khi tải CLS. Trong trường hợp đó, Lighthouse sẽ cung cấp hai audit để xác định nguyên nhân cốt lõi của sự việc.
Trong đó, một audit tập trung vào các hình ảnh gây ra CLS do thiếu thông tin về chiều rộng, chiều cao, và audit còn lại sẽ được thực hiện trên tất cả các phần tử đã di chuyển trong quá trình tải trang và và tạo ra CLS. Để theo dõi các audit này, bạn có thể lọc chúng như hình minh họa bên dưới:
Tại bảng Performance của DevTools, các layout shift sẽ được nhấn mạnh trong mục Experience. Đồng thời, chế độ Summary sẽ cung cấp cho bạn một bản ghi layout shift bao gồm điểm CLS cùng với các vùng bị ảnh hưởng – được thể hiện thông qua một lớp phủ hình chữ nhật. Đây là các thông tin vô cùng hữu ích để bạn có thể xác định vấn đề CLS khi tải bằng cách mô phỏng lại trải nghiệm người dùng với một hồ sơ hiệu suất tải lại.
Xác định các vấn đề CLS sau khi tải trang
Khi điểm CLS giữa CrUX và Lighthouse không giống nhau, điều này cho thấy sự xuất hiện của CLS diễn ra sau khi tải trang. Những thay đổi này thường khó theo dõi nếu thiếu dữ liệu từ người dùng thực tế. Tiện ích mở rộng Web Vitals của Chrome sẽ là công cụ hỗ trợ hữu ích trong quá trình theo dõi CLS khi người dùng tương tác với một trang.
Với tiện ích này, bạn có thể xem các thông tin chi tiết về những phần tử đã thay đổi trong heads-up display hoặc console của trình duyệt một cách trực quan và dễ dàng. Ngoài ra, bạn cũng có thể duyệt qua trang web của mình trong khi đang ghi lại các layout shift bằng cách sử dụng Performance Observer (trình quan sát hiệu suất) được dán vào console của trình duyệt.
Bằng cách thiết lập các công cụ giám sát sự dịch chuyển, bạn có thể mô phỏng lại các vấn đề CLS xảy ra sau khi tải trang. Thông thường, CLS xuất hiện khi người dùng cuộn chuột qua một trang và các nội dung lazy-loading không có không gian riêng. Bên cạnh đó, đôi khi nguyên nhân cũng đến từ việc người dùng di chuyển trỏ chuột qua các phần tử bất kỳ.
Bất kỳ di chuyển nội dung nào xảy ra trong quá trình tương tác trên đều được tính là sự thay đổi không mong đợi (unexpected shift) – kể cả khi chúng diễn ra trong vòng 500 mili giây. Sau khi đã xác định các nguyên nhân phổ biến gây ra CLS trên trang, bạn có thể cân nhắc sử dụng chế độ timespans user flow của Lighthouse để đảm bảo rằng các layout shift không làm ảnh hưởng đến các user flow thông thường.
Đo lường CLS trong môi trường thực tế
Theo dõi CLS trong môi trường thực tế là một việc làm quan trọng giúp bạn xác định khi nào CLS xảy ra và thu hẹp phạm vi tìm kiếm nguyên nhân. Các công cụ này sẽ đo lường các phần tử đã dịch chuyển tương tự như công cụ đo lường trong môi trường thử nghiệm. Tuy nhiên, những thông tin mà chúng cung cấp đủ để bạn nhìn nhận được vấn đề cốt lõi và xác định các vấn đề cần ưu tiên giải quyết.
Thư viện web-vitals có sẵn các chức năng ghi nhận để người dùng có thể thu thập các thông tin bổ sung. Ngoài ra, các nhà cung cấp dịch vụ RUM khác cũng đang bắt đầu thu thập và cung cấp dữ liệu theo cách tương tự.
Nguyên nhân phổ biến gây ra layout shift và cách cải thiện CLS
Trong phần này, Vietnix sẽ cung cấp một số nguyên nhân phổ biến gây ra layout shift và cách cải thiện CLS:
Hình ảnh không có kích thước
Hãy luôn xem xét các thuộc tính chiều rộng và chiều cao trên các phần tử hình ảnh, video. Đồng thời, bạn cũng có thể dự trữ không gian cần thiết cho phần tử đó thông qua thuộc tính CSS aspect-ratio (tỷ lệ khung hình). Bằng cách này, trình duyệt sẽ hiểu và cung cấp đủ không gian trong màn hình hiển thị khi hình ảnh đang tải.
width, height, và aspect-ratio
Để đảm bảo có đủ không gian để hiển thị hình ảnh trước khi trình duyệt bắt đầu quá trình tài, bạn cần thêm các thuộc tính width và height vào các thẻ <img>. Việc này giúp trình duyệt phân bổ đúng không gian cần thiết, đồng thời giảm thiểu tình trạng dịch chuyển (reflow) và cấp lại bố cục (re-layout).
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">Trong ví dụ này, các thuộc tính width và height được mặc định là pixel. Bằng cách sử dụng câu lệnh trên, trình duyệt sẽ phân bổ một không gian có kích thước 640 x 360 px để hình ảnh hiển thị một cách đầy đủ và không làm di chuyển các phần tử khác. Khi hình ảnh được tải lên trang, chúng sẽ tự co giãn sao cho phù hợp với không gian này, bất kể kích thước thực tế của chúng có khớp hay không.
Ở thời điểm hiện tại, khi Responsive Web Design dần trở nên phổ biến, một số nhà phát triển web đã bắt đầu sử dụng CSS để điều chỉnh kích thước hình ảnh thay vì sử dụng các thuộc tính kích thước trên:
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 từ trước nên trình duyệt không thể phân bổ chính xác không gian cần thiết. Thay vào đó, trình duyệt cần thời gian tải xuống để xác định kích thước chính xác và khi hình ảnh hiển thị đầy đủ các nội dung trên màn hình sẽ bị dịch chuyển xuống dưới gây khó chịu cho người dùng.
Thiết lập kích thước hình ảnh tối ưu
Trên thực tế, trình duyệt thường đặt tỷ lệ khung hình của hình ảnh mặc định dựa trên width và height. Khi bạn thiết lập các giá trị này, trình duyệt sẽ phân bổ không gian cho hình ảnh trước khi hoàn tất quá trình tải. Đồng thời, việc bổ sung CSS như đã đề cập ở trên cũng giúp hình ảnh được hiển thị đúng cách và tránh gây ra những thay đổi không mong muốn làm ảnh hưởng đến trải nghiệm của người dùng trên giao diện website.
<!-- set a 16:9 aspect ratio as 640x360 pixels -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">Câu lệnh trên cho phép trình duyệt 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 của phần tử, từ đó xác định được không gian cần phân bổ cho hình ảnh ở đầu quá trình tính toán bố cục. Điều này giúp cho hình ảnh được hiển thị một cách đầy đủ và chính xác hơn, vì trình duyệt biết kích thước cụ thể mà hình ảnh sẽ chiếm trên website.
Trong ví dụ bên dưới, bạn có thể thấy cách trình duyệt Chrome hiển thị tỷ lệ khung hình trong mục Styles của panel Element.
img[Attributes Style] {
aspect-ratio: auto 640 / 360;
}Trình duyệt Safari cũng có cách hoạt động tương tự, đó là sử dụng kiểu nguồn HTML Attributes. Trong khi đó, Firefox không hiển thị trực tiếp thông tin về tỷ lệ khung hình được tính toán trong panel Inspector – công cụ phát triển của Firefox. Tuy nhiên, Firefox vẫn áp dụng tỷ lệ khung hình khi phân bổ bố cục.
Trong đoạn code trên, cần chú ý đến thuộc tính quan trọng là auto, thuộc tính này có nhiệm vụ ghi đè kích thước hình ảnh lên tỷ lệ khung hình mặc định sau khi hình ảnh được tải xuống. Nếu kích thước này không đồng nhất, chúng có thể gây ra layout shift, nhưng bù lại là tỷ lệ khung hình của ảnh vẫn được áp dụng ngay cả khi HTML ban đầu không chính xác. Như vậy, bạn vẫn có thể hạn chế mức độ ảnh hưởng của layout shift 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.
Trong trường hợp hình ảnh nằm trong một vùng chứa (container), bạn có thể thay đổi kích thước hình ảnh theo chiều rộng của container bằng cách sử dụng CSS. Ở ví dụ dưới đây, chúng ta sẽ đặt thuộc tính height: auto; để hình ảnh tự động điều chỉnh chiều cao sao cho phù hợp với kích thước của container.
img {
height: auto;
width: 100%;
}Chú ý đến responsive image (hình ảnh đáp ứng)
Khi làm việc với responsive image, thuộc tính srcset được sử dụng để cung cấp một tập hợp các hình ảnh có kích thước/độ phân giải khác nhau để trình duyệt có thể lựa chọn sao cho phù hợp với kích thước hiển thị của thiết bị. Để đảm bảo rằng các thuộc tính width và height của thẻ <img> có thể được thiết lập, bạn nên sử dụng một tỷ lệ khung hình nhất đị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"
/>
Bên cạnh đó, tỷ lệ khung hình của hình ảnh cũng có thể thay đổi dựa trên art direction của website. Chẳng hạn như trên các khung nhìn (viewport) như tablet, smartphone, bạn có thể hiển thị một phần của hình ảnh thay vì toàn bộ. Ngược lại, đối với các thiết bị có màn hình lớn, hãy hiển thị đầy đủ để mang đến trải nghiệm tối ưu cho người dùng.
<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>Hiện tại, các trình duyệt như Chrome, Safari và Firefox đã hỗ trợ thiết lập thuộc tính width và height trên các source con 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>Ads, nội dung nhúng và các nội dung late-loading
Ngoài hình ảnh thì ads, nội dung nhúng (embed), iframe và các nội dung late-loading (tải muộn) khác cũng là nguyên nhân gây ra layout shift. Khi những nội dung này xuất hiện đột ngột, chúng có thể khiến các phần tử khác dịch chuyển xuống bên dưới, gây ảnh hưởng đến trải nghiệm người dùng và làm tăng CLS của website.
Ads là một trong những yếu tố chính gây ra layout shift trên website. Hiện nay, quảng cáo mang lại cho nhà phát triển web một khoản doanh thu khổng lồ, nhất là đối với các quảng cáo có kích thước lớn. Tuy nhiên, khi quảng cáo đột ngột xuất hiện trên trang và đẩy các nội dung quan trọng xuống dưới, người đọc có thể cảm thấy khó chịu và lập tức rời khỏi website họ đang truy cập.
Việc sử dụng các embeddable widget cũng khiến cho điểm CLS tăng lên. Các embeddable widget được hiểu là các phần tử web có thể được tích hợp vào website để hiển thị các nội dung đa phương tiện như bản đồ từ Google Maps, video Youtube hay các bài đăng trên mạng xã hội vào website… Các nhà phát triển web thường đưa chúng vào trang để tối ưu SEO và gia tăng trải nghiệm người dùng.
Tuy nhiên, các widget này có một điểm yếu là chúng không thể xác định kích thước cụ thể của nội dung hiển thị trước khi tải. Vì thế, khi các widget này được tải, không gian mà trình duyệt phân bổ cho chúng có thể không phù hợp và điều này dẫn đến việc layout shift sau khi tải xong.
Nhìn chung, các kỹ thuật được sử dụng để giải quyết vấn đề trên khá tương đồng với nhau. Tuy nhiên, sự khác biệt sẽ đến từ quyền kiểm soát của bạn đối với các nội dung được thêm vào website. Đôi khi, các bên thứ ba thường không cung cấp các thông tin về nội dung được chèn, hoặc quyền kiểm soát đối với layout shift mà chúng gây ra.
Phân bổ không gian cho nội dung late-loading
Khi đặt nội dung late-loading vào luồng nội dung, bạn cần phân bổ không gian cho chúng trong bố cục ban đầu để tránh bị layout shift. Bạn có thể phân bổ không gian bằng cách thêm một kiểu min-height cho phần tử chứa nội dung late-loading, hoặc đối với các responsive content như quảng cáo, hãy sử dụng thuộc tính aspect-ratio của CSS để xác định chiều rộng, chiều cao của phần tử.
Đồng thời, đừng quên xem xét các khác biệt nhỏ về kích thước ads hoặc khu vực chứa chúng trên các thiết bị và màn hình khác nhau dựa trên các truy vấn media. Đối với những phần tử không có chiều cao cố định như ads, việc đặt ra chính xác không gian cần thiết để loại bỏ hoàn toàn layout shift là không thể.
Ví dụ như quảng cáo đó cần không gian nhỏ hơn so với không gian mà bạn xác định ban đầu, mặc dù điều này tránh được tình trạng layout shift, nhưng bạn có thể mất đi một khoảng không gian để hiển thị cho các nội dung khác.
Thay vào đó, bạn có thể đặt kích thước ban đầu là kích thước nhỏ nhất bằng cách sử dụng min-height như đã đề cập ở trên. Đồng nghĩa với việc layout shift sẽ phải xảy ra, nhưng ảnh hưởng ít hơn so với kích thước mặc định 0 px của một phần tử trống, đồng thời tránh trường hợp lãng phí không gian trên trang hiển thị.
Cuối cùng, nếu một số phần tử không hiển thị, bạn cần tránh việc thu gọn không gian đã dành riêng cho chúng vì điều này có thể gây ra lỗi tương đồng hoặc nội dung hiển thị một cách đột ngột. Thay vào đó, bạn nên hiển thị một định vị tạm thời nếu không có nội dung nào được tải lên để mang đến trải nghiệm mượt mà, ổn định cho người dùng khi truy cập vào website.
Đặt nội dung late-loading ở vị trí thấp hơn khung nhìn
Trên thực tế, nội dung được chèn vào bất kỳ đâu trên viewport đều sẽ gây ra một số thay đổi. Tuy nhiên, nếu bạn đặt chúng ở trên cao, chúng có thể gây ảnh hưởng đến nhiều phần tử hơn và làm tăng điểm CLS. Vì thế, nếu không thể dành không gian cho nội dung được chèn, thì bạn nên đặt chúng ở vị trí thấp hơn trên viewport để giảm thiểu tác động của chúng trên trang.
Lớp phủ nội dung banner
Sự xuất hiện đột ngột của các banner và form cũng là một trong số các nguyên nhân phổ biến gây ra layout shift không mong muốn. Trong trường hợp bạn không thể dành không gian cố định cho các nội dung này, bạn có thể đặt chúng đè lên nội dung hiện có của trang để chúng không nằm trong flow tài liệu.
Tương tác của người dùng gây ra các layout shift có dự kiến (expected layout shift)
Đôi khi, bạn cần phải thường xuyên thêm một số nội dung để gia tăng trải nghiệm người dùng, chẳng hạn như việc tải thêm sản phẩm vào danh sách các mặt hàng mà người dùng đang xem, hoặc cập nhật nội dung mới từ nguồn dữ liệu để cung cấp thông tin phù hợp cho họ. Để ngăn chặn layout shift không mong muốn xảy ra trong các trường hợp đó, bạn có thể tham khảo một số phương pháp sau:
- Thay thế nội dung cũ bằng nội dung mới trong một container có kích thước cố định, hoặc sử dụng giao diện trượt (carousel) và loại bỏ hoàn toàn nội dung cũ sau khi hoàn tất quá trình chuyển đổi. Đồng thời, bạn cần xóa các liên kết và điều hướng trong quá trình đó để ngăn người dùng tương tác khi nội dung mới đang được tải.
- Sử dụng button “Tải thêm” hoặc “Làm mới” để người dùng tự khởi chạy quá trình tải nội dung mới. Điều này giúp hạn chế việc gây ra các thay đổi đột ngột và mang đến trải nghiệm mượt mà hơn cho họ. Trước đó, bạn nên tìm nạp nội dung mới để chúng hiển thị ngay sau khi họ chạm vào. Cần lưu ý là các layout shift diễn ra trong vòng 500 mili giây kể từ khi người dùng tương tác sẽ không được tính vào CLS.
- Tải nội dung ngoài màn hình và hiển thị một thông báo để người dùng nhận biết điều gì đang xảy ra, chẳng hạn như sử dụng button “Cuộn lên trên cùng“. Khi đó, người dùng có thể hiểu được sự thay đổi trên trang diễn ra khi nào và không làm gián đoạn trải nghiệm của họ.
Animation
Việc thay đổi các giá trị của thuộc tính CSS có thể ảnh hưởng đến cách trình duyệt xử lý các thay đổi đó. Trong đó, các giá trị thường bao gồm box-shadow và box-sizing, kích hoạt quá trình tái bố cục, hiển thị phần tử và hợp thành các lớp (composite). Ngoài ra, việc thay đổi các thuộc tính top và left của một phần tử cũng là nguyên nhân gây ra layout shift – kể cả khi phần tử đó đang nằm trên một lớp riêng.
Vì thế, để tránh các layout shift không mong muốn gây ảnh hưởng đến điểm CLS, bạn không nên sử dụng các thuộc tính này khi tạo animation. Bên cạnh đó, cũng tồn tại các thuộc tính CSS khác có thể được thay đổi mà không kích hoạt lại quá trình tái bố cục – tức là trình duyệt không cần phải tính toán lại bố cục của trang. Chúng bao gồm việc sử dụng các transform animation để di chuyển, xoay, bóp méo hoặc kéo giãn các phần tử.
Composite animation (hiệu ứng hợp thành) sử dụng thuộc tính translate không làm ảnh hưởng đến các phần tử khác trên trang nên sẽ không được tính vào điểm CLS. Và dĩ nhiên, các non-composite animation cũng vậy.
Mọi người cũng xem:
Font chữ của web
Trước khi font chữ web được tải xuống, trình duyệt sẽ xử lý bằng một trong hai cách sau:
- Font chữ dự phòng sẽ thay thế bằng font chữ web thông qua kỹ thuật Flash of Unstyled Text (FOUT).
- Văn bản ẩn hiển thị bằng font chữ dự phòng cho đến khi tải xong font chữ web thông qua kỹ thuật Flash of Invisible Text (FOIT).
Cả hai cách trên đều có thể gây nên layout shift. Bởi lẽ, ngay cả khi văn bản không hiển thị (ở trường hợp FOIT), trình duyệt vẫn sử dụng font chữ dự phòng cho văn bản ấy. Khi font chữ của web tải xuống hoàn tất, trình duyệt mới bắt đầu thay thế font chữ web cho font chữ dự phòng và điều này khiến cho các phần tử xung quanh di chuyển hoặc thay đổi kích thước một cách đột ngột.
Để giảm thiểu tình trạng trên, bạn có thể sử dụng các công cụ sau:
- font-display: optional cho phép sử dụng font chữ web chỉ khi chúng có sẵn ở bố cục ban đầu của trang.
- Sử dụng font chữ dự phòng tương tự với font chữ web để giảm thiểu sự khác biệt khi trang web tải và hiển thị. Chẳng hạn như, bạn có thể sử dụng font-family: “Google Sans”, sans-serif; để yêu cầu trình duyệt sử dụng font chữ dự phòng là sans-serif trong khi font Google Sans đang được tải xuống. Ngược lại, nếu bạn không làm theo cách này, Chrome sẽ sử dụng font serif mặc định của trình duyệt khi font Google Sans chưa sẵn sàng để hiện thị.
- Sử dụng các API mới để giảm thiểu sự chênh lệch về kích thước giữa font chữ dự phòng với font chữ web, chẳng hạn như API size-adjust, ascent-override, descent-override và line-gap-override…
- Sử dụng API Font Loading để giảm thiểu thời gian tải font chữ web.
- Tải trước các font chữ web quan trọng với thẻ <link rel=preload>. Bằng cách này, khi trình duyệt bắt đầu vẽ các nội dung cho trang, những font chữ quan trọng đã được tải trước sẽ có sẵn để hiển thị và không gây ra bất kỳ layout shift làm ảnh hưởng đến điểm CLS của trang.
Đảm bảo các trang đủ điều kiện sử dụng bfcache
Đây là một kỹ thuật quan trọng và hiệu quả mà bạn có thể áp dụng để giữ cho CLS của trang luôn ở mức thấp nhất, đó là hãy đảm bảo rằng các trang của bạn đủ điều kiện để được lưu trong back/forward cache, hay bfcache.
Bfcache có khả năng giữ các trang ở bộ nhớ của trình duyệt trong một khoảng thời gian ngắn sau khi người dùng rời khỏi trang. Nếu người dùng quay lại trang đó, các phần tử sẽ được khôi phục chính xác như thời điểm rời khỏi. Điều này có nghĩa là trang đã tải luôn có sẵn trong một khoảng thời gian nhất định và sẽ không có bất kỳ layout shift nào xảy ra.
Mặc dù trong lần truy cập ban đầu, trang vẫn sẽ xuất hiện layout shift, nhưng bfcache giúp cho việc này không tái diễn ở những lần truy cập tiếp theo. Thông qua đó, bfcache góp phần giảm thiểu ảnh hưởng mà các layout shift mang lại đối với trải nghiệm người dùng.
Việc điều hướng và chuyển tiếp được sử dụng phổ biến trong hầu hết các website hiện nay, chẳng hạn như việc bạn quay lại trang danh mục, trang nội dung chính hoặc trang hiển thị kết quả tìm kiếm. Vậy nên, bfcache đóng vai trò quan trọng và hữu ích ở nhiều trường hợp.
Mặc dù hiện nay bfcache đã được đặt làm mặc định ở tất cả các trình duyệt, nhưng vẫn có một số website không đủ điều kiện để sử dụng bfcache. Vì thế, bạn cần tìm hiểu lý do và cách khắc phục để tận dụng tối đa lợi ích mà bfcache mang lại.
Lời kết
Bên trên là cách cải thiện CLS mà bạn có thể tham khảo. Có thể nói rằng, việc cải thiện CLS đóng vai trò vô cùng quan trọng trong quá trình tối ưu trang web và gia tăng trải nghiệm người dùng. Đừng quên để lại bình luận bên dưới nếu có bất cứ câu hỏi hay thắc mắc nào cần được hỗ trợ bởi đội ngũ của Vietnix.
