Lazy loading là gì? Những thông tin không thể bỏ qua
Trong thế giới của web design, những gì bạn không nhìn thấy có thể khiến bạn tổn thương ("what you don't see can hurt you"). Tệ hơn nữa, nó có thể làm hỏng danh tiếng thương hiệu hoặc các giá trị cốt lõi hoặc cả hai.
Cụ thể là tôi đang nói về images. Hình ảnh có thể tiêu tốn rất nhiều băng thông (con số này lên tới 70% đối với một số website). Bạn phải trả phí để gửi chúng đi, đồng thời người dùng của bạn cũng bị tính phí để xem chúng. Trên thực tế, cả bạn và người dùng đều phải trả tiền cho cả những hình ảnh không bao giờ được nhìn thấy, bởi vì khách truy cập nhiều khi còn không bao giờ cuộn xuống đủ xa để xem chúng.
Bizfly Cloud có thể giúp bạn loại bỏ các thách thức băng thông liên quan đến các hình ảnh trong website. Trong bài viết sau đây, tôi sẽ chia sẻ một giải pháp phổ biến, kèm theo những phân tích về ưu và nhược điểm của giải pháp này: Lazy Loading (Tạm dịch: "tải lười biếng").
Bạn cần lưu ý rằng, hình ảnh không chỉ ảnh hưởng đến hiệu suất thực tế của website mà còn ảnh hưởng đến cả hiệu suất trực quan nữa. Hiệu suất trực quan (perceived performance) tạo cho website "cảm giác" nhanh hơn ngay cả khi website đó đã đang load với tốc độ rất nhanh rồi.
Nếu muốn cài đặt kĩ thuật này, hãy click vào đường link sau để xem hướng dẫn cụ thể: Cách cài đặt chi tiết Lazy Loading Images - Phương pháp tăng tốc độ tải trang hữu hiệu
2. Use Cases
- Images below the fold:
Có thể nói đây là vấn đề chính. Các trang web từ galleries, đến các stores, đến các landing page đôi khi tải cả những nội dung mà người dùng không bao giờ xem hoặc tương tác. Tại sao người dùng phải trả phí nếu họ không cuộn xuống để xem?
- Hero images (Hình ảnh lớn đại diện)
Những hero images thường khá to, đậm và có vị trí nổi bật ngay trên cùng và đương nhiên chúng cồng kềnh, ngốn khá nhiều thời gian để tải xuống. Vậy trong khoảng thời gian chờ chúng được tải xuống đến khi hiển thị trên trang, người dùng phải xem cái gì đây?
- Image carousels (Băng chuyền hình ảnh)
Tùy thuộc vào kích thước của images, băng chuyền có thể là sự kết hợp các vấn đề của cả Hero images và Images below the fold. Chúng có dung lượng và kích cỡ rất lớn, những người dùng của bạn dường như sẽ không kiên nhẫn đủ lâu, dành thời gian để xem tất cả các hình ảnh này!
Trên thực tế, các website càng lớn, càng nổi tiếng thì các vấn đề kể trên càng nghiêm trọng và cấp bách hơn. Chờ đợi việc tải xuống cả tấn hình ảnh trên các kết nối chậm thật sự là một cơn ác mộng với khách truy cập website. Và họ sẽ còn bực bội hơn nữa khi biết rằng chính các bức ảnh của bạn đã ngốn hết cả dữ liệu trên gói di động ít ỏi của họ!
3. Lazy Loading là gì?
Định nghĩa
Lazy loading tức là chỉ tải hình ảnh khi cần thiết, VD: khi người dùng cuộn xuống đủ xa để xem chúng.
Ưu điểm
- Lượng băng thông sử dụng thấp hơn, giúp người dùng tiết kiệm chi phí
- Giúp cân bằng việc tối ưu phân phối nội dung và đơn giản hóa trải nghiệm người dùng
- Cải thiện lượt chuyển đổi, tương tác của người dùng, đẩy mạnh doanh thu
Nhược điểm
Thay đổi các phần tử hiển thị
Khi người dùng tải trang lần đầu tiên, các phần tử hiển thị với người dùng sẽ được coi là quan trọng, do đó sẽ được tải với tốc độ bình thường hoặc tốt nhất, giảm thiểu tối đa việc tải chậm. Do các trang web sẽ hiển thị với nhiều kích thước khác nhau, đôi lúc người dùng sẽ không thể biết được các phần tử hiển thị của trang web.
Ảnh hưởng đến bố cục và hình ảnh
Trong trường hợp người dùng không sử dụng hình ảnh cố định, Lazy load sẽ làm thay đổi bố cục của trang. Việc này dễ gây sự nhầm lẫn, làm ảnh hưởng xấu đến trải nghiệm người dùng. Không chỉ thế, bố cục bị thay đổi nhiều sẽ làm tiêu tốn nhiều tài nguyên hệ thống, từ đó kích hoạt các hoạt động mô hình DOM tốn kém.
Images below the fold và above the fold
4. Khi nào nên/không nên sử dụng Lazy loading?
Lazy loading là vô cùng lý tưởng cho những trường hợp mà bạn biết và 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 các thiết bị có kết nối và bộ vi xử lý tốt. Các thiết bị này chính là các điện thoại thông minh dòng từ trung đến cao cấp với tốc độ mạng nhanh và laptop hoặc desktop trên các kết nối băng thông rộng. Nếu người dùng của bạn không có những đặc điểm nêu trên thì tốt nhất bạn càng í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 một bài đăng trên blog và trên những photography portfolio của bạn quả là một ý tưởng tuyệt vời. Tuy nhiên, ngược lại hoàn toàn điều đó, các bức ảnh sản phẩm được áp dụng phương pháp lazy loading trong một cửa hàng trực tuyến có thể gây phản tác dụng, nhất là trong trường hợp đang ai đó đang cần đặt hàng sản phẩm, nhưng họ lại không thể tìm thấy sản phẩm đó. Sẽ trầm trọng hơn nếu họ lại còn đang sử dụng một thiết bị di động có kết nối kém.
Hình ảnh là nội dung thiết yếu trên website, chúng ta nên tối ưu chúng nhỏ nhất có thể, khiến chúng có thể được tải xuống bình thường nhất có thể. Đối với các hình ảnh không cần thiết hãy áp dụng lazy loading cho chúng.
Nếu bạn phải phụ thuộc vào JavaScript, hãy sử dụng một thư viện như lazysizes. Nó sẽ 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 trong quá trình hoạt động.
Kết luận
Kỹ thuật Lazy loading chủ yếu phục vụ mục đích nâng cao trải nghiệm người dùng, giúp giảm 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 nghiệm người dùng). Từ đó tăng xác suất "giữ" người dùng tiếp tục đọc website lâu hơn.
GiangPTH - Bizfly Cloud
>> Có thể bạn quan tâm: 10 Plugin jQuery Lazy Load giúp Website nhanh hơn và giảm tải cho WebServer
