Đã bao giờ bạn đang đọc một bài báo và bất ngờ một nội dung khác bất ngờ xuất hiện đẩy nội dung bạn đang đọc xuống?
Việc các phần tử của trang thay đổi trong khi người dùng đang cố gắng tương tác với trang là một trải nghiệm kém. Thông thường, những trải nghiệm như vậy chỉ gây khó chịu, nhưng trong một số trường hợp, chúng có thể gây ra thiệt hại thực sự như doanh thu. Trong bài này, tôi sẽ giới thiệu với các bạn về số liệu Dịch chuyển bố cục tích lũy (CLS), một chỉ số giúp bạn đo lường và đưa ra báo cáo chính xác về các vấn đề về thay đổi bố cục trên website. Từ đó bạn biết được nguyên nhân cốt lõi gây ra vấn đề này và đi vào xử lý chúng.
Chỉ số CLS là gì ?
Cumulative Layout Shift là một chỉ số quan trọng đo độ ổn định và mức thay đổi bố cục bất ngờ của nội dung trang hiển thị trong suốt quá trình tải.
Trang web có trải nghiệm người dùng tốt là trang web có điểm CLS dưới 0,1. Nếu ít nhất 75 % các trang của một website đáp ứng ngưỡng CLS tốt, thì trang web đó được phân loại hiệu suất CLS tốt.
Những sự thay đổi không mong muốn của nội dung trang thường xảy ra do tài nguyên được tải không đồng bộ, hoặc các phần tử DOM được thêm động (dynamic) vào trang phía trên nội dung hiện có. Nguyên nhân có thể là hình ảnh hoặc video có kích thước không xác định, phông chữ hiển thị lớn hơn hoặc nhỏ hơn so với dự tính hoặc quảng cáo hoặc tiện ích của bên thứ ba tự động thay đổi kích thước.
Các nguyên nhân phổ biến nhất dẫn đến chỉ số CLS kém?
Để website của bạn có thể đạt chỉ số CLS cao, trước tiên bạn cần biết được các nguyên nhân cốt lõi gây ra vấn đề này. Những nguyên nhân phổ biến tôi sẽ liệt kê cho bạn như sau:
- Hình ảnh không có kích thước.
- Cách load phông chữ gây ra vấn đề về FOIT/FOUT
- Mã nhúng và iFrame không có kích thước.
- Các nội dung động (Dynamic Contents)
- Tốc độ trang Website
- Animations
Cách xử lý giúp cải thiện điểm số CLS
Hình ảnh không có kích thước:
- Nguyên nhân: Hình ảnh không có kích thước là những hình ảnh không có thông số kỹ thuật về chiều rộng và chiều cao. Khi bạn truy cập một trang web mà các hình ảnh không có kích thước như vậy, trình duyệt sẽ không dành bất kỳ khoảng không gian nào cho những hình ảnh đó. Vì hình ảnh có kích thước lớn hơn HTML và CSS nên chúng được tải sau. Và một khi hình ảnh được tải, chúng sẽ đẩy nội dung dưới nó khỏi vị trí ban đầu gây ra sự thay đổi bố cục.
- Giải pháp: Giải pháp cho bạn là định nghĩa giá trị các thuộc tính width và height trên các phần tử hình ảnh và video. Cách tiếp cận này đảm bảo rằng trình duyệt có thể phân bổ không gian chính xác cho các phần tử trước khi hình ảnh được tải. Để xác định các ảnh thiếu kích thước bạn dùng công cụ Lighthouse (cách đo tôi đã nói phía trên). Tiếp theo bạn tìm các hình ảnh đó trong source code và thêm thuộc tính width và height cho ảnh...
Các vấn đề FOUT/FOIT của font chữ
Nguyên nhân:
Không quá ngạc nhiên, font là một trong những lý do hàng đầu gây ra các vấn đề về tốc độ trang, bao gồm cả điểm CLS. Hầu như tất cả các trang web ngày nay đều sử dụng ít nhất một phông chữ custom (phông chữ từ Google Fonts hoặc các nguồn khác). Và vì những phông chữ đó có kích thước và khoảng cách khác với phông chữ trình duyệt mặc định, khi phông chữ custom được tải xong, nó sẽ gây ra sự thay đổi bố cục trên toàn bộ trang web.
Quá trình tải và hiển thị có thể gây ra vấn đề CLS theo hai cách sau:
- Trong quá trình tải, văn vản sẽ hiển thị theo phông chữ mặc định của trình duyệt và đổi lại thành phông chữ custom khi tải xong, gây ra hiện tượng FOUT – flash of unstyled text
- Chữ bị ẩn đi cho đến khi font chữ custom được tải xong, gây ra hiện tượng FOIT – flash of invisible text
Giải pháp:
- Nếu các tập tin fonts được host trực tiếp trên server, bạn có thể tải trước font sử dụng thuộc tính rel="preload".
- Trường hợp sử dụng font từ bên thứ ba như Google Font: Đầu tiên bạn sử dụng thuộc tính preconnect để thiết lập kết nối đến fonts.gstatic.com, sau đó dùng preload để ưu tiên tải trước tập tin.
Mã nhúng và iFrame:
Nguyên nhân: Mã nhúng cho phép bạn hiển thị nội dung web từ nơi khác trên trang của bạn – ví dụ: video YouTube, Google Maps, bài đăng trên Instagram, v.v. Tuy nhiên, có một vấn đề là hầu hết các tiện ích không bao gồm trước kích thước chính xác của nội dung được nhúng.
Giải pháp: Giải pháp để bạn có thể vừa giúp trình duyệt xác định trước kích thước của mã nhúng, vừa giữ được tỉ lệ khung hình khi responsive.
Nội dung động (Dynamic Contents)
Nguyên nhân: Có thể bạn đã gặp phải sự thay đổi bố cục do giao diện người dùng, khi các phần tử bất ngờ hiện lên ở đầu hoặc cuối khung hình trên trang web. Nội dung động có khá nhiều loại, ví dụ như: — related contents (nội dung liên quan), newsletter signup forms (biểu mẫu đăng kí), hoặc sticky notification bars (các thanh thông báo). Cách đơn giản nhất là chèn nội dung động bên dưới nội dung hiện có. Trừ trường hợp khi bạn phải hiển thị một nội dung động ở trên để phản hồi lại tương tác của người dùng.
Giải pháp: Nếu bắt buộc phải chèn nội dung động bên trên nội dung hiện có, bạn cần xác định trước khoảng không gian cho nội dung động đó (ví dụ như tạo placeholder hoặc skeleton UI), với mục đích bảo toàn bố cục trang web khi tải.
Tốc độ trang Web
Bất kỳ sự thay đổi nào về bố cục để phản hồi với tương tác của người dùng đều là những sự thay đổi tốt. Tuy nhiên, trang web của bạn phải tải bất cứ thứ gì nó cần tải trong vòng 0,5 giây (500 mili giây) kể từ lần tương tác cuối cùng của người dùng để không bị tính vào điểm CLS . Vì vậy, về cơ bản, việc tối ưu hóa trang web của bạn để tăng các chỉ số về speed (tốc độ) và responsiveness (sự phản hồi) thực sự quan trọng đối với điểm CLS của trang web.
Animations (Hiệu ứng chuyển động)
Nguyên nhân: Animations chắc chắn có thể nâng cao trải nghiệm người dùng chỉ khi bạn tích hợp vào trang web một cách chính xác. Nếu một hiệu ứng chuyển động gây ra sự thay đổi về kích thước như width và height của một phần tử, nó sẽ dẫn đến sự thay đổi vị trí, hậu quả dẫn đến vấn đề CLS.
Giải pháp:
- Thay vì biến đổi thuộc tính height và width của một phần tử, hãy sử dụng transform: scale().
- Để dịch chuyển một phần tử, tránh thay đổi các thuộc tính top, right, bottom, left, và thay vào đó là transform: translate().
- Chắc chắn rằng các hiệu ứng chuyển động kéo dài dưới 500ms. Bạn nên sử dụng linear animation, có tốc độ không đổi, thay vì “ease”, tăng tốc độ tại thời điểm đầu và chậm lại ở cuối chuyển động và có thời gian thực thi lâu hơn.
- Để tìm hiểu thêm các thuộc tính CSS nào gây thay đổi bố cục trang web, bạn tham khảo thêm CSS Triggers và High-performance animations
Kết luận
Việc tối ưu hóa điểm CLS là một quá trình dài và gồm nhiều quá trình. Mặc dù nó có thể không có tác động đáng kể đến xếp hạng công cụ tìm kiếm tại thời điểm hiện tại so với các chỉ số Core Web Vitals khác, nhưng vì Google ngày càng thu thập nhiều thêm dữ liệu trường liên quan đến điểm CLS, đây sẽ trở thành một số liệu quan trọng trong thời gian tới.
Ngoài ra, bằng cách loại bỏ hoặc giảm các thay đổi về bố cục, bạn sẽ cải thiện trải nghiệm người dùng trên trang web của mình, do đó có thể dẫn đến sự gia tăng chuyển đổi và tỷ lệ chuyển đổi (CTR). Bất kể bạn nhìn vào nó như thế nào, tối ưu hóa điểm CLS luôn đem lại những lợi ích đáng kể.
