Lazyload hình ảnh trên WordPress với Native Lazyload của Google

Trong bài viết này HOSTVN 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.

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

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.

Lazyload hình ảnh trên WordPress với Plugins Native Lazyload của Google

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/

Để biết cách cài đặt plugins hãy xem Hướng dẫn cài đặt plugins cho wordpress của HOSTVN.

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 biết cách tải Lazyload hình ảnh trên wordpress để giúp 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. Ngoài ra các bạn có thể muốn xem thêm Hướng dẫn tối ưu hóa seo hình ảnh trên wordpress.

Ebook Wordpress

Đăng ký nhận Ebooks toàn tập hướng dẫn sử dụng WordPress cơ bản


Góc chia sẻWordpress

Hướng dẫn sửa lỗi "The Link You Followed Has Expired" trên wordpress

2019-11-6 18:24:05

Góc chia sẻSEO / SEM

Hướng dẫn viết Tiêu đề và Mô tả chuẩn Seo cho website của bạn.

2019-11-13 9:54:14

0 trả lời ATác giả MQuản lý
    Chưa có phản hồi nào
Trung tâm cá nhân
Giỏ hàng
Phiếu mua hàng
Đăng nhập ngay
Tin nhắn Danh sách tin nhắn
Tìm kiếm
Tối