حل مشكلة Ensure Text Remain Visible During Webfont Load من أجل تسريع مدونة بلوجر

 

قد تقلق بشأن سرعة تحميل موقع الويب الخاص بك. عند التحقق من موقع الويب الخاص بك في أداة Google pagespeed، ستجد فرصة لجعل سرعة تحميل موقع الويب الخاص بك سريعة، 'Ensure Text Remain Visible During Webfont Load' أي بمعنى "ضمان بقاء النص مرئياً أثناء تحميل خط الويب". سأخبركم في هذا الدرس، ما معنى هذه المشكلة؟ وكيفية إصلاحها؟

ما معنى مشكلة "Ensure Text Remain Visible During Webfont Load"

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

طريقة التعرف على الروابط المسؤولة عن المشكلة

قبل إصلاح المشكلة، أولاً يجب أن تعرف الروابط المسؤولة. لهذا تحتاج إلى تدقيق موقع الويب الخاص بك في أداة Google pagespeed، ثم إنتقل إلى "Ensure Text Remain Visible During Webfont Load" ونسخ الأكواد الظاهرة. إفتح الآن صفحة تعديل HTML الخاصة بمدونتك وإبحث عن الأكواد التي نسختها من أداة Google pagespeed. قد يكون رابط خط خاص بـ Google أو رابط maxcdn.bootstrap.

طريقة أصلاح هذه المشكلة في مدونة بلوجر

أفضل طريقة يمكن القيام بها لحل هذه المشكلة وبحسب Google وهي عن طريق تضمين الكود التالي font-display: swap في كود @font-face الخاص بك.

@font-face {

  font-family: 'Pacifico';

  font-style: normal;

  font-weight: 400;

  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');

  font-display: swap;

}

بعدها قم بحفظ القالب.

هذا في حالة إضافة الخط كأكواد CSS، أما في حالة كان الخط مضاف الى مدونة بلوجر كرابط <Link> فيمكن إصلاح المشكلة من خلال الخطوات التالية:

ملاحظة: تأكد من أخذ نسخة إحتياطية لقالب مدونتك لتجنب فقدان البيانات.

• إفتح صفحة HTML الخاص بمدونتك وإبحث عن رابط خط Google والذي يبدو مثل هذا:

<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>

ملاحظة: قد يختلف رابط خط Google الخاص بك عن الرابط أعلاه، ولكن لا تقلق لأن الطريقة هي نفسها لجميع أنواع روابط خطوط Google.

• الآن قم بوضع &display=swap فقط بعد نوع الخط. انظر الكود المحدث في الأسفل.

<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css&amp;display=swap' rel='stylesheet' type='text/css'/>

• بعدها قم بحفظ القالب.

إصلاح روابط maxcdn.bootstrap

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

ملاحظة: قد يختلف رابط maxcdn.bootstrap الخاص بك عن الرابط أعلاه ولكن لا تقلق لأن الطريقة هي نفسها لجميع أنواع روابط maxcdn.bootstrap.

 

• إستبدل رابط maxcdn.bootstrap بالرابط التالي وضعه داخل وسم </body>.

<script src="https://kit.fontawesome.com/699d058cf1.js" crossorigin="anonymous"></script>

• بعدها قم بحفظ القالب. وقم بإعادة التحقق من موقع الويب الخاص بك في أداة Google pagespeed وستجد إن المشكلة قد إختفت وتم حلها بنجاح.

وللمزيد من التفصيل يمكنكم متابعة الفيديو في الأسفل...

رابط أداة Google pagespeed