Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách sử dụng lazy loading cho các phần tử như hình ảnh, video... để tối ưu hiệu suất và tốc độ cho website nhé!
Lazy Loading Là Gì?
Thông thường khi chúng ta truy cập vào một trang web thì nó sẽ tải tất cả các thành phần trên trang web rồi sau đó mới hiển thị nội dung ra ngoài trình duyệt. Việc load trang như vậy sẽ làm ảnh hưởng rất nhiều tới tốc độ tải trang cho website.
Do đó Lazy Loading ra đời để giúp bạn có thể cải thiện và tối ưu hiệu suất cho các thành phần ảnh hưởng đến quá trình tải trang như là video, hình ảnh... bằng cách chỉ tải trước các nội dung được yêu cầu và sau đó sẽ tải các thành phần khác khi người dùng thật sự cần tới. Và để hiểu rõ hơn bạn xem hình ảnh sau nhé!
Lợi Ích Của Việc Sử Dụng Lazy Loading?
Có hai lợi ích chính khi chúng ta ssử dụng lazy loading là:
- Cải thiện hiệu suất: Bạn sẽ giảm được số lượng thành phần cần phải tải trong trang web. Từ đó thời gian mà trình duyệt xử lý và phân tích sẽ được cải thiện hơn. Do đó nội dung website đến với người dùng sẽ nhanh hơn.
- Giảm Chi phí: Có một số hosting lưu trữ hình ảnh thì sẽ tính chi phí dựa trên số byte mà bạn sử dụng. Do đó kỹ thuật này sẽ giúp bạn tránh được tình trạng tải các thành phần trên website mà người dùng không bao giờ dùng tới.
Và để giúp bạn dễ hình dung thì mình sẽ lấy một ví dụ trong thức tế nhé!
Các Dự Án Lazy Loading Cho Website
Lazy Loading cho Hình Ảnh
See the Pen Lazy Load Images by Derek Morash (@derekmorash) on CodePen.
Hiệu Ứng Lazy Loading Cho Hình Ảnh Theo Kiểu Medium
See the Pen Medium image lazy load effect by Lógico (@logico-ar) on CodePen.
Ví Dụ Về Lazy Load
See the Pen Lazy Load Example by Sanjeev Pandey (@yednap) on CodePen.
Tạo Lazy Load Với SVG
See the Pen Lazy loading with inline SVG by Mikael Ainalem (@ainalem) on CodePen.
Tạo Lazy Load Với Hiệu Ứng Scrollout
See the Pen Lazy-Load images with ScrollOut by Christopher Wallis (@notoriousb1t) on CodePen.
Tạo Lazy Load Với Javascript Thuần
See the Pen Lazy loading images using event handlers - example code by ImageKit.io (@imagekit_io) on CodePen.
Tạo Lazy Loading Hình Ảnh Với Chú Thích
See the Pen Lazy Loading Fig+Figcaption & Flipping Card by Alex Paul (@alex_paul) on CodePen.
Lazy Load Với Thư Viện Slick
See the Pen Slick Slide by Jason Davis (@jasondavis) on CodePen.
Lazy Load Cho Danh Sách
See the Pen Lazy loading list items by Kevin Ivan (@kvzivn) on CodePen.
Lazy Load Cho Hình Ảnh Background Trong CSS
See the Pen Lazy Loading background images in CSS by ImageKit.io (@imagekit_io) on CodePen.
Lazy Load Cho Gallery
See the Pen Grid Fade and Intersection Observer Lazyload by magnificode (@magnificode) on CodePen.
Lazy Load Hình Ảnh Bằng Vuejs
See the Pen ScrollTrigger Vue.js - lazy load images by Erik Terwan (@erikterwan) on CodePen.
Lazy Load Hình Ảnh Bằng Angularjs
See the Pen Lazy Loading Image With AngularJS from Ben Nadel by yaoyi (@yaoyi) on CodePen.
Lazy Load Hình Ảnh Bằng Reactjs
See the Pen React Preload Image by Stelios Constantinides (@stothelios) on CodePen.
Lazy Load Video Iframe
See the Pen Lazy loading video iframe with placeholder by Vincent Orback (@vincentorback) on CodePen.
Tạo Lazy Load Cho Masonry layout
See the Pen Masonry layout Pure #CSS Grid + lazy-load v.2 by @kseso by Kseso (@Kseso) on CodePen.
Tạo Lazy Load Bằng Jquery
See the Pen jquery lazy loading images by andy (@NaSymbol) on CodePen.
Hiệu Ứng chuyển Động Cho Lazy Load
See the Pen Animated image placeholder by Abhisek Dutta (@0xfa1l) on CodePen.
Các Thư Viện Lazy Loading
Thư Viện LOZAD.JS
Thư Viện Lazysizes
Thư Viện Layzr.js
Thư Viện Lazy Load Remastered
Thư Viện Responsively Lazy
Thư Viện Blazy
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức tạo lazy loading hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!