Tăng tốc website bằng Lazy load

Chắc hẳn bạn đã nhìn thấy Lazy Load ở một trang web nào đó rồi vì nó được áp dụng khá nhiều nhất là đối với các site ảnh và site tin tức, đây là một kỹ thuật load ảnh sau sử dụng jquery Lazy Load. Hiểu nôm na là ảnh chỉ được load ở những vị trí mà bạn nhìn thấy trên màn hình, còn các ảnh ở vị trí khác mà bạn chưa nhìn thấy (chưa kéo thanh cuộn xuống) thì nó sẽ tạm thời chưa được load. Khi bạn kéo thanh cuộn xuống dưới nội dung trang web thì ảnh mới bắt đầu được load. Do vậy, tốc độ trang web được cải thiện đáng kể, đối với những trang có nhiều ảnh thì tốc độ nhanh hơn rõ rệt. Nhìn vào cũng thấy pro hơn ^^

Để dễ hiểu hơn mời các bạn xem Demo Lazy Load

lazy-load

Trong bài viết này mình sẽ hướng dẫn các bạn áp dụng Lazy Load cho blog WordPress, đối với mã nguồn khác bạn có thể tham khảo demo trên để áp dụng.

Nói thì có vẻ phức tạp, nhưng đối với wordpress thì hết sức dễ dàng. Có khá nhiều plugin giúp bạn làm điều này, mình xin giới thiệu 2 plugin nổi bật được nhiều người sử dụng nhất là jQuery Image Lazy Load WP và BJ Lazy Load. Bạn chỉ cần cài 1 trong 2 plugin này thôi nhé, cài cả 2 là xung đột đấy.

Nếu bạn muốn đơn giản, gọn nhẹ thì sử dụng plugin jQuery Image Lazy Load WP, sau khi cài đặt bạn chỉ cần kích hoạt là plugin này hoạt động ngay mà không cần phải có sự can thiệp nào cả.

Nếu bạn muốn có nhiều sự lựa chọn hơn thì sử dụng plugin BJ Lazy Load, plugin này có khá nhiều lựa chọn hay ho mà có thể bạn cần đến.

BJ_Lazy_Load_Options

BJ Lazy Load Options
Trang cài đặt BJ Lazy Load

Giải thích một số lựa chọn:

Apply to content: áp dụng cho phần Content (nội dung trang web)

Apply to post thumbnails: áp dụng cho thumbnails

Apply to gravatars: áp dụng cho gravatars (ảnh avatar chỗ comment)

Lazy load images: Lazy load cho ảnh

Lazy load iframes: Lazy load cho iframe

Theme loader function: vị trí load cho jquery

Skip images with classes: Không Lazy load với những thẻ class này

Infinite scroll: chọn yes nếu bạn đang sử dụng Infinite scroll

Đây cũng là một trong những cách hiệu quả giúp tăng tốc website, hãy áp dụng thử xem nhé. Nếu có thắc mắc vui lòng để lại comment bên dưới mình sẽ giải đáp.

Nguồn: http://visaonho.com/

Updated: 28/07/2016 — 9:47 chiều
Dương Triều Blog © 2016