آموزش رفع خطای Make favicon small and cacheable در GTmetrix

آموزش رفع خطای Make favicon small and cacheable در GTmetrix

یکی از خطاهایی که ممکن است در هنگام تست سرعت سایت توسط GTmetrix کمتر ببینید، خطایی بانام Make favicon small and cacheable است که مربوط به فاوآیکون یا نمادک سایت می‌شود و در پنجره مرورگر به‌صورت یک تصویر نمایش داده می‌شود.

با استفاده از فایوآیکون می‌توانید یک تصویر را با فرمت png، jpg یا حتی در حالت ico در اندازه‌های ۱۶*۱۶ یا ۳۲*۳۲ پیکسل به‌عنوان نماد سایت انتخاب کنید و در تب مرورگر نمایش دهید. ازآنجایی‌که فاو آیکون ثابت است و ممکن است تا سال‌ها تغییری در آن ایجاد نکنید، پس بهتر است که اولاً با هر بازدید از صفحه، درخواست HTTP برای لود فاوآیکون ارسال نشود و دوما اینکه با کش کردن فاوآیکون کاری کنید که آن مدت‌زمان بیشتری در حافظه کش مرورگر بازدیدکننده‌ها باقی بماند.

در این آموزش قصد داریم نحوه برطرف کردن ارور Make favicon small and cacheable در Yslow جی تی متریکس را توضیح دهیم که با استفاده از این آموزش می‌توانید تصویر فاوآیکون سایت را بهینه‌سازی کرده و از درخواست‌های اضافی برای لود تصویری که ممکن است سال‌ها تغییرش ندهید، جلوگیری کنید.

فاوآیکون یا favicon چیست؟

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

در خطا Make favicon small and cacheable گفته شد که آیکون سایت را به شکلی ایجاد کنید که هم کوچک باشد و هم اینکه برای آن قابلیت کش رو فعال کرده باشید. پس برای اینکه بتوانیم آیکون سایت را بهینه‌سازی کرده باشیم باید این دو هدف رو دنبال کنیم.

  1. بهینه‌سازی و کاهش حجم Favicon

ابتدا باید از اندازه درست و فرمت درست برای فاو آیکون استفاده کنید بعد حجم آن را کم کنید. پس اولین کاری که برای ساخت یک آیکون مناسب باید در نظر بگیرید اندازه آن هست. شما می‌توانید آن را در اندازه ۱۶*۱۶ یا ۳۲*۳۲ پیکسل بسازید.

انتخاب فرمت مناسب بسیار مهم است و برای مرحله کش کردن آیکون می‌تواند خیلی کمک‌کننده باشد. فرمت مناسب برای فاوآیکون ico. است که بهتر است بجای استفاده از فرمت‌های png، jpg یا svg از این فرمت فایل استفاده کنید. درصورتی‌که فرمت فایل شما به این شکل نیست می‌توانید به کمک برنامه‌هایی مثل فتوشاپ فرمتش را به ico. تغییر دهید و یا اینکه به لینکی که در زیر گذاشته‌شده بروید و وارد وب‌سایتی می‌شوید که بعد از آپلود فایل با فرمت‌های دیگر، می‌توانید خروجی فاوآیکون با فرمت ico را دریافت کنید و از آن داخل سایت خود استفاده کنید.

افزودن فاوآیکون در HTML

برای اضافه کردن فاوآیکون در سند HTML یا سایتی که به‌صورت HTML طراحی‌شده است و سیستم مدیریت محتوا یا دیتابیس ندارد، کافی است آیکون را به کمک تگ link در صفحه خود تعریف کرده تا در تب مرورگر نمایش داده شود. برای این کار باید از کد زیر داخل تگ HEAD استفاده کنید. دقت کنید که این تگ باید قبل از تگ بسته <head/> قرار بگیرد.

 

 به‌جای images/favicon.ico/ در قطعه کد بالا باید آدرس فاوآیکون خود را وارد کنید.

افزودن فاوآیکون در وردپرس

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

آموزش رفع خطای Make favicon small and cacheable در GTmetrix

بعدازاینکه روی گزینه هویت سایت کلیک کردید وارد صفحه‌ای مشابه تصویر زیر می‌شوید، حالا باید از بخش انتخاب تصویر که در قسمت نمادک سایت قرار دارد تصویر فاوآیکون دلخواه خود را که در اندازه ۱۶*۱۶ پیکسل آماده کردید انتخاب کرده و آپلود کنید. درنهایت بعد از آپلود شدن فایل روی دکمه ذخیره کلیک کنید تا فاوایکون موردنظر به سایت شما اضافه شود.

آموزش رفع خطای Make favicon small and cacheable در GTmetrix

افزودن فاوآیکون در جوملا

درصورتی‌که از جوملا استفاده می‌کنید کافی است فایل فاوآیکون را بانام favicon.ico در مسیر پوشه قالب آپلود کنید؛ یعنی بعدازاینکه وارد File Manager هاست شدید به مسیر public_html/joomla/templates بروید سپس پوشه قالبی که از آن استفاده می‌کنید را بازکنید بعد فایل آیکون را در این پوشه آپلود کنید.

  1. فعال کردن کش برای فاوآیکون

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

برای این کار می‌توانید طبق add expires headers عمل کرده و با اضافه کردن کد زیر داخل فایل htaccess. کاری کنید که فایل فاوآیکون برای مدت بیشتری در حافظه کش مرورگر باقی بماند.

# Enable expirations

ExpiresActive On

# Default directive

ExpiresDefault "access plus 3 month"

# My favicon

ExpiresByType image/x-icon "access plus 1 year"

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

, , , , ,
Share:

ارسال یک پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

برای امنیت، استفاده از سرویس reCAPTCHA گوگل مورد نیاز است که موضوع گوگل است Privacy Policy and Terms of Use.

I agree to these terms.