Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Lazy Loading Là Gì? Các Ví Dụ Và Thư Viện Lazy Loading Cho Website

Lazy Loading Là Gì? Các Ví Dụ Và Thư Viện Lazy Loading Cho Website


Ngày 24 Tháng 12 Năm 2020

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.
Trang Web Được Tải Bình Thường 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ầusau đó 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é!

Trang Web Được Sử dụng lazy loading

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.

Nguồn

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.

Nguồn

Ví Dụ Về Lazy Load

See the Pen Lazy Load Example by Sanjeev Pandey (@yednap) on CodePen.

Nguồn

Tạo Lazy Load Với SVG

See the Pen Lazy loading with inline SVG by Mikael Ainalem (@ainalem) on CodePen.

Nguồn

Tạo Lazy Load Với Hiệu Ứng Scrollout

See the Pen Lazy-Load images with ScrollOut by Christopher Wallis (@notoriousb1t) on CodePen.

Nguồn

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.

Nguồn

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.

Nguồn

Lazy Load Với Thư Viện Slick

See the Pen Slick Slide by Jason Davis (@jasondavis) on CodePen.

Nguồn

Lazy Load Cho Danh Sách

See the Pen Lazy loading list items by Kevin Ivan (@kvzivn) on CodePen.

Nguồn

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.

Nguồn

Lazy Load Cho Gallery

See the Pen Grid Fade and Intersection Observer Lazyload by magnificode (@magnificode) on CodePen.

Nguồn

Lazy Load Hình Ảnh Bằng Vuejs

See the Pen ScrollTrigger Vue.js - lazy load images by Erik Terwan (@erikterwan) on CodePen.

Nguồn

Lazy Load Hình Ảnh Bằng Angularjs

See the Pen Lazy Loading Image With AngularJS from Ben Nadel by yaoyi (@yaoyi) on CodePen.

Nguồn

Lazy Load Hình Ảnh Bằng Reactjs

See the Pen React Preload Image by Stelios Constantinides (@stothelios) on CodePen.

Nguồn

Lazy Load Video Iframe

See the Pen Lazy loading video iframe with placeholder by Vincent Orback (@vincentorback) on CodePen.

Nguồn

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.

Nguồn

Tạo Lazy Load Bằng Jquery

See the Pen jquery lazy loading images by andy (@NaSymbol) on CodePen.

Nguồn

Hiệu Ứng chuyển Động Cho Lazy Load

See the Pen Animated image placeholder by Abhisek Dutta (@0xfa1l) on CodePen.

Nguồn

Các Thư Viện Lazy Loading

Thư Viện LOZAD.JS

Thư Viện LOZAD.JS

Nguồn

Thư Viện Lazysizes

Thư Viện Lazysizes

Nguồn

Thư Viện Layzr.js

Thư Viện Layzr.js

Nguồn

Thư Viện Lazy Load Remastered

Thư Viện Lazy Load Remastered

Nguồn

Thư Viện Responsively Lazy

Thư Viện Responsively Lazy

Nguồn

Thư Viện Blazy

Thư Viện Blazy

Nguồn

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ẻ!

Load WooCommerce Stores in 249ms!