Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Thiết kế web giá rẻ
    • Thiết kế website WordPress
    • Hosting Miễn Phí 100GB
    • Tích hợp thanh toán MoMo, ViettelPay, Vietcombank, MB..
    • Tối ưu Google PageSpeed
    • Sửa lỗi nâng cấp website
    • Viết plugin WordPress
    • Code Tool theo yêu cầu
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Web Development » 11 Lazyload plugin tốt nhất dành cho WordPress

11 Lazyload plugin tốt nhất dành cho WordPress

Thứ Bảy, 07/12/2019 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Nếu bạn đang tìm kiếm giải pháp để cải thiện tốc độ trang web, thì lazyload chắc chắn là một giải pháp hoàn hảo. Kỹ thuật này làm trễ yêu cầu HTTP trong khi nạp các tài nguyên ảnh với mục đích giảm tải yêu cầu load cùng 1 lúc, nhường nội dung hiển thị trước để tăng tốc thời gian tải trang.

Điều này sẽ làm giảm dung lượng của trang mang đến cho bạn thời gian tải trang nhanh hơn . WordPress có nhiều plugin giúp bạn tạo tính năng lazyload.

Và trong hướng dẫn này, mình đã chọn ra 1 vài plugin tốt nhất để tích hợp lazyload cho wordpress. Bạn sẽ tìm được plugin đơn giản cài đặt với chỉ một cú nhấp chuột và plugin phức tạp hơn mà  hỗ trợ cả video, gallery và hình ảnh trên cùng một trang.

1. BJ Lazy Load

bj lazyload plugin

Với BJ Lazy Load Plugin  cho bạn toàn quyền kiểm soát hoàn toàn cách thức tải nội dung trên trang của bạn. Điều này có thể áp dụng với nội dung bình luận của người dùng, hình ảnh trong trang, và thậm trí cho iframe  & video nhúng.

Plugin cho bạn các tùy chọn, do đó bạn kiểm soát các tính năng mà bạn muốn. Nó cũng không ảnh hưởng đến trải nghiệm người dùng quá nhiều đến nỗi bạn cảm thấy như không có gì đang xẩy ra.

Lưu ý plugin hoạt động dựa trên JavaScript giống như rất nhiều plugins lazyload khác trong WP plugin repo. Điều này có nghĩa bạn sẽ không nhận được hiệu ứng tương tự với người dùng vô hiệu hóa JS trên trình duyệt của họ, và thay vào đó là hình ảnh tải bên trong một thẻ noscript.

Hầu hết người dùng WordPress thích plugin này vì nó dễ dàng thiết lập, dễ tùy chỉnh, và một mạng lưới rộng hỗ trợ cho nhúng và CDN hình ảnh.

2. a3 Lazy Load

a3 lazy load      

Đối với các trang web có nhiều nội dung bạn có thể thử plugin  a3 Lazy Load để tối ưu hình ảnh.

Đây là một plugin mới hơn nhiều và được cập nhật thường xuyên từ các nhà phát triển. Nó được tạo ra để hỗ trợ điện thoại di động cho các trang web tải hàng trăm hoặc hàng ngàn hình ảnh trên một trang.

Nó được xây dựng dựa trên thư viện jquery Lazy Load XT  đáng tin cậy trên github.

Một điều thú vị về plugin a3 là cách bạn có thể chọn/chỉ định thành phần được sử dụng layzload có trên trang. Bạn có thể chọn giữa các hình ảnh trên bài viết, trang, và có thể áp dụng trên cả nội dung bình luận & avatar.

3. Lazy Load XT

lazyload xt wordpress

Nếu bạn muốn nhanh như chớp hãy thử plugin miễn phí Lazy Load XT, một trong những plugin lazyload nhẹ nhất bạn có thể tìm cho WordPress.

Plugin ra phiên bản chắc chắn ít nhiều cập nhật và nó hiện đang được lưu hành ở bản v0.5 mà không cần bất kỳ bản cập nhật mới trong vòng hai năm. Vì vậy chúng ta có thể yên tâm sử dụng.

Và nó cũng được đánh giá khá tốt trên WordPress.org với 5 sao (90%) và rất nhiều ý kiến ​​tuyệt vời từ người dùng.

Nó cũng dựa trên thư viện jQuery Lazy Load XT. Tuy nhiên, nó nhẹ hơn có nghĩa đi kèm với các tính năng ít hơn, vì vậy tôi khuyên các bạn nên cài đặt plugin này nếu không muốn làm chậm website nếu bạn đang sử dụng với nhiều plugins khác.

4. WP Lazy Load

wp lazyload

Nhà phát triển Mohammad Jangda phát hành plugin lazload như một thêm lựa chọn cho người dùng WordPress. Nó được xây dựng trên CODE phát hành từ nhóm phát triển WordPress một vài năm trở lại.

plugin đơn giản này dựa trên jQuery Sonar để phát hiện khi một thành phần có thể được xem bằng mắt trên trang. Plugin sử dụng thư viện này để chạy Ajax cho các hình ảnh để giảm kích thước và thời gian tải trang.

Một điều cộng khác là nó không có quá nhiều tùy chọn làm khó chịu người dùng.

5. Speed ​​Up – Lazy Load

speedup lazy load

Dưới đây là một ví dụ khác của plugin chỉ có kích thước vẻn vẹn 5KB . Với Speed ​​Up – Lazy load bạn sẽ có được tất cả các tính năng mặc định của lazyload ảnh và JS với tính năng phát hiện khi người dùng cuộn trang.

Plugin này cũng được cập nhật thường xuyên hơn so với plugin khác. Bản cập nhật mới nhất là khoảng 6 tháng trước khi viết bài này và nó được thử nghiệm với WordPress v4.7.6 (phiên bản hiện tại là 4.8.2).

6. Lazy Loading Images Responsive

lazy loading images plugin

Nếu bạn đang tìm một cái gì đó với nhiều tùy chỉnh hơn , hãy thử plugin Lazy Loading Images Responsive . Nó được phát triển để đáp ứng xử lý nội dung responsive với kịch bản script lazyload trên mọi thiết bị.

Lưu ý nó không yêu cầu JavaScript giống như các plugin khác, nhưng nó cũng sử dụng tag <noscript> như một dự phòng. Nó vẫn tải hình ảnh như bạn mong muốn và nó sử dụng responsive placeholders cho đến khi người dùng cuộn xuống phía xa hơn ở trên trang.

Và như các plugin khác, nhà phát triển sẽ cập nhật thay đổi về plugin cho bổ xung các tính mới hoặc đưa ra bản vá lỗi. Vì vậy, đây là plugin đáng tin cậy và có thể sử dụng trong nhiều năm tới.

7. JCH Optimize

jch optimize plugin

JCH Optimize thực sự là một gói tính năng lớn mà giúp cải thiện thời gian tải trang của bạn. Bạn có thể cài đặt plugin này trên bất kỳ trang web WordPress và ngay lập tức nhận thấy những lợi ích mà nó mang lại.

Plugin sẽ tự động kết hợp CSS / JS để giảm tổng số các yêu cầu HTTP. Nó cũng tối ưu HTML của bạn và thậm chí tạo ra các file sprite cho hình ảnh trên nền CSS một cách Khéo léo!

Tính năng lazyload được dấu bên trong trang cài đặt và nó sẽ được kích hoạt chỉ bằng một cú nhấp chuột. Vì vậy, plugin này là một lựa chọn tuyệt vời để tăng tốc trang web của bạn.

Nhưng nó không phải là tất cả và bạn vẫn sẽ cần những thứ khác như tạo bộ đệm (cache)  bên cạnh JCH Optimize.

8. Smart4y Lazy Load

smart4y lazy loader

Nếu bạn cần một tính năng lazy hiện đại hãy mua plugin Smart4y Lazy Load . Với chế độ lazyload siêu nhanh, nhẹ, và hỗ trợ lazyload cho mọi phần tử HTML media.

Plugin này đã vừa phát hành một vài tháng trước khi viết bài này vì vậy nó là một trong những plugin mới nhất.

Các thành phần được áp dụng trên trang:

  • Iframes hoặc nội dung nhúng
  • Hình ảnh trên bài viết / trang
  • Nhắm mục tiêu chỉ bài viết, chỉ các trang, hoặc cả hai
  • Tạo loading của riêng bạn

9. Lazy Load for Video

lazy load video plugin

Lazyload chỉ dành cho video. Nếu bạn đang vận hành một trang web video, thì đây là plugin bạn không thể bỏ qua.

Plugin này rất hữu ích trong hai trường hợp: giúp webmaster tạo lazyload cho video nhúng mà không cần dùng đến hình ảnh, hoặc sử dụng cùng với một plugin lazyload khác.

Hiểu Nguyên lý cơ bản, nó hiển thị hình ảnh placeholder cho video trước khi video được tải. Vì vậy, nó sẽ lấy thumbnail từ video để giữ tỉ lệ HTML. Thêm vào đó nó cho phép bạn tùy chỉnh nhúng trình player với các nút điều khiển hoặc chú thích nào đó.

Tải trên GitHub repo nếu bạn muốn tìm hiểu thêm về plugin này, hoặc nếu bạn muốn đóng góp cho dự án open source tuyệt vời này.

10. Zedna WP Image Lazy Load

zedna wp image lazyload

Không phải tất cả plugin lazy loading hỗ trợ ảnh nền CSS. Đã đến lúc bạn phải để ý tới  Zedna WP Image Lazy Load .

Đương nhiên plugin này nhắm vào tất cả hình ảnh trên trang và đối tượng nhúng trong iframe. Nhưng nó cũng được khai thác tốt cho hình ảnh nền CSS nếu bạn muốn chúng được tích hợp lazyload.

Và nó hoạt động trên HTML5 video element , do đó thậm chí bạn có thể sử dụng cho cả video nhúng của riêng bạn. Thật Tuyệt!

Các tùy chọn khác cho phép bạn cấu hình chuyển động animation, ngưỡng tải nội dung, …

11. Crazy Lazy

crazy lazy plugin

Không nhiều người sử dụng WP biết về Crazy Lazy bởi vì nó không có mặt ở phía trên cùng của kết quả tìm kiếm cho “lazyload plugin”. Nhưng, đó lại là plugin đáng sử dụng vì kích thước nhỏ gọn và tối ưu trong plugin jQuery.

Crazy Lazy sử dụng một trong hai plugin jQuery rất phổ biến: Unveil.js với nhiều theme động hoặc Lazyload.js cho các theme nhỏ hơn.

Nó cung cấp cho bạn toàn quyền kiểm soát mã CSS trước khi hình ảnh được tải & hiển thị trên trang. Thêm vào đó bạn có thể thêm các thuộc tính  data-crazy-lazy vào mã của bạn để loại trừ các hình ảnh nhất định từ hiệu ứng lazyload.

Có lẽ đây là một sự lựa chọn thông minh với một codebase nhỏ nhưng ổn định.

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Chuyên mục: Web Development Tìm kiếm: lazy load

Tôi giúp gì cho bạn?

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 – 0868 292 303 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • GitHub
  • YouTube

SẢN PHẨM

  • Plugin Thanh Toán Quét Mã QR Code Tự Động
  • WP2Speed – Tối ưu Google Speed
  • 23WebHost – Hosting Miễn Phí 100GB

LIÊN KẾT

  • Có nên thuê thiết kế website giá rẻ?
  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2023 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.