Tốc độ website là một trong những yếu tố ảnh hưởng "trực tiếp" đến trải nghiệm người dùng trên trang.  Một phương pháp giúp trang web tối ưu web và hiệu suất người dùng khi truy cập vào chính là Lazy Loading. Để hiểu rõ hơn về công nghệ này, hãy cùng LPTech tìm hiểu tại bài viết dưới đây nhé!

Lazy loading là gì?

Lazy loading là kỹ thuật tối ưu khi làm web, trì hoãn tải các dữ liệu không quan trọng vào thời điểm tải trang. Hiểu một cách đơn giản là nó chỉ load dữ liệu khi bạn cần sử dụng đến chúng.

Khi website có nhiều dữ liệu cần phải tải, nếu phải tải hết vào cùng một thời điểm sẽ khiến tốc độ tải trang dễ bị chậm, gây ra trải nghiệm người dùng kém, dẫn đến thoát trang. Chính vì vậy, người dùng lướt (scroll) đến đâu sẽ tải đến đó là cách mà lazy loading được áp dụng khi tối ưu một trang web.

Đối với hình ảnh, Lazy loading Image là chỉ tải ảnh khi cần sử dụng, ẩn các ảnh không cần thiết trên website.

Tại sao nên sử dụng lazy loading?

Lazy loading là một trong những kỹ thuật tối ưu hiệu suất website hiệu quả được sử dụng phổ biến hiện nay. Nếu như lưu lượng truy cập là một trong những mối quan tâm của bạn thì việc sử dụng Lazy loading là không thể thiếu cho trang web.

Tiết kiệm cho bộ nhớ

Việc lazy loading tải dữ liệu cần thiết cho trang và trì hoãn các dữ liệu chưa sử dụng đến giúp tiết kiệm dung lượng bộ nhớ, CPU, băng thông... tránh tình trạng quá tải trang khiến một số lỗi dễ xảy ra khi vận dụng tối đa công suất tải trang của nó.

Đối với người dùng thì đặc biệt có ích vì trên các trình duyệt trên thiết bị di động tốc độ kết nối sẽ chậm hơn so với desktop.

Mang lại hiệu suất tốt

Hãy tưởng tượng xem nếu một website trong cùng một lúc tải hết từ đầu đến cuối nếu có lưu lượng truy cập cao chắc chắn phải cần đợi thời gian khá lâu thì mới hiển thị hết tất cả, còn chưa kể trang bị lag và phải load lại từ đầu.

Nhưng khi có lazy loading bạn sẽ thấy có sự cải thiện về tốc độ tải cũng như lượng dữ liệu sẽ được giảm xuống, bảo toàn dữ liệu cho trang. Điều này làm trang web “dễ thở” hơn khi tải trang. 

Cải thiện kết quả SEO

Một website được đánh giá là SEO thành công thì bắt buộc không thể thiếu yếu tố cơ bản là trang web đó được đảm bảo về tốc độ tải trang và trải nghiệm người dùng hài lòng khi truy cập web nhanh hơn.

Khi có Lazy Loading tốc độ tải được cải thiện giúp giảm tỷ lệ thoát xuống tốt cho việc tối ưu SEO Onpage. Nhờ vậy mà Google nhận thấy trang web của bạn uy tín, nhận được nhiều truy cập từ người dùng và cải thiện chuyển đổi trên trang tốt sẽ xếp hạng trang web ở vị trí cao khi tìm kiếm.

Nâng cao trải nghiệm người dùng

Dù làm gì đi nữa thì mục đích cuối cùng của website tạo ra vẫn hướng đến là người dùng. Vì vậy, trải nghiệm người dùng rất quan trọng đối với một website. Có nhiều tiêu chí đánh giá một trang web có đáp ứng được trải nghiệm người dùng hay không. Và tốc độ tải trang là một trong số những tiêu chí đó.

Lazy loading giảm thiểu lỗi bị ẩn dữ liệu, cải thiện tốc độ tải nhanh hơn đảm bảo người dùng truy cập nhanh những gì cần tìm. Khi trải nghiệm tốt, tăng cơ hội giữ chân người dùng trên trang lâu hơn và tỉ lệ quay lại trang web cũng tốt hơn.

Tăng điểm số đánh giá web

Một khi tốc độ tải trang nhanh hơn cũng đồng nghĩa với việc điểm số đánh giá của công cụ chấm cho website sẽ cao hơn. Mặt khác, Google ưu tiên các trang web tải nhanh hơn những trang web chậm, bởi các trang web tải nhanh sẽ cho người dùng thông tin nhanh hơn, đạt được nhiều lượt truy cập hơn.

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

Để sử dụng lazy load image trên một trang thường có 2 cách như sau: sử dụng thẻ và sử dụng thuộc tính background-image của CSS.

1. Lazy Loading Images qua thẻ

Thẻ <img/> với định dạng cơ bản: 

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

Trình duyệt đọc src attribute để trigger đến việc tải ảnh. Vì vậy, chúng ta sẽ move link image qua 1 attribute khác để ngăn chặn việc tải ảnh này. Một ví dụ cụ thể về sử dụng data-src attribute mà bạn hoàn toàn có thể đặt bất cứ tên attr nào.

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

Khi trì hoãn được load Images tức thời thì bạn không thể bỏ qua bước thông báo cho trình duyệt khi nào nên hiển thị hình ảnh bằng cách sử dụng javascript để nắm bắt hành vi người dùng và thêm liên kết datasrc trở lại với attr src.

2. Lazy Loading Images sử dụng thuộc tính background-image

Với background-image, trình duyệt xây dựng cây DOM với CSSDOM và kiểm tra xem kiểu CSS có được áp dụng cho nút DOM hiện tại hay không. Nếu DOM hiện tại có hình nền, trình duyệt sẽ tải hình ảnh đó. Như với src attr, bạn phải thiết lập cấu hình DOM với giá trị là background-image: none, sau đó giá trị được thay đổi khi cần thiết.

Điểm chung của 2 trường hợp trên đều cần có class để trigger đến người dùng thông qua background-image.

Ưu nhược điểm lazy loading

Như đã tìm hiểu ở trên, chúng ta có thể thấy tác động tích cực nhất mà lazy loading mang lại là cải thiện hiệu suất trang web. Bởi chức năng này chỉ tải những nội dung cần thiết nhất đến với user, hạn chế được sự chậm trễ, lỗi trang khi tải quá nhiều dữ liệu.

Lazy loading thật không hổ danh là kỹ thuật tối ưu hiệu suất trang web được sử dụng nhiều nhất hiện nay, nhờ vậy mà bạn không mất chi phí băng thông cho những thông tin chưa được tiếp cận đến. Nếu như website của bạn đang gặp vấn đề về tốc độ tải trang thì lazy loading là một giải pháp đáng cân nhắc.

Không vì ưu điểm lazy loading mang lại quá nổi trội mà chúng ta quên đi nhược điểm của nó.

1. Nếu sử dụng lazy loading có thể dẫn đến sự nhấp nháy của phần nội dung bị thiếu khi người dùng truy cập vào trang.
2. Website muốn áp dụng lazy loading thì quá trình áp dụng đòi hỏi nhiều Javascript hơn, phức tạp, dễ xảy ra lỗi hơn.
3. Nếu javascript không được tải xuống hoặc không chạy do lỗi kết nối mạng, dữ liệu sẽ được khởi lệnh lazy loading sẽ không được hiển thị.

Khi nào nên và không nên áp dụng lazy loading?

Lazy loading chỉ phát huy tác dụng thực sự khi bạn "sử dụng đúng mục đích" cho đúng đối tượng vào "đúng thời điểm".

Lazy loading là lựa chọn cực kì phù hợp những người chủ yếu sử dụng các thiết bị có kết nối và bộ vi xử lý tốt như smartphone, laptop,... có các kết nối băng thông rộng để không gặp lỗi với Javascript của Lazy-load.

Tuy nhiên, những người dùng 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. Ngoài ra, website có thể áp dụng lazy loading khi có nhiều dữ liệu cần tải làm tốc độ trang bị chậm ảnh hưởng đến hiệu suất web.

Đối với những trường hợp như trên thì nên áp dụng lazy loading, ngược lại nếu bạn áp dụng đối với những website mang tính chất thương mại điện tử, bán hàng online thì sẽ phản tác dụng vì khách hàng đang có nhu cầu mua hàng nhưng không tìm ra sản phẩm đó vì nó đã bị ẩn mà họ cần. Thậm chí đối với những ai sử dụng thiết bị kết nối kém sẽ là một tín hiệu không tốt của website. 

Tổng kết

Mong rằng những chia sẻ về lazy loading mà LPTech chia sẻ trong bài viết này là hữu ích, giúp bạn giải đáp được thắc mắc của chính mình, đồng thời có thể áp dụng thành công những kiến ​​thức này vào kỹ thuật lập trình web của mình.

>> Xem thêm: Mobile Friendly là gì? Cách tối ưu website thân thiện với thiết bị di động