اندازه فونت وب را کاهش دهید

Ilya Grigorik

Jeremy Wagner

تایپوگرافی برای طراحی خوب، برندسازی، خوانایی و دسترسی‌پذیری اساسی است. فونت‌های وب همه موارد فوق و حتی بیشتر را ممکن می‌سازند: متن قابل انتخاب، جستجو، بزرگنمایی و سازگار با DPI بالا است و صرف نظر از اندازه و وضوح صفحه نمایش، رندر متن ثابت و واضحی را ارائه می‌دهد. فونت‌های وب برای طراحی خوب، تجربه کاربری و عملکرد بسیار مهم هستند.

بهینه‌سازی فونت وب بخش مهمی از استراتژی کلی عملکرد است. هر فونت یک منبع اضافی است و برخی از فونت‌ها ممکن است مانع رندر شدن متن شوند، اما صرفاً به این دلیل که صفحه از WebFonts استفاده می‌کند، به این معنی نیست که باید کندتر رندر شود. برعکس، فونت‌های بهینه شده، همراه با یک استراتژی هوشمندانه برای نحوه بارگذاری و اعمال آنها در صفحه، می‌توانند به کاهش حجم کل صفحه و بهبود زمان رندر صفحه کمک کنند.

آناتومی یک فونت وب

یک فونت وب مجموعه‌ای از حروف بزرگ (glyph) است و هر حرف بزرگ یک شکل برداری است که یک حرف یا نماد را توصیف می‌کند. در نتیجه، دو متغیر ساده اندازه یک فایل فونت خاص را تعیین می‌کنند: پیچیدگی مسیرهای برداری هر حرف بزرگ و تعداد حروف بزرگ در یک فونت خاص. به عنوان مثال، Open Sans که یکی از محبوب‌ترین فونت‌های وب است، شامل ۸۹۷ حرف بزرگ است که شامل حروف لاتین، یونانی و سیریلیک می‌شود.

هنگام انتخاب فونت، توجه به اینکه از کدام مجموعه کاراکترها پشتیبانی می‌شود، مهم است. اگر نیاز دارید محتوای صفحه خود را به چندین زبان بومی‌سازی کنید، باید از فونتی استفاده کنید که بتواند ظاهر و تجربه‌ای یکپارچه را به کاربران شما ارائه دهد. به عنوان مثال، خانواده فونت Noto گوگل قصد دارد از تمام زبان‌های دنیا پشتیبانی کند. با این حال، توجه داشته باشید که حجم کل Noto، با احتساب همه زبان‌ها، منجر به دانلود فایل زیپ با حجم بیش از ۱.۱ گیگابایت می‌شود.

در این پست یاد خواهید گرفت که چگونه اندازه فایل فونت‌های وب خود را کاهش دهید.

قالب‌های فونت وب

امروزه دو قالب توصیه‌شده برای کانتینر فونت در وب استفاده می‌شود:

• EOT
• تی تی اف
• واف
• واف۲ .

WOFF و WOFF 2.0 از پشتیبانی گسترده‌ای برخوردارند و توسط همه مرورگرهای مدرن پشتیبانی می‌شوند.

• نسخه WOFF 2.0 را برای مرورگرهای مدرن ارائه دهید.
• اگر کاملاً ضروری است - مثلاً اگر هنوز نیاز به پشتیبانی از اینترنت اکسپلورر ۱۱ دارید - از WOFF به عنوان جایگزین استفاده کنید.
• به عنوان یک راه حل جایگزین، می‌توانید از فونت‌های وب برای مرورگرهای قدیمی استفاده نکنید و به فونت‌های سیستمی برگردید. این روش ممکن است برای دستگاه‌های قدیمی‌تر و محدودتر نیز عملکرد بهتری داشته باشد.
• از آنجایی که WOFF و WOFF 2.0 تمام پایه‌های مرورگرهای مدرن و قدیمی که هنوز در حال استفاده هستند را پوشش می‌دهند، استفاده از EOT و TTF دیگر ضروری نیست و می‌تواند منجر به زمان دانلود طولانی‌تر فونت‌های وب شود.

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

هر دو WOFF و WOFF 2.0 دارای فشرده‌سازی داخلی هستند. فشرده‌سازی داخلی WOFF 2.0 از Brotli استفاده می‌کند و تا 30٪ فشرده‌سازی بهتری نسبت به WOFF ارائه می‌دهد. برای اطلاعات بیشتر، به گزارش ارزیابی WOFF 2.0 مراجعه کنید.

در نهایت، شایان ذکر است که برخی از فرمت‌های فونت حاوی فراداده‌های اضافی مانند اطلاعات مربوط به فونت و فاصله بین حروف هستند که ممکن است در برخی پلتفرم‌ها ضروری نباشند و این امر امکان بهینه‌سازی بیشتر اندازه فایل را فراهم می‌کند. به عنوان مثال، Google Fonts بیش از 30 نوع فونت بهینه شده را برای هر فونت نگهداری می‌کند و به طور خودکار نوع بهینه را برای هر پلتفرم و مرورگر شناسایی و ارائه می‌دهد.

تعریف خانواده فونت با @font-face

دستور @font-face در CSS به شما این امکان را می‌دهد که مکان یک منبع فونت خاص، ویژگی‌های سبک آن و نقاط کد یونیکدی که باید برای آنها استفاده شود را تعریف کنید. ترکیبی از چنین اعلان‌های @font-face می‌تواند برای ساخت یک "خانواده فونت" استفاده شود که مرورگر از آن برای ارزیابی اینکه کدام منابع فونت باید دانلود و در صفحه فعلی اعمال شوند، استفاده خواهد کرد.

یک فونت متغیر را در نظر بگیرید

فونت‌های متغیر می‌توانند در مواردی که به چندین نوع فونت نیاز دارید، اندازه فایل فونت‌های شما را به میزان قابل توجهی کاهش دهند. به جای نیاز به بارگذاری سبک‌های معمولی و پررنگ به همراه نسخه‌های ایتالیک آنها، می‌توانید یک فایل واحد را که شامل تمام اطلاعات است بارگذاری کنید. با این حال، اندازه فایل فونت‌های متغیر بزرگتر از یک نوع فونت به صورت جداگانه خواهد بود - اگرچه کوچکتر از ترکیب چندین نوع فونت است. به جای یک فونت متغیر بزرگ، بهتر است ابتدا انواع فونت‌های مهم را ارائه دهید و انواع دیگر را بعداً دانلود کنید.

فونت‌های متغیر اکنون توسط همه مرورگرهای مدرن پشتیبانی می‌شوند، برای اطلاعات بیشتر به مقدمه‌ای بر فونت‌های متغیر در وب مراجعه کنید.

قالب مناسب را انتخاب کنید

هر اعلان @font-face نام خانواده فونت را ارائه می‌دهد که به عنوان یک گروه منطقی از اعلان‌های متعدد عمل می‌کند، ویژگی‌های فونت مانند style، weight و stretch و توصیفگر src را که فهرستی اولویت‌بندی‌شده از مکان‌ها برای منبع فونت را مشخص می‌کند.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

ابتدا توجه داشته باشید که مثال‌های بالا یک خانواده فونت Awesome با دو سبک (معمولی و ایتالیک ) تعریف می‌کنند که هر کدام به مجموعه متفاوتی از منابع فونت اشاره دارند. به نوبه خود، هر توصیفگر src شامل یک لیست اولویت‌بندی شده و جدا شده با کاما از انواع منابع است:

• دستور local() به شما امکان می‌دهد فونت‌های نصب‌شده محلی را ارجاع دهید، بارگذاری کنید و از آن‌ها استفاده کنید. اگر کاربر از قبل فونت را روی سیستم خود نصب کرده باشد، این روش کاملاً از شبکه عبور می‌کند و سریع‌ترین روش است.
• دستورالعمل url() به شما امکان می‌دهد فونت‌های خارجی را بارگذاری کنید و مجاز است حاوی یک راهنمای اختیاری format() باشد که فرمت فونت مورد ارجاع توسط URL ارائه شده را نشان می‌دهد.

وقتی مرورگر تشخیص می‌دهد که فونت مورد نیاز است، فهرست منابع ارائه شده را به ترتیب مشخص شده مرور می‌کند و سعی می‌کند منبع مناسب را بارگذاری کند. برای مثال، طبق مثال بالا عمل کنید:

1. مرورگر طرح‌بندی صفحه را انجام می‌دهد و تعیین می‌کند که کدام انواع فونت برای نمایش متن مشخص شده در صفحه مورد نیاز است. فونت‌هایی که بخشی از مدل شیء CSS (CSSOM) صفحه نیستند، توسط مرورگر دانلود نمی‌شوند، زیرا مورد نیاز نیستند.
2. برای هر فونت مورد نیاز، مرورگر بررسی می‌کند که آیا فونت به صورت محلی در دسترس است یا خیر.
3. اگر فونت به صورت محلی در دسترس نباشد، مرورگر تعاریف خارجی را بررسی می‌کند:
   • اگر یک راهنمای فرمت وجود داشته باشد، مرورگر قبل از شروع دانلود بررسی می‌کند که آیا از این راهنما پشتیبانی می‌کند یا خیر. اگر مرورگر از راهنما پشتیبانی نکند، به سراغ راهنمای بعدی می‌رود.
   • اگر هیچ اشاره‌ای به فرمت وجود نداشته باشد، مرورگر منبع را دانلود می‌کند.

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

زیرمجموعه محدوده یونیکد

علاوه بر ویژگی‌های فونت مانند سبک، وزن و کشیدگی، قانون @font-face به شما امکان می‌دهد مجموعه‌ای از نقاط کد یونیکد را که توسط هر منبع پشتیبانی می‌شوند، تعریف کنید. این به شما امکان می‌دهد یک فونت بزرگ یونیکد را به زیرمجموعه‌های کوچکتر (مثلاً زیرمجموعه‌های لاتین، سیریلیک و یونانی) تقسیم کنید و فقط گلیف‌های مورد نیاز برای رندر متن در یک صفحه خاص را دانلود کنید.

توصیفگر unicode-range به شما امکان می‌دهد لیستی از مقادیر محدوده را که با کاما از هم جدا شده‌اند، مشخص کنید که هر کدام می‌توانند به یکی از سه شکل مختلف باشند:

• یک نقطه کد (برای مثال، U+416 )
• محدوده بازه (برای مثال، U+400-4ff ): نقاط کد شروع و پایان یک بازه را نشان می‌دهد.
• محدوده کاراکترهای جایگزین (برای مثال، U+4?? ): ? کاراکترها هر رقم هگزادسیمال را نشان می‌دهند

برای مثال، می‌توانید خانواده فونت‌های Awesome خود را به زیرمجموعه‌های لاتین و ژاپنی تقسیم کنید که مرورگر هر کدام را در صورت نیاز دانلود کند:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

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

تقریباً همه مرورگرها unicode-range پشتیبانی می‌کنند . برای سازگاری با مرورگرهای قدیمی‌تر، ممکن است لازم باشد به "تنظیم دستی زیر مجموعه" برگردید. در این حالت، باید به ارائه یک منبع فونت واحد که شامل تمام زیرمجموعه‌های لازم است، برگردید و بقیه را از مرورگر پنهان کنید. به عنوان مثال، اگر صفحه فقط از حروف لاتین استفاده می‌کند، می‌توانید گلیف‌های دیگر را حذف کرده و آن زیرمجموعه خاص را به عنوان یک منبع مستقل ارائه دهید.

1. تعیین کنید که کدام زیرمجموعه‌ها مورد نیاز هستند:
   • اگر مرورگر از زیرمجموعه‌ی unicode-range پشتیبانی کند، به طور خودکار زیرمجموعه‌ی مناسب را انتخاب می‌کند. صفحه فقط باید فایل‌های زیرمجموعه را ارائه دهد و unicode-rangeهای مناسب را در قوانین @font-face مشخص کند.
   • اگر مرورگر از زیرمجموعه‌ی unicode-range پشتیبانی نکند، صفحه باید تمام زیرمجموعه‌های غیرضروری را پنهان کند؛ یعنی توسعه‌دهنده باید زیرمجموعه‌های مورد نیاز را مشخص کند.
2. ایجاد زیرمجموعه‌های فونت:
   • از ابزار متن‌باز pyftsubset برای زیرمجموعه‌بندی و بهینه‌سازی فونت‌های خود استفاده کنید.
   • برخی از سرورهای فونت - مانند فونت گوگل - به طور خودکار و پیش‌فرض زیرمجموعه‌ای از فونت‌ها را تشکیل می‌دهند.
   • برخی از سرویس‌های فونت امکان تنظیم دستی زیرمجموعه‌ها را از طریق پارامترهای پرس‌وجوی سفارشی فراهم می‌کنند که می‌توانید از آن‌ها برای تعیین دستی زیرمجموعه مورد نیاز برای صفحه خود استفاده کنید. به مستندات ارائه‌دهنده فونت خود مراجعه کنید.

انتخاب و ترکیب فونت

هر خانواده فونت ممکن است از چندین نوع سبک (معمولی، پررنگ، ایتالیک) و چندین وزن برای هر سبک تشکیل شده باشد. که هر کدام، به نوبه خود، ممکن است شامل شکل‌های گلیف بسیار متفاوتی باشند - برای مثال، فاصله، اندازه یا شکل کاملاً متفاوت.

نمودار بالا یک خانواده فونت را نشان می‌دهد که سه وزن پررنگ مختلف ارائه می‌دهد:

• ۴۰۰ (معمولی).
• ۷۰۰ (پررنگ).
• ۹۰۰ (با حروف برجسته‌تر).

تمام انواع دیگر بینابین (که با رنگ خاکستری مشخص شده‌اند) به طور خودکار توسط مرورگر به نزدیکترین نوع نگاشت می‌شوند.

وقتی وزنی مشخص می‌شود که وجهی برای آن وجود ندارد، از وجهی با وزن نزدیک به آن استفاده می‌شود. به طور کلی، وزن‌های پررنگ به وجه‌هایی با وزن‌های سنگین‌تر و وزن‌های سبک به وجه‌هایی با وزن‌های سبک‌تر نگاشت می‌شوند.

الگوریتم تطبیق فونت CSS

منطق مشابهی در مورد انواع ایتالیک نیز صدق می‌کند. طراح فونت، انواعی را که تولید می‌کند کنترل می‌کند و شما انواعی را که در صفحه استفاده خواهید کرد، کنترل می‌کنید. از آنجا که هر نوع فونت یک دانلود جداگانه است، ایده خوبی است که تعداد انواع فونت‌ها را کم نگه دارید. به عنوان مثال، می‌توانید دو نوع پررنگ برای خانواده فونت Awesome تعریف کنید:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

مثال بالا خانواده فونت Awesome را تعریف می‌کند که از دو منبع تشکیل شده است که مجموعه یکسانی از حروف لاتین ( U+000-5FF ) را پوشش می‌دهند اما دو "وزن" متفاوت ارائه می‌دهند: نرمال (400) و بولد (700). با این حال، اگر یکی از قوانین CSS شما وزن فونت متفاوتی را مشخص کند یا ویژگی font-style را روی italic تنظیم کند، چه اتفاقی می‌افتد؟

• اگر فونت دقیقی برای تطبیق وجود نداشته باشد، مرورگر نزدیکترین فونت را جایگزین می‌کند.
• اگر هیچ تطابق سبکی پیدا نشود (برای مثال، هیچ نوع فونت ایتالیک در مثال بالا اعلام نشده باشد)، مرورگر نوع فونت خودش را ترکیب می‌کند.

مثال بالا تفاوت بین نتایج فونت واقعی در مقابل فونت ترکیبی برای Open Sans را نشان می‌دهد. همه انواع ترکیبی از یک فونت با وزن ۴۰۰ تولید می‌شوند. همانطور که می‌بینید، تفاوت قابل توجهی در نتایج وجود دارد. جزئیات نحوه تولید انواع پررنگ و مورب مشخص نشده است. بنابراین، نتایج از مرورگری به مرورگر دیگر متفاوت است و به شدت به فونت وابسته است.

چک لیست بهینه سازی اندازه فونت وب

• استفاده از فونت‌ها را بررسی و نظارت کنید: از فونت‌های زیاد در صفحات خود استفاده نکنید و برای هر فونت، تعداد انواع مختلف فونت‌های استفاده شده را به حداقل برسانید. این کار به ایجاد یک تجربه سازگارتر و سریع‌تر برای کاربران شما کمک می‌کند.
• در صورت امکان از فرمت‌های قدیمی اجتناب کنید: فرمت‌های EOT، TTF و WOFF از WOFF 2.0 بزرگتر هستند. EOT و TTF فرمت‌های کاملاً غیرضروری هستند، در حالی که WOFF در صورت نیاز به پشتیبانی از Internet Explorer 11 ممکن است قابل قبول باشد. اگر فقط مرورگرهای مدرن را هدف قرار می‌دهید، استفاده از WOFF 2.0 ساده‌ترین و کارآمدترین گزینه است.
• منابع فونت خود را زیرمجموعه‌بندی کنید: بسیاری از فونت‌ها می‌توانند زیرمجموعه‌بندی شوند یا به چندین محدوده یونیکد تقسیم شوند تا فقط گلیف‌هایی را که یک صفحه خاص نیاز دارد، ارائه دهند. این کار حجم فایل را کاهش می‌دهد و سرعت دانلود منبع را بهبود می‌بخشد. با این حال، هنگام تعریف زیرمجموعه‌ها، مراقب باشید که برای استفاده مجدد از فونت بهینه‌سازی کنید. به عنوان مثال، مجموعه‌ای متفاوت اما همپوشانی از کاراکترها را در هر صفحه دانلود نکنید. یک روش خوب، زیرمجموعه‌بندی بر اساس خط است: به عنوان مثال، لاتین و سیریلیک.
• در لیست src خود به local() اولویت دهید: قرار دادن local('Font Name') در ابتدا در لیست src شما تضمین می‌کند که درخواست‌های HTTP برای فونت‌هایی که از قبل نصب شده‌اند، ارسال نمی‌شوند.
• برای تست فشرده‌سازی متن از Lighthouse استفاده کنید .

تأثیرات روی بزرگترین رنگ محتوا (LCP) و تغییر چیدمان تجمعی (CLS)

بسته به محتوای صفحه شما، گره‌های متنی می‌توانند کاندیدای Largest Contentful Paint (LCP) در نظر گرفته شوند. بنابراین بسیار مهم است که با پیروی از توصیه‌های این مقاله، مطمئن شوید که فونت‌های وب شما تا حد امکان کوچک هستند تا کاربران شما در اسرع وقت متن را در صفحه شما ببینند.

اگر نگران هستید که علیرغم تلاش‌هایتان برای بهینه‌سازی، متن صفحه به دلیل حجم زیاد فونت‌های وب، ممکن است نمایش داده شدنش خیلی طول بکشد، ویژگی font-display تنظیماتی دارد که می‌تواند به شما کمک کند از نمایش متن نامرئی هنگام دانلود فونت جلوگیری کنید . با این حال، استفاده از مقدار swap ممکن است باعث تغییرات قابل توجهی در طرح‌بندی شود که بر تغییر طرح‌بندی تجمعی (CLS) سایت شما تأثیر می‌گذارد. در صورت امکان، استفاده از مقادیر optional یا fallback را در نظر بگیرید.

اگر فونت‌های وب شما برای برندسازی شما - و به تبع آن، تجربه کاربری - بسیار مهم هستند، بارگذاری مجدد فونت‌های خود را در نظر بگیرید تا مرورگر بتواند درخواست آنها را زودتر انجام دهد. این کار می‌تواند هم دوره تعویض را در صورت استفاده font-display: swap و هم دوره مسدود شدن را در صورت عدم استفاده font-display کاهش دهد.