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. :)
Anh ơi!
Web em cài Woocommer chạy thêm Plugin đánh giá sản phẩm, em muốn Lazyload hình ảnh của plugin Review đánh giá sản phẩm thì phải làm thế nào ạ..
Em dùng litespeed cache ạ
Nếu bạn đã bật tính năng lazyload hình ảnh mà nó vẫn không lazyload thì đành chịu thôi. Không có giải pháp nào cho trường hợp này cả. :)
Anh Hiếu chỉ em cách để không lazyload ảnh đầu tiên của web và ảnh đầu tiên của bài viết được không ạ?
Bạn không muốn lazyload hình ảnh nào thì gắn thêm thẻ
data-no-lazy="1"vào HTML của nó là được. Hoặc đơn giản hơn là thêm URL của nó vào LiteSpeed Cache => Page Optimization => [5] Media Excludes => Lazy Load Image Excludes.Lazy load của litespeed em thấy ổn nhẹ và sẵn và footer. nhưng nếu có kiến thức về lập trình thêm style chuyển cảnh và sửa lại JavaScript thẻ threshold:300 thành con số dài hơn tùy vào mình, thì lazy load litespeed đã ngon càng ngon hơn
Em thấy nén ảnh của litespeed bây giờ khá ngon, nhưng vẫn chưa thể vượt được shortpixel, nén ảnh litespeed ngon hơn trước rất là nhiều trước nén api ko biết bao giờ mới xong giờ litespeed làm rất tốt
Đã thử với 2 theme nổi tiếng là flatsome và bimber thấy rằng litespeed khá tù,mặc dù pagesize có giảm đi chút ít nhưng điểm số giảm hẳn so với dùng lazyload của theme,chắc theme nào si đa mới cần litespeed thôi chứ theme ngon nó tối ưu khoản này khá tốt không cần litespeed
Chỉ những người không biết dùng mới đi chê plugin LiteSpeed Cache dở thôi bạn ạ. :)
Toi đang dùng litespeed đồng bộ với litespeed cache và tôi đã test trên các theme nổi tiếng chứ không đưa ra kiểu đánh giá chủ quan.bạn chê người khác kog biết dùng nhưng bản thân thì chưa từng test thử với các theme nổi tiếng
Mình đã từng tối ưu hàng nghìn website của khách hàng sử dụng theme Flatsome cùng rất nhiều theme khác rồi thưa bạn. Như vậy đã đủ để đưa ra kết luận về plugin LiteSpeed Cache chưa?
Trong cài đặt của Paradise có phần này và khuyến khích nếu dùng Lazy load của Litespeed cache thì nên bật cả 2 nhưng đọc bài này lại khuyến cáo ko nên bật nếu cài đặt Theme có rồi. Vậy làm thế nào là đúng Hiếu ơi.
Theme Paradise làm gì có tính năng lazyload hình ảnh đâu anh. Nên tất nhiên anh phải bật tính năng lazyload của plugin LiteSpeed Cache rồi.
A thấy trong phần tối ưu trải nghiệm có cài đặt đó.
Ý anh là tính năng Vô hiệu hóa Lazy Load trong Tối ưu tốc độ đúng không nhỉ? Cái đó là vô hiệu hóa tính năng lazy load mặc định của WordPress để sau đó anh có thể thay thế bằng tính năng lazy load của plugin (chẳng hạn như LiteSpeed Cache).
Nên dùng Lazy load của LiteSpeed Cache hay là của plugin có sẵn như Smush hả bác.
LiteSpeed Cache bạn nhé.
Mình thì theme có sẵn nhưng dùng thêm của wp-rocket thấy cũng được
Sau khi áp dụng thì PageSpeed trên mobile cao hơn còn trên desktop thấp hơn Native Lazyload Hiếu ạ. Không biết làm sao đây :))
Tắt cái CDN của Jetpack đi bạn. :P
Không biết có phải í Hiếu là cái site accelerator không nhưng mình vừa tắt cái đó rồi vì tìm ko thấy CDN :D
Đúng rồi bạn. Chính là nó. :P
Dạo này quan tâm đến LiteSpeed Cache thế! Viết tận mấy bài lận!
Lan tỏa LiteSpeed Cache tới mọi người và mọi nhà. :))
Dùng theme có chức năng Lazy Load rồi thì có nên bật chức năng Lazy Load Images trên LiteSpeed Cache không bác
Bạn test thử lần lượt 2 cái để lựa chọn giải pháp phù hợp nhất cho website nhé. Còn không thể bật đồng thời 2 cái cùng 1 tính năng đâu.
Nếu website sử dụng nâng cao dùng page builder của themes thì theo em bác nên dùng lazy load của themes để đảm bảo tương thích, website cơ bản không dùng page builder của themes thì lazy load plugin cũng rất ngon