fbpx
Logo

Lazy Loading là gì? Có nên sử dụng lazy loading cho hình ảnh không?

Theo dõi Miko Tech trên Google News

Tốc độ tải trang là một trong những yếu tố ảnh hưởng trực tiếp đến trải nghiệm của người dùng mỗi khi truy cập vào một trang web, đặc biệt là những website có chứa nhiều hình ảnh.

Để tối ưu website cũng như cải thiện tốc độ, hiệu suất, có phương pháp hữu ích được rất nhiều người sử dụng đó là lazy loading.

Bài viết sau sẽ giúp bạn hiểu rõ được lazy loading là gì? Thời điểm nên/không nên sử dụng lazy loading, những lợi ích, bản chất, ưu – nhược điểm cũng như một số cách, lưu ý khi triển khai kỹ thuật lazy loading.

Cùng Miko Tech tìm hiểu bài viết Lazy loading là gì? Có nên sử dụng lazy loading cho hình ảnh không? ngay luôn nhé!

Lazy loading là gì?

Lazy loading là một kỹ thuật tối ưu website bằng cách 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, thay vì tải toàn bộ dữ liệu trên trang ngay lập tức, lazy loading chỉ tải dữ liệu khi bạn cần sử dụng đến chúng.

Lazy loading là một kỹ thuật trì hoãn tải các dữ liệu không quan trọng
Lazy loading là một kỹ thuật trì hoãn tải các dữ liệu không quan trọng

Khi trên trang của website có quá nhiều dữ liệu cần tải, nếu tải tất cả cùng một lúc sẽ khiến tốc độ tải trang dễ bị chậm lại, ảnh hưởng đến lượng truy cập cũng như chất lượng trang. Điều này dẫn đến trải nghiệm người dùng kém, tỷ lệ thoát trang tăng.

Vậy nên, với website áp dụng lazy loading, khi người dùng lướt đến đâu thì dữ liệu sẽ được tải đến đó. Đây chính là cách mà lazy loading thực hiện tối ưu cho một trang web.

Tương tự đối với hình ảnh, lazy loading image chỉ tải ảnh khi cần sử dụng, ẩn các ảnh không cần thiết (ảnh ngoài màn hình đang hiển thị) trên website. Lazy loading có thể áp dụng cho bất kỳ nguồn tài nguyên trên trang, kể cả file JavaScript.

Những trường hợp nên/không nên sử dụng lazy loading

Khi nào nên sử dụng

Một số trường hợp nên sử dụng lazy loading:

  • Trang web có quá nhiều dữ liệu cần tải khiến tốc độ tải trang bị chậm và giảm hiệu suất của trang.
  • Khi cần tối ưu trên các thiết bị di động và cải thiện tốc độ trang web.

Khi nào không nên sử dụng

Lazy loading chỉ thực sự có hiệu quả khi được áp dụng đúng mục đích, đúng đối tượng và đúng thời điểm. Do đó, bên cạnh những trường hợp nên sử dụng, bạn cần lưu ý đến những loại website không nên sử dụng lazy loading để tránh bị phản tác dụng.

Điển hình nhất là các website thương mại điện tử hoặc bán hàng online. Lý do là mỗi khi khách hàng đang có nhu cầu mua hàng, lazy loading có khả năng sẽ ẩn mất sản phẩm mà họ đang muốn tìm. Từ đó, doanh nghiệp bạn có thể mất đi một lượng chuyển đổi đáng kể.

Những lợi ích khi dùng lazy loading

Nâng cao website performance

Khi website tải tất cả dữ liệu trong cùng một lúc, nhất là vào thời điểm có lưu lượng truy cập cao sẽ phải mất khá nhiều thời gian để hiển thị toàn bộ, chưa kể trang web có thể bị lag và phải tải lại từ đầu.

Lazy loading tăng hiệu suất website
Lazy loading tăng hiệu suất website

Ngoài ra, khi trình duyệt bị quá tải sẽ dễ gặp lỗi, không tải được một số dữ liệu khiến website bị ẩn đi một phần dữ liệu. Điều này khiến người dùng không có được trải nghiệm tốt và lượng truy cập chắc chắn bị giảm đi.

Với lazy loading, website sẽ được cải thiện về tốc độ tải trang, đồng thời lượng dữ liệu sẽ được giảm xuống. Với khả năng chỉ tải dữ liệu khi người dùng lướt tới, website sẽ trả kết quả nhanh hơn cũng như thể hiện được sự chuyên nghiệp, giúp website bảo toàn dữ liệu.

Tiết kiệm tài nguyên

Việc áp dụng lazy loading làm trì hoãn tải các dữ liệu không cần thiết sẽ giúp tiết kiệm bộ nhớ, CPU, GPU,… đồng thời tránh xảy ra các tình trạng quá tải dẫn đến lỗi trang.

Bên cạnh đó, lazy loading còn đặc biệt có ích đối với những người dùng sử dụng trình duyệt trên các thiết bị di động có kết nối chậm.

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

Lazy loading nâng cao trải nghiệm người dùng bằng việc giảm tải nhiều dữ liệu cùng lúc. Điều này giúp cho tốc độ tải trang nhanh hơn, đồng thời giảm tối đa những lỗi khiến dữ liệu bị ẩn.

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

Tốc độ trang luôn là một trong những tiêu chí để người dùng cũng như các công cụ tìm kiếm đánh giá trang.

Trong thang điểm đánh giá, Google luôn ưu tiên và cho điểm số cao đối với những website có tốc độ tải nhanh. Lý do là vì những website này sẽ hiển thị thông tin đến người dùng một cách nhanh hơn, từ đó đạt được nhiều lượt truy cập hơn.

Bản chất của lazy loading

Để sử dụng lazy loading trên một page trên website, thông thường bạn có thể sử dụng 2 cách: sử dụng thẻsử dụng thuộc tính background-image của CSS.

Lazy loading image qua thẻ img

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ậy nên, bạn sẽ move link image qua 1 attribute khác để ngăn chặn việc tải ảnh này.

Lazy loading image qua thẻ img
Lazy loading image qua thẻ img

Dưới đây là một ví dụ về việc sử dụng data-src attribute, bạn hoàn toàn có thể đặt bất kỳ tên nào bạn muốn.

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

Sau khi đã thực hiện được việc ngăn chặn tải ảnh tức thời, bạn cũng cần thông báo cho trình duyệt biết khi nào cần tải ảnh lên. Lúc này, bạn sẽ sử dụng JavaScript để nắm bắt hành vi người dùng và thêm liên kết từ data-src vào lại attr src.

Lazy loading image qua thuộc tính background-image

Với cách sử dụng thuộc tính background-image, trình duyệt sẽ xây dựng cây DOM kèm theo CSSDOM, đồng thời kiểm tra xem kiểu CSS có thể áp dụng cho nút DOM hiện tại hay không.

Nếu DOM hiện tại có background-image thì trình duyệt sẽ tải lên ảnh đó. Tương tự đối với csr attr, việc đầu tiên bạn cần thiết lập cấu hình DOM có giá trị background-image:none, sau đó giá trị sẽ được thay đổi khi cần thiết.

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

Ưu - nhược điểm của lazy loading
Ưu – nhược điểm của lazy loading

Ưu điểm

Lazy loading sở hữu nhiều ưu điểm mà bạn nên sử dụng để tối ưu website của mình:

  • Cải thiện hiệu suất của các trang web
  • Hạn chế sự chậm trễ, lỗi trang khi tải đồng loạt các dữ liệu
  • Không tốn chi phí băng thông cho những thông tin, dữ liệu chưa tiếp cận đến
  • Cân bằng, tối ưu trong việc phân phối nội dung và tăng trải nghiệm người dùng
  • Cải thiện lượt chuyển đổi, tương tác với người dùng

Nhược điểm

Bên cạnh nhiều ưu điểm nổi trội, lazy loading vẫn còn tồn tại một vài nhược điểm cần chú ý:

  • Khi người dùng truy cập vào trang web có thể gặp tình trạng nhấp nháy của phần nội dung bị thiếu
  • Một website muốn áp dụng lazy loading thì quá trình áp dụng đòi hỏi nhiều JavaScript, phức tạp, dễ bị lỗi
  • Nếu JavaScript không được tải xuống hoặc không chạy do kết nối mạng kém, dữ liệu áp dụng lazy loading sẽ không được hiển thị
  • Thay đổi các phần tử hiển thị
  • Có thể ảnh hưởng đến hình ảnh và bố cục

Những cách triển khai lazy loading

Trước khi sử dụng bất kỳ kỹ thuật nào, bạn cần phải hiểu rõ về bản chất cũng như tính năng mà kỹ thuật đó mang lại. Với Lazy loading, đây là một thuộc tính để website của bạn có thể điều khiển các thông tin, dữ liệu được hiển thị page (thường là hình ảnh).

Những cách triển khai lazy loading
Những cách triển khai lazy loading

Thông thường, để triển khai lazy loading, bạn có thể sử dụng những cách sau.

Dùng thuộc tính loading

Với cách dùng này, bạn không cần dùng JavaScript và lo lắng về những lỗi có thể xảy ra với các hình ảnh trên trang.

Điều duy nhất bạn cần làm là báo hiệu cho trình duyệt biết những hình ảnh nào cần áp dụng lazy-load bằng các thuộc tính loading với 3 giá trị tương ưng là: lazy, eagerauto.

  • Lazy: Trình duyệt cần lazy-load dữ liệu này
  • Eager: Giá trị này yêu cầu trình duyệt phải tải dữ liệu này ngay lập tức hoặc càng sớm càng tốt. Ngoài ra, nếu dữ liệu đang được tải ở giá trị lazy được chuyển sang eager thì dữ liệu sẽ lập tức được tải ngay.
  • Auto: Trình duyệt sẽ tự động quyết định xem có nên lazy-load dữ liệu trên trang hay không.

Dùng Fallback hoặc Polyfill

Đối với những trình duyệt không hỗ trợ thuộc tính loading, bạn có thể triển khai lazy loading bằng cách dùng Fallback (dự phòng) và Polyfill (mã để triển khai các tính năng mà trình duyệt web không hỗ trợ).

Khi dùng Fallback hoặc Polyfill, bạn cũng cần viết code với thuộc tính loading để triển khai kỹ thuật lazy loading với các dữ liệu hình ảnh.

Dùng Intersection Observer API

Intersection Observer API cho phép bạn giám sát và thực hiện một điều gì đó đối với dữ liệu (cụ thể là hình ảnh) khi được người dùng lướt tới.

Mặc dù có hỗ trợ lazy-load các hình ảnh nhưng Intersection Observer API không hỗ trợ thuộc tính loading. Bạn chỉ dùng lệnh lazy image khi muốn lazy-load các hình ảnh trên trang web.

Ngoài ra, cách này cũng lazy-load được cả những hình nền bằng việc sử dụng lệnh lazy-background.

Một số lưu ý khi sử dụng lazy loading

Những cách sử dụng lazy loading vừa được nêu đều có những nét đặc thù với từng đặc tính của các trình duyệt web hiện nay.

Ví dụ: Nếu bạn bắt buộc phải dùng trình duyệt web Internet Explorer để lazy-load dữ liệu, bạn có thể dùng Polyfill để giả lập Intersection Observer API và sau đó sử dụng bình thường.

Một số lưu ý cần nhớ khi sử dụng lazy loading
Một số lưu ý cần nhớ khi sử dụng lazy loading

Khi dùng Intersection Observer API để lazy load dữ liệu hình ảnh, lệnh scr sẽ trở thành data-scr. Tuy nhiên, Google Bot sẽ không hiểu data-scr là gì. Điều này khiến ảnh của bạn bị cho là lỗi và không được index.

Bên cạnh đó, bạn cũng cần tránh lazy-load các ảnh đầu trang để tránh tối thiểu layout shift. Đồng thời, trước khi sử dụng lazy loading, bạn nên chỉ ra kích thướt ảnh để khi người dùng lướt tới vị trí đó, việc tải ảnh sẽ không làm xê dịch thông tin trên trang.

Qua bài viết trên, Miko Tech đã giúp bạn hiểu được lazy loading là gì? Thời điểm nên/không nên sử dụng lazy loading, những lợi ích, bản chất, ưu – nhược điểm cũng như một số cách, lưu ý khi triển khai kỹ thuật lazy loading.

Hy vọng với bài viết Lazy Loading là gì? Có nên sử dụng lazy loading cho hình ảnh không? Bạn sẽ có được cho mình những kiến thức hữu ích, đồng thời biết cách để tối ưu website của mình tốt hơn. Đừng quên theo dõi bài viết tiếp theo từ Miko Tech nhé.

01.10.2022 Hồng Nhi

Comments are closed.

Bài viết liên quan
Bài viết nổi bật
Scroll