التأكد من بقاء النص مرئيًا أثناء تحميل خط موقع ويب

غالبًا ما تكون الخطوط ملفات كبيرة ذات أوقات تحميل بطيئة. تخفي بعض المتصفحات النص إلى أن يتم تحميل الخط، مسببًا وميضًا من النص غير المرئي (FOIT).

أسباب تعذُّر تدقيق عرض الخطوط في Lighthouse

تضع Lighthouse علامة على أي عناوين URL للخطوط قد تومض بنص غير مرئي:

لقطة شاشة لميزة "التأكد من بقاء النص" مرئيًا أثناء تدقيق عمليات تحميل Webfont

كيفية تجنُّب عرض نص غير مرئي

تشير واجهة برمجة تطبيقات font-display إلى كيفية عرض الخط عند استخدامه داخل نمط font-face. ستطلب قيم font-display التالية من المتصفّح استخدام خط للنظام إذا لم يكن الخط المخصّص جاهزًا:

  • swap
  • optional
  • fallback

مثال على لغة CSS

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

مثال على خطوط Google

أضِف المَعلمة &display=swap/&display=optional/&display=fallback إلى نهاية عنوان URL لخطوط Google:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

كيفية تجنُّب متغيّرات التصميم الناتجة عن الخطوط المؤجلة

سيؤدي عرض خط نظام مؤقتًا إلى استبدال FOIT بوميض من النص غير المعتاد (FOUT). يساعد ذلك في تحسين سرعة عرض أكبر محتوى مرئي (FCP) وسرعة عرض أكبر محتوى مرئي (LCP) من خلال عرض المحتوى في وقت أقرب، ولكن سيكون لكل من FOIT وFOUT التأثير نفسه في متغيّرات التصميم التراكمية عندما يحلّ الخط المخصّص محلّ خط النظام المؤقت.

يمكن الحد من تأثير تحميل الخط متغيّرات التصميم التراكمية (CLS) باستخدام عمليات التحميل المُسبقة بالإضافة إلى استخدام font-display: optional. ومع ذلك، يمكن أن يؤثر الإفراط في استخدام عمليات التحميل المُسبق سلبًا في مقاييس التحميل. ننصح بإجراء اختبار A/B للتأكّد من أنّ التحميل المُسبق للخطوط لا يعرض أي تراجع في الأداء.

إرشادات خاصة بالحزمة

Drupal

يمكنك تحديد @font-display عند تحديد خطوط مخصّصة في المظهر.

Magento

حدِّد @font-display عند تحديد الخطوط المخصّصة.

المراجِع