Giới Thiệu

Cumulative Layout Shift (CLS) là một trong những chỉ số quan trọng thuộc bộ Web Vitals mà Google sử dụng để đo lường trải nghiệm người dùng trên trang web. CLS đánh giá mức độ ổn định hình ảnh của trang trong quá trình tải và khi người dùng tương tác. Chỉ số này phản ánh mức độ mà nội dung của trang thay đổi không mong muốn trong suốt thời gian tồn tại của nó. Một giá trị CLS cao có thể gây khó chịu cho người dùng, ảnh hưởng đến trải nghiệm và sự hài lòng của họ. Trong bài viết này, chúng ta sẽ tìm hiểu cách tối ưu CLS để cải thiện trải nghiệm người dùng.

Cách Tính CLS

CLS được tính bằng cách cộng các điểm số của tất cả các thay đổi bố cục xảy ra trong suốt thời gian tồn tại của trang. Mỗi thay đổi bố cục được tính bằng cách nhân diện tích của viewport bị thay đổi với khoảng cách di chuyển của phần tử.

Công thức tính CLS:

CLS = Layout Shift Score
Layout Shift Score = Impact Fraction * Distance Fraction

Trong đó:

• Impact Fraction: Phần trăm của viewport bị ảnh hưởng bởi sự thay đổi bố cục.
• Distance Fraction: Khoảng cách di chuyển của phần tử so với kích thước viewport.

Dưới đây chúng ta có một hình ảnh ví dụ:

Trong hình ảnh trái, có một phần tử chiếm một nửa khung nhìn trong một khung hình. Sau đó, trong khung tiếp theo, phần tử dịch chuyển xuống 25% chiều cao của khung nhìn. Hình chữ nhật màu đỏ có nét đứt thể hiện phần diện tích hiển thị của thành phần kết hợp trong cả hai khung, trong trường hợp này là 75% tổng khung nhìn, do đó Impact Fraction của thành phần này là 0.75.

Distance Fraction đo lường khoảng cách mà các phần tử không ổn định đã di chuyển so với khung nhìn. Phân đoạn khoảng cách là khoảng cách lớn nhất theo chiều ngang hoặc chiều dọc mà bất kỳ phần tử không ổn định nào đã di chuyển trong khung hình, chia cho kích thước lớn nhất của khung nhìn (chiều rộng hoặc chiều cao, tuỳ theo giá trị nào lớn hơn).

Kích thước lớn nhất của khung nhìn là chiều cao và phần tử không ổn định đã dịch chuyển 25% chiều cao khung nhìn, tương ứng với phần khoảng cách bằng 0.25 => Distance Fraction = 0.25

Từ các thông số trên Layout Shift Score là 0.75 * 0.25 = 0.1875.

Nguyên Nhân Gây Ra CLS Cao:

• Không Đặt Kích Thước Cố Định Cho Ảnh và Video: Khi các phần tử như hình ảnh hoặc video được tải mà không có kích thước cố định, chúng có thể làm thay đổi bố cục trang khi nội dung được tải hoàn toàn.
• Chèn Nội Dung Động: Thêm nội dung động như quảng cáo, video nhúng hoặc các phần tử không đồng bộ có thể làm thay đổi bố cục trang khi chúng được tải.
• Sử Dụng Phông Chữ Tuỳ Chỉnh: Khi phông chữ tùy chỉnh được tải, kích thước của văn bản có thể thay đổi, gây ra sự thay đổi bố cục.

Một số cách Tối Ưu CLS:

1. Đặt Kích Thước Cố Định Cho Các Phần Tử Media

Luôn đảm bảo rằng bạn đặt thuộc tính width và height cho các phần tử hình ảnh và video. Điều này giúp trình duyệt biết trước kích thước của chúng và phân bổ không gian phù hợp trên trang trước khi nội dung được tải.

<img src="example.jpg" width="600" height="400" alt="Example Image"> 

2. Tránh Chèn Nội Dung Động Bất Ngờ

Khi thêm nội dung động, hãy chắc chắn rằng bạn dự trữ không gian cho chúng hoặc thêm chúng vào một vị trí cố định để không gây ra sự thay đổi bố cục. Đối với quảng cáo, bạn có thể sử dụng container có kích thước cố định hoặc sử dụng kỹ thuật lazy-loading.

<div style="width: 300px; height: 250px;"> <!-- Quảng cáo sẽ được tải vào đây -->
</div> 

Sử dụng kỹ thuật lazy-loading cho hình ảnh và video để đảm bảo rằng nội dung chỉ được tải khi nó xuất hiện trong viewport:

<img src="example.jpg" width="600" height="400" loading="lazy" alt="Example Image"> 

3. Sử Dụng Phông Chữ Hệ Thống hoặc Tải Phông Chữ Tuỳ Chỉnh Một Cách Hợp Lý

Để tránh sự thay đổi bố cục khi tải phông chữ tùy chỉnh, bạn có thể sử dụng thuộc tính font-display: swap trong CSS để hiển thị phông chữ hệ thống trước khi phông chữ tùy chỉnh được tải.

@font-face { font-family: 'CustomFont'; src: url('customfont.woff2') format('woff2'); font-display: swap;
} 

Điều này giúp đảm bảo rằng văn bản hiển thị ngay lập tức bằng phông chữ hệ thống và sẽ được thay thế bởi phông chữ tùy chỉnh khi nó đã tải xong, mà không gây ra sự thay đổi bố cục lớn.

4. Đảm Bảo Không Gian Trống Cho Các Thành Phần Khác Nhau

Nếu bạn biết rằng một thành phần sẽ được thêm vào sau khi trang đã tải, hãy dành không gian trống cho thành phần đó ngay từ đầu để tránh sự thay đổi bố cục.

Ví dụ: Nếu bạn biết rằng một thông báo hoặc banner sẽ xuất hiện sau khi người dùng tương tác, hãy dành không gian trống cho nó ngay từ khi trang được tải.

.banner { min-height: 50px; /* Không gian trống cho banner */
} 

Công Cụ Đo Lường và Theo Dõi CLS

1. Chrome DevTools

Chrome DevTools cung cấp các công cụ mạnh mẽ để phân tích và tối ưu hóa hiệu suất trang web, bao gồm CLS. Bạn có thể mở DevTools (F12 hoặc Ctrl+Shift+I), chuyển đến tab "Performance" và thu thập số liệu về CLS.

2. Lighthouse

Lighthouse là một công cụ tự động hóa mã nguồn mở được sử dụng để cải thiện chất lượng trang web. Nó có thể chạy trên bất kỳ trang web nào, công khai hoặc được bảo vệ bởi mật khẩu, và cung cấp các báo cáo chi tiết về hiệu suất, khả năng truy cập, SEO và hơn thế nữa.

lighthouse https://example.com --output json --output html --save-assets 

3. PageSpeed Insights

PageSpeed Insights là một công cụ trực tuyến của Google cung cấp các báo cáo chi tiết về hiệu suất trang web, bao gồm CLS. Bạn chỉ cần nhập URL của trang web và công cụ sẽ phân tích trang và cung cấp các đề xuất tối ưu hóa. https://pagespeed.web.dev/

4. WebPageTest

WebPageTest là một công cụ mạnh mẽ cho phép bạn kiểm tra hiệu suất trang web từ nhiều vị trí khác nhau trên thế giới và trên các trình duyệt khác nhau. Nó cung cấp các số liệu chi tiết về CLS và các chỉ số hiệu suất khác. https://www.webpagetest.org/

Kết Luận

Tối ưu hóa Cumulative Layout Shift (CLS) không chỉ giúp cải thiện điểm số Core Web Vitals của bạn mà còn mang lại trải nghiệm người dùng mượt mà và nhất quán hơn. Bằng cách đặt kích thước cố định cho các phần tử media, tránh chèn nội dung động một cách bất ngờ, sử dụng phông chữ hệ thống hoặc tải phông chữ tùy chỉnh một cách hợp lý, và đảm bảo không gian trống cho các thành phần khác nhau, bạn có thể giảm thiểu CLS và nâng cao chất lượng trang web của mình. Trên đây là những điều mình biết về CLS muốn chia sẻ với mọi người, hi vọng có thể giúp ích trong công việc của các bạn. Cảm ơn các bạn đã dành thời gian để đọc bài viết và hẹn gặp lại các bạn trong các bài viết sau nhé