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