تخمة الخطوط! هل لاحظت يوماً أن النص في موقعك يظهر بشكل عادي ثم "يقفز" فجأة ليتغير شكله بعد ثانية؟ هذا ما نسميه (FOUT) أو وميض النص غير المنسق، والسبب الرئيسي هو تحميل عدد كبير جداً من ملفات الخطوط.
لماذا يمثل هذا الأمر مشكلة؟
كل وزن (مثل Bold أو Light) وكل نمط (مثل Italic) هو في الحقيقة ملف منفصل يجب على المتصفح تحميله بالكامل:
| ما يتم تحميله | الحجم التقريبي |
|---|---|
| خط واحد بوزنين (عادي + غامق) | ~50KB |
| خطان بـ 4 أوزان مختلفة | ~150KB |
| 3 خطوط بـ 6 أوزان مختلفة | ~300KB+ |
بالإضافة لزيادة حجم الصفحة، تسبب كثرة الخطوط:
- انزياح التصميم (CLS): ترتيب العناصر يتغير فجأة بعد تحميل الخط، مما يزعج الزائر ويخفض ترتيبك في محرك البحث (Core Web Vitals).
- حجب العرض (Render Blocking): قد يرفض المتصفح إظهار أي نص على الإطلاق حتى ينتهي من تحميل ملف الخط بالكامل، مما يترك الزائر أمام صفحة بيضاء لثوانٍ.
- طلبات خارجية زائدة: التحميل من "Google Fonts" يضيف عمليات ربط (DNS Lookups) تزيد من زمن تحميل الصفحة الكلي.
خطوات الحل
الخطوة 1: جرد الخطوط (Audit)
اكتشف كمية "الدهون" في موقعك:
- افتح موقعك واضغط (F12) لفتح أدوات المطور.
- توجه لتبويب Network ثم اختر Font.
- قم بتحديث الصفحة وشاهد عدد ملفات الخطوط وحجمها الكلي.
الخطوة 2: القاعدة الذهبية (1-2)
المواقع الاحترافية والعالمية تلتزم عادة بـ:
- عائلة خطوط واحدة (Font Family) لكامل الموقع.
- أو عائلتين كحد أقصى: واحدة للعناوين الكبيرة وأخرى للنصوص الطويلة.
- أوزان محدودة: لا تستخدم أكثر من 3 أوزان (عادي 400، متوسط 500، غامق 700).
الخطوة 3: الاستضافة الذاتية (Self-Hosting)
بدلاً من الاعتماد على خوادم جوجل، حمل الخطوط على استضافتك الخاصة لتقليل زمن الربط:
- استخدم أداة Google Webfonts Helper لتحميل الخطوط بصيغة WOFF2 (وهي الأصغر والأسرع).
- ارفعها لمجلد القالب الخاص بك.
- استخدم إضافات مثل OMGF لأتمتة هذه العملية بضغطة زر.
الخطوة 4: تفعيل ميزة Font Display Swap
أخبر المتصفح: "أظهر النص بالخط الافتراضي فوراً، ثم استبدله بخطي المفضل عند اكتمال تحميله". أضف هذا السطر لكود @font-face في ملف CSS:
font-display: swap;أو إذا كنت تستخدم روابط جوجل، تأكد من وجود &display=swap في نهاية الرابط.
الخطوة 5: تعطيل خطوط الإضافات (Elementor وغيرها)
بناة الصفحات وقوالب المواقع يحملون غالباً مكتبات ضخمة من الأيقونات (مثل Font Awesome) حتى لو لم تستخدمها. قم بتعطيل ما لا تحتاجه من إعدادات القالب أو عبر إضافة Asset CleanUp.
ملاحظات هامة
- خطوط النظام (System Fonts): فكر في استخدام خطوط النظام الافتراضية لقراءة المقالات (مثل Arial أو Tahoma)؛ فهي لا تحتاج لتحميل وتظهر فوراً وبأعلى جودة.
- WOFF2: تأكد دائماً من استخدام هذه الصيغة حصراً، فهي توفر حوالي 30% من حجم الملفات مقارنة بالصيغ القديمة.
- التحميل المسبق (Preload): لا تقم بعمل "Preload" لأكثر من خطين؛ فكثرة التحميل المسبق تجعل الموقع يبدو أبطأ بدلاً من العكس.
