Tối ưu CLS (Cummulative Layout Shift) – một trong 3 chỉ số để đo lường Core Web Vitals – là một việc cần thiết nếu bạn muốn website có thứ hạng tốt trên Google. Và nếu bạn không biết bắt đầu từ đâu, thì hãy theo dõi các bước dưới đây.

1. Cummulative Layout Shift trên WordPress là gì?

Đã bao giờ bạn đọc tin tức ở các website mà phần nội dung bị đẩy xuống vì các hình ảnh, video chưa được tải? Đó chính là một ví dụ điển hình của Cumulative Layout Shift.

CLS là trường hợp nội dung website bị “chuyển đổi” (shift) khi một số yếu tố nào đó (chẳng hạn hình ảnh, video, các banner quảng cáo,…) đang được tải. Điều này gây khó chịu cực kỳ khi lướt web. Vậy nên Google luôn khuyến khích chúng ta chú ý và cải thiện chỉ số này.

2. Vậy thế nào là một điểm số CLS tốt?

Google đưa ra 3 giá trị hiện có như sau:

• Tốt:
• Cần cải thiện: dao động từ 0.1 – 0.25
• Yếu: >0.25

3. Làm thế nào để tìm ra yếu tố nào đang “thay đổi” trên website?

Trước khi tối ưu CLS, chúng ta phải tìm ra những vấn đề mà website mình đang gặp phải. Và PageSpeed Insights – công cụ cây nhà lá vườn của Google – cung cấp phương thức chẩn đoán khá ổn.

Để bắt đầu sử dụng PageSpeed Insights, bạn chỉ cần dán đường link vào và chờ công cụ tự phân tích. Ở phần trên, bạn sẽ thấy tổng hợp điểm CLS. Ngoài ra, PageSpeed Insights cũng cho phép bạn phân tích sâu hơn và khám phá những yếu tố cụ thể đang “chuyển đổi”.

Để tìm phần phân tích này, bạn hãy kéo xuống phần Diagnostics và mở phần Avoid large layout shifts. Ở chỗ này bạn có thể thấy những yếu tố chính gây nên CLS.

Và đừng quên xem phân tích trên cả 2 nền tảng Điện thoại (Mobile) và Máy tính (Desktop). Vì những nhân tố tạo nên kết quả trên 2 loại thiết bị có thể không giống nhau.

Một cách khác để xem các nội dung đang bị thay đổi là sử dụng Chrome Developer Tools để làm chậm kết nối của bạn (giả lập thôi chứ không phải chậm thật), từ đó dễ dàng phát hiện ra những nội dung đang thay đổi một cách tinh vi.

Để làm được điều này, hãy truy cập tab Network trong Chrome Developer Tools và sử dụng network condition.. để cài đặt giá trị cực thấp, chẳng hạn 60kb/s. Sau đó tải lại website và bạn sẽ thấy ngay những nội dung đang bị thay đổi khi tải.

Một khi đã biết được nguyên nhân, thì tìm cách khắc phục cũng không quá khó nữa. Ngoài ra cũng có một vài giải pháp CLS toàn diện mà bạn nên áp dụng để cải thiện trên toàn website. 

4. Làm thế nào để tối ưu CLS trên WordPress?

Không giống như cải thiện Largest Contentful Paint trên WordPress, việc tối ưu CLS dính một chút đến kỹ thuật, thậm chí đào sâu vào việc code web. Mặc dù không thể tránh khỏi, nhưng mình sẽ cố gắng giới thiệu các giải pháp plugin đơn giản nhất có thể.

a. Luôn cài đặt kích thước hình ảnh

Nếu bạn không cài đặt kích thước hình ảnh khi hiển thị, thì hình ảnh khi tải có thể gây nên tình trạng thay đổi các phần còn lại trong nội dung.

Nếu bạn thêm hình ảnh thông qua trình chỉnh sửa của WordPress, thì WordPress sẽ tự động làm việc này. Tuy nhiên, nếu bạn thêm ảnh thủ công bằng code, thì hãy luôn nhớ kèm theo kích thước. Chẳng hạn:

width=”520″ height=”314″ />

b. Luôn cài đặt kích thước cho Embeds/ iframes

Cũng giống như hình ảnh, bạn cần cài đặt kích thước của các yếu tố được nhúng vào hoặc iframes.

Chẳng hạn, nếu bạn nhúng một video YouTube hoặc Google Maps vào website, hãy đảm bảo mình đã cài đặt chiều cao và chiều rộng cho các phầ này. Hoặc bạn cũng có thể tải một trình giữ chỗ trước khi nhúng các yếu tố này vào.

Hiện tại có rất nhiều giải pháp cho phép bạn thay thế video nhúng từ YouTube bằng các hình ảnh giữ chỗ (dĩ nhiên khi người dùng nhấp vào thì video vẫn chạy như thường), chẳng hạn WP Rocket.

Xem thêm: So sánh Swift Performance và WP Rocket – Đâu là cache plugin tốt nhất

c. Giữ chỗ trống cho các quảng cáo

Quảng cáo cũng là một dạng khác của các phần nhúng vào website, tuy nhiên bạn cần đặc biệt lưu ý vì đây là một trong những yếu tố lớn nhất dẫn đến CLS.

Giải pháp cho vấn đề này là giữ một chỗ trống trên website cho quảng cáo ngay trong phần code website. Chẳng hạn, bạn muốn hiển thị một banner quảng cáo 160×160 ở sidebar. Thay vì thêm thẳng phần quảng cáo này trong code, hãy đặt chúng trong thẻ