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

در ماژول‌های قبلی، نحوه بهینه‌سازی منابع HTML، CSS، جاوا اسکریپت و رسانه را آموختید. در این ماژول، روش‌هایی را برای بهینه‌سازی فونت‌های وب کشف خواهید کرد.

فونت‌های وب می‌توانند بر عملکرد صفحه هم در زمان بارگذاری و هم در زمان رندر تأثیر بگذارند. فایل‌های فونت بزرگ می‌توانند مدتی طول بکشد تا دانلود شوند و بر First Contentful Paint (FCP) تأثیر منفی بگذارند، در حالی که مقدار نادرست font-display می‌تواند باعث تغییرات نامطلوب در رندر بصری شود.

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

کشف

فونت‌های وب یک صفحه با استفاده از اعلان @font-face در یک برگه سبک تعریف می‌شوند:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}

قطعه کد قبلی یک font-family به نام "Open Sans" تعریف می‌کند و به مرورگر می‌گوید که منبع فونت وب مربوطه را کجا پیدا کند. برای صرفه‌جویی در پهنای باند، مرورگر تا زمانی که مشخص نشود که طرح‌بندی صفحه فعلی به فونت وب نیاز دارد، آن را دانلود نمی‌کند.

h1 {
  font-family: "Open Sans";
}

در قطعه کد CSS قبلی، مرورگر همزمان با تجزیه عنصر <h1> در HTML صفحه، فایل فونت "Open Sans" را دانلود می‌کند.

preload

اگر اعلان‌های @font-face شما در یک برگه سبک خارجی تعریف شده باشند، مرورگر تنها پس از دانلود برگه سبک می‌تواند دانلود آنها را شروع کند. این باعث می‌شود فونت‌های وب منابعی باشند که دیر کشف می‌شوند - اما راه‌هایی وجود دارد که به مرورگر کمک می‌کند فونت‌های وب را زودتر کشف کند.

شما می‌توانید با استفاده از دستور preload یک درخواست اولیه برای منابع فونت وب آغاز کنید. دستور preload باعث می‌شود فونت‌های وب در اوایل بارگذاری صفحه قابل کشف باشند و مرورگر بلافاصله بدون اینکه منتظر بماند تا دانلود و تجزیه style sheet تمام شود، شروع به دانلود آنها می‌کند. دستور preload منتظر نمی‌ماند تا فونت در صفحه مورد نیاز باشد.

<!-- The `crossorigin` attribute is required for fonts-even
     self-hosted ones, as fonts are considered CORS resources. -->
<link rel="preload" as="font" href="/fonts/OpenSans-Regular-webfont.woff2" crossorigin>

اعلان‌های درون‌خطی @font-face

شما می‌توانید با inline کردن CSS مسدودکننده رندر - شامل اعلان‌های @font-face - در <head> از HTML خود با استفاده از عنصر <style> ، فونت‌ها را زودتر در طول بارگذاری صفحه قابل کشف کنید. در این حالت، مرورگر فونت‌های وب را زودتر در طول بارگذاری صفحه کشف می‌کند، زیرا نیازی به انتظار برای دانلود یک style sheet خارجی ندارد.

استفاده از @font-face به صورت inline نسبت به استفاده از preload hint مزیتی دارد، زیرا مرورگر فقط فونت‌های لازم برای رندر صفحه فعلی را دانلود می‌کند. این کار خطر دانلود فونت‌های استفاده نشده را از بین می‌برد.

دانلود

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

فونت‌های وب خود را خودتان میزبانی کنید

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

این سربار را می‌توان با استفاده از اشاره‌گر منبع preconnect کاهش داد. با استفاده از preconnect ، می‌توانید به مرورگر بگویید که اتصال به cross-origin را زودتر از حالت عادی مرورگر باز کند:

<link rel="preconnect" href="https://fonts.googleapis.com">  
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

قطعه کد HTML قبلی به مرورگر اشاره می‌کند که یک اتصال به fonts.googleapis.com و یک اتصال CORS به fonts.gstatic.com برقرار کند. برخی از ارائه‌دهندگان فونت - مانند فونت‌های گوگل - منابع CSS و فونت را از منابع مختلفی ارائه می‌دهند.

شما می‌توانید با میزبانی فونت‌های وب خود، نیاز به اتصال شخص ثالث را از بین ببرید. در بیشتر موارد، میزبانی فونت‌های وب از مبدا متقابل سریع‌تر از دانلود آنها از مبدا متقابل است. اگر قصد دارید فونت‌های وب خود را میزبانی کنید، بررسی کنید که سایت شما از شبکه تحویل محتوا (CDN) ، HTTP/2 یا HTTP/3 استفاده می‌کند و هدرهای ذخیره‌سازی صحیح را برای فونت‌های وب مورد نیاز وب‌سایت خود تنظیم کنید.

فقط از WOFF2 و WOFF2 استفاده کنید

WOFF2 از پشتیبانی گسترده مرورگرها و بهترین فشرده‌سازی - تا 30٪ بهتر از WOFF - برخوردار است. حجم فایل کاهش‌یافته منجر به زمان دانلود سریع‌تر می‌شود. فرمت WOFF2 اغلب تنها فرمت مورد نیاز برای سازگاری کامل در مرورگرهای مدرن است.

فونت‌های وب خود را زیرمجموعه‌بندی کنید

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

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

برخی از ارائه‌دهندگان فونت وب - مانند فونت‌های گوگل - به طور خودکار از طریق استفاده از یک پارامتر رشته پرس و جو، زیرمجموعه‌هایی را ارائه می‌دهند. به عنوان مثال، آدرس اینترنتی https://fonts.googleapis.com/css?family=Roboto&subset=latin یک برگه سبک با فونت وب Roboto ارائه می‌دهد که فقط از الفبای لاتین استفاده می‌کند.

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

با این حال، اگر امکان میزبانی فونت‌های وب خودتان را ندارید، می‌توانید با مشخص کردن یک پارامتر رشته کوئری text اضافی که فقط شامل کدهای یونیکد لازم برای وب‌سایت شما باشد، فونت‌های وب ارائه شده توسط فونت‌های گوگل را زیرمجموعه قرار دهید. به عنوان مثال، اگر یک فونت وب نمایشی در سایت خود دارید که فقط به تعداد کمی کاراکتر مورد نیاز برای عبارت "خوش آمدید" نیاز دارد، می‌توانید آن زیرمجموعه را از طریق فونت‌های گوگل از طریق آدرس اینترنتی زیر درخواست کنید: https://fonts.googleapis.com/css?family=Monoton&text=Welcome . این می‌تواند به طور قابل توجهی میزان داده‌های فونت وب مورد نیاز برای یک فونت واحد در وب‌سایت شما را کاهش دهد، البته اگر چنین زیرمجموعه‌سازی گسترده‌ای در وب‌سایت شما مفید باشد.

رندر فونت

پس از اینکه مرورگر یک فونت وب را کشف و دانلود کرد، می‌تواند آن را رندر کند. به طور پیش‌فرض، مرورگر رندر هر متنی را که از یک فونت وب استفاده می‌کند تا زمانی که دانلود شود، مسدود می‌کند. شما می‌توانید رفتار رندر متن مرورگر را تنظیم کنید و پیکربندی کنید که چه متنی باید نمایش داده شود - یا نمایش داده نشود - تا زمانی که فونت وب به طور کامل بارگذاری شود. این کار با استفاده از ویژگی font-display در CSS انجام می‌شود.

block

مقدار پیش‌فرض برای font-display block است. با استفاده از block ، مرورگر رندر هر متنی را که از فونت وب مشخص‌شده استفاده می‌کند، مسدود می‌کند. مرورگرهای مختلف کمی متفاوت رفتار می‌کنند. کرومیوم و فایرفاکس رندر را حداکثر تا ۳ ثانیه قبل از استفاده از یک جایگزین مسدود می‌کنند. سافاری تا زمانی که فونت وب بارگذاری شود، به طور نامحدود مسدود می‌کند.

swap

swap پرکاربردترین مقدار font-display است . swap رندر شدن را مسدود نمی‌کند و متن را بلافاصله قبل از تعویض با فونت وب مشخص شده، به صورت fallback نمایش می‌دهد. این به شما امکان می‌دهد محتوای خود را فوراً و بدون انتظار برای دانلود فونت وب نمایش دهید.

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

این معمولاً منجر به تغییر چیدمان تجمعی (CLS) بدتری نسبت به block نمی‌شود (از آنجایی که block نیاز به چیدمان صفحه با فرض فونت‌های جایگزین دارد، حتی اگر خود متن نشان داده نشود، بنابراین هر دو در معرض تغییر محتوا قرار می‌گیرند)، می‌تواند از نظر بصری آزاردهنده‌تر باشد.

fallback

مقدار fallback برای font-display چیزی بین block و swap است. برخلاف swap ، مرورگر رندر کردن یک فونت را مسدود می‌کند، اما swap در متن جایگزین فقط برای مدت زمان بسیار کوتاهی عمل می‌کند. با این حال، برخلاف block ، دوره مسدود کردن بسیار کوتاه است.

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

optional

optional دقیق‌ترین مقدار font-display است و فقط در صورتی از منبع فونت وب استفاده می‌کند که در عرض ۱۰۰ میلی‌ثانیه دانلود شود. اگر بارگذاری یک فونت وب بیشتر از این زمان طول بکشد، در صفحه استفاده نمی‌شود و مرورگر از فونت جایگزین برای ناوبری فعلی استفاده می‌کند در حالی که فونت وب در پس‌زمینه دانلود شده و در حافظه پنهان مرورگر قرار می‌گیرد.

در نتیجه، پیمایش‌های بعدی صفحه می‌توانند بلافاصله از فونت وب استفاده کنند، زیرا قبلاً دانلود شده است. font-display: optional از تغییر بصری که با swap مشاهده می‌شود جلوگیری می‌کند، اما برخی از کاربران اگر فونت وب خیلی دیر در پیمایش اولیه صفحه برسد، آن را نمی‌بینند.

نسخه‌های نمایشی فونت

دانش خود را بیازمایید

مرورگر چه زمانی یک منبع فونت وب را دانلود می‌کند (با فرض اینکه با دستورالعمل preload دریافت نشده باشد)؟

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

تنها (و کارآمدترین) فرمت لازم برای ارائه فونت‌های وب به همه مرورگرهای مدرن چیست؟

واف۲
درست است!
واف
دوباره امتحان کنید.
تی تی اف
دوباره امتحان کنید.
EOT
دوباره امتحان کنید.

بعدی: جاوا اسکریپت با تقسیم کد

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