Lazy loading là gì ?
Mở từ điển bách khoa về lazy loading
Để hiển thị được một trangWorld Wide Web ở phía người sử dụng, điều đầu tiên mỗi trình duyệt sẽ làm đó là load cấu trúc trang web đó từ phía máy chủ được truy cập và bắt đầu tiến hành tải tài nguyên được liên kết trong cấu trúc trang và khởi tạo đối tượng trên màn hình, những tài nguyên đó bao gồm Cascading Style Sheets, Javascript, Images, Text, Media, ... mây mây và vân vân những thứ được bao gồm trong cấu trúc trang trước khi đọc, sắp xếp và hiển thị chúng cho người sử dụng.Nhưng hãy tưởng tượng, một trang web với nguồn tài nguyên được tải xuống vô cùng lớn như một trang thương mại điện tử với thông tin của hàng tá sản phẩm, hay điển hình là như Instagram với một lượng lớn tài nguyên hình ảnh cần phải được tải xuống. Tuy nhiên, điều đó có thể là lãng phí và ảnh hưởng lớn đến trải nghiệm người dùng và hiệu suất của website khi phải đợi trình duyệt load hàng tá tài nguyên như vậy. Chưa kể đến chỉ một số ít trong chúng hiển thị trên màn hình vì tất nhiên màn hình là có giới hạn và không thể cùng lúc hiển thị toàn bộ thông tin như vậy và một trong số chúng không phải là quá cần thiết để load ngay lập tức.
Và vì vậy lazy loading đã ra đời.
Vậy thì lazy loading chính là ...Là việc trì hoãn việc khởi tạo một đối tượng nào đó cho đến thời điểm thích hợp. Ví dụ, trang web của tớ có 100 hình ảnh thì tất nhiên không phải 100 hình ảnh sẽ hiển thị ngay cho người dùng mà người dùng sẽ phải cuộn xuống từng ảnh để xem. Vậy thì thay vì load toàn bộ ảnh một lúc,
lazy loading sẽ chỉ load ảnh cho tới khi người dùng cuộn tới vị trí của ảnh đó, điều này giúp tiết kiệm thời gian và cải thiện được hiệu suất của trang web.Cải thiện hiệu suất website bằng lazy loading images
Vậy thì trong khuôn khổ bài viết này chúng ta sẽ tìm hiểu việc áp dụnglazy loading cho images để cải thiện được hiệu suất của trang web.Khác với những kĩ thuật
lazy loading được rao trên Internet, thì ở đây chúng ta sẽ tận dụng một tính năng mới của các trình duyệt đó là thuộc tính loading trên thẻ <img> và thẻ <iframe>Thuộc tính này có ba giá trị cơ bản đó là :
auto là theo lối mặc định của trình duyệt, nó được mặc định như nào tùy thuộc vào mỗi trình duyệt nhưng hầu như mặc định này tương đương với không có gìlazy là đợi cho đến khi người dùng cuộn sắp đến thì sẽ bắt đầu tải tài nguyên xuống để hiển thịeager tải ngay lập tức không bàn gì hếtsử dụng loading="lazy"
và cái chúng ta cần ở đây đó làlazy vậy chúng ta sẽ làm là thêm thuộc tính sau vào mỗi thẻ <img>loading='lazy'<img alt="lazy load this image" src="image.jpg" loading="lazy" width="20px" height="20px"/>Buộc phải thêm giá trị width và height cho thẻ image nếu không loading='lazy' sẽ "đôi khi" không hoạt động
<picture> ta cũng làm tương tự như với thể <img><picture>
<source media="(max-width:4500px)" srcset="large.jpg">
<img src="image.jpg" loading="lazy" alt="lazy load this image">
</picture>Một số trình duyệt chưa bao gồm hỗ trợ thuộc tính này hoặc chỉ mới đem vào thử nghiệm và lazy loading là thuật ngữ, loading=lazy là thuộc tính
Với một thuộc tính đơn giản nhưng mang lại hiệu quả vô cùng lớn trong việc cải thiện hiệu suất trang web. Mặc dù chưa được phổ biến rộng trên tất cả các trình duyệt nhưng cũng đáng để thử đúng không nào ?
Video mẫu thuộc tính
loading="lazy" trên trình duyệt ChromiumỞ đây chúng ta thấy ảnh chỉ được tải khi load gần đến đúng không nào ??