Một số website dùng khá nhiều icon, có thể lên đến 10 cái và nhiều trong số đó nằm trong màn hình đầu tiên (tức là có khả năng cao bạn không muốn lazy load nó). Lỗi phổ biến nhất mà tôi thấy với các icon này là người thiết kế để kích cỡ quá lớn. Ví dụ icon chỉ cần 64px, nhưng kích cỡ lại để những 200px, gây lãng phí dung lượng. Trong bài viết này tôi còn nói 2 mẹo nữa để bạn giảm ảnh hưởng tốc độ đến tối thiểu.
OK, chúng ta bắt đầu thôi.
Bước 1: Lên trang iconfinder.com gõ một từ khóa tìm kiếm icon mà bạn muốn. Chọn Free icon only/Chỉ các icon miễn phí để lọc ra các icon không phải mua. Nhiều icon ở đây miễn phí cho sử dụng thương mại & cũng không phải ghi công bằng việc dẫn link về tác giả gốc. PS: nếu bạn có sẵn icon rồi thì bỏ qua bước 1, bước 3, lưu ý là nên chú ý thay đổi lại kích cỡ ảnh cho hợp lý như bước 2 có nói.
Bước 2: Chọn kích cỡ ảnh phù hợp. Ảnh càng lớn và càng nhiều màu sắc thì dung lượng của nó cũng lớn theo.
Bước 3: Download icon dạng png về.
Bước 4: Vào trang tinypng.com để giảm dung lượng ảnh. Nó có thể giảm được 50 – 60% dung lượng.
Bước 5: Vào trang base64-image.de để chuyển ảnh vừa có thành dạng ảnh base64, giúp bạn tiết kiệm được một kết nối dù dung lượng có tăng lên một chút (khoảng 20 – 30%).
Ví dụ như ảnh dưới đây, tôi áp dụng các thao tác trên:
Ảnh gốc trên Iconfinder: 3,93KB
Ảnh sau nén với TinyPNG: 1,35KB
Ảnh sau chuyển thành định dạng base64: 1,85KB
Như vậy so với ảnh gốc bạn giảm được 50% dung lượng và một kết nối, cũng hời! Lợi ích tăng thêm nếu bạn có nhiều icon.
PS1: với những icon không nằm trong màn hình đầu tiên, bạn có thể không cần dùng đến dạng ảnh base64 mà chỉ cần giảm thiểu dung lượng ảnh và lazyload để nó không ảnh hưởng đến tốc độ kết xuất cho màn hình đầu tiên.
PS2: nhược điểm của ảnh base64 là nó không được index bởi Google và làm tăng kích cỡ đôi chút (so với ảnh đã nén rồi, còn so với ảnh gốc nó vẫn giảm 40-50%), vì thể chỉ nên áp dụng với ảnh không quan trọng và có dung lượng nhỏ như icon. Về việc nó không được index bởi Google tôi cũng hơi nghi ngờ, Google có lẽ thừa đủ công nghệ để nhìn được ảnh base64, tuy nhiên các tài liệu tôi biết đều nói là nó không được index.
Cập nhật: Sau khi share bài này lên nhóm FB, anh em chia sẻ thêm bên dưới bình luận là dạng ảnh SVG (code ảnh chứ không phải ảnh thuần túy) thậm chí còn có thể nhẹ hơn, và nên tìm hiểu thêm cả CSS Image Sprites nữa. Ngoài ra chuyển thành font icon có khả năng đổ màu cho icon qua CSS. Với ai dùng plugin Autoptimize (nó rất phổ biến) có thể chuyển thành base64 tự động thay vì phải làm thủ công <3
