1. Mẹo để optimize Google Fonts API mà ít dev để ý
Khi bắt gặp 1 thiết kế sử dụng custom font, điều đầu tiên bạn nghĩ ngay đến là Google Fonts API, phải search 1 vòng xem nó có trên đó không? Nếu không có thì lúc này bạn mới nghĩ tới việc lấy font từ Designer hoặc tìm trên mạng tải về và tiến hành convert nó sang các định dạng khác để sử dụng CSS3 @font-face.
Custom font mình không biết nói thế nào cho chuẩn, ý mình đang đề cập những loại font không được cài sẵn trên các hệ điều hành phổ biến như MacOS, Windows hay Linux. Khác với font như Arial là font chữ hầu như HĐH nào cũng có cả, thì Roboto, Open Sans là những loại fonts không phải máy nào cũng có.
Tuy nhiên việc load font từ Google Fonts API thường sẽ gây ra việc load chậm. Vậy nên những mẹo dưới đây sẽ giúp ích rất nhiều cho bạn trong việc giảm thời gian tải font, vì lúc này font được tải về theo chỉ định cụ thể, kiểu như được filter bớt, chứ không phải tải về toàn bộ nữa
Thứ 1: Gộp với nhau bằng dấu + để request 1 lúc nhiều fonts
2. Tránh tạo các HTTP request tải ảnh (icon) không cần thiết
CSS giờ đây có thể làm được nhiều thứ hơn trước, cho nên bạn cần áp dụng nó vào thay thế cho những request tải ảnh không cần thiết trước đây, ví dụ như trường hợp dưới đây, mình cần tạo icon dot (dấu chấm) phía trước 1 thẻ div.
Thì CSS thường kiểu như này:
Nhưng bạn quên rằng, có thể dễ dàng tạo 1 icon dot chỉ bằng vài dòng CSS, đâu cần phải tốn 1 request tải ảnh về, phải không nào?
Tương tự thế, với các trường hợp khác như vẽ mũi tên, hình vuông và các hình dạng khác, bạn có thể chỉ cần hoàn toàn CSS. CSS Tricks có hướng dẫn các cách vẽ shapes bằng CSS rất hay, bạn nên tham khảo để hiểu các thuộc tính CSS khi kết hợp cùng nhau, đã tạo ra những sự vi diệu như thế nào.
Không chỉ dừng lại ở vài hình dạng quen thuộc, CSS cũng cho phép bạn vẽ được cả 1 bộ icons với muôn vàn các loại icons mà trước đây bạn thường phải dùng ảnh.
