Lazy Loading là gì? Những điều cơ bản không thể bỏ qua

Lazy loading là gì? Hiểu theo một cách đơn giản thì nó chính là một loại dữ liệu mà bạn sẽ dùng đến. Nhưng dữ diệu đó là gì? Sử dụng như thế nào? Cùng tìm và phân tích thêm nhiều nội dung qua bài viết Lazy Loading là gì? Những điều cơ bản không thể bỏ qua nhé.

Lazy Loading là gì?

Lazy Loading được hiểu nôm na chủ đạo là việc load dữ liệu khi bạn phải cần sử dụng đến chúng. Chẳng hạn như 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 phải cần làm là load nội dung trước. Việc có thể làm đó chính là khi người sử dụng scroll đến đâu bạn sẽ load dữ liệu đến đó. Lazy loading có thể áp dụng cho bất cứ resource nào trên 1 page, nghiêm trọng hơn là cả tệp JavaScript

Xem thêm: Web scraping là gì? Có những loại Web scraping nào?.

Ưu điểm của Lazy loading

Lazy loading là một trong những kỹ thuật tốt nhất hiệu năng site đạt kết quả cao nhất đang được sử dụng phổ cập hiện nay. Bảo đảm bạn sẽ không bao giờ phải mất tiền của băng thông cho những gì mà bạn không download, không coi và không nhìn thấy. Nếu lưu lượng truy cập là một trong các điều bận tâm khổng lồ nhất của bạn thì Lazy loading sẽ là một sự xác định lí tưởng.

Ứng dụng của Lazy loading

Theo thực tế, Lazy loading được sử dụng phổ biến nhất trong lập trình, thiết kế website. WordPress bổ sung một giải pháp dựa trên Lazy Loading mang tên Infinite Scroll, giúp bạn dùng con lăn và cuộn con chuột liên tục để đọc thêm các nội dung mới.

Google tiếp cận với Lazy loading theo hướng chi tiết là ở mục tìm kiếm hình ảnh. Google sẽ đưa ra danh sách 4-5 bức hình có sự liên quan sau khi coi chi tiết một tấm hình nào đó và ngoài ra là nút “View More” để xem nhiều ảnh hơn.

Tại sao có thể sử dụng Lazy Loading?

Nâng cao site performance

Khi tất cả dữ liệu đều phải tải một loạt nếu như có lượng truy cập vào trang sẽ mất khá nhiều thời gian để trình duyệt web thực hiện, tệ hơn sẽ bị lag trang và phải đợi trình duyệt web tải lại tất cả từ khi bắt đầu.

Bên cạnh đó, khi trình duyệt phải hành động việc “quá tải” sẽ gây ra việc bị lỗi, không tải được một vài 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 quyến rũ của trang web. Cùng lúc đó làm giảm lượng truy cập và tương tác với trang. Lazy Loading với tính 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 website, giúp trang web “bảo toàn” tất cả dữ liệu.

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

Ứng 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 web trên điện thoại di động có kết nối chậm.

Tốt lên sử dụng thử người sử dụng

Sử dụng thử người sử dụng (UX – User Experience) có những tiêu chí để chọn lựa một trang web có chiều lòng được các trải nghiệm người sử dụng hay không.

Một trong những mục tiêu được không ít người quan tâm chính là tốc độ load trang. Khi các trang web phải tải quá là 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 sử dụng truy xuất internet bằng thiết bị di động ngày càng nhiều (Theo tổng hợp và thống kê VPN Mentor, năm 2021 số lượng kết nối web xuất phát từ điện thoại di động toàn cầu là 48,2%), vậy có thể 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 số nhận xét website

Các users truy xuất cũng như Google đều ưu tiên các trang website tải nhanh hơn những trang web chậm, bởi các trang website tải nhanh đưa lại kết quả của tìm kiếm nhanh hơn, đạt cho được nhiều lượt click hơn.

Nếu như bạn là người chú ý đế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ận xét trang web của bạn dựa trên các thang đo tốc độ tải trang.

Khi nào thì cần “lazy-loading images”?

Cho dù lazy-load có rất nhiều tiện ích như trên, bạn cần đặt câu hỏi cho bản thân liệu bạn có thật sự cần nó không, vì “lazy-loading images” cũng có những tác hại (mình có share ở cuối bài viết) nếu như chúng ta sử dụng quá nhiều hoặc dùng sai bí quyết. Vậy khi nào thì con người có thể lazy-load hình ảnh của web:

Trang của bạn có những hình ảnh và chúng đang làm chậm trang web của bạn.
Hình ảnh trong trang của bạn nằm khuất màn hình và không cần phải tải tức thời.
Bạn cần tối ưu tốc độ tải trang trên mobile (và cả desktop), thì “lazy-load images” là một việc có thể làm (tất nhiên chỉ lazy-load thôi chưa đủ đâu tuy nhiên nhanh được thêm bao nhiêu hay bấy nhiêu)

Rắc rối nào có thể xảy ra

Lazy load ảnh và clip có các tác động tích cực lên hiệu năng và tốc độ, tuy vậy đừng nên coi nó là vai trò đơn giản. Nếu bạn triển khai sai, nó có khả năng để lại kết quả khôn lường. Thế nên bạn cần để ý đến các điểm đặc biệt dưới đây.

Xem thêm Cấu trúc Website WordPress và những cách thức hoạt động

Lưu tâm đường biên fold

Ý tưởng lazy load mọi tài nguyên đa phương tiện trên trang bằng JavaScript rất hấp dẫn, tuy nhiên bạn phải cần phản kháng lại sự cám dỗ này. Bất cứ thứ gì nằm trên màn hình đầu tiên không cần lazy load. Các tài nguyên này phải được coi là là các tài sản đặc biệt, và vì thế luôn phải được tải theo cách thường thường.

Chẳng hạn như, intersection observer API cho phép bạn chỉ định thuộc tính rootMargin trong một đối tượng mục tiêu tùy chọn khi mà bạn tạo một IntersectionObserver mới. Việc làm này mang lại cho các phần tử một bộ đệm, cái sẽ kích hoạt hành vi lazy load trước khi phần tử đi vào khung nhìn trình duyệt web (qua đó sẽ giúp người dùng thỏa mãn hơn nhờ tránh được hiện tượng trễ):

let lazyImageObserver = new IntersectionObserver(function(entries, observer) 
  // Lazy loading image code goes here
, 
  rootMargin: "0px 0px 256px 0px"
);

Bố cục điều chỉnh và các không gian giữ chỗ

Lazy load tài nguyên đa phương tiện có khả năng là nguyên nhân gây điều chỉnh bố cục nếu không gian giữ chỗ không được dùng. Những thay đổi này có thể làm phân tán mức độ tập trung, định hướng của người dùng và kích hoạt vận hành cấu trúc DOM tiêu tốn cũng như tiêu thụ tài nguyên hệ thống và góp phần gay ra hiện tượng jank. Ít nhất bạn cần phải xem xét dùng khối màu giữ chỗ đồng nhất có cùng độ phân giải với ảnh nhắm đến, hoặc các kỹ thuật như LQIP hoặc SQIP để gợi ý các phần tử đa phương tiện trước khi nó được tải.

Với các thẻ , src ban đầu phải chỉ đến không gian giữ chỗ cho đến khi tính chất đó được cập nhật với URL ảnh cuối cùng. Sử dụng thuộc tính poster trong phần tử để trỏ đến ảnh giữ chỗ. Bên cạnh đó, sử dụng tính chất width và height trên cả thẻ lẫn thẻ . Việc làm này bảo đảm việc chuyển tiếp từ ảnh chiếm chỗ tới ảnh thật sự không làm thay đổi kích cỡ kết xuất của phần tử được sử dụng làm nơi bao chứa tài nguyên đa phương tiện.

Độ trễ trong nhiệm vụ giải mã hình ảnh

Tải các ảnh có dung lượng lớn trong JavaScript và đặt chúng vào trong DOM có thể làm luồng chính bị bận rộn, đây chính là nguyên nhân làm bố cụ và giao diện người dùng không thể phản hồi trong khi ngắn khi mà trình duyệt phải giải mã hình ảnh.

Giải mã hình ảnh không đồng bộ (asynchronously) bằng phương thức decode trước khi chèn chúng vào DOM có thể cắt giảm kiểu jank này (độ trễ), nhưng cần nhận thức rõ là: hiện chúng không khả dụng trên mọi trình duyệt, và nó làm khó khăn thêm logic của lazy load. Nếu bạn muốn dùng nó, bạn sẽ cần kiểm duyệt lại nó. Bên dưới chúng tôi cho bạn thấy bí quyết dùng Image.decode() đi kèm dự phòng:

var newImage = new Image();
newImage.src = "my-awesome-image.jpg";

if ("decode" in newImage) 
  // Fancy decoding logic
  newImage.decode().then(function() 
    imageContainer.appendChild(newImage);
  );
 else 
  // Regular image load
  imageContainer.appendChild(newImage);

Xem thêm : Cách xem code của 1 trang web nhanh chóng và đơn giản

Khi các tài nguyên không chịu download

Lazy loading có nhiều khi các tài nguyên đa phương tiện không thể tải xuống vì một lý do nào đó hoặc lỗi bất chợt. Điều đấy có thể xuất hiện khi nào? Nó còn tùy, tuy nhiên đây là một tình huống giả định cho bạn: Bạn có tài liệu HTML có chính sách cache trong một thời gian ngắn (ví dụ 5 phút), và người dùng ghé thăm site hoặc người sử dụng rời tab cũ mở trong một thời gian dài (ví dụ vài tiếng) rồi sau đó họ quay quay lại để đọc tiếp thông tin của bạn.

Tại một số điểm trong lúc này, sẽ xuất hiện tái khai triển. Trong lúc khai triển này, tên một tài nguyên ảnh thay đổi dựa trên phiên bản hash, hoặc bị loại bỏ hoàn toàn. Khi đến thời điểm người dùng cần lazy load ảnh, tài nguyên không còn có sẵn nữa, và thế là xuất hiện lỗi.

(Nguồn: Tổng hợp)

Lời kết

Qua bài viết trên của Atpweb.vn đã cung cấp đến các bạn đọc một số thông tin về Lazy Loading là gì? Những thông tin không thể bỏ qua. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.