Trong một trang web, hình ảnh đóng vai trò cực kỳ quan trọng bởi vì nó có mặt ở khắp mọi nơi và cũng ảnh hưởng khá nhiều đến tính thẩm mỹ của website. Hình ảnh xuất hiện tại Logo, Banner cũng như Product Image. Chính vì thế cho nên chất lượng hình ảnh càng cao thì đồng nghĩa với việc người dùng sẽ có nhiều hình ảnh đẹp và chất lượng khi sử dụng các giao diện trên website.
Tuy nhiên những hình ảnh có dung lượng quá lớn sẽ làm ảnh hưởng rất nhiều tới việc load trang web trong khi bạn cũng không thể sử dụng ít hình ảnh được. Đừng quá lo lắng về vấn đề này bởi đã có công ty thiết kế website Nhật Nam Media hỗ trợ cho trang web của các bạn. Vậy Lazy Loading là gì? Hãy cùng Nhật Nam Media tìm hiểu chi tiết về thủ thuật này trong bài viết dưới đây nhé!
Contents
Lazy Loading là gì?
Lazy Loading được hiểu nôm na chính là việc load dữ liệu khi bạn cần sử dụng đến chúng. Ví dụ như khi nhiều người cùng vào 1 page sẽ không kéo xuống hết đến cuối trang để đọc nội dung thì điều bạn cần làm là load nội dung trước.
Khi người dùng scroll tới đâu thì các bạn phải loading dữ liệu tới đó. Thủ thuật Lazy loading có thể áp dụng được đối với bất cứ một nguồn nào trên trang web, nó thậm chí còn được sử dụng cho cả file Javascript.
Một ví dụ về Lazy Loading ảnh trong thực tế. Một ảnh chiếm chỗ được tải ở bên trái vào thời điểm tải trang, và khi được cuộn đến viewport, ảnh cuối cùng (ảnh thực) được tải vào thời điểm phù hợp để thay thế ảnh chiếm chỗ.
Nói nôm na, Lazy loading chính là khi cần mới xuất hiện. Các dữ liệu sẽ xuất hiện khi lướt đến để tránh làm chậm tốc độ tải trang.
Tại sao nên sử dụng Lazy Loading
Sau khi đã hiểu được khái niệm Lazy Loading là gì? chúng ta cùng đi tìm hiểu nguyên nhân tại sao nên sử dụng thủ thuật Lazy Loading.
Trước hết, đây là một kỹ thuật hoàn hảo, có thể áp dụng được cho tất cả các trường hợp. Khi chúng ta đã hiểu rõ nhân khẩu học của người dùng mục tiêu đó là họ đang sử dụng những thiết bị kết nối có bộ vi xử lý cao. Các thiết bị kết nối này có thể là những chiếc smartphone từ tầm trung cho tới cao cấp, có tốc độ truy cập nhanh và mạnh.
Trong trường hợp bạn nhận thấy người dùng mục tiêu của mình không có những thiết bị như trên thì cách tốt nhất chính là bạn càng ít phụ thuộc vào Javascript càng tốt.
Cải thiện trải nghiệm người dùng
Trải nghiệm người dùng (UX – User Experience) có nhiều tiêu chí để xác định một trang web có đáp ứng được các trải nghiệm người dùng hay không.
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ả.
Nâng cao website performance
Khi tất cả dữ liệu đều phải tải một loạt nếu có lượng truy cập vào trang sẽ mất khá nhiều thời gian để trình duyệt thực hiện, tệ hơn sẽ bị lag trang và phải đợi trình duyệt tải lại tất cả từ đầu.
Bên cạnh đó, khi trình duyệt phải thực hiện việc “quá tải” sẽ dẫn đến việc bị lỗi, không tải được một số dữ liệu, khiến web bị ẩn dữ liệu.
Đ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ì trệ” các dữ liệu chưa cần sẽ tiết kiệm bộ nhớ, CPU, GPU,.. và hoàn toàn có ích với những users sử dụng trình duyệt trên thiết bị di động có kết nối chậm.
Gia tăng điểm số đánh giá website
Các users truy cập cũng như Google đều ư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 đư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 “điểm số”, Lazy Loading là kỹ thuật hoàn hảo để bạn tận dụng cho các dữ liệu trên trang web.
Lazy Loading giúp trang web của bạn tải nhanh hơn bởi không tốn 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 thang đo tốc độ tải trang.
Bản chất của Lazy Loading Images
Lazy Loading Images qua thẻ Img
Như các bạn đã biết thì trình duyệt đọc src là một thuộc tính để kích hoạt cho việc tải ảnh. Chính vì vậy nên các bạn cần di chuyển đường link của ảnh qua một thuộc tính khác ngăn chặn việc tải hình ảnh này.
Sau khi các bạn đã ngăn chặn thành công việc load ảnh kịp thời, hãy báo lại cho hệ thống để nó biết khi nào các bạn cần tải ảnh lên. Trong lúc này, chúng ta hãy sử dụng thủ thuật Javascript để biết được sự kiện của người dùng và thêm đường link từ data – src vào lại attr src.
Lazy Loading Images qua thuộc tính background-image
Với những hình ảnh nền, trình duyệt sẽ xây dựng cho chúng một cây DOM và kèm theo đó là CSSDOM, nó cũng sẽ kiểm tra xem kiểu CSS mà nó cung cấp có thể áp dụng được cho nút DOM ở thời điểm hiện tại được không. Nếu DOM ở thời điểm hiện tại có hình ảnh nền thì trình duyệt sẽ load ảnh. Cũng giống với src attr, đầu tiên chúng ta phải set DOM có giá trị background – image: none, sau đó chúng ta có thể thay đổi các giá trị khi thấy cần thiết.
Chúng ta cũng không thể thiếu các lớp để kích hoạt tới các đối tượng thông qua thuộc tính background-image đối với cả 2 trường hợp trên.
Ưu nhược điểm của Lazy Loading
Ưu điểm của Lazy Loading
Sở dĩ Lazy loading luôn được ứng dụng rộng rãi là bởi có nhiều điểm cộng lớn:
Lazy loading không ảnh hưởng đến hiệu suất website. Bởi Lazy loading chỉ tải những dữ liệu thật cần thiết mà người dùng cần
Hạn chế được sự chậm trễ khi phải tải một lúc đồng loạt nhiều dữ liệu
Không phải mất băng thông cho những dữ liệu không tải xuống, không xem, không nhìn thấy. Nếu lưu lượng truy cập là mối quan tâm lớn nhất của bạn, thì lazy loading chính là một lựa chọn lí tưởng.
Nhược điểm của Lazy Loading
Bên cạnh những ưu điểm nói trên, Lazy loading vẫn tồn tại một số nhược điểm như:
Nội dung tiếp cận bị thiếu có thể bị nhấp nháy.
Quá trình thực hiện Lazy loading luôn đòi hỏi nhiều Javascript, phức tạp và dễ xảy ra lỗi.
Các Javascript không được tải do lỗi kết nối sẽ không thể xuất hiện.
Một số lưu ý 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 dữ liệu nói chung, khi các dữ liệu được tải cùng lúc lướt với users có thể sẽ khiến trang web bị nhảy thông tin vì trình duyệt không tính toán được kích thước bức ảnh. Dẫn đến các thông tin bị đẩy ra xa và lung tung trên trang web gây mất thẩm mỹ.
- Vậy nên, trước khi dùng Lazy Loading, bạn nên chỉ ra chính xác kích thước bức ảnh sẽ xuất hiện, khi users lướt xuống và bức ảnh sẽ được tải mà không xê dịch thông tin trên trang.
Bên cạnh đó hãy nhớ, đừng lạm dụng Lazy Loading. Nếu trang web của bạn ít hình ảnh (dưới 5 hình ảnh), đừng áp dụng lazy-load bởi nó không ảnh hưởng quá nhiều đến tốc độ tải trang. Bạn có thể tìm cách optimize các bức ảnh thay vì Lazy Loading. Cẩn thận khi bạn dùng lazy-load bằng Intersection Observer API.
Khi dùng Intersection Observer API để lazy-load hình ảnh, lệnh scr sẽ trở thành data-scr và Googlebot không hiểu data-scr là gì. Như vậy Googlebot sẽ cho rằng hình ảnh của bạn là lỗi và không index chúng. Đối với giá trị lazy của thuộc tính Loading, cách này không áp dụng lazy-load cho hình ảnh background. Nên tránh lazy-load các hình ảnh đầu trang để tránh tối thiểu layout shift.
Kết luận
Như vậy, việc tối ưu hóa nội dung website được đánh giá là vô cùng quan trọng. Giúp định hình trải nghiệm của người dùng. Nếu được triển khai tốt thì Lazy loading sẽ mang đến nội dung bổ sung một cách hợp lý. Hy vọng thông tin trên của Nhật Nam Media đã giúp bạn hiểu được kỹ thuật Lazy Loading là gì. Biết sử dụng Lazy loading một cách hợp lý cho website của mình.
Bài viết liên quan
