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
OFFhoặ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. :)
Bài viết rất hữu ích, cám ơn bác.
Sau khi tối ưu bằng LSC với các bài hướng dẫn của bác thì điểm số đã xanh lè :D.
Còn một vấn đề em đang thiết lập chưa được là sau khi tối ưu và lazyload ảnh thì ảnh hiển thị rất rất chậm, ảnh hưởng rất lớn đến người đọc :(
Em đã tắt lazyload của theme và đang dùng lazyload của LSC như bài hướng dẫn của bác. WP cũng mặc định có lazyload vậy có nên tắt lazyload của LSC hay của wp (em đang dùng wp 6.3.2) để tối ưu người dùng hơn không ạ? Hay bác có thể gợi ý thêm cách nào để hiển thị ảnh tốt hơn không ạ?
Cám ơn bác.
1. “ảnh hiển thị rất rất chậm, ảnh hưởng rất lớn đến người đọc” => bản chất của lazyload hình ảnh là ưu tiên hiển thị text trước, hiển thị hình ảnh sau. Nếu bạn muốn giảm thiểu mức độ delay của hình ảnh thì vào LiteSpeed Cache => Page Optimization => [5] VPI => chuyển các mục Viewport Images và Viewport Images Cron sang trạng thái ON.
2. “WP cũng mặc định có lazyload vậy có nên tắt lazyload của LSC hay của wp” => mình tắt lazyload của WP và dùng lazyload của LiteSpeed. Vì mình test thấy khi dùng lazyload của LiteSpeed thì page-size của mình nhỏ hơn.
Cám ơn bác đã trả lời nhanh.
1. Chỉnh [5] VPI => Em đã bật ON cả 2 trước rồi mà vẫn chậm đó ạ
2. Để em dùng cách này xem có cải thiện gì không, không biết do bật cả 2 cùng lúc nên xung đột hay sao nữa ạ.
Em chèn code tắt lazyload từ bài hướng dẫn https://wpcanban.com/wordpress/thu-thuat-wordpress/vo-hieu-hoa-lazy-load-hinh-anh-mac-dinh-cua-wordpress.html
1. “Em đã bật ON cả 2 trước rồi mà vẫn chậm đó ạ” => site bạn phải kết nối dịch vụ QUIC.Cloud thì tính năng này mới hoạt động. Nó tiêu tốn credit.
2. Nhiều lúc hình ảnh load chậm là do thời gian load các tài nguyên khác quá dài. Ví dụ site của bạn có nhiều file CSS, JS… và kết nối mạng của bạn kém hoặc host quá chậm (hoặc server đặt ở vị trí quá xa người dùng) thì nó cũng là nguyên nhân khiến ảnh load chậm.
1. À vậy ạ @@
2. Dạ để em test thiết lập thêm.
Cám ơn bác.