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. :)
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ỹ.