اطلاعیه

Collapse
هیچ اطلاعیه ای هنوز ایجاد نشده است .

بهینه سازی تصاویر برای افزایش سرعت سایت

Collapse
X
  • فیلتر
  • زمان
  • نمایش
پاک کردن همه
new posts

  • بهینه سازی تصاویر برای افزایش سرعت سایت

    برای بهینه سازی تصاویر سایت چه کاری می توان انجام داد؟

    Tom bennet برای شفاف سازی، اقدام به طراحی یک صفحه وب ساده و استاندارد با استفاده از bootstrap و jQuery کرده بود. صنعت بازاریایبی اینترنتی روزانه هزاران صفحه شبیه تصویر زیر تولید می کند و بعید است تا کنون چنین صفحه ای ندیده باشید:



    بعد از راه اندازی اولیه، با به کارگیری ترکیبی از مجموعه قوانین Yslow یاهو و PageSpeed گوگل، صفحه مذکور مورد ارزیابی قرار گرفت و اما نتایج:


    نمره F به شدت ما را در چشم گوگل بی اعتبار خواهد کرد و 3.9 ثانیه هم برای کاربران بسیار طاقت فرساست. اگر باور ندارید، به آهستگی تا عدد چهار بشمارید. واقعا می‌ توانید برای بارگذاری هر کدام از صفحات یک وب سایت نزدیک 4 ثانیه انتظار بکشید؟

    اما بهتر است بازاریاب ها تلاش های خود را کجا متمرکز کنند که بیشترین اثرگذاری را داشته باشد؟

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



    البته منظور این نیست که همین الان اقدام به کوچک تر کردن اندازه تصاویر در فتوشاپ کنید. اگر چه وضوح مهم است (همه علاقه مندیم که صفحات ظاهر زیبایی داشته باشند)، اما نباید در انتخاب یک اندازه بزرگ وسواس به خرج داد؛ پس اولین گام بررسی اندازه تصاویر است:


    مثل همیشه توجه به رابط کاربری بسیار مهم است، پس بهتر است ابتدا چند سوال از خودمان بپرسیم:
    • باید از چه فرمت هایی برای تصاویر استفاده کنیم؟ PNG گزینه ای بسیار عالی برای فرمت عکس های وب است که تعداد رنگ در آنها محدود بوده یا شفافیت آنها چندان بالا نیست؛ فرمت PEG هم بهترین گزینه برای عکس هاست.
    • ابعاد: حداکثر پهنا و ارتفاعی که تصویر با آن نشان داده خواهد شد، چه مقدار است؟
    • و در آخر این که آیا نیاز به استفاده از این همه تصویر هست؟
    اگر در یک تصویر از متن استفاده کرده اید، بهتر است آن را حذف کرده و فونت های واقعی را به کار بگیرید؛ از گرافیک وکتور یا CSS برای کارهایی مثل لوگو یا سایه زنی در صفحات استفاده نمایید. Tom bennet در این مورد معتقد است:

    “سریعترین درخواست HTTP هنوز به وجود نیامده است.”

    اما بعد از این که Tom bennet اندازه تصاویر استفاده شده در صفحه وب را تغییر داد و آنها را نمونه‌ های جدید جایگزین کرد، چه اتفاقی افتاد و این امر روی سرعت کلی وب سایت چه تاثیری گذاشت؟

    بعد از تغییر تصاویر شاهد کاهش 1.2 ثانیه ای (یا به عبارتی 30 درصدی) زمان بارگذاری صفحه و بالا بردن سرعت بارگذاری سایت بودیم.

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

صبر کنید ..
X