مقالات وبوردپرس

چگونه تصاویر Faviconرا کوچک و قابل کش کنیم؟

در این مقاله قصد داریم در مورد کوچک کردن تصاویر Favicon و قابل کش نمودن آن صحبت کنیم.  این گزینه قطعا یکی از روش های بهینه سازی است که به نظر اولویت پایینی دارد اما هر کاری اگر به درستی انجام شود می تواند عملکرد سایت شما را بهبود ببخشد.  اگر ۲۰ بهینه سازی کوچک را در سایت خود اجرا کنید در نهایت متوجه خواهید شد که زمان بارگذاری سایت تان به شدت کاهش یافته است.  همانطور که می دانید سرعت بارگذاری یکی از فاکتورهای مهم برای گوگل و موتورهای جستجوست. در این مقاله همراه وب ایده باشید تا این کار را با هم مرور کنیم.

Favicon چیست؟

Favicon تصویر کوچکی است که با سایت شما و محتوای آن مرتبط است. زمانی که مرورگر به سایت شما می رسد،  بررسی کوتاهی را در پس زمینه برای این تصویر انجام می دهد. سپس این تصویر در مکان های مختلفی همچون تب مرورگر و نوار بوک مارک به نمایش گذاشته می شود. معمولا این تصویر در روت سایت ذخیره می گردد.  ما در حال حاضر با دستگاه های مختلفی به مرور  و گشت و گذار در سایت ها می پردازیم.  همه این دستگاه ها ابعاد و اندازه خاص خود را دارند و  نوع فایلی  از آن پشتیبانی می کنند متفاوت است. به عنوان مثال دستگاه های IOS  از ایکون اپل تاچ با رزولوشون  بالا برای نشان دادن بوک مارگ و میانبر صفحه هوم استفاده می کنند. دستگاه های آیفون  نیازمند تصاویر ۵۷ در ۵۷ هستند و این در حالیست که آیپدهای جدید با صفحه نمایش رتینا به دنبال تصاویر ۱۵۲ در ۱۵۲ می گردند. اندروید کروم از این تصاویر استفاده می کند.  خوب حالا سوال اینجاست که آیا واقعا نیازی به Favicon هست؟ پاسخ به این سوال مثبت است. هر سایتی باید از تصویر Favicon مرتبط استفاده کند. از آنجایی که مرورگر این فایل را درخواست می کند اگر تصویری وجود نداشته باشد خطای ۴۰۴ را مشاهده خواهید کرد.  همانطور که قبلا نیز بیان کردیم این تصویر در روت سرور ذخیره می شود. هر بار که مرورگر این فایل را درخواست می کند، کوکی ها برای روت سرور ارسال می شوند. کوچک کردن این تصویر باعث  بهبود عملکرد سایت می شود.

 چگونه یک تصویر برای Favicon ایجاد کنیم؟

این تصویر در واقع فایل PNG، GIF و ICO است. با اینحال فایل های ICO بیشتر از سایر موارد به کار می روند زیرا اندازه کوچک تری دارند و در مرورگرهای بزرگ نیز پشتیبانی می شوند. PNG ها بیشتر برای دستگاه های IOS، اندروید و ویندوز ۱۰ مورد استفاده قرار می گیرند. ما در این مقاله بیشتر روی ایجاد favicon.ico برای سایت تمرکز می کنیم.

 گام اول:

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

شما می توانید این تصویر را به کمک هر برنامه ای که دوست داشتید ایجاد کنید. گزینه های مختلفی همچو فتوشاپ، ایلوستریتور، Paint و Sketch  در اختیار شما قرار دارد. کافیست فایل را به صورت ICO ذخیره کنید.  باید نام فایل favicon.ico باشد.  شما می توانید از ابزارهای آنلاینی که برای تولید این تصوی طراحی شده اند هم استفاده کنید.

 گام دوم:

حالا باید  تصویر طراحی شده را در سایت خود آپلود کنید. کافیست آن را از طریق FTP به دایرکتوری روت سایت آپلود کنید تا مرورگر آن را بیابد. اگر می خواهید تصویر را در دایرکتوری دیگری قرار دهید کافیست موارد زیر را به بخش  <head>  سایت خود اضافه کنید. به عنوان مثال اسنیپت زیر برای زمانی مورد استفاده قرار می گیرد که تصویر شما در فولدری به نام image قرار گرفته باشد.

 

تصویر Favicon در وردپرس:

اگر از سایت وردپرسی استفاده می کنید می توانید  از مراحل بالا برای تولید و آپلود تصویر استفاده کنید یا از افزونه Favicon plugin from RealFaviconGenerator استفاده نمایید.

استفاده از Favicon در جوملا:

اگر سایت شما به کمک جوملا راه اندازی شده است باید تصویر را به دایرکتوری /joomla/templates/<your template>  آپلود کنید.

 استفاده از Favicon در دروپال:

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

  • به سراغ بخش admin/build/themes/settings/THEME یا برای دروپال ۷ به بخش admin/appearance/settings/THEME بروید.
  • فایل ico را در بخش Shortcut icon settings’ انتخاب کنید و فایل را آپلود نمایید. اگر برایتان ممکن بود مسیر ذخیره سازی فایل در فولدر تم را مشخص نمایید.

 بهینه سازی Favicon:

بهینه سازی این تصویر می تواند از درخواست های بعدی برای آن جلوگیری کند. به همین خاطر باید  با اضافه کردن هدر اکسپایر و استفاده از cache-control  از کش مرورگر استفاده کنیم.

گزینه دیگری که پیش رو دارید بارگذاری این ایکون از طریق CDN است. سایت Yslow توصیه می کند اندازه این تصویر را زیر ۱ کیلوبایت نگه دارید.

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

هدر اکسپایر را در آپاچی به کمک اضافه کردن آن به فایل .htaccess  اضافه نمایید. به خط image/x-icon توجه داشته باشید:

 

هدر اکسپایر را به NGINX با اضافه کردن به کانفیگ سرور اضافه نمایید. توجه داشته باشید که باید نوع فایل ICO نیز در آن قرار گیرد.

 

 استفاده از cache-control:

شما می توانید از قابلیت cache-control نیز استفاده کنید. اسنیپت زیر را می توانید  به فایل .htaccess در آپاچی اضافه کنید تا به سرور گویید هدر cash-control  را به حداکثر ۸۴۶۰۰ ثانیه تنظیم کند.

 

اسنیپت زیر را می توان به فایل پیکربندی NGINX نیز اضافه کرد.

 

 بارگذاری Favicon از طریق CDN:

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

 

خلاصه:

همانطور که مشاهده کردید فرآیند کوچک کردن و قابل کش نمودن Favicon بسیار ساده و اسان بود. همین امر می تواند در بهینه سازی سایت کمک زیادی به شما بکند. به خاطر داشته باشید که اگر مرجعی را برای سایر دستگاه ها اضافه می کنید مرورگر یا دستگاه قادر به پردازش آن نخواهد بود مگر اینکه از نوع فایل پشتیبانی کند.

چگونه تصاویر Faviconرا کوچک و قابل کش کنیم؟
امتیاز دهید
برچسب ها

نوشته های مشابه

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

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

بستن