Trong bài viết này, HOSTVN sẽ giới thiệu plugin Native Lazyload chính thức của Google giúp bạn tải ảnh Lazyload trên wordpress.
Bắt đầu từ Chrome v76, bạn sẽ có thể sử dụng thuộc tính tải mới để tải tài nguyên Lazyload mà không cần phải viết mã tải Lazyload tùy chỉnh hoặc sử dụng thư viện JavaScript riêng. Trong bài viết này, HOSTVN sẽ giới thiệu plugin Native Lazyload chính thức của Google giúp bạn tải ảnh Lazyload trên wordpress.
Tại sao sử dụng tính năng tải lười gốc
Theo HTTPArchive, hình ảnh là tài nguyên được yêu cầu nhiều nhất cho hầu hết các trang web và thường chiếm nhiều băng thông hơn bất kỳ tài nguyên nào khác. Các trang web thường gửi khoảng 4,7 MB hình ảnh trên máy tính để bàn và thiết bị di động.
Hiện tại, có hai cách để trì hoãn việc tải hình ảnh ngoài màn hình và khung nội tuyến:
Nếu thuộc tính tải không được trình duyệt hỗ trợ, plugin sẽ trở lại giải pháp JavaScript dựa trên IntersectionObserver. Đối với các trường hợp JavaScript bị tắt, nhưng thuộc tính tải được trình duyệt hỗ trợ, một biến thể noscript của phần tử tương ứng sẽ được thêm vào, bao gồm cả thuộc tính tải mà không có bất kỳ thay đổi nào khác.
Gốc đồng nghĩa với tốc độ nhanh
Bạn có thể biết hiệu suất quan trọng như thế nào đối với một trang web và đối với trải nghiệm người dùng. Bạn cũng có thể biết rằng Lazyload là một tính năng chính để cải thiện hiệu suất nói trên. Tuy nhiên, các giải pháp cho Lazyload cho đến nay đều dựa vào tải, phân tích cú pháp và chạy logic JavaScript tùy chỉnh, điều này có thể làm trầm trọng thêm hoặc làm giảm hiệu suất trang web.
Plugin Native Lazyload của Google không sử dụng JavaScript, nó sử dụng một thuộc tính đã được Chrome hỗ trợ và sẽ sớm được hỗ trợ bởi các trình duyệt khác. Vì nó không sử dụng JavaScript nên nó nhẹ hơn và cũng có nghĩa là nó tải nhanh hơn.
Cuối cùng nhưng không kém phần quan trọng, một điều cần lưu ý là plugin này về cơ bản sẽ tự cải thiện theo thời gian, vì ngày càng nhiều trình duyệt thêm hỗ trợ cho thuộc tính tải.
Lazyload hình ảnh trên WordPress với Plugin Lazyload gốc của Google
Bạn có thể tải Plugin tại kho plugin chính thức của wordpress: https://wordpress.org/plugins/native-lazyload/
Để biết cách cài đặt plugin hãy xem hướng dẫn cài đặt plugin cho wordpress của chúng tôi HOSTVN.
Ghi chú: Vì Plugin vẫn đang được phát triển nên nó có thể không hoàn toàn tương thích với một số chủ đề WordPress.
Sự kết luận
Hi vọng với plugin này sẽ giúp bạn biết cách tải ảnh Lazyload trên wordpress giúp cải thiện tốc độ tải trang web của bạn. Nếu có ý kiến đóng góp, bạn có thể để lại bình luận bên dưới. Ngoài ra, bạn có thể xem thêm Hướng dẫn tối ưu hình ảnh seo trên wordpress.
