Thiết kế Website

Áp dụng kỹ thuật LazyLoad trong thiết kế web

Đã đăng trên bởi semtek
lazyload
03
Th2

Lazyload (Lười tải, Tải chậm) hiểu nôm na thì nó là việc load dữ liệu khi cần sử dụng đến chúng.Chẳng hạn nhiều người dùng khi vào 1 page còn chẳng kéo xuống hết đến cuối trang để xem toàn bộ nội dung thì ta cần gì load toàn bộ nội dung trước? Việc ta nên làm là người dùng scroll đến đâu ta sẽ load dữ liệu đến đấy

Lazyload là gì và có ưu nhược điểm ra sao?

1. Kỹ thuật lazyload là gì?

LazyLoad là một khái niệm mà ứng dụng trì hoãn việc tải các đối tượng cho đến thời điểm mà người dùng cần nó. Nói một cách đơn giản là tải theo yêu cầu của người dùng chứ không phải tải đối tượng không cần thiết. lazy load là gì

Lợi ích của việc này là giảm thiểu số lượng yêu cầu, giảm thiểu số lượng tài nguyên thừa cần tải cho tới khi người dùng cần đến chúng thực sự.

Hơn nữa kỹ thuật này còn để áp dụng cho việc tải các mã JavaScript từ bên ngoài để tránh dừng tải (blocking download). Về bản chất khi tải mã JavaScript trình duyệt sẽ dừng tất cả các hoạt động tải tài nguyên khác và chờ cho tới khi mã này được tải hoàn thành thì các tiến trình khác mới bắt đầu được tải. Chính vì thế khi phát triển sản phẩm có liên quan đến các hệ thống thứ ba cần cân nhắc sử dụng kỹ thuật tải bất đồng bộ và Lazy Load.

Một ứng dụng phổ biến sử dụng kỹ thuật LazyLoad rất hiệu quả là Facebook. Chúng ta biết khi người dùng cuộn trang đến đâu thì dòng thời gian và ảnh mới tiếp tục tải về cho người dùng.

lazyload
lazyload

2. Ưu nhược điểm của lazyloading là gì?

Lazy loading tức là chỉ tải hình ảnh khi cần thiết, VD: khi người dùng cuộn xuống đủ xa để xem chúng.

Nhược điểm

  • Cách tiếp cận này có thể dẫn đến sự nhấp nháy của phần nội dung bị thiếu.

Ưu điểm

  • Lazy loading là kỹ thuật tải hiệu quả nhất được sử dụng phổ biến ngày nay. Bạn sẽ không bao giờ mất chi phí băng thông cho những gì bạn không tải xuống, không xem, không nhìn thấy. Nếu lưu lượng truy cập là mối quan tâm lớn nhất của bạn, thì lazy loading chính là một lựa chọn lí tưởng.
  • Quá trình thực hiện lazy loading có thể gặp một vài rắc tối trong thao tác. Thực tế, phương pháp này luôn đòi hỏi nhiều JavaScript hơn các phương pháp khác. Nhiều JavaScript hơn có nghĩa là phức tạp hơn, ngốn nhiều thời gian hơn, từ đó các lỗi sai cũng có nguy cơ xảy ra hơn. lazy load là gì
  • Điều đó dẫn đến: Lazy loading là một trò chơi “được ăn cả, ngã về không” (all-or-nothing). Nếu tất cả JavaScript không được tải xuống qua một kết nối 3G chậm hoặc nếu tất cả JavaScript không được thực thi, thì hình ảnh có thể không hiển một chút nào. Nếu lazyloading không hoạt động, sẽ chẳng ai có thể xem các Images below the fold hay above the fold, hay bất cứ image nào cả.

5 kỹ thuật để thực hiện lazyload ảnh giúp tăng website performance

1. Lazy loading using the intersection observer API

Denys Mishunov có một hướng dẫn tuyệt vời dựa trên Intersection Observer và các lazy loading image sử dụng nó. Dưới đây là giải pháp của anh ấy.

img data-src=”image.jpg” alt=”test image” lazyload là gì

Lưu ý cách đường dẫn đến hình ảnh được chứa bên trong thuộc tính data-src, chứ không phải thuộc tính src. Lý do là nếu sử dụng src có nghĩa là ảnh sẽ tải ngay lập tức, và đó không phải là những gì mà ta muốn.

Trong CSS, ta cung cấp cho mỗi hình ảnh một giá trị min-heigh giả sử là 100px. Điều này cho phép giữ mỗi phần placeholder của ảnh (img element không có thuộc tính src) theo chiều dọc.

img {
min-height: 100px;
…more styles here
}

Trong JavaScript, bạn tạo một config object và đăng ký nó với một intersectionObserver instance:

// create config object: rootMargin and threshold

// are two properties exposed by the interface

const config = {

  rootMargin: ‘0px 0px 50px 0px’,

  threshold: 0

};

// register the config object with an instance

// of intersectionObserver

let observer = new intersectionObserver(function(entries, self) {

  // iterate over each entry

  entries.forEach(entry => {

    // process just the images that are intersecting.

    // isIntersecting is a property exposed by the interface lazy load là gì

    if(entry.isIntersecting) {

      // custom function that copies the path to the img

      // from data-src to src

      preloadImage(entry.target);

      // the image is now in place, stop watching

      self.unobserve(entry.target);

    }

  });

}, config);

Cuối cùng, bạn lặp qua tất cả các ảnh của bạn và thêm chúng vào instance iterationObserver này:

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

lazyload
lazyload

2. Robin osborne’s progressively enhanced lazy loading lazyload 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ì
lazyload
lazyload

3. Lozad.Js

Một thay thế nhanh chóng và dễ dàng để thực hiện lazyload ả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. Lazyload 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 lazyload xong

Bạn có thể thực hiện lazyload 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ì

<script src=”yall.min.js”></script>

<script>

  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.

Liên hệ với SEMTEK để tháo nút thắt cho website của bạn bằng giải pháp về Marketing!

SEMTEK Co,.LTD

🏡 Địa chỉ: 2N Cư Xá Phú Lâm D, Phường 10, Quận 6, TP.HCM
📧 Email: info@semtek.com.vn
☎️ Hotline: (+84)098.300.9285

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

  • lazyloading android
  • lazyloading jquery
  • lazyloading c#
  • lazy loading reactjs
  • lazy load ajax
  • lazyloading html
  • lazy loading entity framework
  • lazy loading react native

Nội dung liên quan

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *