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

Katie Hempenius

Barry Pollard

چرا باید اهمیت بدی؟

فونت‌ها اغلب فایل‌های بزرگی هستند که بارگذاری آن‌ها مدتی طول می‌کشد. برای مقابله با این موضوع، برخی از مرورگرها متن را تا زمانی که فونت بارگیری شود ("فلش متن نامرئی") پنهان می کنند.

بزرگ‌ترین رنگ محتوایی (LCP) می‌تواند در انتظار نمایش متن به تعویق بیفتد. اگر برای عملکرد بهینه‌سازی می‌کنید، باید از «فلش متن نامرئی» (FOIT) اجتناب کنید و محتوا را بلافاصله با استفاده از فونت سیستمی به کاربران نشان دهید که «فلش متن بدون استایل» (FOUT) ایجاد می‌کند.

پیش فرض مرورگر برای نمایش فونت ها

اینها رفتارهای بارگذاری فونت پیش‌فرض برای مرورگرهای رایج هستند:

نمایش متن فورا

این راهنما دو راه را برای نمایش متن در اسرع وقت بیان می کند: روش اول ساده است و از مرورگر خوبی پشتیبانی می کند. رویکرد دوم عمیق است، اما ممکن است گزینه های بیشتری را برای شما فراهم کند. بهترین انتخاب برای وب سایت شما بستگی به نیاز شما دارد.

گزینه شماره 1: از font-display استفاده کنید

font-display یک API برای تعیین استراتژی نمایش فونت است. swap به مرورگر می گوید که متن با استفاده از این فونت باید بلافاصله با استفاده از فونت سیستم نمایش داده شود. هنگامی که فونت سفارشی آماده شد، فونت سیستم تعویض می شود.

/* Before */
@font-face {
  font-family: Helvetica;
}

/* After */
@font-face {
  font-family: Helvetica;
  font-display: swap;
}

اگر یک مرورگر از font-display پشتیبانی نمی کند - اگرچه تمام مرورگرهای مدرن از این کار پشتیبانی می کنند - مرورگر همچنان از رفتار پیش فرض خود برای بارگیری فونت ها پیروی می کند.

گزینه شماره 2: منتظر بمانید تا از فونت های سفارشی استفاده کنید تا بارگذاری شوند

با کمی کار بیشتر می توان رویکرد سفارشی تری را در نظر گرفت.

این رویکرد سه بخش دارد:

• از یک فونت سفارشی در بارگذاری صفحه اولیه استفاده نکنید و CSS خود را مجدداً تنظیم کنید تا در ابتدا از فونت های سفارشی استفاده نکنید. این تضمین می کند که مرورگر متن را بلافاصله با استفاده از فونت سیستم نمایش می دهد.
• تشخیص زمانی که فونت سفارشی شما با استفاده از CSS Font Loading API بارگیری می شود
• برای استفاده از فونت سفارشی، استایل صفحه را به‌روزرسانی کنید.

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");

// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);

// Load the font
font.load();

// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
  // Update the CSS to use the fonts
});

این را می توان با کتابخانه FontFaceObserver که برخی از API آسان تری برای استفاده پیدا می کنند، انجام داد.

این اجازه می دهد تا تعدادی از ملاحظات اضافی را هنگام بارگذاری فونت ها رعایت کنید. به عنوان مثال، همه فونت ها را می توان به طور همزمان بارگیری کرد، و از چندین طرح بندی با بارگیری هر فونت اجتناب کرد. یا سایت ها می توانند انتخاب کنند که فونت ها را برای کاربرانی که اتصالات کندتر دارند یا برای کسانی که از گزینه ذخیره داده استفاده می کنند بارگیری نکنند.

تأیید کنید

Lighthouse را اجرا کنید تا مطمئن شوید سایت از font-display: swap برای نمایش متن:

1. برای باز کردن DevTools، Control+Shift+J (یا Command+Option+J در مک) را فشار دهید.
2. روی تب Lighthouse کلیک کنید.
3. مطمئن شوید که چک باکس Performance در لیست دسته بندی ها انتخاب شده است.
4. روی دکمه Generate report کلیک کنید.

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