Lazy Loading là gì? Ưu, nhược điểm của kỹ thuật Lazy Loading

Hiện nay có không ít người đang tới Lazy loading khi đăng ảnh lên. Và có một sự thật là không phải ai cũng nắm rõ được các thông tin cơ bản trước khi sử dụng. Hiểu được điều đó, Mẫu website 24h sẽ chia sẻ tất tần tật những thông tin về Lazy Loading là gì? Ưu, nhược điểm của kỹ thuật Lazy Loading ngay ở bài viết dưới đây!

Lazy Loading là gì?

Thuật ngữ Lazy loading là kỹ thuật thực hiện gián đoạn tải các tài nguyên không quan trọng vào thời điểm tải trang. Kỹ thuật này giúp các nhà quản trị trang web quyết định tải các gói tài nguyên quan trọng trước còn các tài nguyên không quan trọng này thì tải sau.

Đối với hình ảnh thì Lazy Loading được hiểu nôm na chính là việc tải hình ảnh khi bạn cần sử dụng đến chúng. Ví dụ như khi có nhiều người cùng vào 1 trang 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 trước tiên là tải nội dung.

Vậy nên việc ưu tiên tải trước hình ảnh là khi người dùng roll chuột đến đâu bạn sẽ tải hình ảnh đến đó. lazy loading đều phù hợp cho bất kỳ resource nào trên 1 trang, thậm chí là cả file JavaScript.

Tóm lại, bạn chỉ cần hiểu Lazy loading chính là khi cần mới xuất hiện. Các dữ liệu bao gồm hình ảnh sẽ xuất hiện ngay khi người dùng lướt đến để tránh làm chậm tốc độ tải trang.

Ứng dụng của Lazy loading

Hiện tại, Lazy loading được sử dụng phổ biến nhất trong ngành lập trình và thiết kế trang web. Mã nguồn mở WordPress cũng đã phát triển một giải pháp khá giống Lazy Loading và ứng dụng đó là Infinite Scroll, nó cũng hỗ trợ bạn sử dụng khi cuộn 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à ở phần search hình ảnh. Google sẽ gợi ý danh sách 4-5 bức ảnh liên quan nhất sau khi bạn đã nhấp vào xem cụ thể một tấm hình nào đó và kế bên đó sẽ được bố trí nút “View More” để xem nhiều ảnh liên quan.

Tại sao nên sử dụng Lazy Loading

Kỹ thuật Lazy loading sẽ phát huy công dụng mạnh mẽ trong những trường hợp mà bạn nắm rõ về nhân khẩu học của người dùng mục tiêu của mình, tệp người dùng này thường xuyên sử dụng những thiết bị có kết nối cùng bộ vi xử lý tuyệt vời.

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

Việc sử dụng Lazy loading dành cho những hình ảnh không quan trọng trên các bài đăng trên trang Blog và trên những Photography portfolio của bạn sẽ là một sự kết hợp tuyệt vời.

Tuy nhiên, các thành phần chứa ảnh có sử dụng phương pháp Lazy loading trong một cửa hàng online thì lại gây tác dụng ngược, dễ thấy nhất là trong trường hợp có ai đó đang cần đặt hàng một sản phẩm bất kỳ, nhưng họ lại không thể tìm thấy được hình ảnh mô tả của sản phẩm đó. Và chắc chắn điều này sẽ làm cho trải nghiệm của người dùng giảm rất nhanh và nó 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 không ổn định.

Hình ảnh là một loại nội dung không thể thiếu trên mỗi trang web, chúng ta nên tối ưu hình ảnh một cách nhẹ nhất có thể khiến cho chúng được tải xuống thật bình thường. Còn đối với những hình ảnh không cần thiết hoặc không quá quan trọng, bạn nên sử dụng Lazy loading cho chúng.

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

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

Có 2 cách để tải hình ảnh lên 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 định dạng cơ bản:

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

Sau khi đã hạn chế hay ngăn chặn được việc tải hình ảnh ngay lập tức thì chúng ta cũng cần phải thông báo cho trình duyệt biết khi nào cần tải hình ảnh lên. Trường hợp này ta sẽ sử dụng Javascript để can thiệp 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à kiểm tra xem kiểu CSS có phù hợp cho nút DOM hiện tại không. Nếu nó phù hợp với DOM hiện tại thì background-image sẽ cho phép trình duyệt tải hình ảnh đó. Giống như src attr , đầu tiên ta sẽ set cho DOM có giá trị background-image: none sau đó sẽ change giá trị khi cần thiết.

Tất nhiên trong quá trình đó 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

https://codepen.io/imagekit_io/pen/MBNwKB

Background-Image lazy loading

https://codepen.io/imagekit_io/pen/RBXVrW

Ưu nhược điểm của Lazy Loading

Ưu điểm của Lazy Loading

• Một ưu điểm không thể không kể đến của Lazy Loading là sự ảnh hưởng đến hiệu suất website bởi tính năng chỉ load những dữ liệu quan trọng và trong tầm nhìn của người dùng.
• Khắc phục yếu điểm của thời gian tải trang xảy ra khi tải đồng loạt dữ liệu trên trang.
• Lazy loading là kỹ thuật load hiệu quả nhất và được sử dụng rộng rãi ở hiện tại. Bạn sẽ tối ưu được chi phí băng thông của minh khi bạn không phải trả cho những gì bạn không tải xuống, không xem, không nhìn thấy. Nếu lưu lượng truy cập là phần bạn gặp rắc rối, thì lazy loading chính là một lựa chọn đầy thuyết phục.

Nhược điểm của Lazy Loading

Cách tiếp cận của Lazy Loading có thể dẫn đến sự cố hiển thị của phần nội dung bị thiếu.

Quá trình thực hiện lazy-loading đơn thuần là yêu cầu đáp ứng của Javascript nhiều hơn, phức tạp hơn, dễ xảy ra lỗi hơn. Trong trường hợp các Javascript không được tải xuống do lỗi kết nối mạng hoặc vì một lý do mà các Javascript không thực hiện được, thì tất nhiên các dữ liệu được áp dụng trên lazy-loading sẽ không xuất hiện.

Một số lưu ý khi sử dụng Lazy Loading

• Tùy vào những trình duyệt bạn đang sử dụng mà sẽ có những cách sử dụng khác nhau phù hợp với từng đặc tính của các trình duyệt web hiện nay. Cụ thể, đối với Internet Explorer, nếu bạn cần phải sử dụng trình duyệt này để lazy-load các dữ liệu, bạn cần dùng Polyfill nhằm mục đích giả lập Intersection Observer API, và cuối cùng sử dụng như bình thường.
• Khi dùng Intersection Observer API để lazy-load hình ảnh, lệnh scr sẽ trở thành data-scr và yếu điểm bắt đầu xuất hiện là Googlebot không hiểu data-scr là gì.
• Không nên để lazy-load các hình ảnh đầu trang để tránh tối thiểu layout shift. Trước khi sử dụng Lazy Loading, bạn nên xem xét tổng quan và xác định chính xác kích thước bức ảnh sẽ xuất hiện để trường hợp người dùng lướt xuống thì bức ảnh sẽ được tải mà không xảy ra xê dịch thông tin trên trang.

Lời kết

Qua bài viết trên, Mẫu website 24h đã chia sẻ tất tần tật nội dung từ cơ bản đến quan trọng cũng như giải đáp thắc mắc về Lazy Loading là gì? Ưu, nhược điểm của kỹ thuật Lazy Loading. Hy vọng qua bài viết này các bạn đọc sẽ nắm rõ được kỹ thuật cũng như công cụ này trước khi sử dụng. Chúc bạn may mắn!