Categories Nén ảnh

Banner dạng full màn hình: một yếu tố gây chậm đáng kể trên nhiều website

Banner dạng full màn hình

Banner full màn hình có nghĩa là ảnh của nó sẽ hiện ra full trên trình duyệt của người dùng, bất kể kích cỡ màn hình. Và để đảm bảo chất lượng hình trên các màn hình lớn, các website sử dụng thiết kế này sẽ phải dùng ảnh có kích cỡ không nhỏ chút nào, có thể lên đến 2000 – 3000px chiều rộng! Kéo theo dung lượng lớn (1MB không phải chuyện hiếm gặp). Vấn đề còn nghiêm trọng hơn nếu họ dùng banner dạng slide có nhiều ảnh.

Video giới thiệu:

Yep, rõ ràng banner giúp website đẹp hơn, và có thể đem lại lợi ích về mặt cung cấp thông tin, nhưng nếu nó ảnh hưởng nhiều đến tốc độ, chúng ta cần nghĩ đến các giải pháp hợp lý hơn.

Đề xuất của tôi là sử dụng banner dạng fix, với kích cỡ cố định chứ không phải hiện full với bất cứ kích cỡ nào.

Với banner fix trên đa số website bạn không cần ảnh có độ rộng quá 800px (tổng quát hơn là nhìn chung bạn sẽ không cần ảnh lớn hơn độ rộng của nội dung text). So với banner dạng full, kích cỡ ảnh có thể giảm được từ 6 – 9 lần. Qua đó tăng tốc website đáng kể, vì banner cũng thường nằm trong màn hình đầu tiên và sẽ yêu cầu tải ngay lập tức.

Tôi cũng thấy nhiều website thương mại điện tử lớn áp dụng banner dạng fix ví dụ như Tiki:

banner dạng fix của Tiki

Ngoài ưu điểm về tốc độ, banner dạng fix còn giúp ảnh không bị vỡ trên bất cứ màn hình có độ rộng nào. Ví dụ banner full dù dùng cỡ rộng đến 2000px, nó chắc chắn bị suy giảm chất lượng với màn hình 3000px.

Vài mẹo nữa, với banner dạng slide:

  • Dù không nên lazy load ảnh đầu tiên, bạn nên lazy load ảnh từ ảnh thứ hai đổ đi trong slide;
  • Tối ưu sâu dung lượng ảnh banner cũng nên được ưu tiên (tất nhiên vẫn cần nó đủ đẹp), vì ảnh banner (cùng với logo nếu bạn dùng) sẽ là ảnh được tải nhiều nhất trên website của bạn;
  • Các trang không cần dùng banner (ví dụ trang sản phẩm) thì không nên dùng. Banner thường thích hợp nhất trên trang chủ, hoặc trang chuyên mục;
Back to Top