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

هل تحصل على الخطأ " تأكد من بقاء النص مرئيًا أثناء تحميل Webfont " أثناء التحقق من إحصاءات سرعة صفحة Google ولا تعرف كيفية حل هذه المشكلة؟ بشكل عام ، أعرف كيفية حل هذه المشكلة على موقع ويب PHP أو HTML مخصص ، ولكن عندما يتعلق الأمر بـ WordPress ، فقد كافحت أيضًا.

لذلك هنا في هذا الدليل ، سنتحدث عن كيفية حل هذه المشكلة في WordPress (سأشارك أيضًا الخطوات لإصلاح هذه المشكلة في المواقع المخصصة المستندة إلى PHP و HTML) وزيادة نقاط سرعة صفحتك عن طريق إزالة هذا الخطأ.

لماذا يظهر خطأ "التأكد من بقاء النص مرئيًا أثناء تحميل خط الويب" في PageSpeed

عند اختبار موقع الويب الخاص بك على PageSpeed ​​Insight من Google ، ربما تكون قد رأيت مشكلة في الخطأ "تأكد من بقاء النص مرئيًا أثناء تحميل خط الويب" ، وعند النقر فوق الخطأ ، سيعرض عناوين URL الكاملة لملفات الخطوط.

كما ترى في الصورة أعلاه ، أتلقى أيضًا الخطأ "التأكد من بقاء النص مرئيًا أثناء تحميل Webfont" على موقع الويب هذا ، وعندما أقوم بالنقر فوقه ، سيعرض عناوين URL الكاملة لملفات Google Font.

لماذا يظهر خطأ؟

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

كيفية إصلاح وميض النص غير المرئي؟

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

يمكنك بسهولة حل هذه المشكلة عن طريق إضافة

 عرض الخط: مبادلة ؛

كود في الخاص بك الحالية

 @ font-face {

}

خاصية CSS.

ولكن ما هو @ font-face؟

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

 @ font-face {

عائلة الخطوط: Roboto ، sans-serif ؛

عرض الخط: مبادلة ؛ // ---> سيصلح هذه المشكلة.

نمط الخط: عادي ؛

وزن الخط: 400؛

src: url (Roboto.woff2) ؛

}

الآن نطبق هذا الخط في فقرة باستخدام ؛

 ص {

عائلة الخطوط: Roboto ، sans-serif ؛

حجم الخط: 18 بكسل ؛

}

عندما يتم تحميل موقع ويب ، فإنه يشير إلى أن علامة الفقرة بها خط " Roboto " مطبق ، ويبدأ على الفور في تنزيل الخط المستخدم في علامة الفقرة. حتى يتم تنزيل الخط ، يظل النص غير مرئي.

هذا هو السبب في أنه يظهر خطأ " ضمان بقاء النص مرئيًا أثناء تحميل خط الويب " في سرعة الصفحات وإضافة عرض الخط: مبادلة؛ في CSS @ font-face الحالي الخاص بك يمكنه حل هذه المشكلة.

كيفية إصلاح هذه المشكلة في ووردبريس

إذا كنت تستخدم WordPress ويظهر هذا الخطأ في إحصاءات سرعة الصفحة ، فيمكنك حل هذه المشكلة بسهولة باستخدام خطوات بسيطة. لقد قمت بمشاركة الخطوات لحل هذا الخطأ على كل من الخطوط المحلية وخطوط Google.

حل لخطوط جوجل

في البداية ، لن تضيف Google Fonts عرض الخط: swap؛ القاعدة على الخط الخاص بهم ، لكنهم الآن يدعمون معلمة استعلام جديدة لتطبيق font-display: swap؛ عن طريق إضافة المعلمة & display = swap في نهاية ملف خط google.

هنا كيف يبدو.

إذا كنت مطورًا للقوالب أو كنت تعرف كيفية تحرير ملفات السمات في WordPress ، فيمكنك بسهولة إضافة المعلمة & display = swap في ملف خط Google.

ولكن إذا لم تكن مرتاحًا لتحرير ملفات سمة WordPress ، فلا يزال بإمكانك استخدام العديد من المكونات الإضافية مثل Asset CleanUp لإضافة هذه المعلمة وحل مشكلة "ضمان بقاء النص مرئيًا أثناء تحميل Webfont".

كيفية حل هذه المشكلة باستخدام البرنامج الإضافي "Asset CleanUp"

لتطبيق المعلمة display = swap في ملف Google Fonts الخاص بك ، يجب عليك تنزيل وتثبيت المكوّن الإضافي Asset CleanUp من مكتبة WordPress المتوفرة مجانًا.

بمجرد تنزيل المكون الإضافي وتنشيطه ، انقر فوق خيار " Asset CleanUp " في لوحة إدارة WordPress الخاصة بك> ثم انقر فوق " الإعدادات " ضمن "Asset Cleanup" لفتح صفحة التحسين.

بمجرد دخولك إلى صفحة الإعدادات ، انقر فوق خيار " Google Fonts ". عند النقر فوق خيار Google Fonts ، فإنه سيفتح الإعدادات بشكل أكبر حيث يمكنك بسهولة إدارة الإعدادات المختلفة لتحسين ملفات خطوط google.

يمكن أن تشمل بعض هذه الإعدادات ؛

بمجرد دخولك إلى إعدادات ملفات خطوط Google ، في إعدادات " تطبيق عرض الخط: قيمة خاصية CSS " وقم بتغييرها من " عدم تطبيق (افتراضي) " إلى " مبادلة (الأكثر استخدامًا) " وسيضيف الأمر & display = مبادلة المعلمة لجميع ملفات خط جوجل الخاصة بك.

حل للموضوع وخطوط البرنامج المساعد

في معظم الأوقات ، يقوم قالب WordPress أو المكون الإضافي بتحميل خطوط أخرى مثل الخطوط الرائعة أو خطوط الرموز ، كما يعرض نفس المشكلة في Google PageSpeed ​​Insight.

هذا أيضًا حل سهل ولكنه يتطلب القليل من المعرفة بتحرير WordPress. إذا لم تكن مرتاحًا لتحرير الرموز ، فيمكنك أيضًا استخدام الإصدار المتميز من المكون الإضافي " Asset CleanUp Pro " لإضافة عرض الخط تلقائيًا: swap؛ خاصية CSS في قالب WordPress الخاص بك أو صفحات أنماط الملحقات.

لحل هذه المشكلة باستخدام Asset CleanUp Pro ، انقر فوق الخيار " Asset CleanUp " في لوحة إدارة WordPress الخاصة بك> ثم انقر فوق " الإعدادات " ضمن "تنظيف الأصول" لفتح صفحة التحسين.

بمجرد دخولك إلى صفحة " Asset CleanUp "> " Settings " ، انقر فوق خيار " Local Fonts " لفتح إعدادات التخصيص للخطوط المحلية.

بمجرد فتح إعدادات التخصيص " Local Fonts " في متصفحك ، حدد " swap (الأكثر استخدامًا) " من خيار التحديد المحدد ضمن " Apply font-display: CSS property value " لإضافة عرض الخط تلقائيًا: swap؛ في جميع أوراق الأنماط الخاصة بك.

تغليف

في هذا الدليل ، بذلنا قصارى جهدنا لشرح كيف يمكنك إصلاح مشكلة "التأكد من بقاء النص مرئيًا أثناء تحميل خط الويب" أو مشكلة "وميض النص غير المرئي" في أداة Pagepeed Insight.

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

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