قلّل العمل الذي يطلبه كل مسار من المتصفح على الخطوط
أجرِ جردًا لطلبات الخطوط عند ذاكرة التخزين الباردة على الصفحة الرئيسية، وصفحات التحويل، والعروض بعد تسجيل الدخول، والقوالب ذات أنظمة التصميم المختلفة. سجّل العائلة، والوزن، والنمط، والملف، والمنشأ، وحجم النقل، والاختيار. قاعدة @font-face المعلنة لا تُحرّك التنزيل بحد ذاتها؛ عادةً يحصل المتصفح على وجه عندما يستخدم التخطيط الحالي ذلك الوجه. هذا يجعل الأوزان والأنماط العالمية غير المستخدمة جديرة بالإزالة أولًا.
استخدم الطباعة المخصصة حيث تقدم قيمة علامة حقيقية، غالبًا في العناوين العرضية (display)، وفكّر في مجموعة نظامية للجسم العادي عندما يسمح التصميم بذلك. لا تفترض أن الخط المتغير أصغر دائمًا: قد يستبدل عدة ملفات ثابتة لكنه قد يكون أكبر من وجه ثابت واحد. قارن الأصول المضغوطة التي تطلبها المسارات بالفعل.
أزل العائلات والأوزان والمائل وخطوط الأيقونات التي لا تُستخدم على مستوى مسار مُختَبَر.
تأكد أن الرخصة تسمح بالتوصيل عبر الويب، والتقليل (subsetting)، والاستضافة الذاتية قبل تغيير البناء.
استخدم WOFF2 واصنع مجموعات مصغرة (subsets) دون حذف الحروف المطلوبة
ابدأ بـ WOFF2 كأساس للمتصفحات الحديثة. توصية W3C تصف WOFF2 كحزمة خطوط ويب مصممة للضغط الأفضل وفك الضغط السريع، وهي مدعومة في المتصفحات الكبرى. احتفظ بصيغة أخرى فقط لسبب مستند يتطلب متصفحات قديمة؛ وإلا فبديل مصمم جيدًا هو طريق التوافق الأأمن.
يوفر التقليل (subsetting) ملفًا أصغر يحتوي أشكال glyf محددة أو حروفًا مختارة. يمكن unicode-range ربط المجموعات النطاقية بحيث يختار المتصفح الملف الملائم أثناء مطابقة النص. ابنِ المجموعات المصغرة من صفحات حقيقية واللغات التي تدعمها، بما في ذلك علامات الترقيم والعملات والأسماء والنصوص القانونية والنصوص المدخلة من المستخدمين. الحروف المفقودة مشكلة صحة، وليست توفيرًا مقبولًا في البايت.
اختبر صفحات مترجمة تمثيلية ومدخلات النماذج، وليس عينات تصميم إنجليزية فقط.
تأكد أن unicode-range ونطاق الوزن/النمط لكل مجموعة مصغرة يتطابق مع الملف المنشور.
صمّم البديل وسياسة font-display معًا
خط الفallback هو ما يراه المستخدمون عندما لا يكون الوجه المخصص جاهزًا. اختره بمقاسات متقاربة، ثم قارن العناوين الحقيقية، والأزرار متعددة الأسطر، والتنقل، والجداول، والنماذج، والسلاسل الطويلة المترجمة. التفاوتات في العرض تغيّر التفاف النص؛ والاختلافات في ascent، descent، أو line gap تغيّر ارتفاع الكتل. كلاهما يمكن أن يحرك محتوى ظهر فعلاً في الصفحة.
font-display يحدد سلوك العرض بينما الوجه غير متاح. optional له فترة حظر قصيرة جدًا ولا يوجد له فترة swap، لذا قد يناسب نص الجسم عندما يكون البديل المستقر مرغوبًا في الزيارة الأولى. swap يعرض البديل سريعًا ويمكن لاحقًا تطبيق خط الويب، لكن استخدمه فقط حيث لا يسبب استبدال متأخر إعادة تدفق مزعجة. يجب أن تخدم block أو fallback سبب تصميم مُختَبَر، لا أن تكون افتراضيًا عامًا. قد يساعد CSS size-adjust في ضبط مقاييس البديل، لكن تحقق بصريًا من كل سكريبت ونطاق عرض مدعوم.
لا تجعل نص الدفع، الاسترداد، الحساب، السلامة، أو التنقل يعتمد على خط مخصص متأخر.
حرف بديل قد ينقل معنى خاطئ؛ عادةً ما تكون أيقونات SVG أكثر أمانًا لرموز الواجهة.
حسّن الاكتشاف، لكن قَيِّد preload وقيّم تدفق البيانات
قد يُكتشف وجه معلن فقط في ورقة أنماط خارجية بعد تنزيلها وتحليلها. يمكن لCSS الحرجة القابلة للصيانة أن تكشف عن تصريح ضروري مبكرًا؛ لا تقم بتضمين ثنائي الخط داخلية لأنها تكبّر المستند. بالنسبة لمنشأ طرف ثالث، قد يؤسس preconnect الاتصال مبكرًا. طلبات الخط هي موارد CORS، لذا تتطلب التسليم عبر أصلٍ آخر وعمليات preload معالجة crossorigin صحيحة.
preload هو تجاوز أولوية، ليس مفتاح تسريع شامل. قد يتنافس مع أعمال حاسمة أخرى وقد يحمّل وجهًا لا يحتاجه المسار أبدًا؛ كما أنه يتجاوز اختيار unicode-range. أصلح اكتشافًا متأخرًا أولًا، ثم قم بpreload لملف مثبت للعرض الأول فقط مستخدمًا عنوان URL الدقيق، as=font، وcrossorigin. تقول Google Fonts أن طلبات واجهة برمجة التطبيقات تتضمن عنوان IP للزائر، وURL المطلوب، ورؤوس HTTP، وreferer؛ وأن واجهة API الخاصة بها لا تضع أو تسجل ملفات تعريف الارتباط ولا تستخدم المعلومات المجمعة للملفات التعريفية أو الإعلانات الموجهة. الاستضافة الذاتية توقف تلقي Google لهذه البيانات لتلك التحميلات. قيّم التسليم، وإشعار الخصوصية، والاختصاص القضائي، والعقود، واطلب مشورة مؤهلة عند الحاجة.
قارن آثار ذاكرة التخزين الباردة وتأكد أن الملف المُحمّل مسبقًا يُستهلك على المسار.
وازن إعداد الاتصال، وقدرات التخزين المؤقت وCDN، وصيانة الأصول، وتدفق بيانات الزائر.
قم بترقيم إصدارات أصول الخط واحفظ تكوين CSS البديل المُختَبَر.
اختبر سلوك العرض وادِر الخطوط كاعتماد للمتانة
مع ذاكرة تخزين باردة، استخدم أدوات شبكة المتصفح لفحص سلسلة طلبات CSS إلى الخط، والتوقيت، والمنشأ، والتخزين المؤقت، والإخفاقات. كرّر على اتصالٍ مقيد، ثم قم بإبطاء أو حظر الطلب على الخط عمداً. النجاح يعني نصًا مقروءًا، وعناصر تحكم قابلة للاستخدام، ورموز دقيقة، وتخطيطًا متماسكًا قبل ظهور الوجه المخصص. اختبر التخطيطات الضيقة والحاسوبية الواقعية، والسلاسل الطويلة، وحالات الخطأ، ونص الموافقة، والأسعار، وكل سكريبت مدعوم.
في Chromium، سجِّل إعادة تحميل في لوحة Performance وتفقد مسار Layout Shifts؛ يمكن أن تحدد DevTools العناصر التي تحرّكت وتُحَرِّك التحوّل. يعد تحميل الخط سببًا معروفًا، لكن العنصر المتحرك ليس بالضرورة السبب الجذري، لذا قارن السجل مع تطبيق الخط. واجهة Layout Instability API خاصة بـ Chromium، ما يجعل الفحوصات البصرية عبر المتصفحات مهمة. ضمّن أصول الخط، وسلوك CORS، وسياسة التخزين المؤقت، والبدائل، ومسار التراجع في مراجعة الإصدار. وضع التدهور المقصود هو نص مقروء، لا محتوى فارغ أو تنقل مكسور.
قد يُخفي التخزين المؤقت الدافئ الطلب والمشكلة في العرض المبدئي.
أعد الفحص عندما تتغير الملفات، أو محتوى CMS، أو القوالب، أو المزودون، أو قواعد CDN.