رفع هشدار Ensure text remains visible during webfont load در وردپرس

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

این مقاله به پیامدهای هشدار «Ensure text remains visible during webfont load»، تأثیر آن بر تجربه کاربر (UX) و بهینه‌سازی موتور جستجو (سئو) و استراتژی‌های مختلف برای پرداختن به این مشکل را بررسی می‌کند.

هنگام انجام ممیزی عملکرد در وب‌سایت ما با استفاده از ابزارهای محبوبی مانند Google PageSpeed Insights، اغلب با هشدارهای مختلفی مواجه می‌شویم. اغلب، ما این هشدارها را نادیده می‌گیریم و از رسیدگی به آنها غفلت می‌کنیم، که می‌تواند برای UX، سئو، عملکرد وب‌سایت و طیف وسیعی از عوامل مرتبط مضر باشد.

---

درک هشدار “Ensure text remains visible during webfont load“:

اگر توسعه‌دهنده یا مالک وب‌سایت هستید، ممکن است در حین بررسی عملکرد با استفاده از PageSpeed Insights با این هشدار رایج مواجه شده باشید. این هشدار توصیه‌ای از Lighthouse است که هدف آن برجسته‌کردن مشکل قابل‌مشاهده بودن متن در صفحه وب در هنگام بارگیری است.

این مشکل به طور فزاینده‌ای رایج شده است؛ زیرا بسیاری از توسعه‌دهندگان و طراحان فونت‌های جذاب بصری را با استفاده از کتابخانه‌های فونت مدرن مانند فونت‌های Google، Font Awesome یا Adobe Fonts انتخاب می‌کنند. ازآنجایی‌که این فونت‌ها معمولاً روی دستگاه‌های کاربران نصب نمی‌شوند، باید قبل از رندر شدن در صفحه وب، از اینترنت دانلود شوند.

این فرایند دانلود ممکن است زمان ببرد و لایت‌هاوس را وادار می‌کند که این اخطار را صادر کند: “اطمینان حاصل کنید که متن در حین بارگذاری فونت وب قابل‌مشاهده است – Ensure text remains visible during webfont load” در اصل، این بدان معنی است که متن باید قابل‌مشاهده باشد، حتی اگر فونت وب هنوز به طور کامل بارگذاری نشده باشد.

دلیل اصلی برای اطمینان از دیده‌شدن متن در این مرحله بارگذاری، افزایش تجربه کاربر است. نمایش یک صفحه خالی در حین انتظار برای بارگیری فونت‌ها می‌تواند منجر به ناامیدی و تجربه منفی برای کاربران شود. بنابراین، Lighthouse بر اهمیت پرداختن به این هشدار به‌عنوان یک اولویت برای توسعه‌دهندگان و صاحبان وب‌سایت تأکید می‌کند.

---

فلش متن نامرئی (FOIT) چیست:

فلاش متن نامرئی (FOIT) یک اصطلاح رایج برای توصیف پدیده‌ای است که از فونت‌های وب در یک صفحه وب استفاده می‌شود. هنگامی که یک صفحه وب جدید را باز می‌کنید، مرورگر زمان زیادی را برای بارگذاری یک فونت وب صرف می‌کند؛

زیرا ابتدا باید فایل‌های فونت مربوطه خود را دانلود کند. چنین فونت‌هایی به طور پیش‌فرض در سیستم بازدیدکننده در دسترس نیستند، و بنابراین، متن آن فونت وب برای آن دوره بارگذاری نامرئی می‌ماند.

این دوره بارگیری می‌تواند قابل‌توجه باشد؛ زیرا آنها معمولاً فایل‌های بزرگ‌تری هستند. به این می‌گویند فلش متن نامرئی (FOIT). این مفهوم به‌ویژه با اخطار Lighthouse ما مرتبط است «Ensure text remains visible during webfont load» زیرا همان موضوع نامرئی‌بودن متن به دلیل بارگذاری فونت وب را نشان می‌دهد.

---

تکنیک‌هایی برای کاهش FOIT:

برای مبارزه با مسئله FOIT، چندین تکنیک می‌توان استفاده کرد، از جمله بارگذاری فونت و استفاده از ویژگی font-display. این ویژگی تضمین می‌کند که یک فونت بازگشتی در دسترس است، و اجازه می‌دهد متن بلافاصله درحالی‌که فونت وب در پس‌زمینه بارگذاری می‌شود، نمایش داده شود.

سه مقدار کلیدی برای نمایش فونت وجود دارد که باید در نظر گرفته شود:

• Swap: این گزینه فوراً فونت بازگشتی را در حین بارگذاری فونت وب نمایش می‌دهد. هنگامی که فونت وب در دسترس باشد، فونت جایگزین را به طور یکپارچه جایگزین می‌کند.
• Fallback: مشابه تعویض، این گزینه یک فونت بازگشتی را برای مدت کوتاهی (معمولاً حدود ۱۰۰ میلی‌ثانیه) نشان می‌دهد. اگر فونت وب در این مدت بارگذاری شود، نمایش داده می‌شود. اگر نه، فونت بازگشتی قابل‌مشاهده باقی می‌ماند.
• اختیاری: این مقدار رویکرد ملایم‌تری را ارائه می‌دهد و به مرورگر این امکان را می‌دهد تا بر اساس عملکرد بارگیری تصمیم بگیرد که آیا از فونت وب استفاده کند یا بازگشت. اگر بارگذاری فونت خیلی طول بکشد، ممکن است به فونت بازگشتی بچسبد.

با پیاده‌سازی این تکنیک‌ها، می‌توانید دید متن را در حین بارگذاری فونت وب به طور قابل‌توجهی بهبود بخشید، در نتیجه تجربه کاربر را افزایش داده و به طور بالقوه عملکرد سئو سایت خود را افزایش دهید.

در پایان، پرداختن به هشدار «Ensure text remains visible during webfont load» برای بهبود تجربه کلی کاربر در وب‌سایت شما ضروری است. با درک مفاهیم FOIT و استفاده از استراتژی‌های مناسب نمایش فونت، می‌توانید تجربه مرور یکپارچه‌تری را برای کاربران خود ایجاد کنید. این نه‌تنها به حفظ بازدیدکنندگان کمک می‌کند، بلکه تأثیر مثبتی بر سئو و معیارهای عملکرد وب‌سایت شما خواهد داشت.

اجرای این بهترین شیوه‌ها در نهایت منجر به فعالیت آنلاین حرفه‌ای‌تر می‌شود.

---

از FOIT بیشتر بدانید:

برای رفع مشکل FOIT، می‌توان از تکنیک‌های متعددی استفاده کرد، از جمله ویژگی‌های فونت پیش بارگذاری یا نمایش فونت که اطمینان حاصل می‌کند که فونت بازگشتی در دسترس است که می‌تواند بلافاصله متن را نمایش دهد و در این بین، فونت وب می‌تواند به درستی بارگذاری شود و سپس نمایش داده شود.

سه ویژگی مختلف نمایش فونت وجود دارد: swap، fallback و اختیاری.

بیایید به طور خلاصه هر یک از اینها و چگونگی تأثیر آنها بر FOIT را بررسی کنیم.

1. Font-display: swap

بیایید به طور خلاصه بررسی کنیم که چگونه می‌توانیم این ویژگی را در سطح کد به سایت وردپرس اضافه کنیم.

در فایل CSS پروژه خود که در آن فونت وب شما در حال بارگذاری است، می‌توانید Font-display: swap را در داخل قانون font-face@ که فونت وب را بارگیری می‌کند، اضافه کنید. ویژگی @font-face در داخل فایل CSS شما چیزی شبیه به این خواهد بود:

این به شما کمک می‌کند تا FOIT را برطرف کنید و در نتیجه، دیگر هشدار «Ensure text remains visible during webfont load» را در Google Lighthouse PageSpeed Insights نخواهید دید.

---

2. Font-display: fallback

این ویژگی مشابه Font-display: swap ، اما برای حل مشکل FOIT یک سطح جلوتر است. بنابراین، بیایید فرض کنیم که فونت وب که باید دانلود شود در دسترس نیست، پس چه اتفاقی خواهد افتاد؟ این دقیقاً همان جایی است که font-display: fallback وارد بازی می‌شود. تقریباً همان کاری است که ویژگی swap انجام می‌دهد، با این تفاوت که در مواردی که فونت وب در دسترس نیست یا نمی‌توان به‌درستی دانلود کرد، موارد استفاده را نیز مدیریت می‌کند.

کاری که انجام می‌دهد این است که به‌سادگی به مرورگر می‌گوید که به استفاده از فونت بازگشتی ادامه دهد، فقط درصورتی‌که فونت وب که باید دانلود شود به دلایل نامعلوم یا نامعلومی در دسترس نیست.

استفاده از font-display: اگر فونت وب زمان قابل‌توجهی برای بارگیری طول بکشد، بازگشت ممکن است باعث فلش متن بدون استایل (FOUT) شود؛ زیرا فونت بازگشتی تا زمانی که فونت وب آماده شود نمایش داده می‌شود.

---

3. Font-display: optional

این ویژگی مشابه font–display عمل می‌کند: بازگشت، به جز در اینجا، به مرورگر دستور داده می‌شود که از فونت وب فقط در صورت موجود بودن استفاده کند، اما در غیر این صورت از فونت بازگشتی استفاده کند. معنای اصلی آن این است که فرض کنید، اگر فونت وب زمان زیادی برای بارگیری طول بکشد، مرورگر ممکن است تصمیم بگیرد که اصلاً فونت بازگشتی را نمایش ندهد، که در نتیجه می‌تواند منجر به FOIT شود.

به‌طورکلی، اگر تمام این سه ویژگی را با هم مقایسه کنید، به نظر می‌رسد font-display: swap بهترین ویژگی برای غلبه بر مشکل FOIT است، به دنبال آن font–display: fallback، که اگر فونت وب یک اشکال داشته باشد، اشکال دارد که FOUT دریافت کند. زمان مناسب برای بارگیری و سپس نمایش فونت: اختیاری است. انتخاب بین font-display: backback یا font-display: اختیاری است و به ترجیح شما بستگی دارد.

---

چگونه UX و سئو تحت‌تأثیر متن نامرئی در هنگام بارگذاری وب فونت قرار می‌گیرند؟

UX (تجربه کاربر) و سئو (بهینه‌سازی موتور جستجو) دو مورد از مهم‌ترین عوامل برای هر وب‌سایت مدرن امروزی هستند و دانستن اینکه چگونه این هر دو تحت‌تأثیر متن نامرئی در حین بارگذاری فونت وب قرار می‌گیرند بسیار مهم است. بیایید هر دوی این موارد را در زیر بررسی کنیم.

UX (تجربه کاربری):

دیدن یک متن نامرئی می‌تواند تبدیل به یک کابوس برای کاربر نهایی شود. هیچ بازدیدکننده‌ای دوست ندارد از صفحه وب شما بازدید کند و متن نامرئی یا برخی تغییرات غیرقابل‌توضیح و تغییرات طرح را ببیند؛ زیرا فونت وب در پس‌زمینه بارگذاری می‌شود. این مطمئناً منجر به تجربه کاربر نهایی ضعیف می‌شود و می‌تواند بازدیدکنندگان سایت شما را ناامید کند و شاید دیگر هرگز از سایت شما بازدید نکند.

متن نامرئی خواندن محتوای یک صفحه وب را برای کاربران بسیار دشوار می‌کند، به‌خصوص اگر متن بخش مهمی از تجربه کاربر باشد، مانند پیوندهای ناوبری یا سرفصل‌ها، دکمه‌های فراخوان و غیره.

معیارهایی مانند LCP (بزرگ‌ترین رنگ محتوا)، CLS (تغییر چیدمان تجمعی) و FID (تأخیر ورودی اول) سه معیار کلیدی هستند که تجربه کاربر نهایی یک صفحه وب را تعیین می‌کنند، از جمله سرعت بارگیری و واکنش آن به تعاملات کاربر. متن نامرئی بر هر دو این معیارها و سایر معیارهای مشابه کاملاً نامطلوب تأثیر می‌گذارد.

بیایید تأثیر متن نامرئی بر آنها را بررسی کنیم:

۱. بزرگ‌ترین رنگ محتوایی (LCP)

فرض کنید یک صفحه وردپرس دارید که از برخی از فونت‌های وب استفاده می‌کند که به طور پیش‌فرض در سیستم بازدیدکننده موجود نیستند. بنابراین، هنگامی که بازدیدکننده از صفحه وب شما بازدید می‌کند، مرورگر آنها شروع به دانلود فایل‌های فونت می‌کند قبل از اینکه بتواند متنی را که از آن فونت‌ها استفاده می‌کند، ارائه دهد.

اگر در زمانی که مرورگر در حال دانلود فونت‌های وب است، متن نامرئی در صفحه وب وجود داشته باشد، مرورگر ممکن است هنوز منتظر بماند تا فایل‌های فونت دانلود شود تا بتواند متن قابل‌مشاهده را روی صفحه‌نمایش دهد.

در نتیجه، اگر بزرگ‌ترین رنگ یک متن باشد، ممکن است تأخیر قابل‌توجهی در LCP وجود داشته باشد؛ زیرا مرورگر باید منتظر بماند تا فایل‌های فونت ابتدا دانلود شود تا بتواند بزرگ‌ترین محتوای قابل‌مشاهده را در صفحه‌نمایش دهد.

۲. تغییر چیدمان تجمعی (CLS)

متن نامرئی در حین بارگذاری وب فونت به طرق مختلف بر روی تغییر چیدمان تجمعی (CLS) تأثیر منفی می‌گذارد. برای کمک به درک بهتر، اجازه دهید فرایند بارگذاری صفحه وب را مثال بزنیم. هنگامی که یک صفحه وب بارگیری می‌شود، مرورگر باید تمام منابع موردنیاز برای نمایش آن صفحه را دانلود و ارائه کند، از جمله فونت‌های سفارشی که ممکن است در آن صفحه استفاده شود.

درصورتی‌که فونت سفارشی در دسترس نباشد، مرورگر ممکن است از یک فونت بازگشتی استفاده کند که می‌تواند باعث شود متن متفاوت از زمانی که فونت سفارشی بارگیری می‌شود ظاهر شود. در نتیجه، هنگامی که فونت سفارشی بارگیری می‌شود، می‌توان شاهد جابه‌جایی‌های غیرمنتظره چیدمان بود.

۳. اولین تأخیر ورودی (FID)

معمولاً FID تحت‌تأثیر بارگذاری فونت قرار نمی‌گیرد. این به این دلیل اتفاق می‌افتد که عناصر متن، حتی اگر به‌درستی ارائه نشده باشند، همچنان می‌توانند تعاملی باشند.

---

چگونه متن نامرئی در حین بارگذاری وب فونت بر امتیاز PageSpeed Insights Google تأثیر می‌گذارد؟

امتیاز PageSpeed Insights Google بر اساس عوامل مختلفی از جمله LCP، CLS، FID و برخی معیارهای دیگر محاسبه می‌شود. قبلاً دیدیم که چگونه متن نامرئی بر LCP و CLS تأثیر منفی می‌گذارد. اگر فونت‌های وب در یک صفحه وب باعث تأخیر منفی در این معیارها شوند، احتمالاً PageSpeed تحت‌تأثیر منفی قرار می‌گیرد، حتی اگر به نظر برسد که صفحه به‌سرعت روی سطح بارگذاری می‌شود.

به‌طورکلی، می‌توانیم ببینیم که متن نامرئی نقش مهمی در تأثیر منفی بر امتیاز کلی PageSpeed Insights برای یک صفحه وب دارد.

به طور خلاصه، تأثیر متن نامرئی در حین بارگذاری فونت وب برای UX نامطلوب است.

---

سئو (بهینه‌سازی موتور جستجو):

برای درک اینکه چگونه متن نامرئی در حین بارگذاری فونت وب بر سئو تأثیر می‌گذارد، باید به‌طورکلی بدانیم که موتورهای جستجو چگونه وب‌سایت‌ها را رتبه‌بندی می‌کنند. موتورهای جستجو از محتوای یک صفحه وب برای تعیین اینکه آن صفحه در مورد چیست و به‌درستی ایندکس می‌شود استفاده می‌کنند.

به‌طورکلی، اثر زیاد نخواهد بود؛ زیرا این متن نامرئی فقط در طول دوره بارگذاری باقی می‌ماند و پس از آن همه چیز عادی می‌شود. ممکن است درصورتی‌که فونت به‌درستی بارگیری نشود و بعداً نامرئی بماند یا اینکه نمایش متن زمان زیادی طول بکشد تأثیر بگذارد.

بااین‌حال، تأثیر دیگری نیز مهم است: UX بد (بخش قبلی) به معنای سیگنال‌های بازدیدکننده بد و امتیازات پایین CWV و PageSpeed است. همه اینها بر سئو تأثیر منفی می‌گذارد؛ زیرا الگوریتم‌های رتبه‌بندی جستجو سیگنال‌های کاربر و معیارهای عملکرد را هنگام رتبه‌بندی نتایج در صفحه نتایج جستجو در نظر می‌گیرند. به‌طورکلی، هر دو UX و سئو تحت‌تأثیر منفی متن نامرئی در طول بارگذاری فونت وب قرار می‌گیرند.

بنابراین، ما باید سعی کنیم دراسرع‌وقت هشدار «Ensure text remains visible during webfont load» را اصلاح کنیم، در غیر این صورت، در صورت عدم انجام این کار، باید با عواقب منفی زیادی مواجه شویم.

---

چگونه مطمئن شویم که متن در حین بارگذاری وب فونت قابل‌مشاهده است؟ (رفع مشکل وردپرس)

ما بحث مناسبی پیرامون خود مشکل و اصطلاحات و مفاهیم مرتبط با آن داشته‌ایم. حالا بیایید عمیقاً به راه‌حل‌ها یا راه‌حل‌های این مشکل بپردازیم. دوراه وردپرس برای رفع مشکل وجود دارد. یکی تعمیر دستی و دیگری رفع آن با استفاده از افزونه وردپرس است. بیایید هر دوی آنها را در زیر به‌اختصار بررسی کنیم:

به‌صورت دستی رفع کنید:

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

۱. یک فونت بازگشتی را مشخص کنید:

یک راه عالی برای مقابله با این مشکل، تعیین یک فونت بازگشتی است که تا زمانی که فونت وب به پایان برسد استفاده می‌شود. اجرای آن نیز ساده است. تنها کاری که باید انجام دهید این است که یک قانون CSS به شیوه‌نامه وب‌سایت خود (CSS) اضافه کنید که ویژگی font-family را بر روی یک فونت سیستمی معمولی در دسترس مانند Arial یا Helvetica یا هر فونت سیستمی از انواع sans-serif که در دسترس است تنظیم می‌کند. دستگاه

قطعه کد زیر به شما نشان می‌دهد که چه قانون CSS را در فایل CSS خود اعمال کنید.

۲. از ویژگی font-display در قانون CSS font-face استفاده کنید:

قبلاً صحبت کردیم که چگونه ویژگی‌های مختلف نمایش فونت، یعنی تعویض، بازگشت و اختیاری، به ما کمک می‌کنند تا از FOIT جلوگیری کنیم، و در نتیجه، به ما کمک می‌کنند تا از هشدار «Ensure text remains visible during webfont load» خلاص شویم. اگر جزئیات بیشتری می‌خواهید، لطفاً دوباره به آن بخش بروید.

۳. فونت وب را از قبل بارگذاری کنید:

این یک تکنیک مؤثر است؛ زیرا با بارگیری از قبل فونت وب، آن را دانلود می‌کنید و از قبل در دسترس قرار می‌دهید تا زمان بارگذاری فونت وب در حین بارگذاری صفحه صرف نشود.

پیاده‌سازی این بسیار ساده است. تنها کاری که باید انجام دهید این است که یک عنصر پیوند را به سر سند HTML خود اضافه کنید که به فایل فونت اشاره می‌کند.

بیایید یک قطعه کد را ببینیم که به‌صورت بصری به ما نشان می‌دهد که چه عنصر پیوندی را در سر سند HTML خود اضافه کنیم.

۴. از فونت‌های سیستمی استفاده کنید:

کل مشکل زمانی ایجاد می‌شود که از فونت‌های وب استفاده می‌کنید، درست است؟ پس چطور می‌شود که از شر فونت‌های وب به‌عنوان فونت‌های اصلی خلاص شویم و فونت‌های سیستمی (فونت‌هایی که از قبل در دستگاه کاربر نهایی موجود است) را به‌عنوان فونت‌های اصلی اختصاص دهیم؟ این به‌سادگی مشکل را از بین می‌برد.

اما برای این یک معامله وجود دارد. فونت‌های سیستمی گاهی اوقات از نظر زیبایی‌شناختی چندان خوشایند نیستند، بنابراین باید با این مبادله کوچک کنار بیایید. اما این چیزی است که به نظر می‌رسد؛ زیرا همه چیز به ترجیح شما و نوع محتوای صفحه وب‌سایت شما بستگی دارد.

با استفاده از فونت‌های سیستم، می‌توانیم اطمینان حاصل کنیم که متن قابل‌مشاهده باقی می‌ماند حتی اگر بارگذاری فونت‌های وب بیشتر طول بکشد. قطعه کد زیر به ما نشان می‌دهد که چگونه می‌توانید فایل CSS خود را تغییر دهید تا لیستی از فونت‌های سیستم را به‌عنوان فونت‌های اولیه پیش‌فرض اضافه کنید.

۵. از زیر مجموعه‌های فونت استفاده کنید:

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

این کاهش نه‌تنها زمان بارگذاری فونت‌های وب را تسریع می‌کند، بلکه خطر ناپدیدشدن متن یا ایجاد فلاش متن نامرئی (FOIT) را در طول فرایند بارگذاری به حداقل می‌رساند. بسیاری از سرویس‌های فونت وب، مانند فونت‌های گوگل، گزینه‌هایی را برای تولید آسان این زیرمجموعه‌های فونت ارائه می‌دهند و به توسعه‌دهندگان اجازه می‌دهند تا سایت‌های خود را به طور مؤثر بهینه کنند.

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

---

آدرس‌دهی متن نامرئی با افزونه‌های وردپرس:

برای کسانی که به‌جای بهینه‌سازی دستی راه‌حل‌های خودکار را ترجیح می‌دهند، افزونه‌های وردپرس می‌توانند به طور مؤثری مشکل متن نامرئی را در حین بارگذاری فونت وب برطرف کنند. افزونه‌های متعددی در دسترس هستند،

ویژگی‌هایی که یک افزونه باید داشته باشد تا مناسب این کار باشد:

1. بارگیری قلم بحرانی: این ویژگی به طور پیش‌فرض فعال است و اغلب به‌تنهایی برای حل مشکل کافی است.
2. Font Swap: این گزینه به طور پیش‌فرض غیرفعال است، اما می‌توان آن را برای نمایش موقت فونت بازگشتی در حین بارگیری فونت اصلی وب فعال کرد.
3. Font Lazy Loading: همچنین به‌صورت پیش‌فرض غیرفعال است، این تکنیک فونت‌ها را فقط در صورت نیاز بارگیری می‌کند که می‌تواند عملکرد را افزایش دهد.

---

درحالی‌که بارگذاری فونت معمولاً مؤثر است، سناریوهای خاصی وجود دارد که ممکن است کافی نباشد. در اینجا چند موقعیت وجود دارد که ممکن است تکنیک‌های اضافی لازم باشد:

• وزن‌ها و سبک‌های چندگانه فونت: زمانی که فونت وب شما دارای وزن یا سبک‌های متعددی باشد، زمان بارگذاری می‌تواند افزایش یابد، حتی با فعال‌بودن بارگذاری مهم فونت. در چنین مواردی، فعال‌کردن مبادله فونت به یک فونت بازگشتی اجازه می‌دهد تا زمانی که فونت وب لازم به طور کامل بارگیری شود، نمایش داده شود و اطمینان حاصل شود که متن برای کاربران قابل‌مشاهده است.
• وب‌سایت‌های غنی از محتوا: یک وب‌سایت با محتوای گسترده ممکن است در بارگیری فونت‌های مهم با تأخیر مواجه شود که منجر به‌مواجهه کاربران با قسمت‌های متن خالی شود. برای مبارزه با این موضوع، بارگذاری تنبل فونت را می‌توان پیاده‌سازی کرد و به فونت‌ها اجازه می‌دهد تا در صورت درخواست بارگیری شوند، زیرا کاربران در صفحه حرکت می‌کنند. این روش زمان بارگذاری اولیه را کاهش می‌دهد و دسترسی کلی به محتوا را بهبود می‌بخشد.
• فونت‌های وب غیربحرانی: اگر یک فونت وب نقش حیاتی در تجربه کاربر ایفا نمی‌کند، استفاده از تعویض فونت برای جایگزینی آن با یک فونت سیستمی یا ایمن وب می‌تواند مفید باشد. این تضمین می‌کند که متن به‌درستی نمایش داده می‌شود، حتی اگر فونت وب بارگیری نشود.

در این سناریوها، تکنیک‌هایی مانند جابه‌جایی فونت و بارگذاری تنبل می‌توانند به طور مؤثر مشکل متن نامرئی را کاهش دهند.

---

هنوز نمی‌توانید مشکل بارگذاری وب فونت را برطرف کنید؟

علاوه بر راه‌حل‌های بالا، اگر همچنان با مشکل بارگذاری فونت وب مواجه هستید و با یکی از مشکلات رایج زیر مواجه هستید، این بخش ارزش خواندن را برای شما دارد.

اطمینان حاصل کنید که متن در حین بارگذاری وب فونت – Google Fonts قابل‌مشاهده است:

هنگام استفاده از فونت(های وب سفارشی) گوگل، ممکن است با همان اخطار مواجه شده باشید: «Ensure text remains visible during webfont load». این معمولاً به این دلیل اتفاق می‌افتد که ابتدا فایل فونت باید دانلود و بارگیری شود تا فونت نمایش داده شود، زمان دانلود طولانی است یا حتی ممکن است فونت بارگیری نشود و در نتیجه ممکن است متن محتوا نامرئی باشد. یا با فونت جایگزین نمایش داده شود.

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

1. از ویژگی “font-display” استفاده کنید
2. از فونت‌های سیستمی یا فونت‌های ایمن وب به‌عنوان جایگزین استفاده کنید
3. با استفاده از زیرمجموعه‌های فونت، اندازه فایل فونت را کاهش دهید
4. اطمینان حاصل کنید که متن در طول بارگذاری وب فونت قابل‌مشاهده است
5. انتخاب یک فونت وب مناسب برای آیکون‌ها کاملاً به شما بستگی دارد. این می‌تواند فونت عالی، نمادهای متریال یا مجموعه آیکون‌های محلی باشد. بااین‌حال، از هر کتابخانه قلمی که استفاده می‌کنید، فقط
6. مطمئن شوید که فونت(ها) به‌خوبی بهینه شده است، به‌درستی و سریع بارگیری می‌شود، و هیچ خطایا اخطاری قابل‌توجهی مانند «Ensure text remains visible during webfont load» ایجاد نکنید.

---

استفاده از Font Awesome:

Font Awesome فونت‌ها را نیز می‌توان به‌گونه‌ای مورداستفاده قرارداد که این هشدار را دریافت نکنید. هنگام استفاده از Font Awesome می‌توانید از تکنیک‌های زیر برای خلاص‌شدن از شر این هشدار استفاده کنید.

۱. از اسکریپت بارگیری ناهم‌زمان Font Awesome استفاده کنید:

Font Awesome یک اسکریپت بارگیری ناهم‌زمان در اختیار ما قرار می‌دهد که فونت(های) وب را جدا از بقیه محتوای صفحه وب بارگیری می‌کند، که می‌تواند به جلوگیری از مسدودشدن رندر متن کمک کند.

شما به‌سادگی می‌توانید این روش اسکریپت را با افزودن اسکریپت زیر در قسمت head فایل HTML خود پیاده‌سازی کنید.

توجه: شما باید «your_kit_id» را با ID کیت فونت خود جایگزین کنید.

۲. فونت‌های بازگشتی را در پشته فونت تعریف کنید:

بیایید فرض کنیم که فونت‌های وب Font Awesome بارگیری نمی‌شوند یا به دلایلی مسدود می‌شوند. اکنون در این مورد، به‌جای فونت‌های وب که به دلایل شناخته شده یا ناشناخته بارگیری نشدند، به چند فونت بازگشتی برای نمایش نیاز داریم. می‌توانید لیستی از فونت‌های بازگشتی را در پشته فونت تعریف کنید. آن‌ها می‌توانند فونت‌های سیستمی یا فونت‌های ایمن وب باشند که در اکثر دستگاه‌ها در دسترس هستند.

بیایید ببینیم چگونه می‌توانیم با کمک یک قطعه کد کوچک این کار را انجام دهیم که کدی را که باید به فایل CSS شما اضافه شود در زیر تعریف می‌کند:

با افزودن چنین فونت بازگشتی، به‌جای فونت awesome مقداری کاراکتر، به‌عنوان‌مثال حرف “i” نشان داده می‌شود. خوب نیست، اما بهتر از هیچ، حداقل نشان می‌دهد که برخی از نمادها وجود دارد.

3. Font Awesome CSS را از قبل بارگذاری کنید
راه‌حل دیگر می‌تواند این باشد که Font Awesome CSS را از قبل بارگذاری کنید تا فونت‌های وب سریع‌تر بارگیری شوند و شانس FOUT (Flash of Unstyled Text) کاهش یابد.

قطعه کد زیر نحوه بارگذاری Font Awesome CSS را از طریق اسکریپت تگ پیوند نشان می‌دهد.

---

اطمینان حاصل کنید که متن در حین بارگذاری فونت وب قابل‌مشاهده است ( فونت‌های محلی و فارسی):

به طور معمول، این هشدار عمدتاً مربوط به فونت‌های وب است. بااین‌حال، اگر هنوز در حین استفاده از فونت‌های محلی با این هشدار مواجه می‌شوید، مراحل زیر ممکن است به شما در حذف آن کمک کند:

1. بارگذاری فونت‌های محلی خود را بهینه کنید:
   استفاده از یک کتابخانه بارگذاری فونت مانند FontFaceObserver را برای بارگیری فونت‌های محلی خود به‌صورت ناهم‌زمان در نظر بگیرید. این روش به فونت اجازه می‌دهد تا در پس‌زمینه بارگذاری شود درحالی‌که متن با استفاده از فونت بازگشتی نمایش داده می‌شود و اطمینان حاصل می‌کند که متن در طول فرایند بارگیری فونت قابل‌مشاهده است.
2. اندازه فونت‌های محلی خود را کاهش دهید:
   فایل‌های فونت بزرگ می‌توانند به طور قابل‌توجهی رندر متن را به تأخیر بیندازند. شما می‌توانید اندازه فونت‌های محلی خود را با استفاده از یک ابزار زیرمجموعه فونت، مانند FontSquirrel، برای حذف هر گونه کاراکتر غیرضروری از فایل فونت، به حداقل برسانید.
3. از CDN استفاده کنید:
   استفاده از یک شبکه تحویل محتوا (CDN) می‌تواند یک استراتژی مؤثر باشد. CDN ها محتوای وب را در چندین سرور توزیع می‌کنند و در نتیجه زمان بارگذاری سریع‌تر می‌شود که عملکرد و قابلیت اطمینان وب‌سایت را بهبود می‌بخشد. فونت‌های محلی را می‌توان در حافظه پنهان ذخیره کرد و از طریق CDN ارائه کرد، درست مانند CSS محلی، فایل‌های جاوا اسکریپت، تصاویر یا حتی کل صفحات وب. محتوای ارائه شده از طریق CDN عموماً سریع‌تر از محتوای ارائه شده از سرور خود وب‌سایت است.
4. از فونت سیستم استفاده کنید:
   فونت‌های سیستم از قبل در اکثر دستگاه‌ها نصب شده‌اند و تمایل دارند سریع‌تر از فونت‌های وب یا محلی بارگیری شوند. با استفاده از پشته فونت سیستم، می‌توانید اطمینان حاصل کنید که متن روی وب‌سایت شما قابل‌مشاهده است، حتی اگر فایل فونت بارگیری نشود.

با اجرای این تکنیک‌ها، باید بتوانید اخطار «Ensure text remains visible during webfont load» را حذف کنید، حتی در صورت استفاده از فونت‌های محلی.

---

نتیجه‌گیری:

در این مطلب اهمیت حصول اطمینان از قابل‌مشاهده بودن متن در حین بارگذاری فونت وب را برای بهبود تجربه کاربر و جلوگیری از نامرئی شدن محتوا در حین واکشی فونت‌ها موردبحث قرار داده شد.

موضوع فلاش متن نامرئی (FOIT) معرفی و توضیح داده شد و راه‌حل‌هایی مانند استفاده از فونت‌های سیستم به‌عنوان نسخه بازگشتی، استفاده از تکنیک‌های CSS مانند ویژگی “font-display” و استفاده از جاوا اسکریپت برای مدیریت بارگیری فونت آموزش داده شد.

با اجرای این استراتژی‌ها، توسعه‌دهندگان وب می‌توانند عملکرد سایت را بهبود بخشند و خوانایی را حفظ کنند، که به تعامل بهتر و کاهش نرخ پرش در وب‌سایت آنها کمک می‌کند.

---

سؤالات متداول:

مشکل اصلی فونت‌های وب که می‌تواند بر تجربه کاربر تأثیر بگذارد چیست؟

مسئله اصلی این است که وقتی فونت‌های وب در حال بارگیری هستند، می‌تواند فلاش متن نامرئی (FOIT) یا فلاش متن بدون استایل (FOUT) وجود داشته باشد. این بدان معنی است که کاربران ممکن است در حین بارگیری فونت‌های وب، فضاهای خالی یا متنی بدون استایل ببینند که می‌تواند منجر به تجربه کاربری ضعیف شود.

چند استراتژی برای اطمینان از اینکه متن در حین بارگذاری فونت وب قابل‌مشاهده است چیست؟

برخی از استراتژی‌های مؤثر عبارت‌اند از استفاده از ویژگی font-display CSS که برای جابه‌جایی تنظیم شده است، که اجازه می‌دهد متن با استفاده از فونت بازگشتی نمایش داده شود تا زمانی که فونت وب به طور کامل بارگذاری شود. به‌علاوه، بارگذاری پیش بار فایل‌های فونت کلیدی با استفاده از تگ <link rel=”preload”> می‌تواند به‌سرعت بارگذاری کمک کند و استفاده از فونت‌های سیستم به‌عنوان گزینه‌های بازگشتی نیز می‌تواند دید متن را در حین بارگذاری افزایش دهد.

چرا حفظ قابلیت مشاهده متن در حین بارگذاری فونت وب مهم است؟

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