رفع خطای Ensure text remains visible during webfont load در Page Speed Insights

یکی از رایج ترین خطاهایی که گزارش سرعت سایت با استفاده از lighthouse در بسیاری از سایت ها دیده میشن نحوه لود شدن فونت می باشد.

فایل صوتی مقاله

در واقع متن های سایت شما هنگامی که فونت در حال لود شدن است باید قابلیت دیده شدن داشته باشند و این هنگامی رخ می دهد که شما نحوه نمایش فونت در CSS را روی swap تنظیم کرده باشید مانند تکه کد زیر:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
  font-weight: 400;
  font-display: swap;
}

تنظیم کردن Font-display به swap در پوسته های مختلف وردپرس

برای تنظیم کردن مقدار swap در شیوه نمایش و لود فونت شما می بایست از تنظیمات قالب خود بخش تایپوگرافی شیوه نمایش را پیدا کرده و مقدار آن را به swap تغییر دهید. اما این گزینه با توجه به نوع پوسته تفاوت داشته و ممکن است در برخی پوسته ها در قسمت دیگری از تنظیمات گنجانده شده باشد.

به عنوان نمونه در قالب وودمارت این گزینه در بخش تنظیمات -> عملکرد -> فونت ها و آیکن ها قرار داشته و به راحتی قابلیت انجام دارد.

تنظیم کردن Font-display به swap در المنتور پرو

بسیاری از سایت های مختلف با صفحه ساز محبوب المنتور طراحی شده است. این صفحه ساز قابلیت فونت دلخواه داشته و شما می توانید فایل woff2 فونت خود را در بخش تنظیمات ان بارگذاری کرده و در طراحی صفحات از این فونت ها استفاده کنید. اما متاسفانه گزینه ای برای نحوه و سبک نمایش فونت ها در تنظیمات المنتور وجود نداشته و شما می بایست با تکنیک های خاصی این گزینه را فعال کنید.

یک راه ساده برای فعال سازی استفاده از تکه کد PHP است که می توانید آن را به صورت افزونه وردپرسی نوشته و در سایت خود اجرا کنید یا این تکه کد را در فایل function.php پوسته خود بارگذاری کنید. اما از آنجایی که پوسته آپدیت می شود این فایل هم پاک شده و کد شما از بین می رود. بنابراین بهترین راه نوشتن یک افزونه کوچک بوده تا تغییرات شما بعد از به روز رسانی آپدیت پاک نشود.

المنتور در آپدیت های اخیر خود اکشنی برای مدیریت نحوه لود شدن فونت اضافه کرده که می توان با استفاده از این اکشن به راحتی نحوه نمایش فونت را به swap تغییر داد.

add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
	return 'swap';
}, 10, 3 );

با استفاده از تکه کد بالا می توانید فونت های کاستوم شده خود را که در المنتور بارگذاری می شوند به صورت swap در مرورگر لود کرده و از خطای Ensure text remains visible during webfont load جلوگیری کنید.

توجه کنید بعد از قرار دادن تکه کد بالا حتما کش خود را خالی کرده و از قسمت ایرازهای المنتور دکمه بازسازی مجدد کتابخانه را بزنید.