تحميل خطوط الويب دون الإضرار بالأداء
لماذا يهم تحميل الخطوط
خطوط الويب ملفات يجب على المتصفح تنزيلها قبل أن يعرض النص بالنمط المقصود. تؤخر الخطوط الثقيلة أو المتأخرة ظهور النص المقروء، وقد يحرك الانتقال من الخط البديل إلى خط الويب عناصر التخطيط. التحميل الجيد يُبقي النص مقروءًا مبكرًا ومستقرًا.
الأهداف الرئيسية هي حجم أقل وطلبات مبكرة وتخطيط مستقر. وتتبع الأقسام التالية هذا الترتيب.
قلّل ما ترسله
- استخدم WOFF2. وهو صيغة خط مضغوطة تدعمها جميع المتصفحات الحالية.
- قسّم الخط إلى مجموعة جزئية. احذف الحروف التي لا تحتاج إليها. قد تكون الخطوط العربية كبيرة لكثرة الأشكال والحروف المركبة، فاحتفظ بالأحرف المستخدمة فقط.
- استخدم unicode-range. قسّم العائلة إلى ملفات، مثل اللاتينية والعربية، وصرّح بـ <code>;unicode-range<;/code>; في كل <code>;@font-face<;/code>;. ينزّل المتصفح الملف فقط حين تستخدم الصفحة أحرفه.
- قلّل العائلات والأوزان. كل وزن ونمط ملف إضافي. وغالبًا ما تكفي عائلتان بوزنين لكل منهما.
- فكّر في الخطوط المتغيرة. يغطي ملف واحد نطاقًا من الأوزان، وقد يكون أصغر من عدة ملفات ثابتة حين تحتاج إلى أوزان كثيرة.
- استضف الخطوط بنفسك. يجنّبك تقديم الخطوط من نطاقك اتصالًا إضافيًا بخادم طرف ثالث ويمنحك تحكمًا بالتخزين المؤقت.
تحقق من ترخيص الخط قبل تقسيمه أو تحويله. فبعض التراخيص تقيّد التعديل أو الاستضافة، وتوضح الخطوط مفتوحة المصدر عادة ما هو مسموح.
في العربية أبقِ الأوزان والأنماط المستخدمة في الواجهة عند الحد الأدنى، وتأكد أن المجموعة الجزئية ما تزال تحتوي على الأرقام وعلامات الترقيم والأحرف المستخدمة في محتواك.
تحكم في وقت التحميل والعرض
حمّل مسبقًا الخط المستخدم في الجزء الظاهر من الصفحة، وهو عادة خط النص الأساسي أو العنوان، ولا تحمّل غيره. تحميل كل شيء مسبقًا ينافس الموارد الحرجة الأخرى.
يحتاج رابط التحميل المسبق للخطوط إلى السمة <code>;crossorigin<;/code>; حتى لو كان الخط مستضافًا ذاتيًا.
القيمة swap
يعرض نصًا بخط بديل فورًا ثم يبدّله. يظهر النص مبكرًا لكن قد يتغير التخطيط.
خيار optional في العرض
يستخدم خط الويب فقط إن كان جاهزًا بسرعة كبيرة. لا انتقال متأخر، لكن الزائر الجديد قد يرى الخط البديل.
لا تناسب أي قيمة كل المواقع. تناسب swap النصوص الأساسية حيث القراءة أهم. وتناسب optional الحالات التي يكون فيها التغيير المتأخر أضر من الخط البديل. وثمة خيار ثالث هو <code>;fallback<;/code>; يمنح نافذة قصيرة للتبديل.
قلّل إزاحة التخطيط
اختر خطًا بديلًا قريبًا من خط الويب، ثم عدّله بواسطة الواصفات داخل <code>;@font-face<;/code>; للخط البديل: <code>;size-adjust<;/code>; و<code>;ascent-override<;/code>; و<code>;descent-override<;/code>;. تجعل المقاييس المتطابقة الانتقال شبه غير مرئي فتلتف الأسطر في المواضع نفسها.
اختبر على اتصال بطيء وراقب التحميل الأول لا إعادة التحميل من الذاكرة المؤقتة فقط.
وامنح العناوين والأزرار مساحة كافية حتى لا يحرّك تغيّر بسيط في عرض النص عناصر أخرى. ويساعد في ذلك ارتفاع سطر ثابت وحد أدنى معقول لارتفاع كتل النص.
المصادر
- MDN Web Docs. @font-face and font-display. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
- web.dev. Best practices for fonts. https://web.dev/articles/font-best-practices
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.