آموزش بهینه سازی فونت در وردپرس

فونت یکی از عواملی است که در ظاهر سایت تاثیر دارد و تجربه کاربری بهتری را برای بازدیدکنندگان رقم زده و خوانایی سایت را بالاتر می‌برد. اما ممکن است حجم زیادی از سایت را اشغال کرده و باعث کندی سایت شما شود. اگر احساس کردید که سایت شما دیر بارگذاری (Load) می‌شود، اولین اقدام برای بهبود سرعت و پرفورمنس (Performance) سایت، بررسی آن با استفاده از ابزارهایی مثل جی تی متریکس وPage Speed Insight است.

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

بهینه سازی فونت در gtmetrix

برای اینکه متوجه شوید فونت‌ها چه مقدار از حجم سایت شما را اشغال کرده‌اند، باید از ابزارهایی مثل Gtmetrix و Page Speed Insight استفاده کنید. ابتدا وارد سایت جی تی متریکس شده و سپس آدرس دامنه خود را وارد کنید. همانطور که در تصویر زیر می‌بینید گزارش Waterfall در GTmetrix نشان می‌دهد چه فایل‌های فونتی در حال لود شدن هستند و چه مقدار فضا اشغال کرده‌اند. برای افزایش سرعت سایت و بهینه سازی فونت در جی تی متریکس آمار این ابزار به شما کمک می‌کنند.

نکته: فونت‌هایی است که به صفحه‌سازهایی مثل المنتور اضافه می‌کنیم، سرعت لود صفحات (Page Loads) را پایین می‌آورند.

بهینه سازی فونت در وردپرس با استفاده از پلاگین‌ها

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

• کاهش اندازه فایل‌های فونت: با استفاده از افزونه‌هایی مانند WP Rocket و WP Optimize می‌توانید اندازه فایل‌های فونت‌های خود را کاهش داده، فشرده کرده و در نتیجه کارایی خود را افزایش دهید.
• تغییر نحوه نمایش فونت‌ها به کمک CSS: به کمک CSS و ویژگی Font Display تعیین کنید که فونت‌هایتان در ابتدا چگونه نمایش داده شوند.
• بهینه سازی بارگذاری فونت: افزونه‌هایی مانند w3 total Cache برای بهینه سازی نحوه بارگذاری فونت به شما کمک می‌کنند.
• افزونه LoadCSS برای بارگذاری کارآمدتر فونت‌ها در وردپرس استفاده می‌شود.
• تعیین فونت برای انواع صفحه نمایش: بعضی از افزونه‌ها مثل Easy Google Fonts به شما امکان می‌دهند تا فونت‌های مختلفی را برای انواع صفحه نمایش تعیین کنید. به این ترتیب شما استفاده از فونت‌ها را برای هر صفحه نمایش مثل دسکتاپ و موبایل بهینه می‌کنید.

سایر اقدامات لازم برای بهینه‌‌سازی فونت در وردپرس

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

1. فعالسازی پیش بارگذاری یا Preload  فونت‌ها در افزونه راکت

گزینه Preload به مرورگر می‌گوید که یک منبع یا یک فایل خاص را در اسرع وقت دریافت کند. پیش بارگذاری فونت‌ها زمان لود فونت که در واترفال GTMetrix نمایش داده می‌شود را کاهش می‌دهد. اگر از WP Rocket استفاده می‌کنید در بخش تنظیمات > Preload Font می‌توانید فونت‌ها را پیش بارگذاری کنید. فقط کافی است در قسمت پیش بارگذاری آدرس فونت را وارد کرده و ذخیره تغییرات را بزنید. افزونه راکت با استفاده از فشرده‌سازی فایل‌های حجیم مانند تصاویر، فایل‌های JS و css، ادغام و پیش بارگذاری فونت‌ها، بارگذاری تصاویر به صورت lazy load و کش سایت به بهبود سرعت و پرفورمنس سایت شما کمک می‌کند.

نکته: URL فونت را از بخش واترفال جی تی متریکس پیدا کرده و کپی کنید.

2. فونت‌های گوگل (Google Fonts) را ادغام یا ترکیب کنید

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

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

3. برای افزایش سرعت سایت از هدر پیش بارگذاری استفاده کنید

اگر از هدر پیش بارگذاری استفاده کنید، به مرورگر می‌گویید که بارگذاری فایل‌های فونت را در اسرع وقت شروع کند. اگر فونت‌ها در رندر (Render) اولیه صفحات وب بارگذاری شوند، زمان بارگذاری فونت کاهش می‌یابد. برای اینکار به تگ Head فایل HTML صفحه خود المان link را اضافه کرده و ویژگی Rel آن را ‘Preload’ قرار داده و ویژگی as را به ‘font’ تنظیم کنید. در ویژگی href مسیر فونتی را قرار دهید که باید از قبل بارگذاری شود.

4. استفاده از فونت را بررسی و بازبینی کنید

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

5. برای بهینه سازی فونت در سایت از تعداد فونت کمتری استفاده کنید

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

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

با اینکار سرور مجبور نیست فونت‌ها را از جای دیگری فراخوانی کند، به این ترتیب صفحه برای کاربر سریع‌تر بارگذاری می‌شود. در google Font Website فونت مورد نظر را دانلود کرده و در هاست خود پوشه wp-content > Uploads قسمت فونت‌ها آنها را آپلود کنید برای استفاده از آنها در تگ Head به سایت اصلی ارجاع ندهید. در واقع فقط فونت‌ها و وزن‌های موردنظر را بارگذاری کنید و همه انواع و وزن‌ها مثل ایتالیک، بولد را استفاده نکنید؛ انواع فونت TTF، EOT، WOFF و WOFF2 به کار ببرید.

یکی دیگر از اقدامات برای بهینه سازی فونت‌ در وردپرس، فعالسازی CDN است.

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

1. چطور فونت‌ها را در وردپرس بهینه کنیم؟

• بارگذاری ناهمزمان فونت های وب
• فونت‌های گوگل را ادغام کنید.
• از انواع فونت کمتری استفاده کنید.
• از هدر پیش بارگذاری استفاده کنید.
• از تعداد فونت کمتر استفاده کنید.

2.چه زمانی باید به فکر بهینه سازی فونت در سایت وردپرسی باشیم؟

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