یکی از دلایل پنهان کندی بسیاری از وبسایتهای فارسی، فایلهای فونت سنگین است. بسیاری از فونتهای فارسی بین 200 تا 500 کیلوبایت حجم دارند و اگر چند وزن مختلف از یک فونت استفاده شود، این عدد میتواند به چند مگابایت برسد.
مرورگر برای نمایش صحیح متن باید ابتدا فونت را دانلود کند. این موضوع مستقیماً روی شاخصهای مهمی مثل First Contentful Paint (FCP) و Largest Contentful Paint (LCP) تأثیر میگذارد.
در این مقاله یاد میگیریم چگونه با استفاده از تکنیک Font Subsetting و چند تنظیم ساده، حجم فونتهای فارسی را به شکل قابل توجهی کاهش دهیم و سرعت سایت را بهبود بدهیم.
چرا فونتهای فارسی معمولاً سنگین هستند؟
فونتها معمولاً شامل هزاران کاراکتر هستند. یک فونت کامل ممکن است شامل موارد زیر باشد:
- حروف فارسی
- حروف عربی
- حروف لاتین
- اعداد
- نمادها
- کاراکترهای یونیکد متعدد
در بسیاری از سایتهای فارسی، ما عملاً فقط به چند صد کاراکتر نیاز داریم. اما مرورگر مجبور است کل فونت را دانلود کند.
اینجاست که تکنیک Subsetting وارد بازی میشود.
Subsetting چیست؟
Font Subsetting یعنی ساخت نسخهای کوچکتر از فونت که فقط شامل کاراکترهای مورد نیاز سایت باشد.
مثلاً اگر سایت شما فقط شامل:
- حروف فارسی
- اعداد
- چند علامت نگارشی
باشد، میتوان تمام کاراکترهای دیگر را حذف کرد. نتیجه این کار معمولاً:
- کاهش حجم فونت از 300KB به حدود 40KB تا 70KB
- لود سریعتر صفحه
- بهبود امتیاز Lighthouse و GTmetrix
بهترین فرمت فونت برای وب
امروزه بهترین فرمت فونت برای استفاده در وب WOFF2 است.
مزایای WOFF2:
- فشردهسازی بسیار بهتر نسبت به TTF و OTF
- پشتیبانی توسط اکثر مرورگرهای مدرن
- لود سریعتر
اگر هنوز از فرمتهای TTF یا OTF استفاده میکنید، بهتر است آنها را به WOFF2 تبدیل کنید.
چگونه فونت را Subset کنیم؟
برای این کار ابزارهای مختلفی وجود دارد. یکی از ابزارهای محبوب fonttools است که میتواند نسخهای کوچک از فونت تولید کند.
نمونه دستور:
pyftsubset font.ttf
–output-file=font-subset.woff2
–flavor=woff2
–layout-features=‘*’
–unicodes=U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF
این دستور فقط کاراکترهای مربوط به زبان فارسی و عربی را نگه میدارد و بقیه را حذف میکند.
نتیجه معمولاً کاهش شدید حجم فایل فونت است.
تعریف صحیح فونت در CSS
پس از ساخت نسخه بهینه فونت، باید آن را به شکل صحیح در CSS تعریف کنیم.
@font-face {
font-family: “Vazir”;
src: url(“/fonts/vazir.woff2”) format(“woff2”);
font-weight: normal;
font-style: normal;
font-display: swap;
}
استفاده از font-display: swap بسیار مهم است، چون اجازه میدهد مرورگر ابتدا متن را با فونت سیستم نمایش دهد و بعد از دانلود فونت اصلی، آن را جایگزین کند.
این کار از پدیده معروف FOIT (Flash of Invisible Text) جلوگیری میکند.
Preload کردن فونتهای مهم
اگر فونت در بخشهای ابتدایی صفحه استفاده میشود (مثلاً تیترها)، بهتر است آن را preload کنیم تا سریعتر دانلود شود.
<link rel="preload"
href="/fonts/vazir.woff2"
as="font"
type="font/woff2"
crossorigin>
این تگ به مرورگر میگوید که فونت یکی از منابع حیاتی صفحه است و باید سریعتر دانلود شود.
چند اشتباه رایج در پروژههای ASP.NET Core
در بسیاری از پروژههای واقعی، مشکلات زیر دیده میشود:
- استفاده از فونت TTF به جای WOFF2
- لود چند وزن غیرضروری از یک فونت
- عدم استفاده از font-display
- لود فونت قبل از CSS اصلی
- استفاده از فونت کامل بدون Subsetting
اصلاح همین موارد ساده میتواند چند صد کیلوبایت از حجم اولیه صفحه کم کند.
تأثیر این کار روی Performance سایت
بعد از بهینهسازی فونتها معمولاً نتایج زیر مشاهده میشود:
- کاهش اندازه اولیه صفحه
- بهبود سرعت رندر متن
- افزایش امتیاز Lighthouse
- کاهش زمان LCP
در پروژههای واقعی، فقط با Subset کردن فونتها میتوان بین 300 تا 800 کیلوبایت از منابع اولیه صفحه کم کرد.
جمعبندی
فونتها یکی از منابع پنهان اما سنگین در بسیاری از سایتهای فارسی هستند. با استفاده از تکنیک Font Subsetting، تبدیل فونت به WOFF2 و استفاده از تنظیماتی مثل font-display: swap میتوان به شکل قابل توجهی سرعت سایت را افزایش داد.
در مسیر بهینهسازی عملکرد یک وبسایت، کوچک کردن فونتها یکی از سادهترین اما مؤثرترین اقداماتی است که میتواند تجربه کاربری و امتیاز ابزارهای تحلیل سرعت را بهبود دهد.
قدم بعدی در بهینهسازی فرانتاند
فونتها تنها یکی از منابع سنگین در صفحات وب هستند. بعد از بهینهسازی فونت، یکی از مهمترین بخشهایی که میتواند روی سرعت سایت تأثیر بگذارد تصاویر هستند.
در مقاله بعدی بررسی میکنیم چگونه با استفاده از فرمتهای مدرن مانند WebP، تکنیک Lazy Loading و بهینهسازی ابعاد تصاویر، حجم صفحات وب را به شکل قابل توجهی کاهش دهیم.