"> رفع خطای Make favicon small and cacheable در YSlow سایت GTmetrix | طراحی سایت قزوین

رفع خطای Make favicon small and cacheable در YSlow سایت GTmetrix

Make favicon small and cacheable

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

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

مختصری درباره‌ی Make favicon small and cacheable

نام: Make favicon small and cacheable
نوع: عکس
اولویت: پایین
میزان سختی: راحت
میانگین امتیاز: 99%
اکنون با فاوآیکون favicon آشنا شده و میفهمیم که چگونه خواهیم توانست یک favicon کوچک، فایل کش و سرعت بالا در سایت گذاشت.
شاید اررور Make favicon small and cacheable اهمیت بالایی نداشته باشد ولی این فایل در مرورگر کاربر بارگذاری می‌شود.
به همین دلیل ممکن است باعث کند شدن لود سایت برای کاربر شده و از این رو، برای افزایش سرعت سایت و بهبود سئو مؤثر است.
مثلا ممکن است بهینه‌سازی 30 مورد فاوآیکون favicon بر روی سرعت سایت شما تاثیر ثانیه‌ای داشته باشد.
اگرچه اکنون با توجه به CMSهای آماده و قالب‌های بهینه شده ممکن است تعداد این خطا خیلی پایین باشد ولی باز هم از اهمیت بالایی برخوردار است.

منظور از favicon چیست ؟

به آیکون کوچکی که در هنگام بارگذاری سایت شما توسط کاربر، همراه فایل های دیگر بارگذاری می‌شود، favicon یا favicon.ico می‌گویند.
در هنگامی که مرورگر کاربر سایت شما را فراخوانی می‌کند به دنبال favicon.ico می‌گردد.
این آیکون در قسمت‌هایی مانند تب مرورگر و بوک‌مارک Bookmark نشان داده خواهد شد.
فاوآیکون favicon
فاوآیکون favicon

حال مثل گذشته favicon تنها برای مرورگر دسکتاپ تنظیم نمیشود.

اینک برای دستگاه های ISO، آندروید و … نیز که هر کدام از ابعاد و فرمت خاصی از favivon پشتیبانی می‌کنند، استفاده می‌شود.

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

یعنی در صورت نداشتن favicon با اررور 404 مواجه می‌شدید که در آپدیت‌های مرورگرها این مشکل برطرف شد.

404 Page Not Found
404 Page Not Found

آموزش ساختن favicon

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

فاوآیکون ما می‌تواند در سه فرمت GIF ، PNG و ICO باشد ولی فرمت ICO رایج‌تر است.

چرا که نسبت به سایر فرمت‌ها فشرده تر و مرورگرهای بیشتری آن را پشتیبانی می‌کنند.

در ادامه به اندازه صحیح این آیکون و نحوه ساخت آن خواهیم پرداخت.

مرحله اول

این favicon ما باید ابعاد 16×16 یا 32×32 داشته باشد و بهتر است حجم آن کمتر از 1kb باشد.

برای ساخت آن از برنامه‌هایی مانند Photoshop ، Illustrator ، Paint و … می‌توان استفاده کرد.

سپس بعد از ساخت عکس، میتوانید فرمت و نام آن را دستی به favicon.ico تغییر دهید.

برای ساخت favicon می‌توانید از ابزار آنلاین Favicon Generator. For real استفاده کنید.

توسط این سایت می‌توانید فایل خود (JPG ، PNG  و یا SVG) را آپلود کنید تا این سایت برای شما فایل favicon.ico را ایجاد کند.

مرحله دوم

اینک باید فاوآیکون خود را در سایت آپلود کنید.

برای اینکار میتوانید از FTP  و یا پنل خود هاست این کار را انجام دهید.

این favicon شما باید در بین تگ <head> قرار گیرد.

بدین منظور می‌بایست کدی مانند کد زیر، در سایتتان فراخوانی شود:

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

اضافه کردن فاوآیکون در وردپرس Add a WordPress Favicon

اگر سایت شما وردپرسی می‌باشد، با کمک افزونه به راحتی می‌توان این امر را انجام داد.

افزونه رایگان Favicon by RealFaviconGenerator این قابلیت را برای شما محیا خواهد کرد.

همچینی از طریق codex وردپرس این کار را می‌توان انجام داد.

اضافه کردن فاوآیکون در جوملا Add a Joomla Favicon

در صورت جوملا بودن CMS سایتتان می‌توانید favicon زا در مسیر قالب یعنی /joomla/templates/<your template> فراخوانی کنید.

توضیحات بیشتر در این مورد را داخل سایت جوملا مطالعه کنید.

اضافه کردن فاوآیکون در دروپال Add a Drupal Favicon

در دروپال برای قراردادن favicon از طریق این صفحه دروپال موارد را خوانده و عیناََ انجام دهید.

روش بهینه سازی فاوآیکون favicon

حتمی باید favicon ما قابلیت کش شدن را داشته باشد.

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

با این عمل ما قدرت کش کردن مرورگر کاربر leverage browser caching را تقویت می‌کنیم.

این عمل به واسطه هدرهایی مانند expire headers و cache-control صورت می‌گیرد.

برای توضیح بیشتر میتوانید مقاله رفع خطای Leverage browser caching در سایت GTmetrix دوبست را مطالعه فرمایید.

همانطور که بالا اشاره شد، سعی کنید حجم favicon را زیر 1KB در نظر بگیرید.

حال با قرار دادن آن داخل CDN شما نهایت افزایش سرعت و بهبود سئو را در این مورد برای سایت خود انجام داده‌اید.

کاهش اندازه فاوآیکون
کاهش اندازه فاوآیکون

حال به پایان مقاله رفع خطای Make favicon small and cacheable در YSlow سایت GTmetrix رسیده‌ایم.

سعی ما بر این بود که این مقاله کوتاه ولی جامع باشد.

با عضویت در خبرنامه سایت از مقاله‌های آموزشی جدید دوبست مطلع شوید.

    دیدگاه خود را بیان کنید

    ایمیل شما محفوظ خواهد ماند.*