كيفية ضمان بقاء النص مرئيا أثناء تحميل Webfont على WordPress؟

كيفية التأكد من بقاء النص مرئيا أثناء تحميل Webfont على WordPress

ربما تكون قد شاهدت تحذير PageSpeed Insights من "ضمان بقاء النص مرئيا أثناء تحميل خط الويب" عند اختبار سرعة موقع الويب الخاص بك. قد يكون موقع الويب الخاص بك جاهزا للرسم بواسطة متصفحك حتى قبل تنزيل خطوط الويب الخاصة بك بالكامل. لذلك ، لن يتمكن المستخدمون من رؤية المحتوى الخاص بك أو الوصول إليه حتى يتم تنزيل خط الويب الخاص بك. خلال هذا الوقت ، سيتم إخفاؤه عن الأنظار. يشار إلى ذلك باسم مشكلة وميض النص غير المرئي (FOIT ).

يمكن تحقيق تجربة مستخدم أفضل من خلال ضمان استمرار ظهور النص أثناء عملية تحميل خط الويب. يساعد على التخلص من الصفحات الفارغة وكذلك التغييرات غير المرغوب فيها في التخطيط.

ضمان-نص-يبقى-مرئي-أثناء-webfont-تحميل-PageSpeed-Insights-warning
تحذير رؤى PageSpeed

كيف تؤثر عمليات تحميل خط الويب على أداء الصفحة؟

يؤثر بالطرق التالية:

يؤثر غياب النص أيضا على تجربة المستخدم أثناء تحميل Webfont: لا أحد يحب الوصول إلى موقع ويب بصفحة فارغة. في بضع ثوان ، يمكن للمستخدمين الحصول على فكرة جيدة عما إذا كان الموقع يحتوي على المعلومات التي يبحثون عنها من خلال قراءة عنوانه الرئيسي ونصه أم لا.

من الضروري تجنب تحولات التخطيط المفاجئة التي تسببها خطوط الويب لتحسين وتحسين درجة التحول التراكمي للتخطيط. يتيح لك ضمان بقاء النص مرئيا أثناء التحميل منع تحركات المحتوى غير المتوقعة (بدون تفاعل المستخدم). يمكن أن تتسبب خطوط الويب في حدوث تحولات في التخطيط إذا يومض النص غير المرئي عند تنزيله وعرضه. 

كيفية التأكد من بقاء النص مرئيا أثناء تحميل خطوط الويب

يشار إلى هذه اللحظة الخاصة باسم وميض النص غير المرئي (FOIT). تظهر رسالة الخطأ "ضمان بقاء النص مرئيا أثناء تحميل Webfont" بسبب FOIT هذا ، المسؤول عن مظهره.

عرض الخط: تبديل

خاصية عرض الخط هي واصف CSS يمكن الوصول إليه في جميع متصفحات الويب المعاصرة. يبحث واصف عرض الخط فيما إذا كان قد تم تنزيل الخط أم لا وتاريخ تنزيله لتحديد كيفية عرض الخط. على سبيل المثال، تستخدم القاعدة التي تستخدم @font-face سمة عرض الخط.

هناك العديد من المتغيرات المميزة لكيفية عرض الخطوط ، بما في ذلك الكتلة والمبادلة والاحتياطي والاختياري. استخدم قيمة المبادلة لمنع FOIT من الحدوث ، واستخدم قيمة المبادلة لضمان ظهور النص على الشاشة بأسرع ما يمكن إنسانيا.

تنسيق مبادلة عرض الخط
سيؤدي تبديل عرض الخط إلى إصلاح مشكلة 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 الخاصة بنا!

المشاركات ذات الصلة

كومال بوثرا 2 فبراير، 2023

دراسة حالة: مابري للحلول التقنية

Mabry Tech هي شركة متخصصة في الاستشارات وتطوير الحلول المبتكرة للشركات. مابريس

دراسة حالة
كومال بوثرا 2 فبراير، 2023

المجال الإضافي

النطاق الإضافي هو نطاق ثانوي يمكنك إضافته إلى حساب الاستضافة الخاص بك. ملحق

استضافة مسرد المصطلحات
كومال بوثرا 2 فبراير، 2023

ما المقصود بالبحث العضوي؟

البحث العضوي هو عملية كسب حركة المرور إلى موقع الويب الخاص بك من خلال غير مدفوع أو "طبيعي"

مسرد مصطلحات ووردبريس

ابدأ مع Seahawk

اشترك في تطبيقنا لعرض أسعارنا والحصول على خصومات.