تجنُّب النص غير المرئي أثناء تحميل الخط

كاتي هيمبينيوس
"كاتي هيمبينيوس"
X
باري بولارد

أهمية ذلك بالنسبة إليك

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

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

الإعدادات التلقائية للمتصفح لعرض الخطوط

في ما يلي السلوكيات التلقائية لتحميل الخطوط في المتصفّحات الشائعة:

المتصفح السلوك التلقائي إذا كان الخط غير جاهز...
Chrome وEdge سيتم إخفاء النص لمدة تصل إلى 3 ثوانٍ. إذا كان النص لا يزال غير جاهز، يستخدم خط النظام إلى أن يصبح الخط جاهزًا ثم يستبدل الخط.
Firefox سيتم إخفاء النص لمدة تصل إلى 3 ثوانٍ. إذا كان النص لا يزال غير جاهز، يستخدم خط النظام إلى أن يصبح الخط جاهزًا ثم يستبدل الخط.
برنامج المتصفح Safari إخفاء النص إلى أن يصبح الخط جاهزًا

عرض النص على الفور

يوضح هذا الدليل طريقتين لعرض النص في أقرب وقت ممكن: الطريقة الأولى بسيطة وتتضمن توافقًا جيدًا مع المتصفحات. أما الطريقة الثانية فهي بالتفصيل، ولكنها قد توفر لك المزيد من الخيارات. يعتمد الخيار الأفضل لموقعك الإلكتروني على متطلباتك.

الخيار 1: استخدام font-display

التوافق مع المتصفح

  • 60
  • 79
  • 58
  • 11.1

المصدر

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

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

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

وفي حال كان المتصفّح غير متوافق مع font-display، على الرغم من توافق جميع المتصفحات الحديثة مع ذلك، سيستمر المتصفّح في اتّباع سلوكه التلقائي في ما يتعلق بتحميل الخطوط.

الخيار رقم 2: الانتظار لاستخدام الخطوط المخصصة حتى يتم تحميلها

التوافق مع المتصفح

  • 35
  • 79
  • 41
  • 10

المصدر

ومع المزيد من العمل، يمكن أخذ نهج أكثر تخصيصًا في الاعتبار.

هناك ثلاثة أجزاء لهذا النهج:

  • لا تستخدم خطًا مخصصًا عند التحميل الأولي للصفحة عن طريق إعادة هيكل CSS بحيث لا تستخدم خطوطًا مخصصة في البداية. ويضمن ذلك أن يعرض المتصفِّح النص على الفور باستخدام خط خاص بالنظام.
  • اكتشاف وقت تحميل الخط المخصّص باستخدام CSS Font Upload 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 التي يجد بعضها واجهة برمجة تطبيقات أسهل في الاستخدام.

وهذا يسمح بعدد من الاعتبارات الإضافية عند تحميل الخطوط. على سبيل المثال، يمكن تحميل جميع الخطوط مرة واحدة، وتجنب العديد من التخطيطات أثناء تحميل كل خط. أو يمكن للمواقع الإلكترونية اختيار عدم تحميل الخطوط للمستخدمين الذين لديهم اتصالات أبطأ أو للمستخدمين الذين يستخدمون خيار حفظ البيانات.

إثبات الهوية

تشغيل Lighthouse للتحقق من استخدام الموقع الإلكتروني font-display: swap لعرض النص:

  1. اضغط على Control+Shift+J (أو Command+Option+J على Mac) لفتح "أدوات مطوّري البرامج".
  2. انقر على علامة التبويب Lighthouse.
  3. تأكّد من وضع علامة في مربّع الاختيار الأداء في قائمة الفئات.
  4. انقر على زر إنشاء تقرير.

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