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

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

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

قبل از بحث در مورد بهینه سازی فونت های وب، دانستن اینکه چگونه آنها توسط مرورگر کشف می شوند می تواند مفید باشد، به طوری که می توانید درک کنید که چگونه 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 قبلی، مرورگر فایل فونت "Open Sans" را دانلود می کند، زیرا عنصر <h1> را در HTML صفحه تجزیه می کند.

preload

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

شما می توانید با استفاده از دستورالعمل preload ، درخواست اولیه برای منابع فونت وب را آغاز کنید. دستورالعمل preload فونت های وب را در زمان بارگذاری صفحه قابل شناسایی می کند و مرورگر بلافاصله شروع به دانلود آنها می کند بدون اینکه منتظر بماند تا بارگیری و تجزیه برگه سبک به پایان برسد. دستورالعمل 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

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

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

دانلود کنید

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

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

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

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

<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 اغلب تنها فرمت مورد نیاز برای سازگاری کامل در مرورگرهای مدرن است.

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

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

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

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

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

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

رندر فونت

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

block

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

swap

swap پرکاربردترین مقدار font-display است . swap رندر را مسدود نمی کند و متن را بلافاصله قبل از جابجایی در فونت وب مشخص شده به صورت بازگشتی نشان می دهد. این به شما امکان می دهد محتوای خود را بلافاصله بدون منتظر ماندن برای دانلود فونت وب نشان دهید.

با این حال، نقطه ضعف swap این است که اگر فونت وب و فونت وب مشخص شده در CSS شما از نظر ارتفاع خط، کرنینگ و سایر معیارهای فونت بسیار متفاوت باشد، باعث تغییر طرح بندی می شود. اگر مراقب نباشید که preload راهنمایی برای بارگیری منبع فونت وب در اسرع وقت استفاده نکنید، یا اگر سایر مقادیر font-display را در نظر نگیرید، می تواند بر CLS وب سایت شما تأثیر بگذارد.

fallback

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

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

optional

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

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

دموی فونت

دانش خود را تست کنید

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

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

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

WOFF2
درسته!
WOFF
دوباره امتحان کنید.
TTF
دوباره امتحان کنید.
EOT
دوباره امتحان کنید.

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

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