Hóa ra rất nhiều cửa hàng trực tuyến đang sử dụng lazy load ảnh? Có nên như vậy không? Còn tùy!

Trái với suy nghĩ ban đầu của tôi, trong quá trình làm việc với khách hàng, tôi nhận thấy hầu hết các website bán hàng với nhiều hình minh họa sản phẩm ngay màn hình đầu tiên (dạng cụm hình slide, với một hình lớn đại diện và các hình nhỏ chụp các góc độ khác) vẫn rất thích dùng kỹ thuật lazy load ảnh?

Ví dụ về cụm hình slide trông giống như thế này:

cụm hình slide đầu bài trên các trang thương mại điện tử
Cụm hình slide sản phẩm luôn là một tiêu chuẩn trên các trang bán hàng, đây là hình chụp màn hình từ website của Điện Máy Xanh.

Vậy điều đó có nên hay không? Câu trả lời thực sự khó, vì có nhiều vấn đề liên quan chi phối chuyện này.

Lazy load ảnh trên trang bán hàng, ngay cả với trang thương mại điện tử lớn đã được áp dụng rồi, ví dụ như Điện Máy Xanh. Vấn đề về độ trễ được khắc phục nhiều nhờ CDN, máy chủ trâu bò, các kỹ thuật lazy load kiểu mới như LQIP và tải trước khi đi vào khung nhìn trình duyệt.

Một nguyên nhân quan trọng khác có thể khiến nhiều người thiết kế hoặc tối ưu thích lazy load ngay cả hình minh họa sản phẩm ngay đầu là vì nó giúp cải thiện điểm số Google PageSpeed Insights, cái vốn là tiêu chuẩn vàng trong các công việc liên quan đến tối ưu tốc độ website (nhưng áp dụng máy móc nó sẽ thành nhược điểm, xem thêm bài tại sao điểm trên các công cụ đánh giá tốc độ lại không quan trọng).

Nhiều website sử dụng lại cụm hình sản phẩm dạng slide làm hình minh họa cho bài viết mô tả sản phẩm ngay bên dưới. Đây là lựa chọn không tệ vì nó sẽ giúp bạn đỡ phải tải các hình trong phần mô tả, tuy nhiên khi ấy nếu bạn không lazy load ảnh ở cụm hình sản phẩm dạng slide, GPI sẽ đánh giá các hình lớn hơn bên dưới dùng chung hình đó cũng không được lazy load và làm tụt điểm số đi rất nhiều.

Lựa chọn của tôi là gì?

Theo tôi nên tách hai cụm hình đó ra, điều đó có thể có ích ở vài khía cạnh:

  • Bạn tách bạch được việc không muốn lazy load ảnh ở khu vực slide trong khi vẫn lazy load ảnh ở khu vực mô tả sản phẩm.
  • Bạn không bị gò bó trong việc buộc phải dùng lại các hình thuộc slide vốn hay có dạng vuông hoặc kích cỡ, thiết kế nào đó mà bạn không thấy thích hợp làm hình minh họa trong phần mô tả. Việc ép phải dùng chung có thể khiến ảnh trong phần slide bị dư thừa so với nhu cầu cần thiết.
Đọc thêm:  Giới thiệu thư viện lazysizes.js để lazy load ảnh (phần 2)

Đây cũng là cách thức mà tôi thấy trang Điện Máy Xanh đang làm. Họ tách nó ra, không lazy load cụm hình slide đầu tiên, nhưng vẫn lazy load các hình trong phần mô tả bên dưới. Các hình mô tả bên dưới cũng đa dạng hơn nhiều các hình slide bên trên.

Nếu vẫn phải dùng chung thì nên làm thế nào?

Kỹ thuật LQIP sẽ giúp bạn vừa có điểm số cao, tăng tốc mà ít ảnh hưởng đến trải nghiệm người dùng.

Nếu đang sử dụng WordPress làm nền tảng, tôi đề xuất bạn dùng plugin LiteSpeed cache hoặc SwiftPerformance Pro để làm nhiệm vụ này.

Leave a Comment