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

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

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

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

لقطة شاشة لتدقيق "التأكد من بقاء النص مرئيًا أثناء تحميل خطوط المواقع الإلكترونية" في Lighthouse

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

تشير font-display API إلى كيفية عرض الخط عند استخدامه داخل أسلوب 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 Fonts

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

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

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

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

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

إرشادات خاصة بالمجموعة

Drupal

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

Magento

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

الموارد