رفع مشکل بارگذاری سایت به علت سرویس Google Font

24-01-1405آخرین به روز رسانی: 30-01-1405

200 خواندن این مطلب 2 دقیقه زمان میبرد

فهرست‌بندی عناوین

علت کندی سایت بخاطر Google Fonts چیست؟

Google Fonts از دامنه‌ های خارجی لود می‌ شود. مثل:

fonts.googleapis.com
fonts.gstatic.com

این دامنه‌ ها در ایران:

بارگذاری بسیار کند دارند
گاهی packet loss شدید دارند
بعضی ISPها آن‌ ها را نیمه‌ فیلتر یا محدود می‌ کنند

در نتیجه:

فونت لود نمی‌ شود و مرورگر چند ثانیه منتظر می‌ ماند
لود صفحه تا زمان دریافت فونت متوقف می‌ شود
FOIT (Flash of Invisible Text) یا محو شدن متن اتفاق می‌ افتد
Core Web Vitals به‌ خصوص LCP و FCP بدتر می‌ شود

راه‌ حل‌ های قطعی برای رفع مشکل Google Fonts سایت

۱) دانلود فونت‌ ها و میزبانی روی سرور خود سایت (بهترین گزینه)

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

مراحل:

فایل‌ های فونت را در مسیر /fonts/ سایت قرار بدهید
کد CSS فونت را در فایل CSS اصلی قرار بدهید

نمونه CSS بهینه:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto-v30-latin-regular.woff2') format('woff2'),
       url('/fonts/roboto-v30-latin-regular.woff') format('woff');
}

نصب وردپرس بر روی Sub domain

مشاهده

مزایا:

۰٪ وابستگی به گوگل
سرعت بارگذاری بسیار بالا
بهبود چشمگیر LCP ,CLS ,FCP

۲) حذف فونت‌ های اضافه و کاهش وزن فایل‌ ها

خیلی از سایت‌ ها بیش از حد لازم وزن فونت بارگذاری می‌ کنند:

وزن‌ های اضافه مثل 100، 200، 500، 900 را حذف کنید
از ابزارهای زیپ و subset مثل Font Squirrel استفاده کنید

این کاهش اندازه و بهینه سازی باعث بهبود زمان لود می‌ شود.

۳) استفاده از قطعه کد `font-display: swap;`

اگر نمی‌ توانید Google Fonts را حذف کنید، در CSS این خط را اضافه کنید:

font-display: swap;

نتیجه:

متن فورا با فونت پیش‌ فرض لود می‌ شود
بعد از دریافت فونت اصلی، سبک عوض می‌ شود (بدون مخفی شدن متن)

این روش Core Web Vitals را بهتر می‌ کند اما مشکل کندی گوگل را حل نمی‌ کند.

۴) فعال‌ سازی HTTP/2 روی سرور

اگر فونت‌ ها را داخلی میزبانی می‌ کنید، HTTP/2 باعث موارد زیر می‌ شود و سرعت لود فونت‌ ها را دو برابر بهتر می‌ کند:

request های همزمان
کاهش latency
کاهش blocking

۵) استفاده از “پلاگین اینترنت ملی” ساخته شده توسط واحد فنی تلاش نت

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

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

جهت دریافت این افزونه از لینک های زیر می توانید استفاده کنید: