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.

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:

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.

(*) 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).

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.

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.

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:

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:

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

• 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:

• 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ì?

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.

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

• lazy loading example
• lazy loading angular
• imagekit lazy loading
• how lazy loading works
• lazy loading react
• lazy loading github
• lazy loading là gì
• lazy loading html

Nội dung liên quan

• Nên mua hosting của công ty nào để có chất lượng tốt nhất?
• Nơi mua/thuê máy chủ giá rẻ cho Website ở đâu tốt và chất lượng
• Các yếu tố để xác định được nên dùng hosting nào