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

رفع خطای Make favicon small and cacheable
آموزش بهینه سازی سایت با GTmetrix

آموزش افزایش سرعت سایت با GTmetrix – رفع خطاهای YSlow

سلام، در ادامه آموزش gtmetrix از مقالات سئو در خدمت شما هستیم. در این مقاله قصد داریم درباره ارور Make favicon small and cacheable صبحت کنیم و بررسی کنیم منظور این خطا چیست و اینکه رفع آن چگونه باعث بالا رفتن سرعت سایت ما می‌شود، پس ما میزفا همراه باشید.

خلاصه‌ای از خطا Make favicon small and cacheable

نام: Make favicon small and cacheable
نوع: عکس
اولویت: پایین
میزان سختی: راحت
میانگین امتیاز: 99%
[gap height=”15″]

امروز قصد داریم درباره فاوآیکن (favicon) سایت شما صحبت کنیم و بررسی کنیم که چطور می‌توانیم یک favicon کوچک، فابل کش و با سرعت در سایت قرار دهیم. قطعا این مورد در بهینه سازی سرعت سایت ممکن است اولویت کمتری داشته باشد ولی هرچیزی که در سمت کاربران بارگذاری می‌شود می‌تواند بر کند شدن سرعت سایت تاثیر بگذارد، توجه داشته باشید که اگر مثلا ۲۰ مورد کوچک همانند favicon  را بهینه سازی کنید آنگاه ممکن است در نتیجه تاثیر ثانیه‌ای در بهبود سرعت سایت خود مشاهده کنید، بنابراین نباید چنین خطاهایی را نادیده بگیرید. هر چند در CMSهای آماده همانند وردپرس و جوملا به لطف قالب‌های آماده بهینه شده، وجود چنین خطاهایی کمتر مشاهده می‌شود.

 

 

favicon چیست

favicon یا favicon.ico هست یک آیکون از تصویر کوچیک که همراه سایر فایل‌های سایت شما برای کاربران بارگذاری می‌شود. وقتی مرورگر یک کاربر با سایت شما برخورد می‌کند در پیش‌زمینه به دنبال یک favicon.ico است. favicon در جاهای مختلف نمایش داده می‌شود مثلا در تب مرورگر و یا وقتی یک سایت را در مرورگر خود بوک‌مارک (Bookmark) می‌کنید.

favicon چیست
favicon sample

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

قطعا هر وب سایت حرفه ای نیاز به favicon دارد و در گذشته مرورگرها به شکل پیش‌فرض همیشه درخواست favicon در برخورد با یک سایت انجام می‌دادند و اگر سرور favicon را نیز نداشت خطای 404 رخ می‌داد (البته این موضوع در آپدیت های بعدی مرورگرها بهبود یافت).

خطای 404 در نبود favicon
خطای 404 در نبود favicon

چگونه یک favicon بسازیم

خطای موجود در YSlow یاهو هم چنین چیزی میخواهد Make favicon small and cacheable ، بسازید یک favicon کوچک و قابل کش شده.

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

قدم یک

یک favicon به شکل کلی باید دارای ابعادی 16×16 پیکسل یا 32×32 باشد. و همچنین پیشنهاد می شود حجم آن زیر 1KB باشد. شما می‌توانید favicon خود را در برنامه‌های مختلفی که تمایل دارید بسازید، همانند فتوشاپ، ایلستریتور، Paint  و غیره. و بعد این آنکه با چنین نرم افزارهایی عکس خود را ساختید به راحتی می‌توانید فایل را ذخیره کنید و فرمت آن را دستی تغییر دهید و یک اسم همانند favicon.ico به وجود بیاورید.

شما همچنین می توانید برای ساختن favicon از ابزارهای آنلاین همانند real favicon generator استفاده کنید، در این ابزارهای آنلاین می‌توانید با فرمت‌های مختلفی همانند PNG، JPG و یا SVG (البته از نوع وکتور باشد بهتر است) اپلود کنید و سپس توسط این نرم افزار فرمت ICO تولید می‌شود. (برای دیدن ابزارهای بیشتر می‌توانید قسمت ابزارهای سئو را مطالعه نمایید)

قدم دو

بعد از ساخت favicon شما نیاز دارید آن را در سایت خود آپلود نمایید به دین منظور می‌توانید از FTP و سپس وصل شدن به root سرور خود این کار را انجام دهید، favicon باید در تگ بین <head> قرار بگیرد و در کدی همانند زیر می‌توانید آن را در سایت خود فراخونی کنید.

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

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

اگر وب سایت شما دارای CMS وردپرس است می‌توانید به راحتی به کمک افزونه اشاره شده favicon خود را بسازید. افزونه Favicon by RealFaviconGenerator چینن قابلی را به شکل رایگان برای شما فراهم می‌کند. همچنین می توانید به codex وردپرس مراجعه کنید.

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

اگر وب سایت شما دارای CMS جوملا  است می‌توانید favicon خود را در مسیر قالب خود یعنی /joomla/templates/<your template> قرار دهید. همچنین می‌توانید توضیحات رسمی سایت جوملا را مطالعه کنید

فاوایکون در دروپال

و اگر سایت CMS سایت شما دروپال است می‌توانید توضیحات رسمی این CMS را در اینجا مطالعه کنید.

بهینه سازی Favicon

یک favicon بهینه سازی شده باید قابلیت کش شدن را داشته باشد تا وقتی مرورگر کاربر درخواست سمت سرور ارسال می‌کند سرور آن فایل را در لوکال کاربر ذخیره کنید تا در دفعات بعد دوباره آن فایل را درخواست نکند. این عمل می‌تواند leverage browser caching را تقویت کند به معنای قدرت کش کردن مرورگر. توسط هدرهایی نظیر expire headers  و cache-control می‌توان انجام داد. حتما مقاله رفع خطای Leverage browser caching را مطالعه نمایید تا بتوانید به خوبی کش کردن فایل ICO را در سمت سرور فعال کنید.

همان‌طور که اشاره کردیم بهتر است  favicon زیر 1KB باشد و اگر در CDN آن را قرار دهید دیگر نهایت بهینه سازی را انجام داده‌اید.

نمونه ای از یک favicon بهینه سازی شده
نمونه ای از یک favicon بهینه سازی شده

 

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

فیلم آموزشی افزایش سرعت سایت با gtmetrix
فیلم آموزشی افزایش سرعت سایت با gtmetrix
پوریا آریافر
اولین کسب و کار آنلاین خودم رو در فیسبوک راه‌اندازی کردم، سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال رو داشتم. بعد اینکه فیسبوک خالی از کاربر ایرانی شد وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت رو دریافت کردم، در حالی که نمره بالا گرفتم ولی کسی به دلیل به خطر افتادن موقعیت شغلی خودش به عنوان کارآموز منو قبول نمی‌کرد، بعدش با شروع دوران خدمت سربازی، مسئول بهینه سازی یک سایت خبری معتبر شدم و سئو یاد گرفتم. در ابتدای سال ۲۰۱۴ تونستم از رتبه ۱۵۰۰۰ به ۴۰۰ الکسا نزدیک کنم، اون زمان الکسا خیلی مهم بود. وارد دانشگاه شدم، به دلیل عدم علاقه به دانشگاه سعی کردم زودتر تمومش کنم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، توی دانشگاه هر کسی منو میدید یاد سئو میوفتاد، در همون سال آخر دانشگاه بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو رو داشتم، که به مجتمع فنی فروختم تا بتونم تمرکز رو فقط بر روی عشق خودم یعنی سئو بذارم، وقتی کانال تلگرام فروختم حس پرواز بهم دست داد، هرچند درآمد چندین میلیون ماهانه رو از دست دادم ولی دوباره باید مثل گذشته با پوستی نو یک فصلی نو رو میساختم. در این چندین سال فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌گرفته، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کردم. در اکثر ابزارهای کاربردی گوگل تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری رو یادگیری و یاددادن می‌دونم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شد تونست چنین بستر مناسبی رو برام فراهم کنه. همینطور در حال حاضر مدیریت یک تیم ۱۰ نفری از جوانان فعال و پرانگیزه رو در میزفا به عهده دارم. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم …
لیست آموزش GTmetrix نسخه جدید

بدون نظر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=