Lazy Loading là gì? Ứng dụng thế nào cho Website

Đa dạng nội dung đa phương tiện là điều cần thiết khi sản xuất nội dung cho Webiste, một bài viết để có thể thu hút người đọc và có được thứ hạng cao trên kết quả tìm kiếm cần phải có nhiều hình ảnh dùng để minh họa trực quan bên cạnh nội dung bài viết.

Nhưng đôi khi sử dụng quá nhiều hình ảnh và chất lượng hình ảnh cao, dung lượng lớn lại gây cho Website bị quá tải dẫn đến tải chậm, gây ảnh hưởng đến trải nghiệm người dùng khi truy cập vào trang Website. Vậy Lazy Loading là gì? Nó giúp gì trong việc tối ưu hình ảnh giúp tăng tốc độ tải trang

Lazy Loading là gì?

Lazy Loading là việc một nội dung nào đó được trì hoãn, chờ đợi để được tải.

Giả sử bài viết của bạn sử dụng 15 hình ảnh trải dài từ đầu bài viết đến cuối bài viết, nếu bình thường thì người dùng phải đợi trang tải đầy đủ phần text và 15 hình ảnh thì mới hiển thị cho người dùng. Điều này không tối ưu về mặt thời gian và hiệu suất.

Lazy Loading ra đời và chỉ cần tải khoảng 5 hình là có thể hiển thị cho người dùng, 10 ảnh bên dưới sẽ được trì hoãn, tải từ từ trong lúc người dùng đang đọc và xem 5 ảnh trên, khi người dùng kéo xuống đến những nội dung bên dưới thì những ảnh này mới được tải lên

Thật tiện lợi phải không, đúng theo hành vi của người dùng, sao phải lãng phí tài nguyên và thời gian đợi tải hết trong khi chưa chắc người dùng sẽ xem hết nội dung.

Ưu điểm của Lazy Loading

Điểm cộng lớn của Lazy Loading là sự sự tác động tích cực đến hiệu suất và tốc độ tải của Website. Bởi chức năng chỉ tải những dữ liệu cần thiết và trong tầm nhìn của người dùng, Lazy Loading dần đã trở thành kỹ thuật tối ưu hiệu suất trang web cơ bản và hiệu quả nhất, giúp hạn chế sự chậm trễ và lãng phí, dư thừa tài nguyên.

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

• Nâng cao tốc độ tải website

Không còn phải mất thời gian để tải một loạt tài nguyên có kích thước lớn, giờ đây người dùng có thể truy cập trang web của bạn với tốc độ vượt trội. Bên cạnh đó, khi trình duyệt phải thực hiện tải quá nhiều sẽ dẫn đến việc bị lỗi, không tải được một số dữ liệu, khiến website bị lỗi

Điều này để lại ấn tượng xấu về mặt hình thức lẫn khiến users thấy được sự kém thu hút của trang web.

Đồng thời làm giảm lượng truy cập và tương tác với trang. Lazy Loading với chức năng chỉ tải dữ liệu khi users lướt đến sẽ trả kết quả cho users nhanh hơn, cũng như cải thiện sự “chuyên nghiệp” của trang web, giúp trang web “bảo toàn” tất cả dữ liệu.

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

Áp dụng Lazy Loading trì hoãn việc tải các dữ liệu chưa cần sẽ tiết kiệm bộ nhớ, CPU, GPU,.. giúp ích cho người dùng sử dụng thiết bị có ram yếu hay mạng Internet

• Cải thiện trải nghiệm người dùng

Nâng cao trải nghiệm cho người dùng (UX – User Experience) giúp việc duyệt Web trở nên dễ dàng, nhanh chóng, việc này cũng mang lại lợi ích trong việc SEO Website

Một trong những tiêu chí được nhiều người quan tâm chính là Tốc độ load trang. Khi các trang web phải tải quá nhiều dữ liệu chưa cần thiết sẽ làm chậm tốc độ tải trang web và các dữ liệu có trên trang.

Bên cạnh đó, số lượng người dùng truy cập internet bằng thiết bị di động ngày càng nhiều (Theo thống kê VPN Mentor, năm 2021 số lượng truy cập web đến từ thiết bị di động toàn cầu là 48,2%), vậy nên Tối ưu trên thiết bị di động cũng là một tiêu chí cần được chú ý.

Lazy loading cải thiện tốc độ tải trang, giảm thiểu lỗi bị ẩn dữ liệu sẽ cải thiện trải nghiệm người dùng hiệu quả.

• Gia tăng điểm đánh giá SEO

Người dùng truy cập cũng như Google đều ưu tiên các trang web có tốc độ tải nhanh, mang lại trải nghiệm tốt, bởi các trang web tải nhanh đưa lại kết quả tìm kiếm nhanh hơn, đạt được nhiều lượt truy cập hơn.

Nếu bạn là người quan tâm đến việc cải thiện SEO cho Website thì Lazy Loading là kỹ thuật hoàn hảo mà bạn nên cân nhắc sử dụng. Đây cũng là một trong những yêu cầu của website muốn triển khai AMP

Lazy Loading giúp trang web của bạn tải nhanh hơn bởi giảm bớt khoảng thời gian để đồng bộ tất cả dữ liệu, từ đó sẽ tăng điểm số đánh giá trang web của bạn dựa trên các chỉ số về tốc độ tải trang.

Các kỹ thuật sử dụng Lazy Loading

Lazy Loading chỉ thực sự có tác dụng khi bạn sử dụng nó vào đúng mục đích, đúng thời điểm và đúng đối tượng. Không nên lạm dụng vì nó cũng có những nhược điểm sau

• Có thể gây khó chịu với vị trí của nội dung đang trì hoãn
• Quá trình thực hiện lazy-load đơn thuần là việc sử dụng nhiều mã Javascript phức tạp hơn, dễ xảy ra lỗi hơn. Khi các Javascript không được tải xuống do lỗi kết nối mạng hoặc các Javascript không hoạt động bình thường, các dữ liệu được khởi lệnh lazy-load sẽ không xuất hiện.

Trường hợp nên dùng Lazy Loading

• Khi trang web có quá nhiều dữ liệu cần tải, các dữ liệu có kích thước khá lớn làm chậm tốc độ tải trang và giảm hiệu suất trang web.
• Trang web cần tối ưu trên các thiết bị di động và cải thiện tốc độ tải trang. Vì đa số các thiết bị di động có dung lượng ram không quá lớn và khả năng kết nối mạng Internet, Wifi có giới hạn
• Nếu trang web có những dữ liệu phục vụ kinh doanh online, thương mại điện tử thì việc áp dụng Lazy-load là không hợp lý, vì khách hàng có thể sẽ không tìm ra hình ảnh của những sản phẩm đang bị trì hoãn mà họ cần.

Chuẩn bị để dùng Lazy Loading

Trước khi sử dụng bất kì một kỹ thuật nào, điều đầu tiên bạn cần làm là hiểu rõ về nó và tính năng nó đem lại cho trang web của mình. Tương tự, với Lazy Loading cũng vậy.

Lazy Loading chỉ là một thuộc tính để “điều khiển” sự xuất hiện của các dữ liệu trên trang web (ở đây thường là hình ảnh). Bạn có thể sử dụng Lazy-load với thuộc tính Loading.

Thuộc tính Loading gồm ba giá trị tương ứng với chức năng của chúng: lazy, eager, auto.

• Lazy: Chỉ định dữ liệu cần lazy load
• Eager: Chỉ định dữ liệu cần ưu tiên tải sớm, tải trước, yêu cầu trình duyệt cần tải lập tức các loại dữ liệu này
• Auto: Việc quyết định có nên tải trước hay không hoàn toàn phụ thuộc vào trình duyệt

Các cách áp dụng Lazy Loading cho dữ liệu (hình ảnh).

• Dùng thuộc tính Loading

Đây là cách cơ bản nhất, bạn không cần dùng Javascript và lo sợ rằng sẽ có lỗi xảy ra với các hình ảnh trên trang. Tất cả điều bạn cần làm ở đây là khai báo cho trình duyệt những dữ liệu nội dung nào cần lazy-load bằng thuộc tính Loading cùng với ba giá trị tương ứng lazy, eager, auto.

• Dùng Fallback hoặc Polyfill

Đối với các trình duyệt không hỗ trợ Loading, thì có thêm cách là dùng Fallback (ở đây có nghĩa dự phòng) và Polyfill (một mã triển khai tính năng nào đó mà trình duyệt web không hỗ trợ.)

Tương tự, với Fallback hay Polyfill, chúng ta cũng viết code với thuộc tính Loading để thực thi việc lazy-load các 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 “động tác” nào đó với dữ liệu (hình ảnh) bạn mong muốn khi được users lướt tới.

Intersection Observer API có hỗ trợ lazy-load các hình ảnh, tuy nhiên nó không hỗ trợ thuộc tính Loading như hai cách trên. Ta chỉ dùng lệnh lazy Image khi muốn lazy-load các hình ảnh trên trang. Bên cạnh đó, Intersection Observer API cũng lazy-load được cả ảnh background bằng lệnh lazy-background.

Một vài chú ý khi sử dụng Lazy Loading.

Những cách sử dụng vừa nêu trên có những nét đặc thù riêng với từng đặc tính của các trình duyệt web hiện nay. Ví dụ như Intersection Observer API không hỗ trợ cho Internet Explorer và Opera Mini dù nó đều hỗ trợ lazy-load cho tất cả các trình duyệt web khác.

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

• Về Layout shift:

Khi áp dụng Lazy Loading cho các hình ảnh hay các loại nội dung khác, khi các dữ liệu được tải cùng lúc với thao tác lướt của người dùng có thể sẽ khiến trang web bị nhảy thông tin vì trình duyệt chưa kịp tính toán kích thước nội dung tải lên. Dẫn đến các thông tin bị đẩy ra khỏi khung làm mất bố cục giao diện, gây ảnh hưởng đến người dùng

Vậy nên, trước khi dùng Lazy Loading, bạn nên chỉ khai báo thông tin chính xác về kích thước nội dung sẽ xuất hiện, khi users thực hiện thao tác lướt xuống thì nội dung sẽ được xuất hiện một cách trơn tru hơn

Hạn chế việc lạm dụng Lazy Loading. Nếu trang web của bạn không có nhiều nội dung, hay kích thước không lớn thì không nên sử dụng lazy-load bởi nó không thể tác động thêm về tốc độ tải trang. Bạn có thể tìm cách tối ưu khác chuẩn SEO hơn

Hy vọng những kiến thức trên sẽ giúp ích trong quá trình tìm hiểu hay thực hiện tối ưu cho Website của bạn. Nếu thấy hữu ích hãy chia sẻ nội dung trên, nếu bạn cần tìm hiểu thêm về tối ưu Website hãy theo dõi bài viết của chúng tôi.