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