لقد توقفت عن استخدام Google Fonts CDN
تحميل الخطوط من Google CDN يبطئ موقعك.
كنت أستخدم رابطًا واحدًا في الـ header الخاص بي. بدا الأمر سهلاً. ثم قمت بفحص نتائج Lighthouse الخاصة بي.
أظهر التقرير وجود مشكلة. كان على المتصفح إجراء اتصالات إضافية بخوادم Google، والقيام بعمليات DNS lookups و TLS handshakes. تسبب هذا في حدوث تأخيرات. وفي حالة الاتصال الضعيف عبر الهاتف المحمول، ظل النص غير مرئي لفترة طويلة جدًا.
انتقلت إلى الاستضافة الذاتية (self-hosting). استغرق الأمر بعد ظهر يوم واحد فقط. والآن أقوم بذلك في كل مشروع.
إليك الإعدادات التي تحتاجها:
- استخدم تنسيق WOFF2. فهو أصغر بنسبة 30% من WOFF. لم تعد بحاجة إلى التنسيقات القديمة مثل .ttf أو .eot.
- قم بتحويل خطوطك. استخدم مكتبة fonttools لضغط ملفات .ttf إلى .woff2.
- استخدم خاصية
font-display: swap. فهي تعرض نص البديل (fallback text) فورًا، مما يمنع اختفاء النص أثناء تحميل الخط. - قم بعمل preload للخطوط الضرورية. أضف رابط preload في الـ head للخطوط المستخدمة في الجزء العلوي من الصفحة (above the fold).
- استخدم دائمًا سمة
crossorigin. إذا نسيت ذلك، فسيقوم المتصفح بتنزيل الخط مرتين. - قم بعمل subset لخطوطك. إذا كان موقعك يستخدم اللغة الإنجليزية، فقم بإزالة الرموز (glyphs) غير المستخدمة. يمكن لهذا أن يقلل حجم الملف بنسبة 70%.
- قم بتخزين ملفاتك مؤقتًا (Cache). استخدم header طويل لـ
cache-controlللاحتفاظ بالخطوط في المتصفح.
سير العمل بسيط:
حوّل إلى WOFF2. استخدم @font-face مع swap. قم بعمل preload للخط الأساسي مع crossorigin. ثم قم بعمل cache للملف.
يحسن هذا الإعداد سرعة التحميل ويزيل طرفًا ثالثًا من مسارك الحرج (critical path).
هل لا تزال تستخدم Google CDN في بيئة الإنتاج (production)؟ أخبرني بالسبب في التعليقات.