آموزش رفع خطای 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 در GTmetrix

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

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

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

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

real favicon generator

با استفاده از این سایت شما میتونید آیکون سایتتون رو که با فرمت‌های png، jpg، svg یا هر فرمت دیگه هست به فرمت ico تبدیل کنید. بعد از اینکه آیکون ساخته شد باید اونو داخل سایت خودتون اضافه کنید.

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

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

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />

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

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

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

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

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

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

فعال کردن کش برای Favicon

حالا که فایل فاوآیکون رو با فرمت و اندازه مناسب آماده کردید و در سایت قرار دادید، نوبت به فعال‌سازی قابلیت کش (Cache) برای این فایل می‌رسه تا مرورگر مجبور نباشه با هر بار باز شدن صفحه، دوباره اون رو از سرور درخواست کنه.

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

روش فعال‌سازی کش برای favicon در Apache

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

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/x-icon "access plus 1 year"
</IfModule>

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

روش فعال‌سازی کش برای favicon در Nginx

اگه سرور شما از نوع Nginx هست، باید به فایل کانفیگ اصلی Nginx دسترسی داشته باشید (معمولاً در مسیر /etc/nginx/nginx.conf یا /etc/nginx/sites-available/ قرار داره). سپس بخش زیر رو به پیکربندی سرور اضافه کنید:

location = /favicon.ico {
    log_not_found off;
    access_log off;
    expires 365d;
}

بعد از اعمال این تغییرات، حتماً یک بار سرویس Nginx رو ری‌استارت کنید تا تنظیمات جدید اعمال بشه:

sudo systemctl restart nginx

نکات مهم در بهینه‌سازی Favicon

استفاده از نام استاندارد: نام فایل favicon رو حتماً به صورت favicon.ico انتخاب کنید. این کار باعث میشه برخی مرورگرها که به صورت پیش‌فرض دنبال این نام می‌گردند راحت‌تر اونو شناسایی کنن.
قراردادن در مسیر ریشه سایت: بهتره favicon در مسیر اصلی سایت (root یا public_html) قرار بگیره.
بررسی نهایی با GTmetrix: بعد از اعمال همه تغییرات، دوباره سایت رو با GTmetrix بررسی کنید تا مطمئن بشید که خطای Make favicon small and cacheable برطرف شده.