بارگذاری فونت وب چگونه بر عملکرد صفحه تأثیر می گذارد؟

برای صفحات دارای متن که از فونت های وب استفاده می کنند ، مرورگر نمی تواند متن ذکر شده را تا زمانی که فونت وب آماده نشود ارائه دهد .

در بسیاری از موارد ، معمولاً متن قبل از بارگذاری فونت وب آماده است. مرورگر پیشاپیش فضا را برای متن ایجاد می کند حتی اگر فونت وب در دسترس نباشد ، در نتیجه مشکل Flash of Invisible Text ایجاد می شود .

این به جلوگیری از تغییرات طرح بندی غیر ضروری برای یک تجربه سریع و (طبق گوگل)  کمک می کند.

فلش متن بدون استایل (FOUT)

Flash of Unstyled Text (FOUT) مشکلی مشابه FOIT است و همچنین به دلیل عدم بارگذاری فونت ها به موقع ایجاد می شود.

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

توجه داشته باشید که تأثیر FOUT بر عملکرد وب در مقایسه با FOIT کمتر مشهود است.

چگونه GTmetrix باعث این ممیزی می شود؟

GTmetrix تمام فونت های وب اعلام شده در CSS را شناسایی می کند و بررسی می کند که آیا font-displayویژگی برای هر فونت وب با هریک از مقادیر زیر مشخص شده است:

• block
• swap
• fallback
• optional

اگر GTmetrix حتی یک آدرس فونت وب بدون اظهارات فوق پیدا کند ، این ممیزی شروع می شود . با کلیک روی حسابرسی ، آدرس URL های فونت وب نمایان می شود.

چگونه می توان اطمینان داد که متن در حین بارگذاری فونت وب قابل مشاهده است؟

چند راهکار وجود دارد تا اطمینان حاصل شود که متن در هنگام بارگذاری فونت وب قابل مشاهده است ، مانند:

1) پیش بارگذاری فونت های وب

می توانید با افزودن تگ پیوند زیر به هدر HTML خود ، فونت های وب را که در هنگام بارگیری صفحه بلافاصله مورد نیاز هستند بارگیری کنید:

<link rel="preload" href="/webfontname" as="font" type="font/format" crossorigin>

جایی که

• “webfontname/” نام فونت وب شما در حال بارگیری است.
• فرمت به فرمت خاص فونت وب (یعنی ttf ، woff ، woff2 و غیره) اشاره دارد.

2) استفاده از font-display

font-display ویژگی تعیین کننده چگونگی فونت در هنگام لود صفحه شما نمایش داده، بر اساس اینکه آیا آن دانلود شده است و آماده برای استفاده است. مقادیر زیر را می گیرد:

• ;font-display: auto
• ;font-display: block
• ;font-display: swap
• ;font-display: fallback
• ;font-display: optional

توضیح

• خودکار – به مرورگر می گوید از استراتژی پیش فرض نمایش فونت وب خود استفاده کند ، که توسط عامل کاربر تعریف شده است.
• block – به مرورگر می گوید که متن را با استفاده از یک حفره نامرئی مخفی کند تا زمانی که فونت وب بارگیری شود ، و سپس آن را با فونت وب انتخاب شده عوض کنید.
• swap – به مرورگر می گوید که متن را بلافاصله با استفاده از یک فونت جایگزین رندر کند تا زمانی که فونت وب بارگیری شود و سپس آن را با فونت وب انتخاب شده عوض کنید.
• fallback – به مرورگر می گوید که متن را به طور مختصر مخفی کند ، سپس متن را با استفاده از یک فونت جایگزین تا بارگذاری فونت وب رندر کند و در نهایت آن را با فونت وب انتخاب شده عوض کنید.
• اختیاری – عملکرد مشابهی با نسخه های قبلی دارد ، اما به مرورگر این آزادی را می دهد که تصمیم بگیرد آیا از فونت وب انتخابی استفاده شود یا خیر.

برای اکثر مرورگرهای مدرن ، استفاده font-display: swap از FOIT مشکل را حل می کند.

برای ملاحظه مطالب بیشتر در مورد صفحه نمایش فونت و سازگاری مرورگر آن اینجا را کلیک کنید

3) برای فونت های وب گوگل

اگر از فونت های وب Google در صفحه خود استفاده می کنید ، می توانید font-displayبا افزودن &display=swapپارامتر در انتهای URL فونت وب خود در CSS ، عملکردی را اضافه کنید.

مثلا،

<link href = "googlewebfonturl & display = swap"  rel = "stylesheet" >

جایی که googlewebfonturl آدرس فونت وب Google انتخابی شما است.