Với một website hình ảnh đóng vai trò rất quan trọng bởi nó có từ hầu hết mọi nơi từ Logo, Banner, Product Image. Bởi vậy chất lượng ảnh lớn tỉ lệ thuận với việc người dùng sẽ có hình ảnh đẹp và chất lượng khi sử dụng giao diện website. Nhưng số lượng ảnh có dung lượng lớn lại ảnh hưởng không nhỏ tới việc load trang, nhưng làm gì khi mà bạn cũng không thể sử dụng ít ảnh đi được? Lúc này, kỹ thuật Lazy Loading Image sẽ là cứu cánh cho bạn.
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. Việc nên làm đó chính là khi người 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, thậm chí là cả file JavaScript.
Lazy loading là gì?
Ưu điểm của Lazy loading
Lazy loading là một trong những kỹ thuật tối ưu hiệu suất website hiệu quả nhất đang được sử dụng phổ biến hiện nay. Chắc chắn bạn sẽ không bao giờ phải mất chi phí băng thông cho những gì mà bạn không tải xuống, không xem và không nhìn thấy. Nếu như lưu lượng truy cập là một trong những mối quan tâm lớn nhất của bạn thì Lazy loading sẽ là một sự lựa chọn lí tưởng.
Ứng dụng của Lazy loading
Trên thực tế, Lazy loading được sử dụng rộng rãi nhất trong lập trình, thiết kế website. WordPress cung cấp một giải pháp dựa trên Lazy Loading mang tên Infinite Scroll, hỗ trợ bạn sử 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 cụ thể là ở mục tìm kiếm hình ảnh. Google sẽ đưa ra danh sách 4-5 bức ảnh liên quan sau khi xem cụ thể một tấm hình nào đó và bên cạnh đó là nút “View More” để xem nhiều ảnh hơn.
Tại sao cần sử dụng Lady loading?
Lazy loading chính là một kỹ thuật vô cùng lý tưởng với những tường hợp mà bạn có hiểu rõ về nhân khẩu học của người dùng mục tiêu của mình, những người dùng này chủ yếu sử dụng những thiết bị có kết nối cùng bộ vi xử lý tốt.
Các thiết bị này chính là những chiếc điện thoại thông minh từ các dòng trung đến cao cấp với tốc độ mạnh nhanh, laptop hoặc desktop trên các kết nối băng thông rộng. Nếu như người dùng của bạn không có những đặc điểm trên thì tốt nhất bạn nên ít phụ thuộc vào JavaScript càng tốt.
Việc áp dụng Lazy loading cho những hình ảnh không cần thiết trên bài đăng của Blog và trên những Potography protfolio của bạn sẽ là một ý tưởng tuyệt vời. Ngược lại, các sản phẩm ảnh được áp dụng phương pháp Lazy loading trong một cửa hàng trực tuyến thì lại có thể gây phản tác dụng, nhất là trong trường hợp có ai đó đang cần đặt hàng sản phẩm, nhưng họ lại không thể tìm thấy được sản phẩm đó.
Và chắc hẳn nó sẽ trở nên trầm trọng hợn khi bạn đang sử dụng một thiết bị di động có kết nối kém.
Lazy loading giúp tốc độ tải trang nhanh hơn
Hình ảnh là một nội dung thiết yếu trên mỗi website, chúng ta nên tối ưu chúng một cách nhỏ nhất có thể khiến cho chúng được tải xuống một cách bình thường nhất. Đối với những hình ảnh không cần thiết, bạn nên áp dụng Lazy loading cho chúng.
Còn nếu như bạn phụ thuộc vào JavaScript, hãy sử dụng một tư viện như lazysize, nó chịu trách nhiệm cho việc lazy loading và tạo ra những hình ảnh tương thích nhanh chóng cho quá trình sử dụng.
Xem thêm: Pagespeed Insights là gì? Cách tối ưu hóa website theo Pagespeed Insights
Bản chất của Lazy Loading Images là gì?
Có 2 cách thông thường để load Image trên 1 page đó là sử dụng thẻ, sử dụng thuộc tính background-image của CSS.
Lazy Loading Images qua thẻ Img
Thẻ với đinh dạng cơ bản:
Như đã biết trình duyệt đọc src attribute để trigger đến việc tải ảnh. Nên chúng ta sẽ move link image qua 1 attribute khác để ngăn chặn việc tải ảnh này. Dưới đây là 1 VD sử dụng data-src attribute , bạn hoàn toàn có thể đặt bất cứ tên attr nào mà bạn muốn.
Sau khi ngăn chặn được việc load Images tức thời thì chúng ta cũng cần thông báo cho trình duyệt biết khi nào cần load Images lên. Lúc này ta sẽ sử dụng Javascript để bắt sự kiện của người dùng và add link từ data-src vào lại attr src.
Bản chất Lazy loading Image
Lazy Loading Images qua thuộc tính background-image
Với background-image , trình duyệt sẽ xây dựng cây DOM kèm theo CSSDOM và check xem kiểu CSS có áp dụng cho nút DOM hiện tại không. Nếu DOM hiện tại có background-image thì trình duyệt sẽ load Image. Tương tự như src attr , trước tiên ta sẽ set cho DOM có giá trị background-image: none sau đó sẽ change giá trị khi cần thiết.
Đương nhiên ta không thể thiếu class để trigger đến đối tượng thông qua background-image cho cả 2 trường hợp trên.
Image Lazy Loading
https://codepen.io/imagekit_io/pen/MBNwKB
Background-Image lazy loading
https://codepen.io/imagekit_io/pen/RBXVrW
Kỹ thuật Lazy loading được sử dụng chủ yếu để phục vụ cho mục đích nâng cao các trải nhiệm của người dùng, giúp giảm thiểu tối đa thời gian đợi load nội dung ở phía client (cũng là một giải pháp để nâng cao trải nhiệm người dùng) để từ đó tăng xác xuất “giữ” người dùng tiếp tục ở lại và đọc website lâu hơn. Nếu như muốn cài đặt và sử dụng kỹ thuật này, bạn có thể tìm kiếm và tải ở những trang uy tín như Bizfly Cloud.