جلسه ۲۸ – رفع ارور Ensure text remains visible during webfont load

سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش جی تی متریکس میزفا همراه شما هستیم. تو جلسه ۲۷ درباره رفع خطای Enable text compression صحبت کردیم و در این جلسه به آموزش برطرف کردن ارور Ensure text remains visible during webfont load در ابزار جی تی متریکس جدید می‌پردازیم. این خطا (همونطور که از اسمش مشخصه) به اهمیت محتوای متنی (Text) صفحه و بهینه لود شدن فونت‌های صفحه اشاره داره. اگه تو کدنویسی و مخصوصا CSS مهارت متوسطی هم داشته باشید، احتمالا بتونید این خطا رو برطرف کنید. در این مقاله ابتدا دلیل ایجاد خطای Ensure text remains visible during webfont load رو خواهیم گفت و با مفهوم FOIT آشنا می‌شیم و سپس روش‌هایی رو برای حل این مشکل به شما عزیزان آموزش می‌دیم.
لطفا تا پایان با میزفا همراه باشید.

خلاصه خطای Ensure text remains visible during webfont load

میزان سختی: ***
روی چه مواردی تاثیر می‌ذاره: CLS

علت ایجاد خطای Ensure text remains visible during webfont load چیست؟

اصولا فونت‌های تحت وب یا همون وب‌فونت‌ها تفاوت اساسی با فونت‌هایی که در کامپیوتر یا لپتاپ استفاده می‌کنیم دارند. برخلاف فونت‌های کامپیوتری که تو سیستم ما حاضر و آماده هستند، Webfont ها اول باید دانلود بشن تا قابل مشاهده باشند. از طرفی وقتی صفحه درحال لود شدنه، محتوای متنی (Text) حجم خاصی نداره و سریعا لود میشه. اما ممکنه دانلود و نمایش فونت‌های صفحه کمی طول بکشه. در این حالت بیشتر مرورگرها تا زمانی که فونت لود نشده، متن رو نمایش نمیدن. این باعث ایجاد تجربه کاربری ضعیف میشه و روی امتیاز Performance جی تی متریکس اثر منفی داره.
این موضوع باعث ایجاد مشکل بزرگ و مهمی به نام FOIT میشه که مخفف Flash of Invisible Text هست و به شرایطی گفته میشه که نوشته‌ها لود شدند، اما به دلیل حاضر نبودن وب‌فونت‌ها، تا چند لحظه برای کاربر قابل نمایش نیستند. موضوعی که ماهیت و علت خطای Ensure text remains visible during webfont load در جی تی متریکس هست.

نکته قابل توجه درباره ارور Ensure text remains visible during webfont load اینه که این خطا در بسیاری از موارد شاید فقط چند دهم ثانیه تاخیر ایجاد کنه. اما در نسخه آپدیت جی تی متریکس و همچنین ابزارهای پیشرفته‌ای مثل Lighthouse گوگل و سایر ابزارهای تست سرعت سایت همین دهم و صدم ثانیه‌ها هستند که تفاوت‌ها رو رقم می‌زنند. تو ویدئو زیر مشکل FOIT و خطای Ensure text remains visible during webfont load مشخص شده.

وقتی این مشکل در صفحه ما وجود داشته باشه، ممکنه نوشته‌ها برای کاربر نمایش داده نشه. درحالیکه تو این مدت زمان حتی میشه نوشته‌ها رو هایلایت کرد و این نشون دهنده اینه که متن صفحه آماده نمایش هست. البته مرورگرهای مختلف در چنین شرایطی عملکردهای مختلفی دارند. مثلا مرورگر Edge از یه فونت پیش فرض سیستمی استفاده می‌کنه تا فونت اصلی لود بشه. مرورگرهای Chrome و Firefox تا ۳ ثانیه متن رو نمایش نمیدن و اگه بعد از ۳ ثانیه هنوز هم فونت دانلود نشده باشه، از فونت سیستمی استفاده می‌کنند تا موقعی که فونت آماده بشه. مرورگر Safari هم مثل اغلب اوقات عملکرد خاص شرکت خودش رو داره و تا موقعی که فونت‌ها آماده نباشند، متن رو نمایش نمیده.

البته در شرایطی که از فونت سیستمی دیگه‌ای به‌صورت موقت به‌جای فونت اصلی استفاده بشه، مشکل دیگه‌ای پیش میاد که FOUT نام داره و مخفف Flash of Unstyled Text هست. در این حالت متن نمایش داده میشه، اما نوشته‌ها استایل کاملا درستی ندارند. در این حالت از شبیه‌ترین فونت به فونت اصلی که در دسترس باشه استفاده میشه. ویدئو زیر حالت FOUT رو نشون میده. توجه داشته باشید که FOUT نسبت به FOIT شرایط خیلی بهتری هست. چون کاربر می‌تونه نوشته‌ها رو ببینه.

چطور خطای Ensure text remains visible during webfont load را برطرف کنیم؟

برای بررسی خطای Ensure text remains visible during webfont load ابزار جی تی متریکس تمام وب‌فونت‌هایی که تو CSS مشخص شدند رو تشخیص میده و بررسی می‌کنه. اگه ویژگی font-display برای حتی یکی از فونت‌های صفحه با یکی از مقادیر block یا swap یا fallback یا optional تنظیم نشده باشه، ارور Ensure text remains visible during webfont load فعال میشه. با کلیک روی این خطا در منوی Structure جی تی متریکس میشه لیست این فونت‌ها رو مشاهده کرد. در ادامه راهکارهایی رو برای حل این مشکل به شما عزیزان آموزش می‌دیم.

۱. Preload کردن فونت‌ها

استفاده از Preload یا لود اولیه برای منابع صفحه باعث میشه مرورگر سریع‌تر از حالت عادی این منابع رو شناسایی و در نهایت لود کنه (البته نباید در استفاده از Preload زیاده روی کنیم و فقط برای منابع مهم‌تر هست). از این ویژگی میشه برای لود سریع‌تر فونت‌هایی که باید سریعا در صفحه نمایش داده بشن استفاده کرد. به این صورت که کد زیر رو در تگ Head قرار بدیم. در این کد به‌جای webfontname/ باید نام فونت مورد نظر و به‌جای format باید فرمت فونت (مثلا woff) رو قرار بدیم.

<link rel="preload" href="/webfontname" as="font" type="font/format" crossorigin>

۲. استفاده از ویژگی font-display

ویژگی font-display که قبل‌تر هم بهش اشاره کردیم، تعیین کننده این موضوع هست که در زمان لود صفحه فونت‌ها چطور نمایش داده بشن. اینکه هر کدوم از مقادیر مختلف این ویژگی باعث ایجاد چه عملکردی میشن رو تو جدول زیر مشخص کردیم.

نکته مثبت این روش اینجاست که در بیشتر مرورگرهای جدید استفاده از ویژگی font-display: swap باعث حل مشکل FOIT و برطرف کردن خطای Ensure text remains visible during webfont load در جی تی متریکس میشه.

همچنین برای سایت‌هایی که از وب‌فونت‌های گوگل استفاده می‌کنند، اضافه کردن display=swap& به انتهای URL وب‌فونت در کد CSS باعث بهینه سازی مشکل FOIT میشه. در اینجا به‌جای googlewebfonturl باید URL فونت مورد نظر رو قرار بدید.

<link href="googlewebfonturl&display=swap" rel="stylesheet">

۳. کار رو به متخصص یا تیم SEO بسپار

اگه مقاله رو خوندید و خوب فکر کردید اما هنوز نتونستید خطای Ensure text remains visible during webfont load رو برطرف کنید، پیشنهاد می‌کنیم کار رو به کاردان بسپارید. اگه تیم خوب می‌شناسید که هیچ ولی اگه دنبال یک تیم حرفه‌ای و همینطور دنبال خدمات خوب در زمینه سئو می‌گردید، می‌تونید خدمات سئو و بهینه سازی سایت میزفا رو بررسی کنید. کلی خدمات متنوع از جمله بهینه سازی سرعت سایت برای خدمت رسانی به شما عزیزان آماده کردیم.

جمع بندی

در این مقاله میزفا درباره روش حل مشکل Ensure text remains visible during webfont load در GTmetrix جدید صحبت کردیم. همونطور که گفتیم این خطا به بحث بهینه سازی فونت های سایت اشاره می‌کنه. امیدوارم این آموزش برای شما مفید بوده باشه. تو مقاله بعدی درباره خطای Keep request counts low and transfer sizes small صحبت خواهیم کرد.

اگه سوالی دارید در قسمت نظرات (پایین همین صفحه) بپرسید تا با کمال میل پاسخگوی شما عزیزان باشیم.