Web Hosting

Tìm hiểu Lazy Loading là gì – Kỹ thuật Lazy Loading đối với ảnh cần làm thế nào?

Bài viết này chủ yếu dành cho những ai đã biết lazy loading là gì muốn tìm hiểu sâu hơn về nó, nó đòi hỏi bạn phải có hiểu biết nhất định về HTML, JavaScript, CSS. Với những ai đơn thuần chỉ muốn áp dụng lazy load lên trang WordPress, có thể tìm hiểu các plugin sẵn có chất lượng như Flying Images, a3 Lazy Load, vân vân. Nhìn chung tôi ủng hộ tính năng lazy load, nhưng như một cách tự phản biện, tôi chủ động tìm hiểu các điểm yếu của nó, chẳng hạn ở đây và ở đây và cả đây nữa.

Lưu ý:

Hiện bạn đã có thể sử dụng lazy loading cấp độ trình duyệt (native lazy loading)! Bạn có thể tham khảo link vừa dẫn để biết cách sử dụng thuộc tính loading và tận dụng thư viện của bên thứ ba đóng vai trò như một dự phòng (fallback) cho các trình duyệt vẫn chưa hỗ trợ thuộc tính này.
Thành phần ảnh và video trên website thường chiếm một lượng dữ liệu tải về lớn. Không may là các bên liên quan đến dự án có thể không thích cắt giảm bất cứ tài nguyên media (đa phương tiện) nào từ các ứng dụng đã có của họ. Tình huống bế tắc như vậy gây bực bội, đặc biệt khi tất cả mọi người đều muốn cải thiện hiệu suất và tốc độ, nhưng lại không đồng thuận về cách để đạt được điều đó. May thay, lazy loading là giải pháp giúp bạn có được dung lượng trang cần phải tải lần đầu (initial page payload)* thấp và thời gian tải lần đầu ngắn hơn, nhưng không bắt bạn phải cắt bỏ nội dung.
(*) initial page payload: dung lượng trang tải lần đầu. Từ khóa ở đây là initial/lần đầu. Các trang không lazy load thì trang sẽ tải một lượt tất cả các tài nguyên trên trang, còn với trang áp dụng lazy load, nội dung của trang sẽ không tải một lượt tất cả, mà nó sẽ được chia làm nhiều lần, các nội dung lazy load sẽ tải sau khi đạt điều kiện kích hoạt (trigger).

Tìm hiểu Lazy loading là gì?

Lazy load là kỹ thuật thực hiện trì hoãn (defer) tải các tài nguyên không quan trọng (non-critical resoureces) vào thời điểm tải trang (page load time). Thay vì tải ngay lập tức, các tài nguyên không quan trọng này chỉ tải vào thời điểm cần thiết (moment of need). Khi đề cập đến ảnh, thì “không quan trọng” thường đồng nghĩa với “ngoài màn hình / off-screen”. Nếu bạn sử dụng Lighthouse và kiểm tra một số cơ hội cải thiện, bạn có thể thấy một vài hướng dẫn trong địa hạt này ở dạng kiểm tra các ảnh ngoài màn hình:
lazy loading là gì

Tại sao lại cần Lazy Loading ảnh hoặc video mà không tải chúng luôn cho rồi?

Sau khi đã hiểu Lazy Loading là gì. Nhưng có lẽ bạn thắc mắc tại sao không tải ảnh luôn mà cần dùng tới Lazy Loading. Bởi vì có khả năng là bạn đang tải về các thành phần trên trang mà người dùng có thể không bao giờ nhìn đến. Điều này là vấn đề vì hai lý do sau:
  • Nó là sự lãng phí dữ liệu. Trên các kiểu kết nối băng thông không giới hạn (unmetered), điều tồi tệ nhất có thể vẫn chưa xảy ra đâu (dù bạn có thể sử dụng lượng băng thông quý giá này để ưu tiên tải các tài nguyên khác mà người dùng thực sự sẽ nhìn thấy). Trên các gói giới hạn dữ liệu, tải các thành phần người dùng không bao giờ nhìn đến có thể làm lãng phí tiền của họ.
  • Nó làm lãng phí thời gian xử lý, pin và các tài nguyên hệ thống khác. Sau khi một tài nguyên đa phương tiện (media) được tải về, trình duyệt phải giải mã (decode) và kết xuất (render) nội dung của nó trong khung nhìn trình duyệt.
Khi chúng ta lazy load ảnh và video, chúng ta làm giảm thời gian tải cần thiết để tải trang lúc ban đầu (initial page) thông qua giảm dung lượng tải trang lúc ban đầu, cũng như giảm sử dụng tài nguyên hệ thống, tất cả đều ảnh hưởng tích cực đến hiệu suất. Trong hướng dẫn này, chúng ta sẽ bàn về một số kỹ thuật và các chỉ dẫn để thực hiện lazy load ảnh và video cũng như một danh sách ngắn các thư viện phổ biến thường được dùng.

Lazy loading ảnh

Cơ chế lazy load ảnh đơn giản về mặt lý thuyết, nhưng đi vào chi tiết thì lại khá khó nhằn (finicky). Thêm vào đó có một số trường hợp riêng biệt có thể có cả lợi ích từ lazy load. Nào, chúng ta cùng bắt đầu tìm hiểu cách lazy load các ảnh nội tuyến (inline) trong HTML.

Image is critical

Chúng ta hãy cùng xem ví dụ sau, chỉ là 1 trang HTML cơ bản với 1 bức ảnh.
lazy loading là gì
Bây giờ, thì mở phần Network Timeline trong Chrome DevTools.
lazy loading là gì
DevTools report sự kiện load (hay onload) được khởi tạo ở 335ms. Như vậy, sự kiện load đã bị block bởi “awesome-photo.jpg”.
Bạn có thể tưởng tượng là với ví dụ đơn giản trên thì không ảnh hưởng gì đến trải nghiệm của người dùng cả vì trang web sẽ rất nhanh được hiển thị. Tuy nhiên, nếu trang web có 10, 20, … 100 ảnh thì sao. Không khó để đoán là thời gian chờ sẽ càng ngày càng lâu. Theo báo cáo của HTTP Archive (tại thời điểm 27/Jul/2020), trung bình 1 trang web trên desktop có dung lượng 1999.9 KB. Trong khi, trung bình 1 trang web trên desktop có dung lượng ảnh là 947.1 KB chiếm khoảng 47,35 %. Chúng ta không thể làm ngơ các vấn đề liên quan đến Ảnh, nó quá quan trọng đối với trải nghiệm của người dùng.

Kỹ thuật đối với Ảnh của Lazy Loading là gì?

Cơ bản, khi khai báo 1 thành phần ảnh chúng ta làm như sau:
lazy loading là gì
Vậy muốn ứng dụng lazy loading cho.thành phần này thì chúng ta thêm thuộc tính loading với giá trị lazy:
lazy loading là gì
Dưới đây là các giá trị được hỗ trợ cho thuộc loading:
  • auto: Giá trị mặc định phụ thuộc vào hành vi của từng trình duyệt,.tương tự với việc không thêm thuộc tính loading vào.
  • lazy: Trì hoãn tải tài nguyên về cho đến khi đạt 1 khoảng cách nào đó từ khung nhìn.
  • eager: Tải tài nguyên ngay lập tức, bất kể vị trí của nó trên trang.
 Theo trang Can I Use thì thuộc tính loading đã được đa số các trình duyệt implement rồi. Bạn có thể yên tâm sử dụng.
Vậy còn đối với các trình duyệt chưa hỗ trợ thì làm sao. Bạn có thể tạo 1 polyfill hoặc.dùng thư viện của bên thứ 3 như LazySizes. Thuộc tính loading có thể dùng để phát.hiện xem trình duyệt có hỗ trợ tính năng này hay không:

LazySizes 

LazySizes là thư viện có tốc độ cao,.tối ưu SEO và tự khởi tạo (self-initializing) cho mục đích lazy load ảnh.(bao gồm cả ảnh đáp ứng picture / srcset), iframe, script / widget và nhiều thành phần khác nữa. Nó cũng ưu tiên các tài nguyên dựa trên sự.khác biệt về tầm mức quan trọng, trong đó. LazySizes ưu tiên.các phần tử nằm trong khung nhìn và gần khung nhìn trình duyệt.(near view elements) để tối ưu tốc độ tải nhận thức (perceived performance) nhanh hơn.
  • Bước 1: thêm link đến CDN chứa LazySizes:
hoặc bạn có thể tải về web server & để link trực tiếp trên server:
lazy loading là gì
  • Bước 2: thêm class lazyload vào ảnh với thuộc tính data-src hoặc data-srcset:
Lưu ý: LazySizes không cần bất kỳ cấu hình bằng JavaScript nào.
Tránh sử dụng lazy loading cho ảnh trong khung nhìn đầu tiên
Bạn chỉ nên thêm lazy loading cho các ảnh ở bên dưới khung hiển thị đầu tiên. Các hình ảnh với thuộc tính eager được tải ngay lập tức bất kể vị trí trên trang. Trong khi các hình ảnh với thuộc tính loading thì trình duyệt cần phải đợi cho đến khi biết được vị trí của hình ảnh trên trang dựa trên IntersectionObserver. Nói chung, bất kỳ hình ảnh nào trong khung nhìn cần được trình duyệt tải ngay 1 cách mặc định. Bạn không cần chỉ định thuộc tính loading=eager cho những trường hợp ảnh trong khung nhìn.

Testing lazy loading là gì? 

Chúng ta sẽ cùng check xem ảnh có được tải chậm thật không nhé. Mở Chrome DevTools bằng cách nhấn F12 hoặc click chuột phải chọn Inspect Elements sau đó chọn tab Network → Img. Ở lần refresh page đầu tiên bạn sẽ chỉ nhìn thấy 1 số ảnh phía trên được load.
Sau đó khi bạn scroll xuống dưới thì sẽ thấy những ảnh khác ngay lập tức được load theo.

Lời kết

Việc các trình duyệt đã hỗ trợ chính thức (native) lazy loading có thể giúp bạn dễ dàng cải thiện trang web của mình hơn. Nếu bạn nhận thấy bất kỳ behavior nào không bình thường của tính năng lazy loading trên Google Chrome thì bạn có thể thông báo tại đây. Hy vọng bạn sẽ có tư duy sử dụng lazy loading ngay từ khi develop trang web.
Tìm hiểu liên quan
  • lazy loading example
  • lazy loading angular
  • imagekit lazy loading
  • how lazy loading works
  • lazy loading react
  • lazy loading github
  • lazy loading easy
  • lazy loading html
Nội dung liên quan

Bài viết liên quan

Trả lời

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 *

Back to top button