Kiến thức về Lazy Loading sẽ giúp tăng Website Performance của bạn

Tiêu đề nội dung

Với một website hình ảnh đóng vai trò rất quan trọng bởi nó có từ hầu hết mọi nơi từ Logo, Banner, Product Image. Bởi vậy chất lượng ảnh lớn tỉ lệ thuận với việc người dùng sẽ có hình ảnh đẹp và chất lượng khi sử dụng giao diện website. Nhưng số lượng ảnh có dung lượng lớn lại ảnh hưởng không nhỏ tới việc load trang, nhưng làm gì khi mà bạn cũng không thể sử dụng ít ảnh đi được? Lúc này, kỹ thuật Lazy Loading Image sẽ là cứu cánh cho bạn.

Khái niệm Lazy loading là gì?

1. Khái niệm

Lazy Loading được hiểu nôm na chính là việc load dữ liệu khi bạn cần sử dụng đến chúng. Ví dụ như khi nhiều người cùng vào 1 page sẽ không kéo xuống hết đến cuối trang để đọc nội dung thì điều bạn cần làm là load nội dung trước. Việc nên làm đó chính là khi người dùng scroll đến đâu bạn sẽ load dữ liệu đến đó. lazy loading có thể áp dụng cho bất cứ resource nào trên 1 page, thậm chí là cả file JavaScript.

Một ví dụ mà chắc ai cũng đã từng gặp, hãy tưởng tượng rằng bạn bước vào một quán nhậu:

Bạn gọi một loạt 10 món ăn, bạn đợi quán chế biến và mang thức ăn lên cho bạn.
Bạn đợi thật lâu và đùng một cái quán bê lên cả 10 món một lúc.

Bạn có thật sự mong đợi điều trên không? Có một cách “tốt” hơn trong trường hợp này:

Bạn chỉ nên gọi 3 món thôi và thưởng thức.
Bạn canh thời điểm phù hợp và gọi tiếp 3 món nữa.
Sau khi ăn 6 món, bạn thấy no và quyết định thanh toán và ra về, vậy là bạn đã tiết kiệm tiền (và thực phẩm) cho 4 món còn lại, và bạn vẫn cảm thấy vui vì không phải chờ đợi quá lâu.

Lazy loading chính là vậy đó. Khi user vào một trang web có rất nhiều feature (ảnh), nhiều khi họ chỉ vào mỗi trang chủ dạo chơi thôi. Và trong trang chủ, họ cũng chỉ xem cái giao diện đầu tiên chứ chưa chắc đã scroll xuống và xem hết. Trong trường hợp đó, tại sao chúng ta lại bắt browser tải về tất cả mọi feature, tất cả mọi tấm ảnh trong khi user chưa cần hoặc có thể không cần đến?

Trong giới hạn của bài viết này, mình xin phép chỉ phân tích về kĩ thuật lazy-loading images thôi nhé.

2. Ưu điểm của Lazy Loading

Lazy loading là một trong những kỹ thuật tối ưu hiệu suất website hiệu quả nhất đang được sử dụng phổ biến hiện nay. Chắc chắn bạn sẽ không bao giờ phải mất chi phí băng thông cho những gì mà bạn không tải xuống, không xem và không nhìn thấy. Nếu như lưu lượng truy cập là một trong những mối quan tâm lớn nhất của bạn thì Lazy loading sẽ là một sự lựa chọn lí tưởng.

3. Ứng dụng của Lazy loading

Trên thực tế, Lazy loading được sử dụng rộng rãi nhất trong lập trình, thiết kế website. WordPress cung cấp một giải pháp dựa trên Lazy Loading mang tên Infinite Scroll, hỗ trợ bạn sử dụng con lăn và cuộn con chuột liên tục để đọc thêm các nội dung mới.

Google tiếp cận với Lazy loading theo hướng cụ thể là ở mục tìm kiếm hình ảnh. Google sẽ đưa ra danh sách 4-5 bức ảnh liên quan sau khi xem cụ thể một tấm hình nào đó và bên cạnh đó là nút “View More” để xem nhiều ảnh hơn.

Tại sao cần sử dụng Lady Loading?

Lazy loading chính là một kỹ thuật vô cùng lý tưởng với những tường.hợp mà bạn có hiểu rõ về nhân khẩu học của người dùng.mục tiêu của mình, những người dùng này chủ yếu sử dụng.những thiết bị có kết nối cùng bộ vi xử lý tốt.

Các thiết bị này chính là những chiếc điện thoại thông minh.từ các dòng trung đến cao cấp với tốc độ mạnh nhanh,.laptop hoặc desktop trên các kết nối băng thông rộng. Nếu như người dùng của bạn không có những đặc.điểm trên thì tốt nhất bạn nên ít phụ thuộc vào JavaScript càng tốt.

Việc áp dụng Lazy loading cho những hình ảnh không.cần thiết trên bài đăng của Blog và trên những Potography protfolio.của bạn sẽ là một ý tưởng tuyệt vời. Ngược lại, các sản phẩm ảnh được áp dụng phương pháp.Lazy loading trong một cửa hàng trực tuyến thì lại có thể.gây phản tác dụng, nhất là trong trường hợp có ai đó đang cần.đặt hàng sản phẩm, nhưng họ lại không thể tìm thấy được sản phẩm đó.

Và chắc hẳn nó sẽ trở nên trầm trọng hợn khi bạn.đang sử dụng một thiết bị di động có kết nối kém.

Khi bạn viết code 100 tấm ảnh chứa trong các thẻ img, browser sẽ tải.về tất cả các tấm ảnh ấy, dù cho user có muốn hay không,.hay có scroll và xem hết 100 tấm ảnh ấy không. Vì thế, việc lazy-load sẽ giúp browser tải ít resource.(ảnh) lại, trả kết quả về user nhanh hơn. Bất kì user nào cũng thích các trang web.chạy nhanh hơn là chậm.

Hình ảnh là một nội dung thiết yếu trên mỗi website, chúng ta.nên tối ưu chúng một cách nhỏ nhất có thể khiến cho chúng.được tải xuống một cách bình thường nhất. Đối với những hình ảnh không cần thiết, bạn.nên áp dụng Lazy loading cho chúng.

Còn nếu như bạn phụ thuộc vào JavaScript, hãy sử dụng.một tư viện như lazysize, nó chịu trách nhiệm cho việc lazy.loading và tạo ra những hình ảnh tương thích nhanh chóng cho quá trình sử dụng.

Nếu bạn quan tâm đến “điểm số” của web thì lazy load sẽ giúp.điểm số tăng cao hơn nhé (nếu bạn áp dụng đúng cách). Bên cạnh đó, tốc độ web và trải nghiệm người dùng ảnh hưởng.rất lớn đến xếp hạng (ranking) trang web trên Google search nữa nhé.

Bản chất của Lazy Loading Images là gì?

1. Khi nào thì cần “lazy-loading images”?

Mặc dù lazy-load có rất nhiều lợi ích như trên, bạn cần đặt câu hỏi cho bản thân liệu bạn có thật sự cần nó không, vì “lazy-loading images” cũng có những tác hại (mình có chia sẻ ở cuối bài viết) nếu chúng ta lạm dụng hoặc sử dụng sai cách. Vậy khi nào thì chúng ta nên lazy-load hình ảnh của web:

Trang của bạn có nhiều hình ảnh và chúng đang làm chậm trang web của bạn.
Hình ảnh trong trang của bạn nằm khuất màn hình và không cần phải tải tức thời.
Bạn cần tối ưu tốc độ tải trang trên mobile (và cả desktop), thì “lazy-load images” là một việc nên làm (tất nhiên chỉ lazy-load thôi chưa đủ đâu nhưng nhanh được thêm bao nhiêu hay bấy nhiêu)

2. Bản chất của Lazy Loading Images

Có 2 cách thông thường để load Image trên 1 page đó là sử dụng thẻ, sử dụng thuộc tính background-image của CSS.

Lazy Loading Images qua thẻ Img

Thẻ với đinh dạng cơ bản:

< img src=”/path/to/some/image.jpg” />

Như đã biết trình duyệt đọc src attribute để trigger đến việc tải ảnh. Nên chúng ta sẽ move link image qua 1 attribute khác để ngăn chặn việc tải ảnh này. Dưới đây là 1 VD sử dụng data-src attribute , bạn hoàn toàn có thể đặt bất cứ tên attr nào mà bạn muốn.

< img data-src=”https://ik.imagekit.io/demo/default-image.jpg” />

Sau khi ngăn chặn được việc load Images tức thời thì chúng ta cũng cần thông báo cho trình duyệt biết khi nào cần load Images lên. Lúc này ta sẽ sử dụng Javascript để bắt sự kiện của người dùng và add link từ data-src vào lại attr src.

Lazy Loading Images qua thuộc tính background-image

Với background-image , trình duyệt sẽ xây dựng cây DOM kèm theo CSSDOM và check xem kiểu CSS có áp dụng cho nút DOM hiện tại không. Nếu DOM hiện tại có background-image thì trình duyệt sẽ load Image. Tương tự như src attr , trước tiên ta sẽ set cho DOM có giá trị background-image: none sau đó sẽ change giá trị khi cần thiết.

Đương nhiên ta không thể thiếu class để trigger đến đối tượng thông qua background-image cho cả 2 trường hợp trên.

Image Lazy Loading

Background-Image lazy loading

Lời kết

Kỹ thuật Lazy loading được sử dụng chủ yếu để phục vụ cho mục đích nâng cao các trải nhiệm của người dùng, giúp giảm thiểu tối đa thời gian đợi load nội dung ở phía client (cũng là một giải pháp để nâng cao trải nhiệm người dùng) để từ đó tăng xác xuất “giữ” người dùng tiếp tục ở lại và đọc website lâu hơn. Hy vọng các bạn thích bài viết lần này của mình, mình sẽ luôn cập nhật để nó không bị lỗi thời nhé. Nếu các bạn có góp ý hay thắc mắc gì thì xin để lại comment bên dưới.

Tìm kiếm liên quan

Lazy loading là gì
Lazy loading C#
Lazy loading Angular là gì
Lazy loading Android

Nội dung liên quan

Marketing tổng thể