غیرفعال کردن فونت های گوگل در وردپرس زمان قطعی اینترنت

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

فونت گوگل چیست؟

Google Fonts API یک سرویس رایگانه و این امکان را فراهم میکنه که از فونت های گوگل در وبسایت خود استفاده کنید اما درخواست لود این فونت ها به دلیل اختلالات اینترنتی زمانبر هست و اغلب درخواست های این چنینی بدون دریافت نتیجه، برگشت میخورند و تنها باعث بالا رفتن زمان لود سایت شما میشوند بنابراین یک راهکار منطقی اینه که استفاده از این قبیل فونت ها را در وبسایت خود متوقف و غیرفعال کنید. حتما زمان هایی که با اختلالات اینترنتی مواجه هستیم متوجه شدید که برخی وبسایت ها به طرز چشمگیری با افت سرعت همراه هستن!

چرا بهتره فونت گوگل را غیرفعال کنیم؟

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

برای شروع، روی یکی ازصفحات سایت راست کلیک کرده و گزینه View page source را انتخاب کنید تا کدهای اون صفحه نمایش داده بشه.

حالا با فشردن کلیدهای ctrl+f باکس جستجو نمایش داده میشه سپس عبارت fonts.google را جستجو کنید تا اگر از فونت های گوگل در سایت استفاده شده، مطلع بشید. در این تصویر مشاهده میکنید که در قالب وبسایت از فونت گوگل استفاده شده. در زمان هایی که اینترنت با اختلال مواجه هست دسترسی به چنین سرویس هایی با محدودیت همراهه، بنابراین پیشنهاد میکنیم برای بهبود سرعت، این قبیل فونت ها را در سایت غیرفعال کنید.

هر فونت براساس آی دی منحصربه فرد خودش شناسایی و فراخوانی میشه. در همین خط کد که یافت شده، عبارت id= را مشاهده میکنید.

حالا عبارت مقابل id= را تا -css کپی کنید شما در گام بعدی به این مقدار نیاز دارید. در واقع این نام فونتیه که سایت شما فراخوانی میکنه و باید اون را غیرفعال کنید. که در این مثال برابر با google-fonts-1 هست. پس ما این مقدار را جایی یادداشت میکنیم و که در گام های بعدی ازش استفاده کنیم.

در گام بعدی باید فونتی که پیدا کردیم را غیرفعال کنیم اما چند راهکار کلی برای عدم فراخوانی فونت های گوگل وجود داره که متداول ترین اون ها به شرح زیر هست و شما بسته به شرایط وبسایتتون میتونید از روش دلخواه استفاده کنید:

1. غیرفعال کردن فونت گوگل از طریق درج کد در فایل فانکشن قالب
2. غیرفعال کردن کلیه درخواست های خارجی (راهکار موقت در زمان ملی بودن اینترنت) – مسئولیت این روش برعهده کاربر است-
3. حذف فونت گوگل به کمک افزونه های وردپرس
4. غیرفعالسازی فونت گوگل در صفحه سازها

1- حذف فونت گوگل از سایت وردپرس با کد

حالا که شناسه فونت گوگل را پیدا کردید، کافیه به کمک آموزش ورود به سی پنل وارد هاست خودتون بشید و به مسیر قالب ها یعنی public_html/wp-content/themes مراجعه کنید. در این بخش نام تمام قالب های نصب شده روی وردپرس نمایش داده میشه، روی نام قالب فعال کلیک کنید که در این مثال عملی قالب فعال ما وودمارت هست. بنابراین به سراغ فایل های این قالب میریم.

حالا درون پوشه قالب فعال، به دنبال فایلی به نام functions.php بگردید و روی این فایل راست کلیک کرده و گزینه Edit را انتخاب کنید تا به محیط ویرایش فایل هدایت ببشید.

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

function remove_google_fonts_stylesheet() {  
    wp_dequeue_style( 'google-fonts-1' );
}
add_action( 'wp_enqueue_scripts', 'remove_google_fonts_stylesheet', 999 );

نکته: در کد بالا به جای google-fonts-1 آی دی فونت گوگل که داخل سایتتان فراخوانی میشه را جایگزین کنید. این شناسه را در گام قبلی یعنی “پیدا کردن فونت های گوگل در قالب سایت” با هم بررسی کردیم.

بنابراین اول اینپسکت بگیرید، عبارت fonts.google را جستجو کنید و در این خط کد، عبارتی که مقابل id= نوشته شده را کپی کنید. در تصویر زیر id=google-fonts-1-css نوشته شده و ما مقدار را تا بخش -css کپی میکنیم و در قطعه کد بالا جایگزین کردیم. حالا میتونید به سراغ گام سوم برید و مدت زمان لودینگ سایت را چک کنید.

2- محدود کردن کلیه درخواست های Pending سایت یا درخواست های خارجی

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

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

اگر در استفاده از این کد مصمم هستید، در مسیر نصب وردپرس فایل htaccess. وبسایت وردپرسی خودتون را پیدا کنید، با راست کلیک روی فایل و انتخاب گزینه Edit به محیط ویرایش فایل هدایت خواهید شد. زمانیکه تمایل به استفاده از این کد نداشتید میتونید اون را از فایل htaccess. حذف کنید.

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

Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self'; frame-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none';"

در نهایت فایل htaccess. را ذخیره کنید. برای اینکه ببینید این قطعه کد چقدر در لود وبسایت شما تاثیرگذار بوده باید رکوئست های سایت را بررسی کنید که در گام سوم روش انجام این کار را مفضلا توضیح دادیم.

3- حذف فونت گوگل از پیشخوان وردپرس با افزونه

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

فرض کنیم در شرایطی هستید که روی وبسایت وردپرسیتون امکان نصب افزونه دارید، افزونه های Disable Google Fonts و Remove Google Fonts References برای همین منظور ارائه شده و با نصبش میتونید به صورت موقتی یا دائم فونت های گوگل را غیرفعال کنید.

4- بستن فونت های گوگل در صفحه سازها

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

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

آدرس وبسایت را در مرورگر کروم وارد کنید و روی یکی از صفحات راست کلیک کرده و گزینه inspect را انتخاب کنید یا اینکه با فشردن کلید f12 به محیط Developer Tools برید.

حالا روی تب Network کلیک کنید. در این تب درخواست ها براساس type یا نوعشان قابل دسته بندی شدن هستند به عنوان مثال در بخش font میتونید درخواست های مرتبط با فونت را مشاهده کنید. برای مشاهده تمام درخواست ها به صورت کلی، روی گزینه ALL کلیک کنید.

حالا روی دکمه Reload کلیک کنید تا علاوه بر لود شدن کامل صفحه، لیستی از درخواست های سمت سرور در این بخش نمایش داده بشه.

وابسته به وضعیت سایت، باید کمی منتظر باشید تا کلیه درخواست ها بررسی بشه سپس تایم لود سایت به شما نمایش داده خواهد شد. همچنین درخواست ها و وضعیت اون ها را مشاهده میکنید نمایش عبارت ok یا 200 در ستون status نمایانگر این موضوعه که درخواست بدون مشکل از سمت سرور ارسال شده و برگشته.

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

پیشنهاد میزبان فا برای بهبود سرعت در زمان اختلال اینترنتی

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

سخن آخر

غیرفعال کردن فونت های گوگل میتونه در کاهش مدت زمان لود سایت تاثیر مطلوبی داشته باشه. Google Fonts API سرویس رایگانی هست که مورد استفاده طراحان سایت و توسعه دهندگان قرار میگیره اما شما میتونید اون ها را غیرفعال کنید تا تعداد رکوئست های سایتتون کاهش پیدا کنه این راهکار به خصوص در زمان بروز اختلالات اینترنتی میتونه بسیار کاربردی باشه همچنین شما این امکان را دارید که کلیه درخواست های خارجی را هم ببندید و برای بهبود سرعت سایت گام موثری بردارید.