بهینه‌سازی فونت‌های وب

یکی از چالش‌های جالبی که ممکنه این روزها توی پروژه‌های وب باهاش برخورد کنید، مدیریت فونت‌های وبسایت برای بهینه‌سازی Core Web Vitals هست. می‌دونید که گوگل روی این متریک‌ها خیلی حساسه! یه راه‌حل خوب برای این کار می‌تونه ترکیبی از موارد زیر باشه:

۱- استفاده از preload برای فونت‌های کلیدی صفحه اول

<link rel="preload" href="/fonts/iranYekan.woff2" as="font" type="font/woff2" crossorigin>

۲- استفاده از font-display: optional برای جلوگیری از Layout Shift

@font-face {
  font-family: 'IranYekan';
  src: url('/fonts/iranYekan.woff2') format('woff2');
  font-display: optional;
  font-weight: normal;
}

۳- تعریف فونت‌های سیستمی به عنوان فالبک

:root {
  --system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui;
  --primary-font: 'IranYekan', var(--system-font);
}

body {font-family: var(--primary-font);}

با انجام این کارها:

سرعت First Paint صفحه بهتر میشه،
از Cumulative Layout Shift جلوگیری میشه،
تجربه کاربری بهتری خواهیم داشت،
امتیاز Core Web Vitals بهبود پیدا می‌کنه 😍

پی‌نوشت: استفاده از فرمت WOFF2 برای فونت‌ها، بخاطر حجم کمتر، بهتره.

امیدوارم این تکنیک به درد پروژه‌هاتون بخوره! 💻✨

برچسب‌ها: css - طراحی وب

بهینه‌سازی فونت‌های وب

مشاوره رایگان