یکی از بهینه‌سازی‌هایی که توی وب خیلی راحت می‌شه از کنارش رد شد، فونته.

وقتی از فونت سفارشی استفاده می‌کنیم، بهتره به‌جای فایل‌های TTF یا OTF از فرمت WOFF2 استفاده کنیم، چون برای وب ساخته شده و معمولاً حجم خیلی کمتری داره.

ولی فقط تبدیل فونت به WOFF2 کافی نیست.

مثلاً اگر از یه فونت فقط وزن Regular و Bold رو استفاده می‌کنیم، لود کردن پنج شش وزن دیگه فقط حجم اضافه‌ست و بدون دلیل سرعت صفحه رو پایین میاره.

یکی دیگه از کارهای مهم، Subset کردنه؛ یعنی فقط کاراکترهایی رو داخل فایل فونت نگه داریم که واقعاً توی پروژه بهشون نیاز داریم.

برای سایت‌های فارسی این بخش خیلی مهمه، چون اگه Subset اشتباه انجام بشه ممکنه بعضی حروف فارسی، اعداد یا علائم از فونت حذف بشن.

استفاده از font-display هم کمک می‌کنه متن منتظر لود شدن فونت نمونه و کاربر محتوا رو سریع‌تر ببینه مثلا اگر روی swap بزاری تا زمانی که فونتت لود شه یه فونت دیفالت نشون میده بعد وقتی لود شد تازه با فونت تو نشون میده متن صفحه رو !

برای فونت‌های مهم ابتدای صفحه هم Preload می‌تونه مفید باشه، ولی فقط برای فایل‌هایی که واقعاً همون اول لازم داریم؛ چون Preload کردن همه فونت‌ها خودش می‌تونه نتیجه برعکس بده.

استفاده از Variable Font هم توی بعضی پروژه‌ها انتخاب خوبیه، چون چند وزن مختلف رو داخل یک فایل می‌ده و تعداد فایل‌هایی که باید دانلود بشن کمتر می‌شه.

در نهایت بهینه‌سازی فونت ترکیب WOFF2، وزن‌های کمتر، Subset درست، font-display مناسب و Preload حساب‌شده‌ست که واقعاً تفاوت ایجاد می‌کنه.

@codehalics | کدهالیک