راهنمای بهینه‌سازی فونت‌های وب برای بهبود Core Web Vitals

بهینه‌سازی فونت‌های وب یکی از عوامل کلیدی در بهبود عملکرد سایت و به‌ویژه معیارهای Core Web Vitals است. با توجه به تأثیر مستقیم فونت‌ها بر Largest Contentful Paint (LCP)، Cumulative Layout Shift (CLS) و First Input Delay (FID)، وب‌مستران باید روش‌های مناسبی برای بارگذاری و نمایش فونت‌ها به کار گیرند. این مقاله به شما نشان می‌دهد که چگونه با بهینه‌سازی فونت‌های وب، تجربه کاربری و رتبه‌بندی در موتورهای جستجو را بهبود بخشید.

اهمیت فونت‌های وب در Core Web Vitals

Core Web Vitals سه معیار اصلی برای سنجش تجربه کاربری هستند: LCP (زمان بارگذاری بزرگترین محتوای بصری)، CLS (تغییر ناگهانی چیدمان) و FID (تأخیر ورودی اولیه). فونت‌های وب می‌توانند بر هر سه معیار تأثیر بگذارند. بارگذاری دیرهنگام فونت‌ها باعث افزایش LCP می‌شود. همچنین، اگر فونت پیش‌فرض با فونت سفارشی جایگزین شود، ممکن است تغییرات ناگهانی در چیدمان (CLS) رخ دهد. علاوه بر این، دانلود فونت‌های حجیم می‌تواند thread اصلی را مسدود کرده و FID را افزایش دهد.

استراتژی‌های بارگذاری فونت

استفاده از font-display در CSS

ویژگی font-display به شما امکان می‌دهد رفتار مرورگر را در هنگام بارگذاری فونت کنترل کنید. مقادیر مهم عبارتند از swap (نمایش فونت پیش‌فرض و سپس جایگزینی با فونت سفارشی)، block (مخفی کردن متن تا بارگذاری فونت) و fallback (ترکیبی از swap و block). برای بهبود LCP و CLS، معمولاً از font-display: swap استفاده می‌شود، اما ممکن است باعث FOIT (Flash of Invisible Text) شود. بهتر است از font-display: optional استفاده کنید که فونت را تنها در صورت بارگذاری سریع اعمال می‌کند.

پیش‌بارگذاری فونت‌ها با link rel=”preload”

با استفاده از <link rel="preload" href="font.woff2" as="font" crossorigin="anonymous"> می‌توانید فونت‌های مهم را زودتر بارگذاری کنید. این کار باعث کاهش LCP می‌شود، زیرا مرورگر فونت را زودتر درخواست می‌کند. توجه داشته باشید که فقط فونت‌های مورد نیاز در صفحه اول را preload کنید.

فونت‌های متغیر (Variable Fonts)

فونت‌های متغیر با یک فایل واحد، وزن‌ها و سبک‌های مختلفی را ارائه می‌دهند. این کار تعداد درخواست‌های HTTP را کاهش می‌دهد و حجم کل فونت‌ها را کم می‌کند. استفاده از فونت‌های متغیر می‌تواند به بهبود LCP و FID کمک کند.

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

استفاده از فرمت WOFF2

فرمت WOFF2 بهترین فشرده‌سازی را برای فونت‌های وب ارائه می‌دهد. با تبدیل فونت‌های خود به WOFF2 می‌توانید حجم فایل را تا ۳۰٪ کاهش دهید. این کار باعث کاهش زمان بارگذاری و بهبود LCP می‌شود.

زیرمجموعه‌سازی (Subsetting)

با حذف گلیف‌های غیرضروری (مانند کاراکترهای زبان‌های دیگر) از فونت، حجم فایل به شدت کاهش می‌یابد. ابزارهایی مانند glyphhanger یا fonttools به شما کمک می‌کنند زیرمجموعه‌های بهینه‌ای ایجاد کنید. این کار به ویژه برای سایت‌های فارسی که فقط به حروف فارسی نیاز دارند، مفید است.

فشرده‌سازی فونت‌ها با Gzip یا Brotli

اگر سرور شما از فشرده‌سازی پشتیبانی می‌کند، فونت‌های WOFF2 را نیز می‌توان با Brotli فشرده کرد. این کار حجم انتقال را کاهش می‌دهد، هرچند که WOFF2 خود فشرده است. اما ترکیب هر دو می‌تواند مفید باشد.

مدیریت CLS (تغییر ناگهانی چیدمان)

استفاده از fallback font با ابعاد مشابه

یکی از دلایل اصلی CLS، تفاوت ابعاد (width/height) فونت پیش‌فرض و فونت سفارشی است. با انتخاب فونت‌های پیش‌فرضی که ابعاد مشابهی با فونت سفارشی دارند، می‌توانید از جابجایی متن جلوگیری کنید. ابزارهایی مانند font-style-matcher به شما در یافتن فونت مشابه کمک می‌کنند.

تنظیم size-adjust برای فونت‌های fallback

ویژگی CSS size-adjust در @font-face به شما امکان می‌دهد اندازه فونت fallback را تنظیم کنید تا با فونت سفارشی هماهنگ شود. این کار CLS را کاهش می‌دهد. مثال:

@font-face { font-family: 'CustomFont'; src: url('custom.woff2'); size-adjust: 90%; }

قرار دادن فونت‌ها در اولویت بارگذاری

با استفاده از font-display: optional و preload، می‌توانید اطمینان حاصل کنید که فونت سفارشی قبل از نمایش محتوا بارگذاری می‌شود. اگر بارگذاری نشد، فونت پیش‌فرض استفاده می‌شود و CLS رخ نمی‌دهد.

تأثیر بر FID (First Input Delay)

فونت‌های حجیم می‌توانند thread اصلی را مسدود کنند، زیرا مرورگر باید فایل‌های بزرگ را parse کند. با بهینه‌سازی حجم فونت‌ها (WOFF2، subsetting) و استفاده از تکنیک‌های async برای بارگذاری فونت، می‌توانید از مسدود شدن thread جلوگیری کرده و FID را بهبود بخشید. همچنین، استفاده از فونت‌های سیستمی (system fonts) می‌تواند نیاز به دانلود فونت را به کلی از بین ببرد.

ابزارهای اندازه‌گیری و تحلیل

Google Lighthouse

Lighthouse معیارهای Core Web Vitals را بررسی می‌کند و پیشنهادهایی برای بهینه‌سازی فونت‌ها ارائه می‌دهد. بخش «Fonts» در Lighthouse نشان می‌دهد که آیا فونت‌ها به درستی preload شده‌اند یا خیر.

PageSpeed Insights

این ابزار داده‌های واقعی از Chrome UX Report را نشان می‌دهد و مشکلات مربوط به فونت‌ها را شناسایی می‌کند.

WebPageTest

WebPageTest امکان مشاهده waterfall درخواست‌ها را فراهم می‌کند و می‌توانید ببینید که فونت‌ها چه زمانی بارگذاری می‌شوند و آیا باعث FOIT یا CLS می‌شوند.

بهترین روش‌ها برای فونت‌های فارسی

فونت‌های فارسی معمولاً حجم بیشتری دارند زیرا شامل گلیف‌های عربی و فارسی هستند. با زیرمجموعه‌سازی دقیق می‌توانید حجم را کاهش دهید. همچنین، استفاده از فونت‌های متغیر فارسی مانند «IRANSans» می‌تواند مفید باشد. از تکنیک‌های font-display: swap و preload برای فونت‌های فارسی استفاده کنید، اما مراقب CLS باشید.

نتیجه‌گیری

بهینه‌سازی فونت‌های وب یک فرآیند چند مرحله‌ای است که شامل انتخاب فرمت مناسب، فشرده‌سازی، زیرمجموعه‌سازی، و استفاده از تکنیک‌های بارگذاری هوشمندانه می‌شود. با رعایت این نکات می‌توانید Core Web Vitals سایت خود را بهبود بخشیده و تجربه کاربری بهتری فراهم کنید. به یاد داشته باشید که هر میلی‌ثانیه در بارگذاری فونت‌ها می‌تواند بر رتبه‌بندی و نرخ تبدیل تأثیر بگذارد.