Bí quyết tối ưu CLS (Cumulative Layout Shift) trên WordPress
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...
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.
[toc]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: < 0.1
- 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:
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ẻ <div> cùng với kích thước của quảng cáo.
Cách này giúp website biết được và “giữ” một chỗ cho phần quảng cáo, ngay cả khi quảng cáo chưa kịp tải cùng lúc với những nội dung chính khác. Khi tải xong thì quảng cáo cũng không làm thay đổi các nội dung khác.
Ngoài ra cần cẩn thận khi đặt quảng cáo gần phía trên khu vực hiển thị nội dung (viewport) của người dùng, vì đặt ở đây rất dễ gây ra tình trạng CLS.
Xem thêm: Làm thế nào tối đa hóa lợi nhuận quảng cáo
d. Cải thiện bằng font load
Một trong những vấn đề chính của CLS là do cách website tải font. Chẳng hạn nếu bạn sử dụng font chữ từ Google Fonts hoặc Adobe Fonts, thì những font chữ có thể gây CLS bằng 2 cách:
- Flash of Invisible Text (FOIT)
- Flash of Unstyled Text (FOUT)
Về cơ bản, đây là hiện tượng khi trình duyệt của người dùng cố gắng hiển thị đoạn văn bản trước khi font chữ load xong. Khi font chữ đã load, nó sẽ cập nhật kiểu dáng văn bản, dẫn đến tình trạng thay đổi các yếu tố nội dung trên website.
Xem thêm: 17 Google Font tốt nhất hiện nay và cách áp dụng cho WordPress
Có nhiều cách để giải quyết vấn đề này. Cách thứ nhất là tải trước các font quan trọng. Điều này sẽ giúp trình duyệt tải các font này ngay lập tức, loại bỏ nguy cơ FOIT hay FOUT. Tuy nhiên hãy chỉ tải trước các tài nguyên quan trọng nhất, vì lạm dụng tải trước sẽ khiến website rất chậm.
Bạn có thể cài đặt tải trước các font trong phần Extra của plugin Autoptimize (miễn phí)
Đối với Google Fonts, bạn có thể lưu trữ font tại hosting của chính bạn bằng plugin OMGF (miễn phí).
Còn nếu bạn thực sự muốn chấm dứt tình trạng này, thì hãy thử dùng font sẵn có trong hệ thống. Việc này không những giải quyết vấn đề font load, mà còn giảm các yêu cầu HTTP và giúp website nhanh hơn. Một số theme như GeneratePress cho phép bạn dễ dàng sử dụng các font hệ thống. Tuy nhiên hãy nhớ rằng việc sử dụng font hệ thống hạn chế khả năng định dạng tùy chỉnh rất nhiều.
e. Cẩn thận với các nội dung thêm vào tự động
Nếu bạn đang tự động chèn các nội dung như biểu mẫu đăng ký email, các nội dung liên quan, thông báo GDPR,… thì hãy sử dụng cẩn thận để tránh CLS.
Nói chung, tốt nhất là đừng sử dụng các nội dung chèn tự động, nếu nó không liên quan đến tương tác với người dùng. Chẳng hạn, nếu bạn muốn thêm một số phần tử CTA tự động, hãy cố gắng đặt chúng bên dưới hay thì bên trên hay ở giữa bài viết.
Với những cách thức kể trên, bạn có thể tự mình tối ưu CLS và đạt được thứ hạng tốt hơn trên Google. Dĩ nhiên, tối ưu CLS cũng chỉ là 1 trong 3 chỉ số tạo nên Core Web Vitals. Để có kết quả tốt nhất, bạn cũng cần chú ý đến 2 yếu tố kia.
Xem thêm: Hướng dẫn tăng tốc WordPress toàn tập từ A-Z cho người mới
Diều Hâu
