المستوى المطلوب: متوسط. هذا الشرح مبني على فرضية أنك تستخدم خطًا عربيًا مخصّصًا على موقعك (من Google Fonts أو ملف .woff2 على سيرفرك)، وأن لديك صفحة محتواها نص عربي في المقام الأول.
لو نصّ صفحتك يختفي ثانية كاملة قبل ما يظهر، أو بيقفز فجأة وقت التحميل، المشكلة مش في السيرفر ولا في سرعة النت. المشكلة في طريقة تحميل الخط. تظبيط سطرين وأمر واحد بينزّل زمن ظهور أكبر عنصر (LCP) من 2.6 ثانية لـ 1.1 ثانية، ويوقف وميض النص تمامًا.
تحميل خطوط الويب بدون وميض: اضبط font-display والتقليم وحسّن سرعة الظهور
المشكلة باختصار
الخط المخصّص مش بيوصل مع الصفحة. المتصفح لازم يحمّله كملف منفصل بعد ما يقرأ الـ CSS. في الفترة دي بين طلب الصفحة ونزول الخط، المتصفح بيقرر: يخفي النص لحد ما ينزل الخط، أو يعرضه بخط احتياطي ثم يبدّله. القرار ده اسمه font-display، والافتراضي في أغلب المتصفحات بيميل لإخفاء النص. النتيجة: المستخدم بيبصّ على مساحة فاضية والمحتوى موجود فعلًا.
الافتراض هنا: عندك خط ويب واحد أو اتنين بحجم إجمالي 200 إلى 400 كيلوبايت. لو بتستعمل خطوط النظام فقط، المقال ده مش موضوعك أصلًا.
وميض النص: FOIT مقابل FOUT بمثال بسيط
تخيّل محل جديد فاتح، لكن اللافتة الرسمية المطلوبة لسه في المطبعة. عندك خياران. الأول: تسيب مكان اللافتة فاضي تمامًا لحد ما تيجي، فالزبون واقف قدام محل مالوش اسم. ده بالظبط FOIT اختصار Flash of Invisible Text: النص موجود بس غير مرئي لحد ما ينزل الخط.
الخيار الثاني: تعلّق لافتة ورقية مؤقتة بخط عادي دلوقتي، وأول ما تيجي الرسمية تستبدلها. الزبون قرأ الاسم من أول لحظة. ده FOUT اختصار Flash of Unstyled Text: النص يظهر فورًا بخط احتياطي، ثم يتبدّل للخط المخصّص لمّا ينزل.
علميًا: عند بداية عرض الصفحة، المتصفح يمرّ بفترة block ثم فترة swap لكل خط قيد التحميل. في فترة الـ block النص المرتبط بالخط لا يُرسم (نص شفّاف). لو نزل الخط داخل فترة الـ block يظهر النص بالخط الصحيح مباشرة. لو تأخّر، سلوك الـ block الطويل يعطينا FOIT، وسلوك الـ swap يعطينا FOUT. الخاصية font-display هي اللي تحدد طول كل فترة.
الحل: ثلاث خطوات قابلة للنسخ
- حدّد سلوك العرض بـ
font-display: swapداخل تعريف الخط، عشان النص يظهر فورًا بخط احتياطي. - حمّل خط الكوفر مسبقًا بـ
preloadعشان المتصفح يبدأ تحميله مبكرًا بدل ما يستنى قراءة الـ CSS. - قلّم الخط (Subsetting) عشان تشيل آلاف المحارف اللي موقعك مش بيستخدمها وتنزّل حجم الملف.
@font-face {
font-family: 'Cairo';
src: url('/fonts/cairo-subset.woff2') format('woff2');
font-weight: 400;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+0020-007E;
}