NỘI DUNG

Hosting tốc độ cao Vietnix - tốc độ tải trang trung bình dưới 1 giây
VPS siêu tốc Vietnix - trải nghiệm mượt mà, ổn định
22/04/2024
Lượt xem

Cách cải thiện CLS trong thiết kế website giúp tăng trải nghiệm người dùng

22/04/2024
28 phút đọc
Lượt xem

Đánh giá

5/5 - (128 bình chọn)

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.

Core Web Vitals được đo lường trong Chrome UX Report
Core Web Vitals được đo lường trong Chrome UX Report

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

CLS đo lường trong CrUX và Lighthouse
CLS đo lường trong CrUX và Lighthouse

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. 

Lưu ý:

PageSpeed ​​Insights có thể hiển thị dữ liệu CLS ở cấp độ URL cụ thể cho mỗi page. Tuy nhiên, khi không có dữ liệu cấp độ URL, công cụ này sẽ chuyển sang dữ liệu cấp độ gốc – tức là dữ liệu của toàn bộ website. Điều này đồng nghĩa với việc thay vì chỉ cung cấp thông tin cho từng URL riêng lẻ, PageSpeed ​​Insights sẽ tổng hợp thông tin về CLS cho toàn bộ website.

Để đảm bảo không lãng phí thời gian theo dõi một vấn đề đang xảy ra trên một trang khác, bạn cần kiểm tra dữ liệu đang hiển thị thuộc loại nào. Trong hình minh họa ở trên, biểu tượng nằm ở phía trên bên phải màn hình cho biết đây là dữ liệu cấp độ URL.

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: 

Theo dõi các audit do Lighthouse cung cấp
Theo dõi các audit do Lighthouse cung cấp

Lưu ý: Lighthouse thường chỉ xác định các phần tử bị ảnh hưởng bởi sự dịch chuyển trong trang thay vì phần tử đã gây nên CLS. Chẳng hạn như, khi bạn thêm một phần tử mới trong cấu trúc DOM, các phần tử tiếp theo trên trang có thể bị ảnh hưởng vì sự di chuyển của phần tử mới đó. Mặc dù điều này có thể gây ra một số nhầm lẫn ban đầu, nhưng thông tin về các phần tử di chuyển mà Lighthouse cung cấp vẫn đủ để bạn xác định và giải quyết vấn đề từ nguyên nhân cốt lõ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 vấn đề CLS bằng cách mô phỏng lại trải nghiệm người dùng
Xác định vấn đề CLS bằng cách mô phỏng lại trải nghiệm người dùng

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.

Tiện ích mở rộng Web Vitals
Tiện ích mở rộng Web Vitals

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.

Đo lường CLS trong môi trường thực tế và giả lập
Đo lường CLS trong môi trường thực tế và giả lập

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

Lưu ý: Dữ liệu thực tế đôi khi chúng sẽ không đầy đủ và hoàn chỉnh. Chẳng hạn như các giải pháp RUM thường đo lường CLS trong một số trường hợp cụ thể, bao gồm cả thư viện web-vitals. Tuy nhiên, chúng lại không thể đo lường CLS từ các iframe – trong khi CrUX lại có thể. Vậy nên, bạn cần kết hợp giữa các công cụ để đạt được hiệu quả tốt nhất khi theo dõi và phân tích CLS.

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.

CLS trong Lighthouse trước và sau khi thiết lập kích thước hình ảnh
CLS trong Lighthouse trước và sau khi thiết lập kích thước hình ảnh

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

Cần lưu ý: Sẽ có sự khác biệt giữa các trình duyệt khi hiển thị hình ảnh trên trang. Bởi, các trình duyệt cần dựa trên thuộc tính width và height trong quá trình xử lý HTML để tính toán tỷ lệ khung hình mặc định và quá trình này thường không giống nhau nên sẽ gây ra sự không đồng nhất.

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.

Inspector của Firefox
Inspector của Firefox

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"
/>
Chú ý đến responsive image
Chú ý đến responsive image

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.

Các nội dung late-loading là nguyên nhân gây ra CLS
Các nội dung late-loading là nguyên nhân gây ra CLS

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

Phân bổ không gian cho nội dung quảng cáo để tránh xảy ra CLS
Phân bổ không gian cho nội dung quảng cáo để tránh xảy ra CLS

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

Các nội dung lớn dẫn đến unexpected layout shift

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.
Sử dụng button "Load More" để hạn chế gây ra các thay đổi đột ngột
Sử dụng button “Load More” để hạn chế gây ra các thay đổi đột ngột
  • 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ọ.

Lưu ý: Nếu như một nội dung bất kỳ cần hơn 500 mili giây để tải, chẳng hạn chúng đòi hỏi một yêu cầu mạng, thì bạn có thể đặt trước không gian dự kiến trong khung thời gian 500 mili giây để đảm bảo rằng các layout shift không làm tăng điểm CLS.

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

Nguyên nhân gây ra layout shift
Nguyên nhân gây ra layout shift

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.

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.

FOIT và FOUT
FOIT và FOUT

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

Sử dụng bfcache
Sử dụng bfcache

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.

THEO DÕI VÀ CẬP NHẬT CHỦ ĐỀ BẠN QUAN TÂM

Đăng ký ngay để nhận những thông tin mới nhất từ blog của chúng tôi. Đừng bỏ lỡ cơ hội truy cập kiến thức và tin tức hàng ngày

Chọn chủ đề :

Kết nối với mình qua

Kết nối với mình qua

Tăng tốc độ website - Nâng tầm giá trị thương hiệu

Tăng tốc tải trang

95 điểm

Nâng cao trải nghiệm người dùng

Tăng 8% tỷ lệ chuyển đổi

Thúc đẩy SEO, Google Ads hiệu quả

Tăng tốc ngay

SẢN PHẨM NỔI BẬT

7 NGÀY DÙNG THỬ HOSTING

NẮM BẮT CƠ HỘI, THÀNH CÔNG DẪN LỐI

Cùng trải nghiệm dịch vụ hosting tốc độ cao được hơn 100,000 khách hàng sử dụng

XÁC NHẬN ĐĂNG KÝ DÙNG THỬ THÀNH CÔNG
Cảm ơn bạn đã đăng ký thông tin thành công. Đội ngũ CSKH sẽ liên hệ trực tiếp để kích hoạt dịch vụ cho bạn nhanh nhất!
ĐÓNG

Chỉ số tăng trưởng

Điểm Desktop

100 (+39)

Điểm Mobile

100 (+67)

Core Web Vitals

Passed

Lĩnh vực

Ecommerce

Chỉ số tăng trưởng

Điểm Desktop

99 (+28)

Điểm Mobile

100 (+50)

Core Web Vitals

Passed

Lĩnh vực

SEO

Chỉ số tăng trưởng

Điểm Desktop

99 (+26)

Điểm Mobile

98 (+59)

Core Web Vitals

Passed

Lĩnh vực

Ecommerce

Chỉ số tăng trưởng

Điểm Desktop

100 (+8)

Điểm Mobile

98 (+35)

Core Web Vitals

Passed

Lĩnh vực

Giáo Dục

Chỉ số tăng trưởng

Điểm Desktop

100 (+61)

Điểm Mobile

100 (+61)

Core Web Vitals

Passed

Lĩnh vực

Giáo Dục

Võ Thiên Tòng

25 Tháng 2 lúc 21:09

·

Mình muốn gửi lời cảm ơn chân thành đến Team Vietnix, anh Hưng Nguyễn, anh Vietnix Trung, em Quốc Huy đã hỗ trợ tối ưu Page Speed Insight (PSI) cho website vanvoiminhhoa.vn của mình.
Biết đến anh Hưng đã lâu nhưng chưa có duyên sử dụng dịch vụ bên anh. Tình cờ thấy được bài Post của anh về việc hỗ trợ tối ưu PSI miễn phí chỉ với vài Slot, thấy AE cmt khá nhiều nên cũng không nghĩ tới lượt mình. Hôm sau đánh liều inbox 1 phen xem sao thì may mắn được đưa vào danh sách. Vài ngày sau được Team Vietnix liên hệ và hỗ trợ.
Kết quả đạt được:
• Điểm xanh lè xanh lét
• Tốc độ tải trang nhanh hơn hẳn
• Các chỉ số cũng được cải thiện đáng kể
• Và mình tin rằng với việc PSI được cải thiện cũng thúc đẩy những thứ khác đi lên theo!
Mình thực sự hài lòng với dịch vụ của Vietnix và muốn giới thiệu đến tất cả mọi người:
• Dịch vụ Wordpress Hosting: Tốc độ nhanh, ổn định, bảo mật cao, hỗ trợ kỹ thuật 24/7. (https://vietnix.vn/wordpress-hosting/)
• Dịch vụ Business Hosting: Dung lượng lớn, phù hợp cho website có lượng truy cập cao, tích hợp nhiều tính năng cao cấp. (https://vietnix.vn/business-hosting/)
Đặc biệt, Vietnix đang có chương trình ưu đãi:
• Giảm giá 20% trọn đời khi nhập code THIENTONG_PAGESPEED tại trang thanh toán (Chu kỳ 12 tháng trở lên)
• Tặng 1 lần tối ưu điểm Page Speed Insight cho 1 website
Cám ơn Vietnix một lần nữa!
#Vietnix #Vanvoiminhhoa #Pagespeedinsight
Trước khi tối ưu
Sau khi tối ưu
Thiện Nguyễn - CEO SEO Dạo

5 Tháng 3 lúc 16:21

·

CORE WEB VITAL YẾU TỐ XẾP HẠNG TÌM KIẾM SEO
Core Web Vitals là một tập hợp các chỉ số đo lường hiệu suất của trang web từ góc độ người dùng, được Google sử dụng để đánh giá trải nghiệm người dùng trên các trang web. Các chỉ số chính bao gồm:
– Largest contentful paint (LCP): Tốc độ render của page. Mục tiêu là dưới 2,5 giây.
– First input delay (FID): Tốc độ phản hồi của website với tương tác của người dùng. Mục tiêu là dưới 100ms.
– Cumulative Layout Shift (CLS): Độ ổn định của bố cục trang. Mục tiêu là dưới 0.1.
Tất cả các chỉ số này đo lường các khía cạnh quan trọng của trải nghiệm người dùng trên trang web. Google đã công bố rằng từ tháng 5 năm 2021, các Core Web Vitals sẽ được sử dụng làm một trong các yếu tố đánh giá trong việc xếp hạng trang web trên kết quả tìm kiếm. Do đó, hiểu và cải thiện các Core Web Vitals là rất quan trọng đối với SEO.
Tóm lại, Core Web Vitals không chỉ giúp cải thiện hiệu suất và xếp hạng trang web trên công cụ tìm kiếm, mà còn cải thiện trải nghiệm của người dùng khi họ truy cập và tương tác với trang website.
P/s: mình đang có gói hỗ trợ đặc biệt cho anh em tối ưu tốc độ bên VIETNIX:
– Giảm 20% lifetime dịch vụ Hosting Business và Hosting Wordpress chu kỳ 12 tháng trở lên.
– Tặng 1 lần tối ưu điểm Page Speed Insight cho 1 website.
Anh em có nhu cầu đăng ký qua bạn Vietnix Trung này nhé và nhập mã SEODAO_PAGESPEED để được ưu đãi nhé.😁
Trước khi tối ưu
Sau khi tối ưu SEO Dạo
Icharm review

5 Tháng 3 lúc 15:43

·

[Mình vừa được hỗ trợ tối ưu page speed website]
Trước khi được tối ưu, web của mình điểm rất thấp, đặc biệt là mobile chỉ có 39. Cơ duyên thế nào lúc lướt face lại va phải chương trình tối ưu pagespeed bên Vietnix.
Sau khi được Trần Hoàng Phúc và team Vietnix hỗ trợ nhiệt tình, điểm web vọt lên 98 99 (như hình bên dưới). Dùng thử web thì thấy quá là mượt, 10 điểm cho team Vietnix.
Nói thật thì mình thật sự ấn tượng về sự nhiệt huyết, tận tâm và rất chuyên nghiệp bên Vietnix.
Anh em có nhu cầu về hosting hay có vấn đề về website như:
1. Web load chậm
2. Khách rời web vì đợi tải nội dung, hình ảnh lâu
3. Hay tất tần tật mọi thứ về website
THÌ LIÊN HỆ NGAY VIETNIX NHÉ!
Và đừng quên dùng pass “ICHARM_PAGESPEED” để được giảm 20% trọn đời hosting business và wp hosting. Quả code này còn được tặng 1 lần tối ưu pagespeed nữa nhé, ưu đãi chắc cũng phải nhất nhì thị trường luôn.
Trước khi tối ưu
Sau khi tối ưu
Hoàng Nguyễn

29 Tháng 2 lúc 17:04

·

Xin chào mọi người! Vừa rồi mình có sử dụng dịch vụ tối ưu website, tăng tốc độ tải trang pagespeed của Vietnix kết quả trên cả tuyệt vời nên mình viết bài này để chia sẻ thông tin với các bạn.
Lý do mình chọn dịch vụ tối ưu tốc độ website của Vietnix:
✅ Đội ngũ chuyên gia giàu kinh nghiệm: Đã tối ưu thành công cho hàng nghìn website trong nhiều lĩnh vực khác nhau. Các bạn nhân viên rất thân thiện, nhiệt tình và chủ động trong quá trình làm việc để cập nhật tiến độ.
✅ Quy trình chuyên nghiệp:
– Kiểm tra và phân tích: Vietnix sử dụng các công cụ tiên tiến để kiểm tra và phân tích tốc độ website của bạn.
– Xác định nguyên nhân: Vietnix xác định nguyên nhân khiến website tải chậm và đưa ra giải pháp tối ưu phù hợp.
– Tối ưu hóa website: Vietnix áp dụng các kỹ thuật tối ưu tiên tiến nhất để tăng tốc độ tải trang.
– Báo cáo kết quả: Vietnix cung cấp báo cáo chi tiết về kết quả tối ưu hóa website.
Công nghệ tiên tiến: Vietnix sử dụng các công nghệ tối ưu mới nhất như LiteSpeed, LSCache, Memcached, Redis, v.v.
✅ Cam kết kết quả: Vietnix cam kết tăng tốc độ website của bạn lên tối thiểu 90%.
✅ Giá cả cạnh tranh: Vietnix cung cấp dịch vụ tối ưu tốc độ website với mức giá cạnh tranh nhất trên thị trường.
📣 Để đăng ký sử dụng dịch vụ tối ưu tốc độ website và các dịch vụ khác như hosting, vps, domain… các bạn có thể đăng ký tại https://portal.vietnix.vn/aff.php?aff=57 hoặc Inbox cho sếp Vietnix Trung nhé.
Các bạn có thể kiểm tra tốc độ trang của mình https://lasan.edu.vn hoặc một vài trang khác đã sử dụng dịch vụ của Vietnix như sau:
https://pagespeed.web.dev/…/https…/v8beqewyt2…
https://pagespeed.web.dev/…/https…/etiohjvtl4…
https://pagespeed.web.dev/…/https…/yczuqpw6d1…
https://pagespeed.web.dev/…/https…/xf9y65kuzk…
https://pagespeed.web.dev/…/https…/fdrsms15en…
https://pagespeed.web.dev/…/https…/s7p9cgzeri…
Trước khi tối ưu
Sau khi tối ưu
Dũng cá xinh

30 Tháng 1 lúc 19:09

·

[Đỉnh]
Em có dùng hosting, vps, cloud vps, cloud server, dedicated server của rất nhiều bên từ trong nước đến nước ngoài để hosting khoảng 2,000+ domain. Mỗi bên đều có ưu nhược khác nhau, nhưng có 1 số bên đặc biệt “bá đạo”, trong đó có: Vietnix!!!!

Lần đầu tiên em được cả CEO Hưng Nguyễn lẫn Master về dev Vietnix Trung của 1 đơn vị hàng đầu liên quan đến Hosting, Server support từ A – Z (từ Zalo, Tele, đến FB và cả Phone)

Em có khá nhiều web dạng Big Data (bài, ảnh, database, data) lên đến hàng trăm Gb. Càng to thì nó càng có nhiều vấn đề về phần phản hồi ban đầu (nhược điểm cố hữu của php wordpress so với nativejs, reactjs, html, headless,…), và anh em Vietnix có nhã ý hỗ trợ xử lý phần Speed Insight này.

Kết quả thực sự kinh ngạc, từ cách trao đổi đến xử lý vấn đề, cut off những cái cần cut off, xử lý rất sâu vấn đề và gợi ý rất nhiều ý tưởng optimize hệ thống!!!! Thực sự quá hài lòng về kết quả cũng như cách tương tác của các đầu tầu bên Vietnix ^^!!!

Nhân cơ duyên được kết nối với những cao thủ của Vietnix, em xin chia sẻ và lan tỏa để nhiều anh em có cơ hội được sử dụng những dịch vụ tốt nhất với giá vô cùng hợp lý!!!!

1 – Với anh em chưa có hosting, em đặc biệt recommend sử dụng hosting bên Vietnix:
– Sử dụng mã DUNGCAXINH_PAGESPEED sẽ được giảm 20% trọn đời (lifetime luôn)
– Áp dụng các gói Hosting Business, Hosting wordpress và reg 1 năm trở lên
– Anh em chưa biết cách reg thì còm men hoặc ib để em hướng dẫn hoặc nhờ các bạn bên Vietnix support từ A – Z

2 – Anh em có hosting rồi và muốn build blog hoặc web = wordpress mà chưa có giao diện thì nhân tiện em đang có tài khoản Premium bên Envato, em sẽ tặng bất kỳ giao diện nào có trên Envato Themes (Link em để dưới còm men) ạ. Cả nhà còm hoặc ib em Themes mà mọi người “chim ưng”, em sẽ cho anh em tải về, up drive và gửi ạ!!! (Chương trình này kéo dài đến ngày 29 tết âm lịch ạ)

3 – BEST NHẤT luôn!!!! Anh em nào mua hosting dùng mã DUNGCAXINH_PAGESPEED sẽ được tối ưu 100 điểm tốc độ cho 1 web (đây là ưu đãi riêng của CEO Hưng Nguyễn dành cho bạn bè của #dungcaxinh ^^) (Giá trị nhất là cái vụ số 3 này anh chị em nhé ^^), cơ hội vàng để move về đơn vị hosting uy tín là đây ^^!!!!

Một lần nữa xin chân thành cám ơn 2 đồng chí em: Hưng Nguyễn và Vietnix Trung đã giải được một bài toán khó cho các trang WP Big data mà anh loay hoay bao lâu nay chưa tìm ra đáp án!!! Chúc Vietnix ngày càng phát triển và có một năm 2024 đại đại thắng nhé ^^ !!!!!
#SEO #Vietnix #dungcaxinh

Trước khi tối ưu
Sau khi tối ưu
Hiếu AI

2 Tháng 2 lúc 21:06

·

UY TÍN – TẬN TÂM – TỐC ĐỘ

3 từ trên là vẫn chưa đủ để nói về quy trình làm việc cực chuyên nghiệp của team Vietnix.Chuyện là mình có con website chính đang có lượt truy cập organic hàng ngày cũng tương đối (hình 1)

Vấn đề là, con site này đang nằm trên hosting dùng chung nên tốc độ load chưa nhanh, tốc độ load chưa nhanh thì trải nghiệm visitor chưa tốt, trải nghiệm visitor chưa tốt thì tỷ lệ chuyển đổi ra đơn hàng kiểu gì thì kiểu cũng sẽ bị ảnh hưởng.

Biết rõ là đang mất tiền nhưng không biết xử lý như lào, nghĩ mà cay.

Đang loay hoay thì vận may nó tới, hôm qua đang lướt phở bò thấy a Nguyễn Việt Dũng đăng bài, rảnh nên thả cái comment hóng hớt, ai ngờ ngoằng phát thấy ông Dũng tạo nhóm với Vietnix Trung luôn.

Ae Vietnix thì siêu tốc độ, lập tức lấy thông tin vào việc, không hỏi han lằng nhằng, không kỳ kèo chốt đơn dù lúc đấy cũng đang đêm muộn.
Sáng hôm sau dậy vẫn còn đang lơ ngơ mở điện thoại check tin nhắn thì đã thấy ae Vietnix báo xong việc, trong khi mình vẫn chưa biết có chuyện gì xảy ra @@.

Được cái bấm thử website thì thấy load siêu nhanh, chưa tới một giây là thông tin các thứ hiện hết. Quá phê, thả con ảnh trước sau (hình 2,3) để ace tiện đối chiếu nhé. Thế này thì mình gửi gắm nốt 15 em website còn lại cho team Vietnix thôi chứ không cần nghĩ ngợi gì nữa. 10/10.

Nên là:

  1. Anh chị em muốn có một con website tốc độ load nhanh như tốc độ trở mặt của nyc – Dùng ngay dịch vụ hosting của Vietnix
  2. Anh chị em có website rồi muốn tìm bên hosting uy tín, chuyên nghiệp hỗ trợ không quản ngày đêm – Liên hệ ngay Vietnix Trung
  3. Anh chị em quan tâm đến trải nghiệm khách hàng, từ những cái nhỏ nhất như tăng tốc độ website – Better call Vietnix Trung

Và đừng quên dùng pass “HIEUAI_PAGESPEED” để được giảm 20% trọn đời hosting business và wp hosting, quả code này còn được tặng 1 lần tối ưu pagespeed nữa nhé, ưu đãi chắc cũng phải nhất nhì thị trường luôn.
#SEO #Vietnix #hieuai

Website
Trước khi tối ưu
Sau khi tối ưu

Chỉ số tăng trưởng

Điểm Desktop

100 (+43)

Điểm Mobile

100 (+74)

Core Web Vitals

Passed

Lĩnh vực

AI