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