fbpx
Logo

Lazy Loading Là Gì? Cách Triển Khai Giúp Tối Ưu Khi Tải Trang

Theo dõi Miko Tech trên Google News

Kỹ thuật Lazy loading là gì mà được nhiều người ứng dụng để nâng cao trải nghiệm của người dùng đến vậy? Bài viết sau sẽ hướng dẫn cách triển khai Lazy loading giúp tối ưu tốc độ tải trang. Cùng theo dõi 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/kéo chuột (scroll) đến chúng.

Lazy Loading là gì
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, 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.

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.

Tính năng của lazy loading

Tính năng lazy loading (tải chậm) cung cấp một số lợi ích quan trọng trong phát triển phần mềm. Dưới đây là một số tính năng chính của lazy loading:

  • Tối ưu hóa hiệu suất: Bằng cách tải dữ liệu và tài nguyên chỉ khi cần thiết, lazy loading giúp giảm thời gian tải trang và tối ưu hóa việc sử dụng tài nguyên hệ thống.
  • Tiết kiệm băng thông mạng: Với lazy loading, chỉ những phần của trang hoặc ứng dụng được tải khi người dùng yêu cầu. Từ đó giúp tiết kiệm băng thông mạng. Điều này đặc biệt hữu ích khi có nhiều dữ liệu hoặc tài nguyên lớn cần tải.
  • Cải thiện trải nghiệm người dùng: Lazy loading giúp giảm thời gian chờ đợi. Người dùng chỉ cần đợi tải dữ liệu khi thực sự cần thiết hoặc khi phần đó được hiển thị trên màn hình.
  • Tải dữ liệu từ xa: Với tính năng này, khi có nhu cầu tải dữ liệu từ nguồn từ xa như cơ sở dữ liệu hoặc API. Lazy loading cho phép tải dữ liệu theo yêu cầu. Giúp tối ưu hóa việc truy xuất dữ liệu và giảm thời gian phản hồi ban đầu.

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

Tùy vào ứng dụng/website mà bạn nên cân nhắc sử dụng lazy loading như:

  • Khi ứng dụng/website lớn và phức tạp.
  • Khi ứng dụng/website được sử dụng bởi người dùng có kết nối internet chậm.
  • Khi ứng dụng/website có nhiều hình ảnh hoặc tệp phương tiện khác.
  • Khi ứng dụng/website có nhiều mã không được sử dụng thường xuyên.
  • Ứng dụng/website cần tối ưu trên các thiết bị di động và cải thiện tốc độ trang web.

Tuy nhiên, có các trường hợp không cần sử dụng lazy loading như

  • Khi ứng dụng/website nhỏ và đơn giản.
  • Khi ứng dụng/website được sử dụng bởi người dùng có kết nối internet nhanh.
  • Khi ứng dụng/website có nhiều mã quan trọng được sử dụng rất thường xuyên.
  • Khi ứng dụng/website được sử dụng cho mục đích SEO.
  • Các website thương mại điện tử hoặc bán hàng online. Bởi lazy loading có khả năng sẽ ẩn mất sản phẩm mà họ đang muốn tìm.
Không nên dùng cho website thương mại điện tử hoặc bán hàng online
Không nên dùng cho website thương mại điện tử hoặc bán hàng online

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

  • Một trong những ưu điểm lớn của lazy loading là cải thiện hiệu suất của trang web trong mắt người dùng do chỉ tải những dữ liệu cần thiết.
  • Giúp hạn chế độ trễ xảy ra khi tải hàng loạt dữ liệu trên một trang.
  • Lazy loading giúp bạn không bị mất chi phí băng thông cho nội dung mà bạn không tải xuống, không xem hoặc không xem. Nếu lưu lượng truy cập vào website là điều bạn quan tâm, thì lazy loading là một lựa chọn lý tưởng.

Tuy nhiên cũng có một số nhược điểm như:

  • Cách tiếp cận này dẫn đến nhấp nháy nội dung bị thiếu.
  • Quá trình lazy loading đòi hỏi khắt khe hơn, phức tạp hơn và dễ xảy ra lỗi hơn đối với Javascript. Dữ liệu khởi tạo tải chậm sẽ không xảy ra khi Javascripts không được tải xuống do lỗi kết nối mạng hoặc lỗi thực thi Javascripts.

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

Sau khi đã biết được lazy loading là gì thì cùng đến với cách triển khai lazy loading. 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

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.

Câu hỏi thường gặp (FAQs)

Lazy loading có ảnh hưởng đến SEO không?

  • Trả lời: Lazy loading không gây ảnh hưởng tiêu cực đến SEO. Ngược lại, nó có thể giúp tăng tốc độ tải trang, cải thiện trải nghiệm người dùng và giảm thời gian tải trang. Điều này có thể được Google và các công cụ tìm kiếm khác đánh giá cao.

Lazy loading có thể áp dụng cho trang web đa ngôn ngữ không?

  • Trả lời: Có, lazy loading có thể áp dụng cho trang web đa ngôn ngữ mà không gặp vấn đề. Bạn chỉ cần áp dụng cùng một nguyên tắc tải nội dung theo từng ngôn ngữ tương ứng, đảm bảo rằng chỉ những phần cần thiết trong mỗi ngôn ngữ được tải trước.

Có công cụ hoặc plugin nào hỗ trợ triển khai lazy loading không?

  • Trả lời: Có, có nhiều công cụ và plugin hỗ trợ triển khai lazy loading trên các nền tảng web khác nhau. Ví dụ như Lazy Load by WP Rocket cho WordPress hoặc Lazy Loader cho các dự án tùy chỉnh. Bạn có thể tìm hiểu và chọn công cụ phù hợp với nền tảng và yêu cầu của bạn.
lazy loading là gì
Plugin lazy loading

Lazy loading có ảnh hưởng đến trải nghiệm người dùng không?

  • Trả lời: Phần lớn thời gian tải trang được cải thiện khi sử dụng lazy loading, giúp người dùng truy cập nhanh chóng đến nội dung mà họ quan tâm. Điều này có thể cải thiện trải nghiệm người dùng, giảm tỷ lệ thoát khỏi trang và tăng khả năng tương tác trên trang web.

Qua bài viết trên, Miko Tech đã giúp bạn hiểu được lazy loading là gì và cách triển khai lazy loading. Chúc bạn thực hiện thành công. Đừng quên theo dõi bài viết tiếp theo từ Miko Tech nhé.

01.10.2022 Trần Tiến Duy

Bình luận đã bị đóng.

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