رفع خطای Ensure text remains visible در GTmetrix

اگه بعد از تست سرعت سایت با GTmetrix یا Google PageSpeed Insights با هشدار «Ensure text remains visible during webfont load» روبه‌رو شدید، مشکل به نحوه نمایش فونت‌های سایتتون برمی‌گرده. این هشدار در نسخه‌های جدید Lighthouse با عنوان Font display insight دیده می‌شه، ولی GTmetrix هنوز از نام قبلی استفاده می‌کنه.

وقتی سایتتون از فونت سفارشی مثل ایران‌سنس، بی‌یکان یا وزیرمتن استفاده می‌کنه، مرورگر باید فایل اون فونت رو دانلود کنه. اگه تنظیم نمایش فونت درست نباشه، ممکنه متن تا پایان دانلود نامرئی بمونه. توی این مقاله می‌بینیم این اتفاق چرا می‌افته، چطور با font-display برطرفش کنید و برای جلوگیری از جابه‌جایی متن چه نکته‌هایی رو در نظر بگیرید.

خطای Ensure text remains visible during webfont load چیست و چه زمانی رخ می‌دهد؟

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

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

عبارت «Ensure text remains visible during webfont load» یعنی متن باید موقع بارگذاری فونت هم قابل مشاهده بمونه. راه معمول اینه که مرورگر اول نوشته رو با یک فونت سیستمی مثل Arial، Tahoma یا sans-serif نشون بده و بعد، در صورت بارگذاری فونت اصلی، اون رو جایگزین کنه. به فونتی که در فاصله انتظار نمایش داده می‌شه، Font Fallback یا فونت جایگزین می‌گن.

چرا این خطا برای سئو و تجربه کاربری مهم است؟

وقتی نوشته‌های صفحه چند ثانیه دیده نشن، کاربر نمی‌تونه محتوا رو بخونه یا سریع متوجه موضوع صفحه بشه. این وضعیت ممکنه باعث خروج کاربر بشه و روی نرخ پرش (Bounce Rate) اثر بذاره؛ یعنی درصد کاربرهایی که بدون ادامه تعامل، صفحه رو ترک می‌کنن.

تعویض فونت هم ممکنه اندازه و جای نوشته‌ها رو تغییر بده. این جابه‌جایی می‌تونه روی معیار جابجایی تجمعی چیدمان (CLS) اثر بذاره. CLS یکی از معیارهای Core Web Vitals هست و میزان حرکت ناگهانی اجزای صفحه رو اندازه می‌گیره. همون‌طور که در مقاله «الگوریتم تجربه کاربری صفحه گوگل: فاکتور جدید گوگل برای سئو» توضیح دادیم، بهتره مقدار CLS تا جای ممکن پایین باشه.

البته اضافه‌کردن font-display: swap; به‌تنهایی تضمین نمی‌کنه که CLS بهتر بشه. این تنظیم متن نامرئی رو برطرف می‌کنه، ولی اگه فونت جایگزین و فونت اصلی اندازه‌های متفاوتی داشته باشن، موقع تعویض ممکنه نوشته‌ها جابه‌جا بشن. پس بهتره نتیجه رو روی صفحه واقعی تست کنید و یک فونت جایگزین نزدیک به فونت اصلی انتخاب کنید.

راه‌حل استاندارد و ساده برای رفع خطا (گام به گام)

راه اصلی رفع این هشدار، اضافه‌کردن ویژگی font-display داخل هر بلوک @font-face هست. بلوک @font-face همون بخشی از CSS هست که نام فونت و آدرس فایلش رو به مرورگر معرفی می‌کنه.

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

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

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

مرحله دوم: فایل CSS مربوط به تعریف فونت رو پیدا کنید. محل این فایل به قالب بستگی داره. تعریف فونت ممکنه داخل style.css، rtl.css یا یک فایل جدا توی پوشه CSS یا Fonts باشه. بعضی قالب‌ها هم بخش مخصوص مدیریت فونت دارن و بهتره تغییر رو از همون‌جا انجام بدید.

مرحله سوم: داخل فایل، عبارت @font-face رو جست‌وجو کنید. یک تعریف معمولی فونت ممکنه شبیه کد زیر باشه:

فرمت اول، بدون تعیین روش نمایش فونت:

@font-face {
    font-family: 'IranSans';
    src: url('fonts/IranSans.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;;font-display:swap}

فرمت دوم، با ویژگی font-display:

@font-face {
    font-family: 'IranSans';
    src: url('fonts/IranSans.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

مرحله چهارم: خط font-display: swap; رو داخل بلوک @font-face بذارید. مقدار swap به مرورگر می‌گه نوشته رو منتظر فونت اصلی نگه نداره و فعلاً با فونت جایگزین نشون بده. کد نهایی به این شکل درمیاد:

@font-face {
    font-family: 'IranSans';
    src: url('fonts/IranSans.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

مرحله ششم: تغییرها رو ذخیره کنید. بعد کش افزونه، سرور یا CDN رو پاک کنید تا نسخه تازه CSS برای کاربرها فرستاده بشه.

CDN سرویسیه که فایل‌های سایت رو از سرورهای نزدیک‌تر به کاربر تحویل می‌ده.

مرحله هفتم: سایتتون رو دوباره با GTmetrix یا Google PageSpeed Insights تست کنید. توی گزارش جدید Lighthouse باید بخش Font display insight رو بررسی کنید. GTmetrix ممکنه همچنان نام «Ensure text remains visible during webfont load» رو نشون بده.

برای بررسی دقیق‌تر، DevTools مرورگر رو باز کنید و سرعت شبکه رو به‌صورت موقت پایین بیارید. DevTools همون ابزار توسعه‌دهندگان مرورگره که معمولاً با کلید F12 باز می‌شه. صفحه رو دوباره بارگذاری کنید و ببینید نوشته‌ها قبل از دانلود کامل فونت دیده می‌شن یا نه. بعد هم حواستون به جابه‌جایی متن موقع تعویض فونت باشه.

مقدار swap برای رفع متن نامرئی انتخاب ساده‌ایه. مقدارهای fallback و optional هم در بعضی پروژه‌ها کاربرد دارن، ولی رفتار متفاوتی دارن. برای نمونه، optional ممکنه در اتصال کند اصلاً فونت سفارشی رو نمایش نده. انتخاب بین این مقدارها باید با تست ظاهر صفحه و داده‌های واقعی انجام بشه.

اهمیت انتخاب قالب استاندارد و بهینه در رفع خطاهای سرعت

قالب وردپرس روی شیوه بارگذاری فونت، CSS و JavaScript اثر زیادی داره. بعضی قالب‌ها فایل‌های زیادی بارگذاری می‌کنن یا تعریف فونت‌هاشون تنظیم مناسبی نداره. در نتیجه ممکنه هشدارهای مربوط به فونت، منابع مسدودکننده نمایش یا فایل‌های استفاده‌نشده رو توی ابزارهای تست سرعت ببینید.

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

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

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

رفع سایر مشکلات سرعت در GTmetrix و PageSpeed Insights

هشدار مربوط به نمایش فونت فقط یکی از بخش‌های گزارش سرعته. ممکنه کنار اون پیام‌هایی مثل «Eliminate render-blocking resources» برای منابعی که نمایش اولیه صفحه رو عقب می‌ندازن، «Reduce unused JavaScript/CSS» برای کدهای استفاده‌نشده، «Properly size images» برای ابعاد نامناسب تصاویر و «Serve images in next-gen formats» برای فرمت‌هایی مثل WebP و AVIF رو هم ببینید.

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

جمع‌بندی و توصیه نهایی

اگه هشدار «Ensure text remains visible during webfont load» یا عنوان جدیدتر اون یعنی «Font display insight» رو می‌بینید، اول تعریف‌های @font-face رو بررسی کنید. اضافه‌کردن font-display: swap; داخل هر تعریف فونت باعث می‌شه نوشته در زمان دریافت فونت اصلی نامرئی نمونه.

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

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

تیم تولید محتوا

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