Trong thời đại càng ngày càng phát triển về công nghệ như hiện nay, việc các website sử dụng các hình ảnh là gần như 100%. Thậm chí có những website mà nó chứa phần lớn là ảnh, hơn nữa kích cỡ của chúng cũng không hề nhỏ. Thử so sánh một website khi vào sẽ tải một lần tất cả ảnh lên trong một trang khi bạn truy cập. Ồ, nếu càng nhiều ảnh thì sao, performance của website sẽ khá là thấp. Hơn nữa, việc tải ảnh lên tiêu tốn rất nhiều tài nguyên, băng thông để xử lý. Như vậy là người dùng sẽ không còn hứng thú quay lại nữa. Thay vì việc xử lý như trên, ta có thể tùy chọn việc tải images bằng cách sử dụng lazy loading images. Chúng ta sẽ cùng tìm hiểu kỹ hơn ở phần dưới nhé. Go go!
1. Lazy loading là gì?
Khái niệm về lazy loading chắc chắn với những developer, đặc biệt là những developer phía front-end chắc chắn đã nghe đến. Hiểu lazy (lường biếng) có nghĩa là việc khi nào cần đến thì ta mới sử dụng. Nó sẽ không ngay lập tức phục vụ cho chúng ta nếu như chúng ta không có một hành động gì đó để nó hiểu được là ta đang cần nó. =)))
Thí dụ, với Vue.js , chúng ta có một thuộc tính với v-model đó là v-model.lazy. Ý nghĩa của thuộc tính này là khi bạn thay đổi xong văn bản và chuyển sang thành phần khác trong giao diện, khi đó sự kiện change văn bản của ô nhập liệu mới xảy ra và dữ liệu mới được cập nhật xuống model. Nó có khác một chút so với việc bạn không sử dụng lazy =))
Lại lấy một ví dụ nữa. Các bạn có thể nghe đến cái gọi là Lazy Loading Routes hay Async Components trong Vue.js rồi nhỉ. Bản chất ở của chúng đó là thay vì load toàn bộ nội dung thì trình duyệt sẽ chỉ load những file khi phía client gọi cần đến.
Mình có đọc và tham khảo thì có thấy một số bài khá nay và rõ ràng về phần này. Mình xin được phép chia sẻ:
2. Lazy Loading Images – Vue.js
Đến phần này mình nghĩ các bạn cũng hiểu phần nào về Lazy loading rồi. Giờ mình sẽ vào phần chính mà mình nói ngày hôm nay, đó là mình sẽ giới thiệu về lazy loading images trong Vue.js.
Cài đặt
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | npx create-nuxt-app image-lazy-loading Generating Nuxt.js project <span class="token keyword">in</span> /home/vu/Desktop/image-lazy-loading ? Project name image-lazy-loading ? Project description My lovely Nuxt.js project ? Use a custom server framework none ? Choose features to <span class="token function">install</span> <span class="token punctuation">(</span>Press <span class="token operator"><</span>space<span class="token operator">></span> to select, <span class="token operator"><</span>a<span class="token operator">></span> to toggle all, <span class="token operator"><</span>i<span class="token operator">></span> to invert selection<span class="token punctuation">)</span> ? Use a custom UI framework none ? Use a custom <span class="token function">test</span> framework none ? Choose rendering mode Single Page App ? Author name Vu Nguyen ? Choose a package manager yarn To get started: <span class="token function">cd</span> image-lazy-loading yarn run dev To build <span class="token operator">&</span> start <span class="token keyword">for</span> production: <span class="token function">cd</span> image-lazy-loading yarn run build yarn start |
Mình sẽ dùng Nuxt.js, một framework để tạo các ứng dụng Universal Vue.js. Mình cũng có link một số tài liệu về Nuxt.js tại:
Tất cả phần cài đặt mình đã show rất chi tiết rồi nhé.
Package Vue-lazyload for lazy-loading images
Có rất nhiều package hỗ trợ cho việc xử lý lazy loading images như vue-lazyload, lozad, lazyload . Tuy nhiên mình chọn package vue-lazyload để xử lý.
Cài đặt
1 2 | yarn add vue-lazyload |
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token operator">*</span> plugins<span class="token operator">/</span>vue<span class="token operator">-</span>lazyload <span class="token operator">*</span> <span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> Lazyload <span class="token keyword">from</span> <span class="token string">'vue-lazyload'</span><span class="token punctuation">;</span> Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Lazyload<span class="token punctuation">,</span> <span class="token punctuation">{</span> preLoad<span class="token punctuation">:</span> <span class="token number">1.3</span><span class="token punctuation">,</span> error<span class="token punctuation">:</span> <span class="token string">'/404.png'</span><span class="token punctuation">,</span> loading<span class="token punctuation">:</span> <span class="token string">'/loading.png'</span><span class="token punctuation">,</span> attempt<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> listenEvents<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'scroll'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> |
1 2 3 4 5 | <span class="token operator">*</span> nuxt<span class="token punctuation">.</span>config<span class="token punctuation">.</span>js <span class="token operator">*</span> plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'~/plugins/vue-lazyload'</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> |
Các options ở đây các bạn có thể tham khảo tại Github vue-lazyload. Khá là dễ hiểu =))))
Ngoài ra các bạn có thể tìm hiểu thêm về các options khác nữa để có thể custom theo cách mà bạn mong muốn.
Đến đây mình đã cài đặt xong, giờ test thử thôi. Mình sẽ lấy tạm 10 ảnh và đặt vào thư mục static nhé. Những ảnh của mình hiển thị ra có kích thước xấp xỉ 900kb/1 ảnh.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | <span class="token operator">*</span> pages<span class="token operator">/</span>index<span class="token punctuation">.</span>vue <span class="token operator">*</span> <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lazy-loading"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lazy-loading__item"</span><span class="token operator">></span> <span class="token operator"><</span>span<span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry<span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span>s<span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book<span class="token punctuation">.</span> It has survived not only five centuries<span class="token punctuation">,</span> but also the leap into electronic typesetting<span class="token punctuation">,</span> remaining essentially unchanged<span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span>s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages<span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum<span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>img v<span class="token operator">-</span>lazy<span class="token operator">=</span><span class="token string">"`/1-1.jpg`"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lazy-loading__item"</span><span class="token operator">></span> <span class="token operator"><</span>span<span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry<span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span>s<span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book<span class="token punctuation">.</span> It has survived not only five centuries<span class="token punctuation">,</span> but also the leap into electronic typesetting<span class="token punctuation">,</span> remaining essentially unchanged<span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span>s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages<span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum<span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>img v<span class="token operator">-</span>lazy<span class="token operator">=</span><span class="token string">"`/1-2.png`"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lazy-loading__item"</span><span class="token operator">></span> <span class="token operator"><</span>span<span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry<span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span>s<span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book<span class="token punctuation">.</span> It has survived not only five centuries<span class="token punctuation">,</span> but also the leap into electronic typesetting<span class="token punctuation">,</span> remaining essentially unchanged<span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span>s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages<span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum<span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>img v<span class="token operator">-</span>lazy<span class="token operator">=</span><span class="token string">"`/1-2-2.png`"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lazy-loading__item"</span><span class="token operator">></span> <span class="token operator"><</span>span<span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry<span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span>s<span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book<span class="token punctuation">.</span> It has survived not only five centuries<span class="token punctuation">,</span> but also the leap into electronic typesetting<span class="token punctuation">,</span> remaining essentially unchanged<span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span>s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages<span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum<span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>img v<span class="token operator">-</span>lazy<span class="token operator">=</span><span class="token string">"`/1-2-3.png`"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lazy-loading__item"</span><span class="token operator">></span> <span class="token operator"><</span>span<span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry<span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span>s<span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book<span class="token punctuation">.</span> It has survived not only five centuries<span class="token punctuation">,</span> but also the leap into electronic typesetting<span class="token punctuation">,</span> remaining essentially unchanged<span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span>s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages<span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum<span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>img v<span class="token operator">-</span>lazy<span class="token operator">=</span><span class="token string">"`/1-2-4.png`"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lazy-loading__item"</span><span class="token operator">></span> <span class="token operator"><</span>span<span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry<span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span>s<span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book<span class="token punctuation">.</span> It has survived not only five centuries<span class="token punctuation">,</span> but also the leap into electronic typesetting<span class="token punctuation">,</span> remaining essentially unchanged<span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span>s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages<span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum<span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>img v<span class="token operator">-</span>lazy<span class="token operator">=</span><span class="token string">"`/1-2-5.png`"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lazy-loading__item"</span><span class="token operator">></span> <span class="token operator"><</span>span<span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry<span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span>s<span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book<span class="token punctuation">.</span> It has survived not only five centuries<span class="token punctuation">,</span> but also the leap into electronic typesetting<span class="token punctuation">,</span> remaining essentially unchanged<span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span>s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages<span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum<span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>img v<span class="token operator">-</span>lazy<span class="token operator">=</span><span class="token string">"`/1-2-6.png`"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lazy-loading__item"</span><span class="token operator">></span> <span class="token operator"><</span>span<span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry<span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span>s<span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book<span class="token punctuation">.</span> It has survived not only five centuries<span class="token punctuation">,</span> but also the leap into electronic typesetting<span class="token punctuation">,</span> remaining essentially unchanged<span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span>s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages<span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum<span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>img v<span class="token operator">-</span>lazy<span class="token operator">=</span><span class="token string">"`/1-2-7.png`"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lazy-loading__item"</span><span class="token operator">></span> <span class="token operator"><</span>span<span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry<span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span>s<span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book<span class="token punctuation">.</span> It has survived not only five centuries<span class="token punctuation">,</span> but also the leap into electronic typesetting<span class="token punctuation">,</span> remaining essentially unchanged<span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span>s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages<span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum<span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>img v<span class="token operator">-</span>lazy<span class="token operator">=</span><span class="token string">"`/1-2-8.png`"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"lazy-loading__item"</span><span class="token operator">></span> <span class="token operator"><</span>span<span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry<span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span>s<span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book<span class="token punctuation">.</span> It has survived not only five centuries<span class="token punctuation">,</span> but also the leap into electronic typesetting<span class="token punctuation">,</span> remaining essentially unchanged<span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span>s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages<span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum<span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span>img v<span class="token operator">-</span>lazy<span class="token operator">=</span><span class="token string">"`/1-3-1.jpg`"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> components<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>style lang<span class="token operator">=</span><span class="token string">"scss"</span><span class="token operator">></span> <span class="token punctuation">.</span>lazy<span class="token operator">-</span>loading <span class="token punctuation">{</span> <span class="token operator">&</span>__item <span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">750</span>px<span class="token punctuation">;</span> margin<span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span> |
Lưu ý là nếu bạn muốn lazy loading images thông qua thuộc tính background-image thì vue-lazyload cũng sẽ hỗ trợ cho bạn nhé.
1 2 | <span class="token operator"><</span>div v<span class="token operator">-</span>lazy<span class="token punctuation">:</span>background<span class="token operator">-</span>image<span class="token operator">=</span><span class="token string">"src"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
Dưới đây là kết quả của việc mình đã thử test việc trình duyệt sử dụng lazy loading images và không sử dụng xem kết quả như thế nào. Chúng ta sẽ disable cache từ trình duyệt. Hãy để ý phần network bạn sẽ thấy khi scroll đến đâu thì ảnh sẽ load đến đó – thay vì load một lần tất cả. Và đây là kết quả.
Sử dụng lazy loading:
Không sử dụng lazy loading:
Rõ ràng là việc sử dụng lazy loading có tác dụng rất lớn trong việc tiết kiệm resource,(transferred, requests, timing, …), kéo TTFB trở xuống thấp hơn. Hơn nữa nó còn hỗ trợ rất tốt trong việc cải thiện UX cho người dùng. Ở đây ảnh của mình rất nhỏ, chỉ khoảng vài trăm kb, hơn nữa số lượng ảnh cũng chỉ là 10 cái. Vậy tự hỏi nếu tự hỏi website của bạn có nhiều ảnh thì mọi thứ sẽ như thế nào.
Ngoài ra thì package này còn hỗ trợ việc lazy loading component như mình nói ở phần đầu nữa. Các bạn có thể sử dụng 2 trong 1 được nhé. Nếu có thời gian rảnh hãy nghiên cứu nó. Mình nghĩ nó là một package khá tuyệt vời.
Kết
Bài viết của mình có thể khá là nhạt về phần văn vở, vì vậy nếu đọc thì mọi người cố gắng đọc hết nhé.
Cảm ơn các bạn đã theo dõi bài viết của mình. Hẹn gặp lại các bạn trong bài viết tiếp theo. Mình xin cảm ơn.
Link github: https://github.com/vunguyen10111995/image-lazy-loading
