Hướng dẫn lazyload hình ảnh với plugin LiteSpeed Cache

Hướng dẫn lazyload hình ảnh với plugin LiteSpeed Cache, tăng tốc độ load cho website của bạn.

Nếu các bạn còn nhớ thì trước đây tôi đã từng có 1 bài viết giới thiệu về plugin lazyload hình ảnh chính thức từ Google rồi phải không nào? Trong một thời gian khá dài, tôi đã sử dụng plugin này tăng tốc độ load cho blog WP Căn bản cũng như các site vệ tinh trong hệ thống. Cho đến ngày Google giới thiệu thuật toán xếp hạng trải nghiệm trang, việc blog bị đánh giá load chậm trên mobile đã buộc tôi phải tìm một giải pháp khác. Lúc này, LiteSpeed Cache lại một lần nữa được gọi tên.

Tham khảo thêm:

• Lazyload hình ảnh với plugin chính thức từ Google
• Hướng dẫn load ảnh WebP bằng plugin LiteSpeed Cache

Tại sao tôi quay về với lazyload của LiteSpeed Cache?

Có 2 nguyên nhân chính:

• LiteSpeed Cache đang là plugin chủ lực mà tôi sử dụng để tối ưu tốc độ load cho wpcanban.com. Việc sử dụng luôn tính năng lazyload của nó sẽ tạo ra sự đồng bộ, giúp website hoạt động mượt mà hơn, ổn định hơn, tương thích tốt hơn với các tính năng khác của plugin LiteSpeed Cache.
• Nhanh và nhẹ hơn những plugin như “Native Lazyload” hay “Lazy Loading Feature Plugin” rất nhiều. Tôi đã test thử với GTmetrix và nhận thấy rằng việc chuyển từ các plugin hỗ trợ native lazyload sang lazyload của LiteSpeed Cache giúp giảm khoảng 50KB page-size trang chủ của wpcanban.com (từ khoảng 155KB xuống còn 105KB). Đối với những plugin lazyload khác thì càng không cần phải bàn đến.

Lazyload hình ảnh với plugin LiteSpeed Cache

1. Trước tiên, hãy đảm bảo bạn đã tắt tính năng lazyload hình ảnh của theme (nếu nó được tích hợp sẵn) cũng như xóa bỏ những plugin có tính năng tương tự được cài đặt trước đó.

2. Tiếp theo, truy cập LiteSpeed Cache => Page Optimization => [4] Media Settings => Thiết lập tương tự như hình bên dưới.

Trong đó:

• Chuyển các mục Lazy Load Images, Responsive Placeholder và Lazy Load Iframes sang trạng thái ON. Việc này không những giúp bạn lazyload hình ảnh mà còn lazyload cả các iframe nữa.
• Đối với các mục còn lại, các bạn để trạng thái OFF hoặc theo mặc định của plugin.
• Riêng đối với mục Inline Lazy Load Images Library, các bạn nên test thử tốc độ khi để ở trạng thái ON/ OFF để đưa ra lựa chọn phù hợp nhất. Cái này tùy thuộc vào từng website mà sẽ có hiệu quả khác nhau.

Click vào nút Save Changes để lưu lại. Xóa cache của LiteSpeed (Purge All – LSCache) và sử dụng các công cụ như GTmetrix hay Google PageSpeed Insights để kiểm tra kết quả. Chúc các bạn thành công!

Bạn có đang sử dụng tính năng lazyload hình ảnh trên website WordPress của mình không? Bạn đã sử dụng plugin hay tính năng có sẵn của theme để làm điều đó? Hãy cho chúng tôi biết ý kiến của bạn về tính năng lazyload của plugin LiteSpeed Cache thông qua khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)