Lazy loading image trong website là gì?
Lazy loading trong website là gì nhỉ? Humb…
1. Lazy loading là gì?
Lazy load là 1 kỹ thuật giúp trì hoãn việc tải hình ảnh ở khung hình phía dưới website, nghĩa là khi truy cập vào 1 website khung hình bạn nhìn thấy trước mặt thì hình ảnh sẽ hiển thị ngay lập tức => Ok, các hình ảnh phía dưới khung hình mà bạn nhìn thấy (nghĩa là các nội dung phía bên dưới website, bạn chưa lăn chuột xuống phía dưới sẽ không nhìn thấy) thì các hình ảnh sẽ không được tải ngay lập tức mà chúng sẽ trì hoãn việc hiển thị tới khi nào bạn kéo chuột xuống tại khung hình mà bạn nhìn thấy thì hình ảnh được trì hoãn đấy mới tải (hiển thị đúng yêu cầu).2. Ưu điểm của Lazy loading
Ưu điểm đầu tiên đó là tăng điểm số Google Pagespeed, nếu bạn không trì cài đăt lazy loading, khi bạn check điểm số với công cụ tính điểm hiệu suất thì các công cụ sẽ cho bạn các điểm trừ, thay vì là điểm cộng để vượt qua bài test của công cụ. Ưu điểm tiếp theo đó là nếu website của bạn có nhiều hình ảnh lazy loading sẽ giúp page size nhỏ hơn, tốc độ tải trang sẽ nhanh hơn vì các hình ảnh được tải lần lượt khi nào người dùng kéo chuột xuống dưới thì ảnh mới được tải, điều này cũng giúp server của bạn được giảm tải đáng kể.
3. Nhược điểm của Lazy loading
Có lẽ ít người để ý đến nhược điểm của Lazy loading bởi ưu điểm to lớn của nó nhưng theo cá nhân của tôi, đứng ở góc độ trải nghiệm người dùng thì Lazy loading có các nhược điểm như sau: 1. Lazy loading sẽ là thảm họa nếu bạn sử dụng internet có tốc độ chậm Nghe có vẻ bất hợp lý nhưng nếu bạn kết nối internet có tốc độ chậm, khi truy cập vào 1 trang web có sử dụng tính năng Lazy loading các hình ảnh phản hồi rất chập chờn, và đặc biệt rất khó chịu khi các hỉnh ảnh sẽ ở dạng placeholder mà không hiển thị chính xác hình ảnh gốc.
1 ví dụ về sự giảm trải nghiệm khi hình ảnh không được tải khi sử dụng Lazy loading image
4. Công nghệ Lazyload hình ảnh có những loại nào?
Để tải chậm các hình ảnh trên website, đa số chúng ta sẽ sử dụng các thư viện Javascript của bên thứ ba để thực hiện tính năng này. Một số thư viện nổi tiếng có thể kể đến như vanilla-lazyload, lazyload của tuupola hay lazysizes có chất lượng rất tốt mà đặc điểm chung là được viết trên Javascript thuần và không phụ thuộc vào jQuery. Đối với WordPress thì các thư viện này được đóng gói thành một plugin hoàn chỉnh để bạn sử dụng ví dụ như WP-Rocket , Litespeed cache , các plugin lazy load cho WordPress chuyên dụng như: A3 Lazy Load … hoặc được các theme trả phí tính hợp sẵn luôn. Bạn có thể xem qua danh sách các plugin Lazy cho WordPress tại đây Cách sử dụng các thư viện lazyload khá tương đồng nhau và đơn giản để sử dụng. Thông thường để hiển thị một tấm hình chúng ta chỉ cần viết một đoạn HTML đơn giản như:|
1 |
<img src="/url-dan-den-hinh-anh/ten-hinh-anh.jpg"> |
<img/> này sẽ ngay lập tức tải ngay tập tin ten-hinh-anh.jpg mà không hề quan tâm tấm hình này có được sử dụng hay không hoặc được sử dụng ở đâu (display none hoặc chỉ hiển thị khi hover,…). Nhờ các thư viện lazyload, chúng ta có thể quy định việc hình ảnh được tải khi nào ví dụ: ngay khi các thành phần khác quan trọng hơn tải xong hoặc khi người dùng cuộn chuột gần đến đoạn cần hiển thị hình ảnh. Việc mọi người cần làm là thay đổi một chút trong thẻ <img/> thành:
|
1 2 |
<img class="lazyload" data-src="/url-dan-den-hinh-anh/ten-hinh-anh.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="> |
src thành data-src là tối quan trọng và phải được thực hiện từ phía backend (PHP, .NET,…). Bởi vì trình duyệt luôn xử lý HTML trước tiên, nếu trình duyệt phát hiện thuộc tính src trong thẻ <img/> thì sẽ tải ngay hình ảnh mà không đợi chờ gì và lazyload sẽ mất tác dụng.
Sử dụng Lazyload native từ trình duyệt để giải quyết vấn đề ở trên.
Native Lazy Loading có cấu trúc như sau:
|
1 2 |
<img src="myimage.jpg" loading="lazy" alt="..." /> <iframe src="content.html" loading="lazy"></iframe> |
loading="lazy" này chưa được hỗ trợ 100% trên các trình duyệt phổ biến mà các bạn có thể xem tại Can I Use. Từ đó sinh ra một cách để hỗ trợ lazyload trên cả hai loại trình duyệt, một là có hỗ trợ loading, hai là không hỗ trợ loading. Điều này lại sinh ra một vấn đề khác là native lazyload từ trình duyệt chỉ hiểu thuộc tính src, trong khi các thư viện lazyload phải sử dụng data-src như đã nói ở trên.
