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