Kích cỡ ảnh logo quá to: một lỗi phổ biến khác gây chậm trên nhiều website

Đây không phải lỗi nặng gì cho lắm khi liên quan đến tốc độ, nhưng nó phổ biến & rất dễ khắc phục- thế nên dại gì chúng ta không sửa!

Video giới thiệu:

Thường logo hiển thị ra bên ngoài chỉ cần để từ 200 – 300px là đủ đẹp rồi, và nhiều website cũng làm như vậy.

Tuy nhiên dù để kích cỡ hiển thị nhỏ, nhiều website lại dùng logo rất to, có thể gấp 3 – 4 lần kích cỡ thực tế hiển thị, kéo theo dung lượng tăng lên gấp 7 – 10 lần không cần thiết!

Ví dụ, đáng ra logo chỉ cần 10KB, việc kích cỡ dư làm dung lượng logo tăng đến 70 – 100KB. Trong khi logo luôn là ảnh cần tải ngay, vì nó (luôn) nằm trong màn hình đầu tiên.

Cách khắc phục rất dễ: bạn chỉ cần tải logo về, chỉnh lại kích cỡ và up ngược lên thôi, không có gì đặc biệt cả!

Tuy nhiên có thể các bạn sẽ thắc mắc cái này: tại sao nhiều website lại mắc lỗi logo quá to như vậy?

Tôi không chắc chắn 100%, nhưng có thể lỗi này là do khi thiết kế logo thì để quá trình làm được thuận lợi, người thiết kế sẽ để kích cỡ lớn (để nhỏ thì các chi tiết khó can thiệp). Rồi người thiết kế gửi cho bên quản trị web, bên quản trị cứ thế up lên mà không để ý đến kích cỡ hiển thị thực tế đang dùng nhỏ hơn nhiều.

Wow, một chỉnh sửa nhỏ, có thể giúp bạn giảm tải được 70 – 100KB dung lượng cho màn hình đầu tiên rồi!

Một cái nữa liên quan đến logo là mọi người thường vẫn hay để lazy load nó. Hầu hết logo thuộc màn hình đầu tiên nên bạn cần tải càng sớm càng tốt. Để lazy load logo có thể làm chậm website, và làm tăng chỉ số bất lợi có tên Cumulative Layout Shift. Logo cũng nên được set chiều rộng, chiều cao trực tiếp trong mã nguồn.

2 thoughts on “Kích cỡ ảnh logo quá to: một lỗi phổ biến khác gây chậm trên nhiều website”

Leave a Comment