استضافة الخطوط محلياً: السر وراء سرعة تحميل صفحة الويب

قاتل الأداء الصامت

بالنسبة لصفحات الهبوط والتسويق للمؤسسات، ترتبط تجربة المستخدم بشكل مباشر بسرعة تحميل الصفحة. يعد تأخر عرض المحتوى الرئيسي (LCP) وتغير تخطيط الصفحة التراكمي (CLS) من أكثر المشاكل شيوعاً بسبب طريقة التعامل مع الخطوط المخصصة.

تحميل الخطوط من شبكات توزيع المحتوى الخارجية (مثل روابط Google Fonts التقليدية) ينشئ دورات طلبات متعددة تعيق سرعة المعالجة:

1. جلب ملف ال HTML.
2. طلب ملف ال CSS الخارجي.
3. جلب ملفات الخطوط الفعالة .woff2 من خوادم أخرى.

تتسبب هذه الخطوات في تأخير ظهور النصوص وحالات انتقال بصرية مزعجة للمستخدم عندما يظهر الخط الافتراضي للنظام ثم يتغير فجأة للخط المخصص.

تقليص النفقات بالخطوط المتغيرة

بدلاً من تحميل ملفات مستقلة لكل وزن وأسلوب للخط (عادي، متوسط، شبه سميك، سميك، ومائل)، نستخدم الخطوط المتغيرة (Variable Fonts). يحتوي الخط المتغير على طيف الأوزان بالكامل (من ١٠٠ إلى ٩٠٠) في ملف واحد مضغوط من نوع .woff2.

يقلل هذا بشكل كبير من الحجم الإجمالي للأصول المطبعية ويقضي على الهدر في التحميل.

خطوات التنفيذ التقني للأداء العالي

تفرض نوفكسيا ثلاثة ضوابط صارمة لضمان السرعة القصوى للخطوط:

1. الاستضافة المحلية: يتم تخزين الخطوط محلياً في المجلد /public/fonts/ للوصول بزمن استجابة يساوي صفراً بفضل ذاكرة التخزين المؤقت لشبكة كودفلير.
2. التحميل المسبق الاختياري: نقوم في رأس الصفحة بتحميل الخطوط الأساسية مسبقاً (Geist للواجهات و Fraunces للعناوين) لعرضها دون انتظار:

   <link rel="preload" href="/fonts/geist-1.woff2" as="font" type="font/woff2" crossorigin />

3. استبدال طريقة العرض: نحدد الخاصية font-display: swap في تعريف الخط لضمان ظهور النص فوراً بخط النظام الافتراضي ريثما يكتمل تحميل الخط المخصص.

بفضل هذه البنية، نحافظ على حجم حزم الجافا سكريبت الأساسية عند ٠ كيلوبايت، ونحقق سرعة تحميل للمحتوى الرئيسي (LCP) في أقل من ١.٢ ثانية على الهواتف والأجهزة المكتبية.