تحسين تحميل WebFont وعرضه

يمكن أن يؤدي خط WebFont "الكامل" الذي يتضمّن جميع الأنواع الأسلوبية، التي قد لا تحتاج إليها، بالإضافة إلى جميع الرسومات الرسومية التي قد لا يتم استخدامها، إلى تنزيل ملف بحجم متعدد البايت. ستتعرَّف في هذه المشاركة على كيفية تحسين تحميل WebFonts بحيث ينزّل الزوار المحتوى الذي سيستخدمونه فقط.

لحل مشكلة الملفات الكبيرة التي تحتوي على جميع خيارات المنتج، تم تصميم قاعدة CSS @font-face خصّيصًا للسماح لك بتقسيم مجموعة الخطوط إلى مجموعة من الموارد. على سبيل المثال، مجموعات يونيكود الفرعية، ومتغيرات النمط المميزة.

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

السلوك التلقائي

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

1. يطلب المتصفّح مستند HTML.
2. يبدأ المتصفح في تحليل استجابة HTML وإنشاء نموذج العناصر في المستند (DOM).
3. يكتشف المتصفّح CSS وJS وغيرها من الموارد وطلبات الإرسال.
4. ينشئ المتصفح CSSOM بعد تلقّي كل محتوى CSS ويدمجه مع شجرة DOM لإنشاء شجرة العرض.
   • يتم إرسال طلبات الخطوط بعد أن تشير شجرة العرض إلى صِيغ الخطوط اللازمة لعرض النص المحدّد في الصفحة.
5. ينفِّذ المتصفح التخطيط ويرسم المحتوى على الشاشة.
   • إذا لم يكن الخط متاحًا حتى الآن، قد لا يعرض المتصفِّح أي وحدات بكسل نصية.
   • بعد توفر الخط، يرسم المتصفح وحدات بكسل النص.

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

من خلال التحميل المُسبق لـ WebFonts واستخدام font-display للتحكّم في سلوك المتصفّحات مع الخطوط غير المتوفّرة، يمكنك منع الصفحات الفارغة ومتغيّرات التصميم بسبب تحميل الخطوط.

تحميل موارد WebFont مسبقًا

إذا كان هناك احتمال كبير بأن تحتاج صفحتك إلى خط WebFont معيّن مستضاف على عنوان URL تعرفه مسبقًا، يمكنك الاستفادة من تحديد أولويات الموارد. سيؤدي استخدام <link rel="preload"> إلى إرسال طلب لخط WebFont مبكرًا في مسار العرض الحرج، بدون الحاجة إلى انتظار إنشاء CSSOM.

تخصيص مهلة عرض النص

إنّ التحميل المُسبق يزيد من احتمالية توفير WebFont عند عرض محتوى الصفحة، ولكنّه لا يقدّم أي ضمانات. يجب مراعاة سلوك المتصفّحات عند عرض نص يستخدم font-family غير المتوفّرة بعد.

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

على غرار سلوكيات مهلة الخط الحالية التي تتّبعها بعض المتصفّحات، يقسم font-display فترة تنزيل الخط إلى ثلاث فترات رئيسية:

1. النقطة الأولى هي فترة حظر الخطوط. خلال هذه الفترة، إذا لم يتم تحميل واجهة الخط، يجب أن يتم عرض أي عنصر يحاول استخدامه بدلاً من ذلك مع واجهة خط احتياطية غير مرئية. إذا تم تحميل واجهة الخط بنجاح خلال فترة الحظر، سيتم حينئذٍ استخدام واجهة الخط بشكل طبيعي.
2. تحدث فترة تبديل الخط مباشرةً بعد فترة حظر الخط. خلال هذه الفترة، إذا لم يتم تحميل واجهة الخط، يجب أن يتم عرض أي عنصر يحاول استخدامه واجهة خط احتياطية بدلاً من ذلك. إذا تم تحميل واجهة الخط بنجاح أثناء فترة التبديل، فسيتم حينئذٍ استخدام واجهة الخط بشكل طبيعي.
3. تحدث فترة إخفاق الخط فورًا بعد فترة تبديل الخط. إذا لم يتم تحميل واجهة الخط عند بدء هذه الفترة، يتم وضع علامة عليها كعملية تحميل فاشلة، ما يؤدي إلى رجوع الخط إلى مستوٍ عادي. وبخلاف ذلك، يتم استخدام واجهة الخط بشكل طبيعي.

من خلال فهم هذه النقاط، يمكنك استخدام "font-display" لتحديد طريقة عرض الخط استنادًا إلى ما إذا تم تنزيله أو وقت تنزيله.

لاستخدام السمة font-display، أضِفها إلى قواعد @font-face:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  font-display: auto; /* or block, swap, fallback, optional */
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('truetype'),
       url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

تتوافق font-display حاليًا مع نطاق القيم التالي:

• auto
• block
• swap
• fallback
• optional

لمزيد من المعلومات عن التحميل المُسبق للخطوط والسمة font-display، يُرجى الاطّلاع على المشاركات التالية:

• تجنُّب النص غير المرئي أثناء تحميل الخط
• التحكّم في أداء الخط باستخدام عرض الخطوط
• منع تغيير التنسيق وميضات النص غير المرئي (FOIT) من خلال التحميل المُسبق للخطوط الاختيارية

واجهة برمجة تطبيقات Font Upload

عند استخدامهما معًا، يمنحك <link rel="preload"> وCSS font-display قدرًا كبيرًا من التحكّم في تحميل الخط وعرضه، بدون زيادة النفقات العامة. ولكن إذا كنت بحاجة إلى تخصيصات إضافية، وكنت على استعداد لتحمّل أي نفقات إضافية ناتجة عن تشغيل JavaScript، يتوفّر خيار آخر.

توفر Font Upload API واجهة برمجة نصية لتحديد أشكال خطوط CSS ومعالجتها، وتتبُّع مستوى تقدُّم عملية التنزيل، وتجاوز سلوك التحميل الكسول التلقائي. على سبيل المثال، إذا كنت متأكدًا من أنه مطلوب صيغ خط معيّنة، يمكنك تحديده وإعلام المتصفح ببدء استرجاع فوري لمورد الخط:

var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// don't wait for the render tree, initiate an immediate fetch!
font.load().then(function() {
  // apply the font (which may re-render text and cause a page reflow)
  // after the font has finished downloading
  document.fonts.add(font);
  document.body.style.fontFamily = "Awesome Font, serif";

  // OR... by default the content is hidden,
  // and it's rendered after the font is available
  var content = document.getElementById("content");
  content.style.visibility = "visible";

  // OR... apply your own render strategy here...
});

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

• ويمكنك الاحتفاظ بعرض كل النص إلى أن يتوفّر الخط.
• يمكنك تنفيذ مهلة مخصصة لكل خط.
• يمكنك استخدام الخط الاحتياطي لإزالة حظر العرض وإدخال نمط جديد يستخدم الخط المطلوب بعد توفُّر الخط.

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

التخزين المؤقت المناسب أمر لا بد منه

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

إذا كان تطبيق الويب يستخدم مشغّل خدمات، يكون عرض موارد الخطوط باستخدام استراتيجية ذاكرة التخزين المؤقت أولاً مناسبًا لمعظم حالات الاستخدام.

يجب عدم تخزين الخطوط باستخدام localStorage أو IndexedDB، فلكل خطوط من هذه الخطوط مجموعة خاصة من مشاكل الأداء. توفر ذاكرة التخزين المؤقت لبروتوكول HTTP في المتصفح أفضل وأقوى آلية لعرض موارد الخطوط في المتصفح.

قائمة التحقّق الخاصة بتحميل WebFont

• يمكنك تخصيص تحميل الخط وعرضه باستخدام <link rel="preload"> أو font-display أو Font Loading API: قد يؤدي التحميل الكسول التلقائي إلى تأخير عرض النصوص. تتيح لك ميزات منصة الويب هذه إلغاء هذا السلوك لخطوط معينة، وتحديد استراتيجيات العرض المخصص وانتهاء المهلة للمحتوى المختلف على الصفحة.
• تحديد السياسات الأمثل لإعادة التحقق والتخزين المؤقت: الخطوط عبارة عن موارد ثابتة لا يتم تحديثها بشكل متكرر. احرص على أن توفّر خوادمك طابعًا زمنيًا يدوم طويلاً للعمر الأقصى ورمزًا مميزًا لإعادة التحقق من أجل السماح بإعادة استخدام الخط بفعالية بين الصفحات المختلفة. إذا كنت تستخدم عامل خدمات، فإن استخدام ذاكرة التخزين المؤقت أولاً مناسبًا.

الاختبار المبرمَج لسلوك تحميل WebFont باستخدام Lighthouse

يمكن أن تساعد أداة Lighthouse في عملية التأكّد من اتّباع أفضل الممارسات المتعلقة بتحسين الخطوط على الويب.

يمكن أن تساعدك عمليات التدقيق التالية على التأكّد من أنّ صفحاتك تواصل اتّباع أفضل ممارسات تحسين خطوط الويب بمرور الوقت:

• التحميل المُسبق لطلبات المفاتيح
• استخدام سياسة ذاكرة التخزين المؤقت غير فعّالة على مواد العرض الثابتة
• تظل كل النصوص مرئية أثناء تحميل WebFont