اطلاعیه

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

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

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

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

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

    آموزش سئو سایت با افزایش سرعت سایت را در مقالات نیوسئو بارها مطرح کردیم. در این مقاله به این مسئله می پردازیم که چگونه تصاویر صفحات وب را برای افزایش سرعت سایت، بهینه سازی کنیم؟
    شعار رسمی گوگل "شرور نباش" است، اما به نظر می رسد این شرکت یک شعار داخلی دیگر هم داشته باشد که آن را علنی نکرده است: "یا سرعت بالایی دارید یا به فنا خواهید رفت."

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

    اما به نظر می رسد این تصور کاملا اشتباه باشد. آقای tom bennet، رئیس توسعه محصولات آژانس بازاریابی آنلاین Builtvisible در سخنرانی اخیرش در کنفرانس Brighten SEO، به نکات بسیار خوبی در این زمینه اشاره کرد. در ادامه برخی از نکات کلیدی که او در مورد چرایی و چگونگی تمرکز روی ارائه تجربه ای سریع و سبک از وب سایت برای کاربران به آنها اشاره کرد را بازگو خواهیم کرد.

    چرا سرعت وب سایت مهم است؟

    آموزش سئو,افزایش سرعت سایت,بالا بردن سرعت بارگذاری سایت


    از آمار و ارقام صحبت کردیم، این طور نیست؟

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

    اما نباید تصور کرد که صرفا سرعت مهمترین عامل موثر در جایگاه وب سایت است. سرعت بالای وب سایت تجربه کاربری را روی هم رفته بهبود می‌ بخشد. آقای bennet به عنوان مثال به این آمار فوق العاده از فایرفاکس اشاره می کند:

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


    هنگامی که فایرفاکس میانگین سرعت بارگذاری را 2.2 ثانیه افزایش داد، دانلود فرم‌ ها 15.4 درصد بیشتر شد. این میزان برابر با بیش از 10 میلیون دانلود در هر سال است.

    هنگامی که چنین آمار و ارقامی را می شنوید، ارزش مساله شفاف تر می شود. Tom bennet، جمله‌ ای هم از Steve Souder، از فعالان و پیشگامان بهبود وب مدرن نقل می‌کند:

    "80 تا 90 درصد از زمان پاسخگویی در Front-end (توسعه رابط کاربری) صرف می شود. از اینجا شروع کنید."

    با این حساب متوجه می شویم که می توان در این مورد کاری مثبت انجام داد. اما بهتر است تلاش هایمان را در کجا متمرکز کنیم؟


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


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


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

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

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


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


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

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

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

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

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