Bạn rất có thể dễ dàng nhận thấy khi xem bên trên Facebook. Lần đầu mở website Facebook lên các bạn sẽ đọc được 1 số lượng ít tin. Khi bạn cuộn đến dưới trang thì Facebook sẽ ban đầu tải 1 con số tin tiếp theo sau để hiển thị. Đó chính là Lazy loading.
Bạn đang xem: Lazy load là gì
Hôm nay, bản thân xin share về việc vận dụng kỹ thuật lazy loading đối với 1 thành phần nhỏ dại là Ảnh.
Lazy Loading là gì?
Lazy loading là một trong kĩ thuật về tối ưu khi có tác dụng web, thay bởi vì tải toàn cục trang web với render ngay từ đầu, nghệ thuật này có thể chấp nhận được tải ngay những thành phần cần thiết để hiển thị tới người dùng và trì hoãn các tài nguyên còn lại cho đến khi cần.
Image is critical
Chúng ta hãy cùng xem lấy ví dụ sau, chỉ là 1 trong những trang HTML cơ bản với 1 bức ảnh.
Bây giờ, thì mở phần Network Timeline trong Chrome DevTools.
DevTools report sự kiện load (hay onload) được khởi tạo nên ở 335ms. Như vậy, sự khiếu nại load đã biết thành block vì "awesome-photo.jpg".
Bạn có thể tưởng tượng là với ví dụ đơn giản và dễ dàng trên thì không ảnh hưởng gì cho trải nghiệm của người tiêu dùng cả vày trang web sẽ khá nhanh được hiển thị. Mặc dù 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 report của HTTP Archive (tại thời gian 27/Jul/2020), vừa phải 1 website trên desktop có dung tích 1999.9 KB. Trong khi, vừa phải 1 trang web trên desktop gồm dung lượng hình ảnh là 947.1 KB chiếm khoảng chừng 47,35 %. Chúng ta không thể có tác dụng ngơ các vấn đề tương quan đến Ảnh, nó quá quan trọng đặc biệt đối với đề nghị của fan dùng.
Kỹ thuật lazy loading so với Ảnh
Cơ bản, lúc khai báo 1 thành phần ảnh chúng ta làm như sau:
Vậy hy vọng ứng dụng lazy loading đến thành phần này thì họ thêm ở trong tính loading với cái giá trị lazy:
Dưới đó là các cực hiếm được cung cấp cho trực thuộc loading:
auto: cực hiếm 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 ở trong tính loading vào.lazy: Trì hoãn tải tài nguyên về cho tới khi đạt 1 khoảng cách nào kia từ khung nhìn.eager: sở hữu tài nguyên ngay lập tức lập tức, bất kỳ vị trí của nó trên trang.Theo trang Can I Use thì trực thuộc tính loading sẽ được phần lớn các trình chu đáo implement rồi. Chúng ta cũng có thể yên trọng tâm sử dụng.
Vậy còn so với các trình chuyên chú chưa cung cấp thì làm cho sao. Chúng ta cũng có thể tạo 1 polyfill hoặc cần sử dụng thư viện của mặt thứ 3 như LazySizes. Trực thuộc tính loading có thể dùng nhằm phát hiện xem trình xem xét có cung ứng tính năng này giỏi không:
if ("loading" in HTMLImageElement.prototype) // trình duyệt gồm hỗ trợ else // áp dụng polyfill hoặc thư viện của bên thứ 3
LazySizes
LazySizes là thư viện có vận tốc cao, buổi tối ưu SEO cùng tự khởi tạo thành (self-initializing) cho mục tiêu lazy load hình ảnh (bao bao gồm cả hình ảnh đáp ứng picture / srcset), iframe, script / widget và các thành phần khác nữa. Nó cũng ưu tiên những tài nguyên dựa trên sự biệt lập về tầm mức quan lại trọng, trong đó. LazySizes ưu tiên các bộ phận nằm trong khung chú ý và gần khung quan sát trình phê duyệt (near view elements) để tối ưu vận tốc tải thừa nhận thức (perceived performance) cấp tốc hơn.Bước 1: thêm links đến CDN cất LazySizes:hoặc bạn cũng có thể tải về web server và để liên kết trực tiếp bên trên server:
Bước 2: thêm class lazyload vào ảnh với trực thuộc tính data-src hoặc data-srcset:
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 hình ảnh với ở trong tính eager được thiết lập ngay lập tức bất cứ vị trí bên trên trang. Vào khi các hình hình ảnh với thuộc tính loading thì trình duyệt cần được đợi cho tới khi biết được vị trí của hình hình ảnh trên trang dựa vào IntersectionObserver. Nói chung, bất kỳ hình ảnh nào trong form nhìn cần phải trình duyệt tải ngay một cách mặc định. Chúng ta không nên chỉ định nằm trong tính loading=eager cho hồ hết trường hợp hình ảnh trong size nhìn.
Testing lazy loading
Chúng ta sẽ cùng kiểm tra xem hình ảnh có được tải chậm thật ko nhé. Mở Chrome DevTools bằng cách nhấn F12 hoặc click chuột phải lựa chọn Inspect Elements tiếp nối chọn tab Network → Img. Ở lần refresh trang nhất tiên bạn sẽ chỉ nhìn thấy 1 số ảnh phía bên trên được load.
Sau đó khi bạn scroll xuống bên dưới thì sẽ thấy những hình ảnh khác ngay mau chóng được load theo.
Xem thêm: Rack Rate Là Gì - Thuật Ngữ Khách Sạn Thông Dụng
Kết luận
Việc các trình chăm chú đã hỗ trợ chính thức (native) lazy loading rất có thể giúp chúng ta dễ dàng cải thiện trang web của chính mình hơn. Nếu như khách hàng nhận thấy bất kỳ behavior như thế nào không thông thường của nhân kiệt lazy loading trên google Chrome thì chúng ta có thể thông báo trên đây. Hy vọng bạn sẽ có tư duy thực hiện lazy loading ngay lập tức từ khi develop trang web.
Tham khảo:
Analyzing Critical Rendering Path Performance:https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp