lazy load là gì và kỹ thuật giúp tăng website performance

const imgs = document.querySelectorAll(‘[data-src]’);
imgs.forEach(img => {
observer.observe(img);
});

2. Robin osborne’s progressively enhanced lazy loading lazy load là gì

Robin Osborne đề xuất một giải pháp khéo léo dựa trên progressive enhancement. Trong trường hợp này là lazy loadchính nó, đạt được bằng cách sử dụng JavaScript, được coi là cải tiến trên HTML và CSS thông thường.

Tại sao lại là progressive enhancement ? Nếu bạn hiển thị hình ảnh bằng cách sử dụng giải pháp JavaScript-base, điều gì sẽ xảy ra nếu JavaScript bị disable hoặc xảy ra lỗi khiến code hoạt động không như mong đợi? Trong trường hợp này, nếu không có progressive enhancement, người dùng có thể không nhìn thấy hình ảnh nào cả.

Bạn có thể xem chi tiết về basic version của giải pháp Osborne tại đây và một giải pháp toàn diện hơn, có tính đến trường hợp mã JavaScript bị lỗi, bạn có thể xem nó tại đây.

Kỹ thuật này có một số ưu điểm:

Phương pháp progressive enhancement đảm bảo người dùng luôn có quyền accsess vào content.

Nó không chỉ phục vụ cho một tình huống JavaScript không có sẵn, mà còn cho những trường hợp khi JavaScript bị error: tất cả chúng ta đều biết các file script dễ bị lỗi, đặc biệt trong môi trường có một số lượng đáng kể các file đang chạy.

Nó thực hiện lazy load hình ảnh khi scroll vì vậy không phải tất cả hình ảnh sẽ được tải nếu người dùng không cuộn đến vị trí mà họ muốn trong trình duyệt.

Nó không phụ thuộc vào bất kỳ dependencies bên ngoài nào, do đó không cần framework hoặc plugin nào. lazy load là gì

3. Lozad.Js

Một thay thế nhanh chóng và dễ dàng để thực hiện lazy load ảnh là để cho thư viện JS thực hiện hầu hết công việc cho bạn.

Lozad là một trình lazy loading có hiệu suất cao, nhẹ và có thể config được trong JavaScript thuần mà không cần dependencies. Bạn có thể sử dụng nó để tải hình ảnh, video, iframe và nhiều thứ khác, đồng thời nó cũng sử dụng Intersection Observer API.

Bạn có thể include Lozad với npm / Yarn và import nó bằng cách sử dụng gói module mà bạn lựa chọn:

npm install –save lozad

yarn add lozad

import lozad from ‘lozad’; lazy load là gì

Ngoài ra, bạn có thể tải xuống thư viện bằng CDN và thêm nó vào cuối trang HTML trong thẻ <script>: <script src=”https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js”></script>

Tiếp theo, để triển khai cơ bản, hãy thêm class lozad vào trong thẻ img: img class=”lozad” data-src=”img.jpg”

Cuối cùng, khởi tạo Lozad trong JS của bạn:

const observer = lozad();

observer.observe();

Bạn sẽ tìm thấy tất cả các chi tiết về cách bạn có thể sử dụng thư viện trên Lozad GitHub.

Nếu bạn không muốn đi sâu vào hoạt động của Intersection Observer API hoặc bạn đang tìm cách triển khai nhanh chóng áp dụng cho nhiều loại nội dung khác nhau, Lozad là một lựa chọn tuyệt vời. Nhưng hãy chú ý đến sự hỗ trợ của trình duyệt và cuối cùng tích hợp thư viện này với một polyfill cho Intersection Observer API.

4. Lazy loading with blurred image effect

Nếu bạn là một “medium reader”, bạn chắc chắn đã nhận thấy cách trang web tải hình ảnh chính bên trong một bài đăng. Điều đầu tiên bạn thấy là bản sao có độ phân giải thấp, mờ, trong khi phiên bản có độ phân giải cao của nó đang được tải xuống dạng lazy loading.

Ảnh sau khi load xong

Bạn có thể thực hiện lazy loading image với hiệu ứng làm mờ thú vị này theo một số cách. Kỹ thuật yêu thích của tôi là của Craig Buckler. Đây là một số ưu điểm của cách này:

Hiệu suất: chỉ 463 byte CSS và 1,007 byte code JavaScript được rút gọn. lazy load là gì

Hỗ trợ cho màn hình retina.

Dependency-free: không yêu cầu jQuery hoặc các libraries và frameworks.

Update dần để phù hợp các trình duyệt cũ hơn và viễ JavaScript không hoạt động. Bạn có thể đọc tất cả về nó trong bài viết How to Build Your Own Progressive Image Loader và download code trên repo GitHub của dự án.

5. Yall.Js

Yall là một feature-packed lazy loading dành cho hình ảnh, video và iframe. Cụ thể hơn, nó sử dụng Intersection Observer API và fall back thông minh trong việc handler các sự kiện truyền thống khi cần thiết.

Khi include Yall, bạn cần khởi tạo nó như sau: lazy load là gì

document.addEventListener(“DOMContentLoaded”, yall);

</script>

Tiếp theo, để lazy load một element img đơn giản, thì tất cả những gì bạn cần làm là:

img class=”lazy” src=”placeholder.jpg” data-src=”image-to-lazy-load.jpg” alt=”Alternative text to describe image.”

Có một số lưu ý:

Bạn thêm class lazy vào element

Value của src là một placeholder image

Đường dẫn đến hình ảnh bạn muốn lazy load nằm bên trong thuộc tính data-src

Những lợi ích của Yall:

Hiệu suất tuyệt vời với Intersection Observer API

Hỗ trợ trình duyệt tuyệt vời (hỗ trợ IE11)

Không cần dependencies khác. Để tìm hiểu thêm về những gì Yall có thể cung cấp và để có thể triển khai một cách phức tạp hơn, bạn có thể xem thêm trên GitHub.

Các tìm kiếm liên quan: