يعرض لك هذا الدرس التطبيقي حول الترميز كيفية تحميل خطوط الويب مسبقًا باستخدام 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 لأنه يحدد نمط النص في الجزء السفلي غير المرئي من الصفحة.
يُرجى إعادة تحميل التطبيق وتشغيل المنارة مرة أخرى. تحقَّق من قسم الحد الأقصى لوقت استجابة المسار الحرج.
لاحِظ كيفية إزالة Pacifico-Bold.woff2 من سلسلة الطلبات المُهمّة. ويتم استرجاعه في وقت سابق في التطبيق.
من خلال التحميل المُسبق، يدرك المتصفّح أنّه يحتاج إلى تنزيل هذا الملف في وقت سابق. من المهم ملاحظة أنّه في حال عدم استخدام التحميل المُسبق بشكل صحيح، قد يؤدّي إلى الإضرار بالأداء من خلال إرسال طلبات غير ضرورية للموارد التي لا يتم استخدامها.