Lazyload hình ảnh trong WordPress với plugin Native Lazyload chính thức từ Google.
Kể từ phiên bản Chrome 76, bạn đã có thể sử dụng thuộc tính tải (loading) mới để tải tài nguyên “lười biếng” (lazy-loading) mà không cần phải viết các đoạn code lazy-loading tùy chỉnh hoặc sử dụng thư viện JavaScript riêng. Nếu bạn chưa biết thì lazy-loading là một tính năng cho phép trình duyệt web chỉ tải các nội dung như hình ảnh khi người dùng cuộn trang tới. Điều này cho phép giảm thời gian load web của bạn do trình duyệt web chỉ phải tải những phần nội dung đang được hiển thị trên màn hình thay vì tải tất cả cùng một lúc. Google đồng thời cũng đã phát hành plugin “chính chủ”, giúp các blogger/ webmaster có thể triển khai tính năng này một cách dễ dàng trên nền tảng WordPress.
Tham khảo thêm:
- Vô hiệu hóa lazy load hình ảnh mặc định của WordPress
- Hướng dẫn lazyload hình ảnh với plugin LiteSpeed Cache
Lazyload hình ảnh với plugin Native Lazyload
Tất cả những gì các bạn cần phải làm là cài đặt và kích hoạt plugin Native Lazyload được phát hành miễn phí trên kho plugin của WordPress.org (link download).
Trước đó, nhớ vô hiệu hóa chức năng lazyload hình ảnh của theme hoặc các plugin khác để tránh xung đột.
Tại sao bạn nên chọn Native Lazyload?
Plugin Native Lazyload không có phần thiết lập và nó hoạt động theo nguyên tắc rất đơn giản:
- Nếu thuộc tính
loadingkhông được trình duyệt web hỗ trợ, plugin sẽ quay trở lại giải pháp JavaScript dựa trênIntersectionObserver. - Đối với trường hợp JavaScript bị vô hiệu hóa, nhưng thuộc tính
loadingđược trình duyệt web hỗ trợ, một biến thểnoscriptcủa phần tử tương ứng sẽ được thêm vào, bao gồm cả thuộc tínhloadingmà không có bất kỳ thay đổi nào khác.
Native Lazyload không sử dụng JavaScript để lazyload hình ảnh mà sử dụng chính tính năng có sẵn của trình duyệt web Google Chrome (đang chiếm khoảng gần 70% thị phần). Do đó, nó nhẹ và nhanh hơn rất nhiều so với các plugin hay code lazyload khác. Bạn hầu như không thể nhận ra tính năng lazyload đang hoạt động nếu tốc độ mạng và máy tính đủ nhanh (không thấy độ trễ khi load web). Chúng tôi cũng đang sử dụng plugin này trên tất cả hệ thống website của mình.
Kiểm tra xem plugin đã hoạt động hay chưa bằng cách click chuột phải vào 1 hình ảnh trên website của bạn, sau đó chọn Inspect (đối với trình duyệt Google Chrome). Nếu bạn thấy thẻ loading="lazy" xuất hiện trong mã nguồn HTML thì có nghĩa là plugin đã hoạt động bình thường.
Thật đơn giản phải không nào? Chúc các bạn thành công!
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. :)
Ngon cơm cho các bác :P có Plugin nào giúp tải các thư viện trực tiếp từ host của Google không ta?
Bạn thử plugin External Media xem.
cái này có hơn LiteSpeed Cache không ạ, em đang dùng và thấy nó nén cực kì tốt
Cái này là plugin lazyload mà bạn, đâu phải plugin nén ảnh?
E kiểm tra thời gian tải web ở chorme thấy link file placeholder.svg (/plugins/native-lazyload/assets/images/placeholder.svg) mất khá nhiều time!
Cái placeholder kia là để thay thế cho những hình ảnh chưa được load đấy bạn.
Mình khá thích cách này, nó làm cho website mình trở nên mượt mà hơn rất nhiều!
Mình kích hoạt thằng này mấy lần rồi mà nó có vẻ không ưng web mình hay sao ấy, ko có dùng tính năng lazy load của plugin nào hết mà nó vẫn lỗi | Cụ thể là lỗi khi tải Avatar, xung đột biểu hiện gây tải trang chậm :(
Anh Tịnh có dùng qua Lazy Load by WP Rocket hay thằng Flying Images (kết hợp cả của thằng Rocket và native) thử chưa. Em cũng có cảm giác native của google nó chưa ổn định, của rocket làm thì cực nhẹ nhưng lại không có native tận dụng trình duyệt, mà test để chọn cái ngon nhất hơi khó chọn. Theo anh cái nào ổn nhất nếu ưu tiên tốc độ.
Không dùng được Native Lazyload là cả một câu chuyện buồn. :D
Từ thời Google phát triển plugin cho wp thì đây là plugin đầu tiên có ý nghĩa và vinh dự được mình cài vào mà không gỡ ngay. thank god
dùng lazy của litespeed cache hay cái này nhỉ
Nếu plugin Native Lazyload hoạt động được trên site của bạn thì nên dùng Native Lazyload nhé. Ngược lại thì dùng lazyload của plugin LiteSpeed Cache.
Mình xem đánh giá thì hình như nó chỉ tốt nhất khi sử dụng chrome, các trình duyệt khác nghe bộ không có ok nhiều lắm. Chắc oánh dấu lại để sau đông người dùng và plugin tốt hơn thì cài.
Các trình duyệt khác vẫn dùng hoàn toàn bình thường. Mình đã test trên cả MS Edge và Safari.
plugin nào liên quan đến Google là mình ưng hết, ngon quá rồi
Mấy cái như Site Kit hay AMP thì không nên cài đâu nhé. =))
Trong tùy chọn của Theme Paradise cũng có Lazy Load, Hiếu cho anh hỏi sử dụng luôn hay tắt đi sử dụng Plugin này.
Thanks em.
Anh dùng phiên bản từ đời nào thế? Theme Paradise bỏ tính năng lazyload lâu lắm rồi mà. Tất nhiên là chỉ dùng Native Lazyload thôi. Làm gì có ai đi sử dụng 2 cái cùng 1 chức năng. :P