10 mẹo cải thiện chỉ số CLS cho website

CLS là gì?

Chỉ số CLS (Cumulative Layout Shift) là một chỉ số trong Core Web Vitals của Google, đo lường sự thay đổi bố cục của các phần tử trên trang web trong suốt thời gian tải. Nó đánh giá mức độ ổn định của trang web khi các phần tử (như văn bản, hình ảnh, video, hoặc các quảng cáo) thay đổi vị trí mà không có sự tương tác của người dùng.

CLS càng thấp thì càng tốt, cho thấy trang web có bố cục ổn định, không làm người dùng khó chịu hoặc bấm nhầm do các phần tử di chuyển. Một trang web lý tưởng sẽ có CLS dưới 0.1 để đảm bảo trải nghiệm người dùng tốt.

Làm sao để cải thiện chỉ số CLS?

Có rất nhiều mẹo để cải thiện chỉ số CLS xuống thấp, hôm nay Web100 sẽ chỉ cho bạn kinh nghiệm giảm thiểu chỉ số này xuống con số cực thấp, qua đó tăng chất lượng website của mình.

Đầu tiên đối với hình ảnh, các bạn cần xác định trước khi tải xong thì không gian của ảnh sẽ chiếm kích thước bao nhiêu, từ đó set trước giá trị của width và height cho thẻ img. Bằng cách này sẽ giúp bố cục ảnh không bị thay đổi. Ngoài image thì video và iframe cũng áp dụng được mẹo này.

Đối với font chữ, các bạn cần tải font chữ càng sớm càng tốt. Cách đơn giản nhất là các bạn thêm thuộc tính async cho font chữ để tải font cùng lúc với tải website. Font chữ là yếu tố ảnh hướng rất lớn tới chỉ số CLS mà nhiều bạn thường bỏ qua.

Đối với các css khác, một mẹo mà mình học được từ một đàn anh trong ngành, đó là hãy load css internal, có nghĩa là thay vì dùng link tới file css thì hãy tải trực tiếp css trong file html. Khi đó css sẽ được tải rất nhanh và giúp chỉ số CLS giảm xuống tối đa.

Nhiều bạn sẽ nói rằng cách trên khiến cho file html nặng thêm. Đúng vậy, nhưng tổng thể thì kích thước nó không hề thay đổi. Bằng cách này bạn còn giúp tăng tốc độ tải trang nhờ việc hạn chế request tới các file tĩnh ở lần tải lần đầu tiên. Còn ở lần sau, vì không tận dụng cơ chế cache của trình duyệt nên đúng là tốc độ sẽ chậm đi, tuy nhiên theo như mình thấy là không đáng kể.

Cách này còn đặc biệt hữu hiệu với google bot, vì google bot chỉ truy cập không sử dụng cache, do đó nó sẽ được google đánh giá cao. Còn đối với người dùng, như mình nói ở trên, ở lần request 2 3 có thể sẽ bị chậm. (nhưng khó lòng mà nhận ra)

Hiện tại website tại hệ thống Web100 đang sử dụng cả 3 cách này và CLS đạt chỉ số cực thấp, chỉ từ 0-5ms.

Một số mẹo khác từ chatGPT

1. Đối với các quảng cáo hoặc các phần tử được chèn động, hãy dành một không gian cố định đủ lớn để chứa chúng, tránh việc thay đổi bố cục khi chúng tải.

2. Tránh chèn nội dung động vào giữa trang:
 - Khi chèn nội dung mới, hãy đảm bảo nó không đẩy các phần tử khác xuống hoặc sang một bên. Nội dung này nên được chèn ở cuối trang hoặc ở những khu vực đã có không gian trống.

3. Tải phông chữ một cách hợp lý
- Sử dụng các phông chữ hiển thị mặc định (fallback fonts) cho đến khi phông chữ chính được tải xong, tránh việc thay đổi kiểu dáng và kích thước phông khi tải phông chữ tùy chỉnh.
- Sử dụng CSS như `font-display: swap;` để giảm tác động của việc tải phông.

4. Tải trước các tài nguyên quan trọng:
- Sử dụng thẻ `<link rel="preload">` cho các tài nguyên quan trọng (như phông chữ, hình ảnh hoặc CSS) để chúng tải nhanh hơn và giảm thiểu sự thay đổi bố cục.

5. Tránh thêm các phần tử hoặc lớp CSS muộn:
- Tránh thay đổi hoặc thêm các phần tử hoặc lớp CSS thông qua JavaScript sau khi trang đã tải xong. Nếu bắt buộc phải thay đổi, hãy đảm bảo không làm ảnh hưởng đến bố cục tổng thể. 

6. Kiểm tra và tối ưu hóa hoạt động của quảng cáo và các tiện ích bên thứ ba:
- Đảm bảo các quảng cáo hoặc tiện ích được nhúng từ bên thứ ba có kích thước cố định và không thay đổi kích thước sau khi tải xong.
- Kiểm tra để chắc chắn rằng việc tải các quảng cáo không ảnh hưởng tiêu cực đến bố cục trang.

Trên đây là các mẹo mà chúng tôi đã áp dụng và tham khảo từ nhiều nguồn, nếu bạn quan tâm về các kinh nghiệm SEO đặc biệt là SEO onpage thì hãy theo dõi trang blog của WEB100 thường xuyên nhé!