Lazyload hình ảnh trên wordpress với plugins Native Lazyload chính thức từ Google

0
20 views

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 chúng tôi sẽ giới thiệu plugins Native Lazyload chính thức từ Google giúp bạn có thể tải Lazyload hình ảnh trên wordpress.

Tại sao nên sử dụng native lazy-loading

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à iframe:

Nếu thuộc tính tải không được trình duyệt hỗ trợ, plugin sẽ quay trở lại giải pháp JavaScript dựa trên IntersectionObserver. Đối với trường hợp JavaScript bị vô hiệu hóa, 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.

Native đồng nghĩa với tốc độ nhanh

Bạn có thể nhận thức được hiệu suất quan trọng như thế nào đối với một trang web và đối với việc trải nghiệm của 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 việc tải Lazyload cho đến nay vẫn  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ể gây nặng hơn hoặc làm giảm hiệu suất của trang web.

Plugin Native Lazyload của google không sử dung JavaScript mà nó sử dụng thuộc tính đã được Chrome hỗ trợ và sẽ sớm được các trình duyệt khác hộ trợ. Do không sử dụng JavaScript nên nó nhẹ hơn và cũng có nghĩa là nó sẽ tải nhanh hơn.

Cuối cùng nhưng không kém phần quan trọng, một điều gọn gàng cần lưu ý là plugin này về cơ bản sẽ tự cải thiện theo thời gian, khi nhiều càng ngày càng có nhiều trình duyệt hỗ trợ cho thuộc tính tải.

Cài đặt Plugins

Các bạn có thể tải Plugins tại kho plugins chính thức của wordpress: https://wordpress.org/plugins/native-lazyload/

Các bạn có thể tham khảo hướng dẫn cài đặt plugins cho wordpress tại đây:

Lưu ý: Do Plugins vẫn đang trong quá trình phát triển nên sẽ có thể chưa hoàn toàn tương thích với một số theme của worpdress.

Kết luận

Hi vọng với plugins này sẽ giúp các bạn cải thiện tốc độ load cho website của mình. Nếu có bất kỳ ý kiến đóng góp nào các bạn có thể để lại bình luận bên dưới.

Comment của bạn

avatar
  Subscribe  
Notify of