خطای Font Display

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

مقالات مرتبط:

خطای Document Request Latency

خطاهای قسمت SEO پیچ اسپید گوگل

Font Display

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

متن‌ها موقتاً مخفی می‌شوند و کاربر صفحه سفید یا بدون متن دیده می‌شود.

یا مرورگر یک فونت جایگزین نمایش می‌دهد و بعد از بارگذاری فونت اصلی آن را جایگزین می‌کند.

هر دو حالت می‌توانند تجربه کاربری نامطلوبی ایجاد کنند. حالت اول باعث می‌شود کاربر چند ثانیه چیزی نبیند و حالت دوم باعث می‌شود متن برای لحظه‌ای تغییر کند.

خطای Font Display دقیقاً به این موضوع اشاره دارد و از شما می‌خواهد مشخص کنید مرورگر چگونه باید در این شرایط عمل کند.

راه حل رفع خطا Font Display

1. استفاده از ویژگی font-display

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

auto: حالت پیش‌فرض مرورگر.

swap: متن ابتدا با فونت جایگزین نمایش داده می‌شود و بعد از بارگذاری فونت اصلی جایگزین می‌گردد.

fallback: شبیه swap است اما زمان کمتری برای تعویض در نظر می‌گیرد.

block: متن تا بارگذاری فونت اصلی مخفی می‌ماند (که توصیه نمی‌شود).

optional: شبیه fallback است ولی اگر فونت به‌موقع نرسد، همان فونت جایگزین باقی می‌ماند.

در بیشتر مواقع بهترین گزینه swap است چون متن سریع نمایش داده می‌شود و تجربه کاربری بهتر خواهد بود.

2. بهینه‌سازی فایل‌های فونت

حجم فونت‌ها را باید تا جای ممکن کاهش دهید. استفاده از فرمت‌های جدید مثل WOFF2 بسیار بهینه‌تر از فرمت‌های قدیمی مثل TTF یا OTF است. همچنین بهتر است فقط کاراکترهایی را که نیاز دارید (Subset Fonts) استفاده کنید، نه کل فونت.

3. استفاده از Preload

با کمک دستور <link rel=”preload”> می‌توانید به مرورگر اعلام کنید که فونت یک منبع حیاتی است و باید زودتر بارگذاری شود. این کار باعث می‌شود فونت‌ها قبل از سایر منابع کم‌اهمیت‌تر دانلود شوند.

4. میزبانی فونت‌ها روی سرور خود

اگر فونت‌ها را از منابع خارجی مثل Google Fonts بارگذاری می‌کنید، بهتر است آن‌ها را روی هاست خود میزبانی کنید. این کار وابستگی به سرورهای دیگر را از بین می‌برد و سرعت دسترسی به فونت‌ها بیشتر می‌شود.

5. کش کردن فونت‌ها

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

جهت اطلاعات بیشتر:

خطاهای قسمت Best Practices پیچ اسپید گوگل

خطاهای قسمت Accessibility پیچ اسپید گوگل

خطاهای قسمت Performance پیچ اسپید گوگل

خطاهای قسمت SEO پیچ اسپید گوگل

نتیجه‌گیری

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

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