ربما لاحظتَ PageSpeed Insights الذي يُشير إلى ضرورة "ضمان بقاء النص مرئيًا أثناء تحميل خطوط الويب" عند اختبار سرعة موقعك الإلكتروني. قد يكون موقعك جاهزًا للعرض بواسطة متصفحك حتى قبل اكتمال تحميل خطوط الويب. لذلك، لن يتمكن المستخدمون من رؤية محتوى موقعك أو الوصول إليه حتى يتم تحميل خطوط الويب. خلال هذه الفترة، ستكون الخطوط مخفية عن الأنظار. تُعرف هذه المشكلة باسم " وميض النص غير المرئي" (FOIT) .
يمكن تحسين تجربة المستخدم من خلال ضمان استمرار ظهور النص أثناء تحميل خط الويب. يساعد ذلك على تجنب الصفحات الفارغة والتغييرات غير المرغوب فيها في التصميم.
كيف تؤثر عمليات تحميل خطوط الويب على أداء الصفحة؟
يؤثر ذلك بالطرق التالية:
- يؤثر على درجة PageSpeed Insights
- يؤثر على درجة تغيير التخطيط التراكمي
- درجات أول طلاء محتوى وأكبر طلاء محتوى (مؤشرات حيوية أساسية للويب)
- تجربة المستخدم ومعدلات التحويل
يؤثر غياب النصوص أيضًا على تجربة المستخدم أثناء تحميل خطوط الويب: فلا أحد يرغب في تصفح موقع ويب بصفحة فارغة. في غضون ثوانٍ معدودة، يستطيع المستخدمون تكوين فكرة جيدة عما إذا كان الموقع يحتوي على المعلومات التي يبحثون عنها أم لا، وذلك من خلال قراءة عنوانه الرئيسي ونصه.
من الضروري تجنب التغييرات المفاجئة في تخطيط الصفحة الناتجة عن خطوط الويب لتحسين درجة "تغيير التخطيط التراكمي". يضمن بقاء النص مرئيًا أثناء التحميل منع تحركات المحتوى غير المتوقعة (دون تدخل المستخدم). قد تتسبب خطوط الويب في تغييرات في التخطيط إذا ظهر نص غير مرئي بشكل متقطع عند تنزيله وعرضه.
كيفية التأكد من بقاء النص مرئيًا أثناء تحميل خطوط الويب
تُعرف هذه اللحظة تحديدًا باسم وميض النص غير المرئي (FOIT). وتظهر رسالة الخطأ "تأكد من بقاء النص مرئيًا أثناء تحميل خط الويب" بسبب هذا الوميض، الذي يُعدّ مسؤولًا عن ظهورها.
عرض الخط: تبديل
خاصية font-display هي مُعرّف CSS يُمكن الوصول إليه في جميع متصفحات الويب الحديثة. يعتمد هذا المُعرّف على ما إذا كان الخط قد تم تنزيله وتاريخ تنزيله لتحديد كيفية عرضه. على سبيل المثال، تستخدم القاعدة التي تستخدم @font-face خاصية font-display.
توجد العديد من المتغيرات المختلفة لكيفية عرض الخطوط، بما في ذلك الخطوط العريضة، والخطوط البديلة، والخطوط الاحتياطية، والخطوط الاختيارية. استخدم قيمة الخطوط البديلة لمنع حدوث خطأ FOIT، واستخدمها أيضًا لضمان ظهور النص على الشاشة بأسرع ما يمكن للمستخدم.
استخدم إضافة "Swap Google Fonts Display" في ووردبريس لأتمتة هذه العملية. يحتوي Elementor على ميزة مدمجة لتبديل خطوط جوجل. كما توفر إضافات تحسين أخرى مثل WP Rocket وFlyingpress وPerfmatters هذه الميزة بشكل افتراضي.
لتحميل الخطوط بشكل أسرع، استخدم الاتصال المسبق والتحميل المسبق:
<link rel='preload' href='/font.woff2' as='font' crossorigin>
سيؤدي هذا أيضًا إلى تقليل CLS.
يختتم
يشرح هذا الدليل كيفية إصلاح مشكلة "وميض النص غير المرئي" في أداة PageSpeed Insight من خلال ضمان بقاء النص مرئيًا أثناء تحميل خطوط الويب.
يُعدّ وقت تحميل الصفحة وسرعتها من العوامل المهمة لتوفير تجربة مستخدم جيدة، ويمكن أن يُحسّن حلّ هذه المشكلة التجربة بشكل ملحوظ. إذا لم تُعرض جميع محتويات الصفحة، فلن تُعتبر مُحمّلة. لذا، لتجنّب انقطاع الاتصال وتوفير التوازن والسرعة والاستقرار المطلوب للمستخدمين، يجب تقليل وقت تحميل محتوى الصفحة.
حسّن أداء موقعك على ووردبريس من خلال خدمات تحسين مواقع ووردبريس!
