يوضّح لك هذا الدرس التطبيقي كيفية تحميل خطوط الويب مسبقًا باستخدام rel="preload" لإزالة
أي وميض للنص غير المُنمَّط (FOUT).
القياس
عليك أولاً قياس أداء الموقع الإلكتروني قبل إضافة أي تحسينات.
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على
ملء الشاشة
. - اضغط على Ctrl + Shift + J (أو Command + Option + J على نظام التشغيل Mac) لفتح DevTools.
- انقر على علامة التبويب Lighthouse.
- تأكَّد من وضع علامة في مربّع الاختيار الأداء في قائمة الفئات.
- انقر على الزر إنشاء تقرير.
سيعرض لك تقرير Lighthouse الذي يتم إنشاؤه تسلسل جلب الموارد ضمن الحد الأقصى لمُدد استجابة المسار الحرج.
في عملية التدقيق أعلاه، تشكّل خطوط الويب جزءًا من سلسلة الطلبات المهمة ويتم جلبها في آخر الأمر. تمثّل سلسلة الطلبات المُهمّة ترتيب الموارد التي يمنح المتصفّح لها الأولوية ويجلبها. في هذا التطبيق، يتمّ تحديد خطوط الويب (Pacfico وPacifico-Bold) باستخدام قاعدة @font-face، وهي المورد الأخير الذي يُجلبه المتصفّح في سلسلة الطلبات المُهمّة. يتم عادةً تحميل خطوط الويب بشكلٍ بطيء، ما يعني أنّه لا يتم تحميلها إلا بعد تنزيل الموارد المهمة (CSS وJS).
في ما يلي تسلسل الموارد التي تم جلبها في التطبيق:
التحميل المُسبَق لخطوط الويب
لتجنُّب أخطاء FOUT، يمكنك تحميل خطوط الويب المطلوبة مسبقًا على الفور. أضِف عنصر Link لهذا التطبيق في أعلى المستند:
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
تُطلب من المتصفح من خلال سمات as="font" type="font/woff2" تنزيل هذا المرجع كخطّ وتساعد في تحديد الأولوية لقائمة الموارد.
تشير سمة crossorigin إلى ما إذا كان يجب جلب المورد باستخدام طلب CORS لأنّ الخط قد يكون واردًا من نطاق مختلف. بدون هذه السمة، يتجاهل المتصفّح الخط المحمَّل مسبقًا.
بما أنّ الخط Pacifico-Bold مستخدَم في عنوان الصفحة، أضفنا علامة تحميل مُسبَق لجلبه بشكل أسرع. ليس من المهم تحميل خط Pacifico.woff2 مسبقًا لأنّه يصيغ النص الظاهر أسفل الصفحة.
يُرجى إعادة تحميل التطبيق وتشغيل Lighthouse مرة أخرى. راجِع قسم الحد الأقصى لمُدد استجابة المسار الحرج.
لاحظ كيف تمت إزالة Pacifico-Bold.woff2 من سلسلة الطلبات المُهمّة. ويتم جلبها في وقت سابق من التطبيق.
من خلال ميزة "التنزيل المُسبَق"، يعلم المتصفّح أنّه يحتاج إلى تنزيل هذا الملف مبكرًا. من المهمّ ملاحظة أنّه في حال عدم استخدام ميزة التحميل المُسبَق بشكل صحيح، يمكن أن تضرّ بالأداء من خلال تقديم طلبات غير ضرورية لموارد غير مستخدَمة.