Đối với website thì hình ảnh đóng vai trò rất quan trọng bởi nó có từ hầu hết mọi nơi trên website từ Logo, Banner, hình ảnh sản phẩm,... Chính vì vậy mà chất lượng ảnh lớn sẽ 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.Tuy nhiên số lượng ảnh có dung lượng lớn lại ảnh hưởng không nhỏ tới việc load trang, vậy thì câu hỏi đặt ra là cần làm gì khi mà bạn cũng không thể sử dụng ít hình ảnh lại được? Câu trả lời đó chính là kỹ thuật Lazy Loading Image sẽ là cứu cánh cho bạn. Terus sẽ giới thiệu tới bạn thủ thuật này trong bài viết dưới đây.
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 chỉ thực sự phát huy tác dụng khi được sử dụng đúng mục đích, đúng thời điểm và đúng đối tượng. Bạn nên chú ý những điều sau:
Nếu trang web có quá nhiều dữ liệu để tải sẽ khiến trang bị chậm, giảm hiệu suất trang web. Trang web nên được tối ưu hóa cho điện thoại để cải thiện tốc độ tải trang. Người dùng sử dụng các thiết bị được kết nối băng thông rộng, tốc độ kết nối mạnh để tránh lỗi Javascript của lazy-load.Nếu trang web có dữ liệu bán hàng (một trang web tương tự như trang thương mại điện tử), việc áp dụng lazy-load sẽ không phù hợp vì khách hàng có thể không tìm thấy sản phẩm cần nhưng bị ẩn.
Trước khi sử dụng bất kỳ kỹ thuật nào, bạn phải hiểu kỹ thuật đó có tính năng và đem lại lợi ích gì cho trang web của bạn, tương tự lazy loading cũng vậy.Lazy loading đơn giản là một thuộc tính để điều khiển sự xuất hiện của các dữ liệu trên trang web như hình ảnh. Bạn có thể sử dụng lazy-load với thuộc tính loading.Thuộc tính loading có 3 giá trị tương ứng với chức năng của nó.
Cách áp dụng tính năng này khá đơn giản mà không cần dùng Javascript và lo lắng về lỗi hình ảnh trên trang. Điều cần làm là báo hiệu cho trình duyệt những hình ảnh nào cần lazy-load bằng thuộc tính loading hoặc 3 giá trị tương ứng lazy, eager và auto.
Với browser không hỗ trợ loading, cách sử dụng lazy-load là dùng Fallback (dự phòng) và Polyfill (một mã triển khai tính năng mà trình duyệt web không hỗ trợ). Với Fallback hay Polyfill, bạn viết code với thuộc tính loading để thực hiện lazy-load hình ảnh.
Cách dùng Intersection Observer API như sau:Intersection Observer API hỗ trợ lazy-load hình ảnh nhưng không có thuộc tính loading. Chỉ sử dụng lệnh lazy image các hình ảnh trên trang. Ngoài ra, API Intersection Observer cũng lazy-load cả ảnh background. API Intersection Observer cho phép bạn giám sát dữ liệu (hình ảnh) khi người dùng lướt tới.
Một phương pháp phổ biến và hiệu quả để tối ưu hóa hiệu suất trang web là tăng tốc tải. Bạn chắc chắn sẽ không bao giờ phải mất chi phí băng thông cho những thứ mà bạn không thể nhìn thấy, tải xuống hoặc xem. Lazy loading là một lựa chọn tuyệt vời nếu lưu lượng truy cập là mối quan tâm lớn nhất của bạn.
Thật vậy, lazy loading là phương pháp phổ biến nhất trong lập trình và thiết kế web. Infinite Scroll, một giải pháp dựa trên Lazy Loading của WordPress, cho phép bạn sử dụng con lăn và cuộn con chuột liên tục để đọc thêm nội dung mới.Trong mục tìm kiếm hình ảnh, Google sử dụng Lazy loading. Sau khi xem một tấm hình cụ thể, Google sẽ hiển thị một danh sách bốn đến năm tấm hình liên quan, với nút "Xem nhiều hơn" bên cạnh.
Với những tường hợp mà bạn biết 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 chủ yếu sử dụng các thiết bị có kết nối cùng bộ vi xử lý tốt, lazy loading chính là một kỹ thuật vô cùng lý tưởng.Các thiết bị này bao gồm laptop hoặc desktop có kết nối băng thông rộng và những chiếc điện thoại thông minh từ trung đến cao cấp có tốc độ mạnh nhanh. Nếu người dùng của bạn không có những tính năng trên, bạn nên tập trung vào JavaScript ít nhất có thể.Sẽ là một ý tưởng tuyệt vời sử dụng Lazy loading cho những hình ảnh không cần thiết trong bài đăng của blog và trong tập hợp Potography của bạn.Ngược lại, việc sử dụng phương pháp Lazy loading trong một cửa hàng trực tuyến với các sản phẩm ảnh có thể gây ra những hậu quả không mong muốn, đặc biệt là trong những trường hợp người tiêu dùng đang cần đặt hàng một sản phẩm nhưng không thể tìm thấy được nó. Ngoài ra, khi bạn đang sử dụng một thiết bị di động không được kết nối tốt, điều này chắc chắn sẽ trở nên khó khăn hơn.Mặc dù hình ảnh là một phần quan trọng của mỗi trang web, chúng ta nên tối ưu hóa tốc độ tải xuống của chúng. Bạn nên sử dụng Lazy loading để loại bỏ những hình ảnh không cần thiết.Nếu bạn dựa vào JavaScript, hãy sử dụng một tư viện như lazysize; nó xử lý việc tải nhanh và tạo ra các hình ảnh tương thích nhanh chóng cho người dùng.
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.
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.
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.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.
Với mỗi tính năng khác nhau sẽ có đặc điểm riêng và phù hợp với các trình duyệt web khác nhau. Ví dụ: API Intersection Observer không hỗ trợ Internet Explorer và Opera Mini mặc dù đều hỗ trợ lazy-load cho các trình duyệt web khác. Đối với Internet Explorer, để sử dụng lazy-load các dữ liệu bạn phải dùng Polyfill để giả lập API Intersection Observer và sử dụng như bình thường.Về layout shift:
Không nên lạm dụng lazy-loading. Nếu trang web có ít hình ảnh (dưới 5) thì không nên sử dụng tính năng này vì không ảnh hưởng đáng kể đến tốc độ tải trang. Bạn có thể tìm cách tối ưu các hình ảnh thay vì lazy loading và cẩn thận khi sử dụng API Intersection Observer để thực hiện lazy-loadKhi dùng API Intersection Observer để lazy-load, lệnh scr sẽ trở thành data-scr và Googlebot không hiểu data-scr là gì. Do đó, Googlebot coi hình ảnh này bị lỗi và không index hình ảnh đó. Đối với các giá trị lazy của thuộc tính loading, cách này không áp dụng lazy-load cho background. Nên tránh lazy-load các hình ảnh đầu trang để giảm thiểu layout shift.