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

Katie Hempenius
Katie Hempenius
X
Barry Pollard

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

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

قد يتأخر سرعة عرض أكبر محتوى مرئي (LCP) في انتظار عرض النص. إذا كنت تعمل على تحسين الأداء، سيكون عليك تجنب "وميض النص غير المرئي" وعرض المحتوى للمستخدمين على الفور باستخدام خط نظام، ما يؤدي إلى إنشاء وميض بنص غير نمطي" (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. انقر على زر إنشاء تقرير.

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