Kỹ thuật Lazy loading - Lập trình viên nhất định phải biết

1. Giới thiệu - Lazy loading là gì?

Trong thời đại công nghệ số hiện nay, hiệu suất hoạt động, tốc độ của các trang web trực tuyến là cực kỳ quan trọng: đảm bảo hoạt động kinh doanh liên tục, thu hút khách hàng, tăng lợi thế cạnh tranh,...Kể từ năm 2020, các trình duyệt web lớn (như chrome, firefox) đều bật tính năng Lazy loading là chế độ mặc định. Điều này cho phép tăng tốc độ duyệt web bằng cách tích hợp Lazy loading vào các thuộc tính html (Lazy loading html). 

Lazy loading là một thuật ngữ tiếng anh chuyên ngành lập trình web, thường được gọi là tải từng phần, tải không đồng bộ hay tải lười. Lazy loading là một kỹ thuật được sử dụng phổ biến trong khoa học máy tính, đặc biệt là trong thiết kế, lập trình website để trì hoãn việc sử dụng một đối tượng nào đó cho đến khi cần thiết. 

Chúng ta có thể hiểu đơn giản đó là một kỹ thuật giúp tăng tốc độ duyệt web, bạn sẽ chỉ tải dữ liệu từ một website mà bạn đang truy cập khi nào bạn cần sử dụng đến chúng, còn bình thường bạn sẽ duyệt web trong trạng thái lười (tức là bạn xem phần nào của trang web thì phần đó hoạt động, các phần khác của trang web sẽ không hoạt động). Ngược lại với Lazy loading là Eager loading (tải tích cực hay tải háo hức) sẽ được áp dụng trong một số trường hợp riêng. Thông thường Lazy loading sẽ áp dụng trên 2 phương diện, ảnh và video:

• Lazy loading images: Hiển thị một hình ảnh nhẹ hơn (chất lượng thấp hơn thay vì ảnh gốc khi người dùng cuộn chuột lướt web.
• Lazy loading video: Video sẽ ở chế độ không tự động phát, trừ khi đã được người dùng cài lại mặc định.

2. Bản chất của Lazy loading?

Như đã trình bày ở trên, kỹ thuật Lazy loading được sử dụng để tăng tốc độ duyệt web, giảm thiểu tối đa thời gian tải nội dung từ server, nâng cao trải nghiệm của người dùng. Rõ ràng, trong định nghĩa thuật ngữ này đã bao hàm phần nào bản chất của nó. 

Khi tải một trang web, phần mà người dùng đang xem được gọi là above the fold (thư mục bên trên), còn phần mà người dùng đang không xem được gọi là below the fold (thư mục bên dưới). Và người ta sẽ áp dụng Lazy loading cho phần thư mục bên dưới. Lazy loading còn được biểu hiện ở việc giảm kích thước ảnh hay video, chỉ hiển thị ở chất lượng cao hơn khi người dùng kích vào ảnh.

Có 2 cách phổ biến để Lazy loading cho hình ảnh trên web, đó là:

• Lazy loading images qua thẻ img: Trong kỹ thuật lập trình, người ta sẽ sử dụng src attribute để quản lý việc tải ảnh. Đầu tiên, việc load hình ảnh lên sẽ bị chặn khi người dùng không sử dụng phần đó. Nếu người dùng có nhu cầu thì Javascript sẽ bắt sự kiện, thao tác của người dùng và chèn link data-src vào lại src attribute.
• Lazy loading images qua background-image: Tương tự như src attribute, ban đầu người ta sẽ sử dụng một thủ thuật gọi là cây DOM với tham số background-image: none. Khi người dùng có nhu cầu sử dụng thì background-image sẽ tự động phát hiện và tải hình ảnh.

3. Tại sao và khi nào cần sử dụng Lazy loading?

Một trang web, nếu phải tải toàn bộ các dữ liệu khi có người truy cập đã tốn thời gian rồi, nếu lượng người truy cập lớn có thể dẫn đến tình trạng lag trang, thậm chí treo phải tải lại từ đầu. Thêm vào đó, khi trình duyệt phải thực hiện trong tình trạng luôn quá tải sẽ dẫn đến việc bị lỗi và nhiều vấn đề không mong muốn phát sinh. Lazy loading là giải pháp hữu hiệu giúp hạn chế vấn đề này. Có thể tóm lược 2 lý do chính cần phải sử dụng Lazy loading:

• Tiết kiệm tài nguyên: Lazy loading sẽ trì hoãn các dữ liệu chưa cần đến, tức là sẽ tiết kiệm bộ nhớ, CPU,...của thiết bị truy cập.
• Cải thiện trải nghiệm người dùng, tăng điểm số đánh giá website: Một tiêu chí được nhiều người dùng quan tâm chính là tốc độ tải trang. Lazy loading giúp cải thiện tốc độ tải trang mà lại giảm thiểu lỗi bị ẩn dữ liệu, điều này sẽ làm trải nghiệm người dùng tốt hơn. Không chỉ người dùng mà cả các trình duyệt, trình tìm kiếm internet đều ưu tiên những trang web tải nhanh hơn là những trang web tải chậm. Lazy loading sẽ giúp trang web của bạn tải nhanh, và gia tăng điểm số đánh giá website.

4. Ưu điểm, nhược điểm của Lazy loading?

4.1. Ưu điểm của Lazy loading

Với kỹ thuật Lazy loading, một trang web sẽ khởi động với dung lượng nhỏ hơn dung lượng đầy đủ của nó. Trang web sẽ nhanh hơn, trải nghiệm người dùng tốt hơn dẫn đến tỉ lệ truy cập tăng cao, SEO tốt hơn. Những nội dung không quan trọng sẽ bị làm mờ đi, điều này cũng giúp tiết kiệm thời gian và năng lượng. Có thể tóm lược lợi ích mà Lazy loading mang lại cho người dùng và nhà cung cấp web ở 2 điểm chính:

• Cải thiện hiệu suất: Tải nhanh hơn, giảm năng lượng sử dụng, giảm lượng thông tin không quan trọng,...
• Giảm giá thành: Ngày nay, nhiều người sử dụng 4G để truy cập mạng, giảm dung lượng cần tải về là một cách tiết kiệm chi phí cho người dùng.

4.2. Nhược điểm của Lazy loading

Trên thực tế, không phải tất cả người dùng đều đặt tiêu chí tốc độ tải web lên trên hết mà cần nội dung đầy đủ, chất lượng ảnh cao (ví dụ làm nghiên cứu cần tư liệu tốt). Khi đó việc giảm chất lượng, kích thước ảnh sẽ làm họ không thoải mái. Đối với những hình ảnh không quan trọng trong bài đăng trên Facebook hay các trang cá nhân thì sử dụng kỹ thuật Lazy loading là một ý tưởng phù hợp. 

Tuy nhiên, với các trang mua sắm online chẳng hạn, mà chất lượng ảnh thấp hay thiếu thì sẽ giảm khả năng cạnh tranh. Và chắc chắn người dùng cũng không thích điều này do tìm kiếm khó khăn hơn. Ngoài ra, đối với lập trình web khi thêm vào các dòng lệnh Javascript để phát hiện thao tác người dùng cho kỹ thuật Lazy load thì lại làm tăng khối lượng code cần tải và xử lý.

5. Một số lưu ý về Lazy loading

Cách đơn giản nhất để áp dụng Lazy loading là thông qua frameworks và thư viện tài nguyên. Ví dụ:

• React: Framework này bao gồm 2 thành phần cho kỹ thuật Lazy loading là, react suspense (phản ứng chờ) và react lazy (phản ứng lười). Trong react suspense, người dùng sẽ chỉ định thời điểm hiển thị các thành phần ở thư mục cấp thấp (below the fold). Còn trong react lazy, việc tải các nội dung sẽ được thực hiện một cách linh hoạt hơn bằng cách phân mã (code) giữa các thành phần và các chi tiết nào của thành phần sẽ tải trước. 
• Javascript: Lazy loading được triển khai trong Javascript thông qua trình quan sát kiểu giao lộ gốc (Native Intersection Observer) hoặc thư viện Lazy loading như Lozad hoặc Yall
• Native Lazy loading: Trong các bản cập nhật gần đây nhất của Google đều được bổ sung tính năng này, giúp nâng cao trải nghiệm người dùng.

Chúng ta thấy rằng Lazy loading rất hữu ích và nó liên quan chủ yếu đến Lazy loading image. Khi sử dụng Lazy loading cần chú ý một số điểm sau:

• Tránh thay đổi nội dung bằng Lazy loading
• Không áp dụng Lazy loading cho tất cả các hình ảnh
• Tối ưu hóa hình ảnh phù hợp với Lazy loading
• Định dạng hình ảnh đáp ứng chuẩn

6. Lời kết

Như vậy, trong bài này ICANTECH đã giới thiệu với các bạn những vấn đề cơ bản về Lazy loading . Hi vọng bài viết đã mang lại cho các bạn những kiến thức bổ ích.

Nếu bạn đang quan tâm đến lập trình web thì hãy tham khảo ngay khóa học lập trình Web toàn diện tại ICANTECH nhé

Nguồn ảnh: ICANTECH.