Web Performance: Tìm hiểu và áp dụng kỹ thuật lazy loading vào website

Hello xin chào các bạn, trong bài viết này mình sẽ cùng các bạn tìm hiểu về khái niệm, lý do sử dụng và cách áp dụng lazy loading cho hình ảnh của website để tăng tốc độ truy cập cho site.

Lazy loading
Giới thiệu về lazy loading

1. Lazy loading là gì?

Lazy loading hay gọi là bất đồng bộ loading (synchronous loading) là một mẫu thiết kế (design pattern) thông thường được sử dụng trong lập trình máy tính. Được sử dụng nhiều trong thiết kế và phát triển web để trì hoãn việc khởi tạo một đối tượng cho đến thời điểm cần thiết. Góp phần mang lại hiệu quả trong hoạt động của chương trình.

2. Tại sao dùng lazy loading

Giảm thời gian tải ban đầu:

Sử dụng lazy loading sẽ làm giảm trọng lượng của trang web khi load lần đầu dẫn đến việc tải trang sẽ nhanh chóng hơn.

Tiết kiệm băng thông:

Bằng cách chỉ cung cấp nội dung khi người đọc có yêu cầu ví dụ khi scroll thì hình ảnh mới hiển thị ra.

Tiết kiệm tài nguyên hệ thống

Một số hình ảnh, JavaScript và mã code thực sự cần được hiển thị hoặc thực thi thì mới load, dẫn đến tiết kiệm được tài nguyên cho cả client và server.

example lazy loading
Hình ảnh minh hoạ lazy loading hoạt động

3. Áp dụng lazy loading vào website

Thực tế thì lazy loading được sử dụng ở nhiều trường hợp, trong bài viết này mình sẽ giới thiệu đến các bạn trường hợp hay sử dụng nhất đó là lazy loading cho hình ảnh trên website như hình ảnh sản phẩm, hình ảnh bài viết, hình ảnh nội dung…

Sử dụng thư viện bên thứ ba (third party)

  1. Lazysizes
  2. Lazyload
  3. Lozad
  4. Lazy loading attribute polyfill

Sử dụng thuộc tính loading

Bắt đầu từ phiên bản Chrome 76+, bạn sẽ có thể sử dụng thuộc tính mới là “loading” để nạp tài nguyên bằng lazy-loading mà không cần phải viết một đoạn code tùy chỉnh hoặc sử dụng thư viện JavaScript.

Để kiểm tra trình duyệt có hỗ trợ thuộc tính loading hay không bạn có thể dùng đoạn code này

Có 2 giá trị:
true: trình duyệt hỗ trợ thuộc tính loading

false: trình duyệt không hỗ trợ

4. Một số lưu ý khi sử dụng lazy loading cho image

  • Tránh áp dụng lazy loading cho khung nhìn đầu tiên, nên áp dụng khi dữ liệu ngoài tầm nhìn của user.
  • Khi Lazy loading một hình ảnh, hãy giải mã không đồng bộ hình ảnh đó bằng phương thức JavaScript decode() trước khi chèn nó vào DOM. Nếu không, hình ảnh lớn có thể khiến trình duyệt bị treo.
  • Xử lý lỗi trong trường hợp không tải được hình ảnh hoặc đối tượng.
  • Đưa ra noscript trong trường hợp JavaScript không có sẵn. Nếu không, người dùng bị vô hiệu hóa JavaScript sẽ không thấy bất kỳ tài nguyên nào được tải chậm.

Trong bài viết này mình đã giúp các bạn tìm hiểu về khái niệm, lý do sử dụngcách áp dụng lazy loading cho hình ảnh của website để tăng tốc độ truy cập cho site, trong bài viết tiếp theo mình sẽ tích hợp lazy loading vào một project laravel cụ thể mời các bạn đón xem.

Nguồn tài liệu tham khảo:

  1. https://en.wikipedia.org/wiki/Lazy_loading
  2. https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
  3. https://web.dev/browser-level-image-lazy-loading
  4. https://www.imperva.com/learn/performance/lazy-loading

Hi vọng sẽ giúp được bạn. Thanks