ينتشر استخدام الخطوط عبر معظم صفحات الويب وغالبًا ما يتضمن أخطاء. تؤثر العديد من هذه الأخطاء سلبًا على ميزانية أداء الويب. تهدف هذه المقالة إلى توفير معلومات حول استخدام خطوط الويب والمساعدة في تحسين أداء الويب لديك.
كما هو موضح في التسلسل الهرمي المطبق عند عرض أي صفحة ويب، يمكن لعناصر الخط تأخير عرض العناصر الأخرى حتى يتم تحميلها. تعد إدارة هذا التأخير بشكل صحيح أمرًا مهمًا لكل من التحول التراكمي للتخطيط (CLS) وإدراك المستخدم.
مشكلة تحميل الخط
وإلى أن يتم تحميل خطوط الصفحة، فإن رؤية الخطوط أثناء عملية عرض HTML وCSS تختلف من متصفح لآخر. فيما يلي ملخص لكيفية تعامل المتصفحات المختلفة مع هذا الموقف:
| المتصفح | السلوك الافتراضي إذا كان الخط غير جاهز... |
|---|---|
| حافة | يستخدم خط النظام حتى يصبح الخط جاهزًا. مبادلة خارج الخط. |
| الكروم | سيتم إخفاء النص لمدة تصل إلى 3 ثوان. إذا كان النص لا يزال غير جاهز، فاستخدم خط النظام حتى يصبح الخط جاهزًا. مبادلة خارج الخط. |
| برنامج فايرفوكس | سيتم إخفاء النص لمدة تصل إلى 3 ثوان. إذا كان النص لا يزال غير جاهز، فاستخدم خط النظام حتى يصبح الخط جاهزًا. مبادلة خارج الخط. |
| سفاري | إخفاء النص حتى يصبح الخط جاهزًا. |
لمعالجة هذه المشكلة دون الاعتماد على سلوك المتصفح، تم تقديم معلمة عرض الخط. حاليًا، 92% من المتصفحات تدعم معلمة عرض الخط.
ماذا يفعل عرض الخط؟
أثناء عملية تحميل الصفحة، يمكن أن يختلف مظهر الخطوط حتى يتم تحميلها بالكامل، اعتمادًا على المتصفح. على سبيل المثال، تقوم بعض إصدارات متصفح Safari بإخفاء النص حتى يتم تحميل الخط. ال عرض الخط: مبادلة تعمل معلمة CSS على توحيد هذا السلوك من خلال عرض النص باستخدام خط النظام حتى يتم تحميل ملفات الخطوط. بمجرد تحميل الخطوط، يتم تبديل خط النظام بالخط المقصود. فيما يلي مثال للاستخدام:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}تحميل الخطوط مسبقا
استخدام لتحميل الخطوط قبل مسار العرض الحرج يمكن أن يمنع الفجوات أثناء تحميل الخطوط.
علاوة: نهج الصناعة لاستخدام الخط
وفقا لبيانات مماثلة، دعونا نلقي نظرة على اتجاه هام ولمحة سريعة عن عالم الإنترنت. يوضح الرسم البياني الأول أدناه استخدام الخط في أعلى 10,000 صفحة، ويوضح الرسم البياني الثاني استخدام الخطوط في أفضل 100,000 موقع. دعونا نتفحص هذه الرسوم البيانية أولاً:
يوجد فرق 5% في استخدام Google Font وFont Awesome بين أفضل 10,000 موقع وأفضل 100,000 موقع. يخبرنا هذا أن أفضل 10,000 موقع قاموا بتحسين استخدام الخطوط لديهم. نوصي بدراسة هذا كموضوع جدير بالملاحظة. فكر في كيفية تنفيذ خطوط الويب باستخدام الحلول الخاصة بك.
المكافأة 2: إحصائيات استخدام Google Font وFont Awesome
بالإشارة إلى المكافأة الأولى، نقترح فحص الرسمين البيانيين اللذين يوضحان المدى الرقمي لمكتبات الخطوط الأكثر استخدامًا. عدد النطاقات الفريدة هنا يتجاوز الملايين، وهذه الملايين تمثل منافسيك في مجال تحسين محركات البحث (SEO).. إن استخدام هذه المكتبات بشكل أفضل وأمثل من غيرها يمكن أن يساعدك على التميز.
باتباع هذه النصائح وتحسين استخدام الخط، يمكنك تحسين أداء الويب وتجربة المستخدم بشكل كبير.
