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:
- Top 3 công cụ kiểm tra tốc độ và hiệu suất website
- Tải không đồng bộ JavaScript trong WordPress mà không dùng plugin
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. :)
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
Không hiểu sao web của mình bị xung đột khi chạy plugin này , phải tắt đi .
Có cách nào chèn nó vào thủ công không nhỉ
Mình tắt tính năng lazy load của LiteSpeed Cache, xóa cache hết. Kích hoạt thằng này, qua phần so sánh trực quan bằng mắt thì có vẻ như chưa được mượt như mong đợi lắm nhỉ :D
Google chú trọng xây plugin cho WP ghê nhỉ, đầu tư hẳn 1 loạt plugin mới
Cảm ơn a Hiếu
Google hổ trợ là ngon rồi, chứ cái lazy của Litespeed cache ko ổn lắm
plugin này ngon nè, đúng hàng google rất chất
Jetpack và Theme mình đang dùng cũng có sẵn tính năng này, theo Hiếu nên dùng cái nào thì tốt?
Nếu site tương thích tốt với plugin Native Lazyload thì nên dùng plugin này thay cho mấy cái kia nhé.
Vậy mình sẽ cài xem sao, 2 cái kia sau 1 thời gian dùng thấy cũng ko ổn lắm. Cảm ơn Hiếu nhé
Cái gì của Google thì chơi thôi, với cái plugin mấy trong 1 vừa mới phát hành cũng hay đó bác. :D
Ý bạn là Google Site Kit đó hả? Mình cũng đang định viết 1 bài về plugin này. :D
Chính nó đó bác Hiếu =))
Đang dùng “theme Flatsome” nên chắc không dùng Plugin này, nhưng có vẻ nó rất hay !
Tắt tính năng lazyload của theme Flatsome đi rồi test thử xem sao. Nếu tương thích tốt thì plugin này ngon hơn nhiều nhé. Vì nó sử dụng tính năng có sẵn của trình duyệt web Chrome.
Đang dùng thử qua 1 số Website khác, thì thấy tốc độ load khá nhanh! Để cho chạy trên tất cả các site khác ! Thanks Ad!
Mình thử cài plugin này thì banner trên theme flatsome lại bị hư cấu trúc.
Bạn tắt tính năng lazyload của theme Flatsome chưa?
Mình đã tắt rồi nhưng vẫn bị bạn à. Banner 1 thì không sao, chạy sang banner 2 là bị khoảng trắng rất lớn.
Mình đang chạy plugin này trên một số site sử dụng theme Flatsome nhưng không gặp lỗi gì. :D
Sao t thấy vote không cao cho lắm nhỉ Hiếu
Có thể do plugin đang được phát triển nên tương thích chưa tốt với theme & các plugin khác đó bạn. Riêng mình thấy dùng rất ổn. Bạn có thể cài thử. Nếu không tương thích thì gỡ ra là xong mà.
Đang dùng tính năng này của Smush thì chắc chẳng cần cài thêm!
Lazyload của các plugin khác không giống với Native Lazyload nhé. Vui lòng đọc kỹ.