Nhưng số lượng ảnh có dung tích lớn lại ảnh hưởng tác động không nhỏ tới việc load trang, nhưng làm gì khi mà bạn cũng không hề 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. Bizfly sẽ giới thiệu tới bạn thủ thuật này trong bài viết sau.
Mục lục nội dung
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.
Lazy loading là gì ?
Việc nên làm đó chính là khi người dùng scroll đến đâu bạn sẽ load tài liệu đến đó. lazy loading hoàn toàn có thể vận dụng cho bất kỳ resource nào trên 1 page, thậm chí còn là cả file JavaScript .
Bizfly cung cấp bộ giải pháp chuyển đổi số (chatbot, CRM, Email Marketing và thiết kế website…) giúp doanh nghiệp tăng trưởng 100% doanh thu, tiết kiệm 50% chi phí
KHÁM PHÁ NGAY
Ư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 suất cao nhất đang được sử dụng phổ cập lúc bấy giờ. Chắc chắn bạn sẽ không khi nào phải mất ngân sách 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 vấn là một trong những mối chăm sóc lớn nhất của bạn thì Lazy loading sẽ là một sự lựa chọn lí tưởng .
Xem thêm : Pagespeed Insights là gì ? Cách tối ưu hóa website theo Pagespeed Insights
Ứng dụng của Lazy loading
Trên trong thực tiễn, Lazy loading được sử dụng thoáng đãng nhất trong lập trình, phong cách thiết kế website. WordPress phân phối một giải pháp dựa trên Lazy Loading mang tên Infinite Scroll, tương hỗ bạn sử dụng con lăn và cuộn con chuột liên tục để đọc thêm những nội dung mới .
Google tiếp cận với Lazy loading theo hướng đơn cử là ở mục tìm kiếm hình ảnh. Google sẽ đưa ra list 4-5 bức ảnh tương quan sau khi xem đơn cử một tấm hình nào đó và cạnh bên đó 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 tiềm năng của mình, những người dùng này đa phần sử dụng những thiết bị có liên kết cùng bộ vi giải quyết và 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 mưu trí từ những dòng trung đến hạng sang với vận tốc mạnh nhanh, máy tính hoặc desktop trên những liên kết băng thông rộng. Nếu như người dùng của bạn không có những đặc thù trên thì tốt nhất bạn nên ít nhờ vào vào JavaScript càng tốt .
Tại sao cần sử dụng Lady loading ?
Việc vận dụng Lazy loading cho những hình ảnh không thiết yếu 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 sáng tạo tuyệt vời .
trái lại, những loại sản phẩm ảnh được vận dụng giải pháp Lazy loading trong một shop trực tuyến thì lại hoàn toàn 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 mẫu sản phẩm, nhưng họ lại không hề tìm thấy được mẫu 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.
Hình ảnh là một nội dung thiết yếu trên mỗi website, tất cả chúng ta nên tối ưu chúng một cách nhỏ nhất hoàn toàn có thể khiến cho chúng được tải xuống một cách thông thường nhất. Đối với những hình ảnh không thiết yếu, bạn nên vận dụng Lazy loading cho chúng .
Còn nếu như bạn nhờ vào vào JavaScript, hãy sử dụng một tư viện như lazysize, nó chịu nghĩa vụ và trách nhiệm cho việc lazy loading và tạo ra những hình ảnh thích hợp nhanh gọn cho quy trình sử dụng .
Có thể bạn chăm sóc : Cách tăng vận tốc website giúp giảm thời hạn tải trang tối ưu
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.
Lazy Loading Images qua thẻ Img
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.
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 hề thiếu class để trigger đến đối tượng người dùng trải qua background-image cho cả 2 trường hợp trên .
Image Lazy Loading
Background-Image lazy loading
Kỹ thuật Lazy loading được sử dụng hầu hết để Giao hàng cho mục tiêu nâng cao những trải nhiệm của người dùng, giúp giảm thiểu tối đa thời hạn đợ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 liên tục ở lại và đọc website lâu hơn. Nếu như muốn thiết lập và sử dụng kỹ thuật này, bạn hoàn toàn có thể tìm kiếm và tải ở những trang uy tín như Bizfly Cloud .
Bizfly Website – Dịch vụ thiết kế website chuyên nghiệp, uy tín theo yêu cầu
- Địa chỉ: 85 Vũ Trọng Phụng, Thanh Xuân, Thanh Xuân Trung, Hà Nội.
- Hotline: 1900 63 64 65
- Website: https://mindovermetal.org/giai-phap/bizfly-website.html
Source: https://mindovermetal.org
Category: Wiki là gì
