يوضّح لك هذا الدرس التطبيقي كيفية تحميل خطوط الويب مسبقًا باستخدام rel="preload" لإزالة
أي وميض للنص غير المُنمَّط (FOUT).
القياس
يجب أولاً قياس أداء الموقع الإلكتروني قبل إضافة أي تحسينات.
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق. ثم اضغط على
ملء الشاشة
. - اضغط على Ctrl + Shift + J (أو Command + Option + J على نظام التشغيل Mac) لفتح DevTools.
- انقر على علامة التبويب مصباح الهداية.
- تأكَّد من وضع علامة في مربّع الاختيار الأداء في قائمة الفئات.
- انقر على زر إنشاء تقرير.
سيعرِض لك تقرير 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 مسبقًا لأنّه يصيغ النص الظاهر أسفل الصفحة.
يُرجى إعادة تحميل التطبيق وتشغيل المنارة مرة أخرى. راجِع قسم الحد الأقصى لمُدد استجابة المسار الحرج.
لاحظ كيف تتم إزالة Pacifico-Bold.woff2 من سلسلة الطلبات المُهمّة. ويتم استرجاعه في وقت سابق في التطبيق.
من خلال ميزة "التنزيل المُسبَق"، يعلم المتصفّح أنّه يحتاج إلى تنزيل هذا الملف مبكرًا. من المهمّ ملاحظة أنّه في حال عدم استخدام ميزة التحميل المُسبَق بشكل صحيح، يمكن أن تضرّ بالأداء من خلال تقديم طلبات غير ضرورية لموارد غير مستخدَمة.