نکات YSlow درباره تصاویر وب سایت (دریافت پیوندک)

نوشته شده در تاریخ: 27/11/17 | نویسنده:هادی شهیدی

نکات YSlow درباره تصاویر وب سایت

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

پیشنهادات YSlow در خصوص تصاویر موجود در وب سایت

  • بهینه سازی تصاویر وب سایت
  • بهینه سازی در کدهای CSS
  • پرهیز از تغییر سایز تصاویر در HTML
  • استفاده از favicon کم حجم و استفاده از Cache مناسب

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

وب سایت های زیادی طراحی شده اند که میتوانند تصاویر شما را بررسی و از لحاظ اندازه و optimize بودن اظهار نظر کنند. یکی از این وب سایت ها با نام https://www.giftofspeed.com میتواند شروع خوبی برای بررسی تصاویر شما باشد.

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

استفاده از فایل CSS برای بارگذاری عکس ها
در وب سایت شما احتمالا به فایل های css متعددی اشاره شده است اطمینان داشته باشید اشاره به این فایل ها درست انجام شده باشد. در ضمن ممکن است فایل های تصویری کوچک زیادی توسط شما استفاده شده باشد بهتر است برای بارگذاری این تصاویر از تکنیک استفاده از CSS به جای استفاده از خود تصاویر استفاده شود. برعکس تصوری که وجود دارد یک فایل بزرگ برای این منظور بهتر از ارجاعات مختلف به تک تک تصاویر است و تعداد HTTP requests ها ( درخواست های Http ) کاهش می یابد.کاهش تعداد درخواست ها باعث سریعترشدن وب سایت شما خواهد شد.
به عبارت ساده تر برای وب سایت ها و وب سروروها لود یک فایل 10KB که حاوی تمامی تصاویر شما در یک فایل است سریعتر از است بارگذاری و ارسال درخواست برای ۱۰ فایل 1KB میباشد.

از HTML برای تغییر اندازه تصاویر استفاده نشود
همانطوری که میدانیم از طریق دستورات HTML میتوانیم Scale و اندازه یک فایل تصویری را به اندازه دلخواه تغییر دهیم اما بهتر است بدانیم که در صورتی که میخواهیم یک تصویر کوچک در وب سایت استفاده کنیم بهتر است آن تصویر را به همان اندازه در هاست خود بارگذاری کنیم و از بارگذاری یک تصویر بزرگ و تغییر اندازه آن به اندازه دلخواه توسط دستوارت و ابزار HTML پرهیز کنیم.

تصور کنید ما یک عکس 10×10 نیاز داریم و اندازه ای که بر روی هاست خود بارگذاری کرده ایم 100×100است در واقع عکس 100×100 از لحاظ اندازه حجمی فایل بزرگتر است و زمان بیشتری برای بارگذاری آن بر روی مرورگر بازدیدکننده نیاز است . استفاده از سایز مناسب و دقیق و بارگذاری همان سایز بر روی هاست قطعا در سرعت لود وب سایت بر روی مرورگر موثر است.

فایل favicon.ico را کوچ و قابل Cache کنیم
فایل favicon.icoتصویر کوچکی است که در کنار نام دامنه ما دیده میشود و در Bookmark وب سایت ما آن آیکون دیده میشود.با کوچک کردن اندازه حجمی این فایل و افزایش زمان انقضای آن در تنظیمات میتوانیم سرعت بارگذاری وب سایت خود را کمکی بهبود دهیم. میتوانیم میزان متغیر expires headers را برای چند ماه یا حتی سال تغییر دهیم و از بارگذاری مجدد و مکرر آن بر روی مرورگر بازدیده کننده جلوگیری کنیم. بدیهی است این تغییر نیز میتواند باعث بهبود و افزایش سرعت وب سایت شما شود.

در نهایت با تغییراتی که در استفاده از تصاویر بر روی وب سایت اشاره شد میتوانیم تا حدودی سرعت وب سایت را بهبود دهیم و از بارگذاری فایل های حجیم تر که بصورت غیر ضروری بر روی مرورگر بازدید کنندگان انجام میشود جلوگیری کنیم.این موضوع از سمت سرور و هاست نیز میتواند باعث فشار کمتر و درخواست های کمتر به سرور شما شما و نتیجه بهتری از هر سو دریافت کنید.

 

 

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

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

*

code