77612516-09196476211

تهران ، خیابان بهار جنوبی ، کوچه آصف‌ وزیری ، واحد2

Top

عوامل افزایش سرعت سایت

boost-performance

عوامل افزایش سرعت سایت

47% از بازدیدکنندگان سایت شما فقط 2 ثانیه منتظر لود شدن می مانند و اگر بیشتر از 3 ثانیه طول بکشد 40 % از آن ها سایت را ترک میکنند . هر ثانیه رضایت مشتری را 16% و فروش را 7 % کاهش می دهد .

به عبارت ساده ، عملکرد یک سایت می تواند باعث موفقیت یا شکست یک سایت شود .

کاهش حجم سایت

بهترین روش برای بالا بردن سرعت یک صفحه وب این است که تعداد کیلو های سایت ، که همان محتوا باشد را کاهش بدهید .

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

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

تصاویر

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

چگونه می توانم تصاویر خود را کاهش دهیم ؟

در گام اول تصاویر خود را در فتوشاپ باز کنید و از قسموت منو ها ، منوی file را باز کرده و گزینه save for web را انتخاب کنید . این پنل ویژه دارای همه گزینه ها در رابطه با بهینه سازی تصاویر می باشد (تصویر زیر را ببینید)

برای شروع ، وضوع تصویر را با وضوحی که قرار است در سایت نمایش داده شود را یکسان کنید . اگر قرار است تصویر شما در ابعاد 600px نمایش داده شود پس چرا تصویری با ابعاد 1600px انتخاب شود ؟ با تغییر تصاویر به ابعاد کوچکتر ، گامی موثر در کاهش حجم فایل بردارید .

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

JPEG, GIF, PNG و SVG چهار فرمت اصلی مورد استفاده در وب هستند و هر کدام در جاهای خاصی کاربرد دارند . بیاید آنها را بررسی کنیم و بفهمیم چه طور بهینه سازی می شوند .

JPEG

نوعی فایل اصلی است که بیشتر در دوربین های دیجیتال استفاده می شود . این فرمت ضعیف است به این معنی که داده های تصویر را کاهش می دهد و به طور چشمگیری موجب کاهش حجم فایل می شوند . در این روند کیفیت تصویر کاهش می یابد . برای حفظ تعادل بین حجم و وضوح ، شما باید توانایی تنظیم کیفیت تصویر در مقیاس 1-100 را داشته باشد .

seve for image , تغییر حجم تصویر

با توجه به سیستم هوشمند آن، مزایای عکس های JPEG در کاهش حجم فایل یش از سایر فرمت ها است . به همین دلیل 90% عکس های استفاده شده در سایت به فرمت است . از فرمت های PNG و GIF زمانی استفاده می شود که تعداد رنگ ها به شدت محدود باشد .

به یاد داشته باشید ، اگه باز هم شما می خواهید از عکس های زیبا تر استفاده کنید می توانید بیش از حد وضوح عکس را کاهش ندهید و این بستگی به نحوه تنظیمات شما دارد . . JPEG کیفیت بین 30 تا 60 درصدی می تواند تعادل خوبی بین وضوح تصویر و حجم فایل ایجاد کند .

GIF

GIF نیز یک فرمت فشرده سازی در تصاویر است که استفاده های فراوانی دارد. از این فرمت در تصاویر transparency (شفاف) نیز استفاده می شود اما بزرگترین مزیت آن استفاده در انیمیشن های کوتاست که بیشتر جنبه کمدی یا گویا دارد .

gif, animate,انیمیشن

فایل های GIF طراحان اغلب از 2 یا 256 رنگ استفاده می کنند بنابراین شاید از نظر رنگ چندان جالب نباشد . کاهش تعداد رنگ ها می تواند در می تواند در کاهش حجم فایل بسیار موثر باشد . اگر وضوح عکس برای شما مهم نیست می توانید از این فرمت استفاده کنید .

PNG

PNG یک سیستم فشرده سازی دیگر است .و دارای بالاترین کیفیت بین تمامی فرمت های موجود در وب است . این فرمت از عکس های شفاف (transparent) پشتیبانی می کند و این از اصلی ترین دلایلی است که از این فرمت استفاده می شود .

PNG از دو فرمت PNG-8 و PNG-24 تشکیل شده است  .PNG-24 نسخه با کیفیت این فرمت است در حالی که PNG-8 مثل GIF برای اندازه های کوچک مناسب است زیرا از تنها از چند رنگ استفاده می کند به عنوان مثال برای آرم ساده یک شرکت

SVG

SVG کاملا متفاوت از سه فرمت قبل است . این فرمت از گرافیک برداری استفاده می کند و اغلب در Adobe Illustrator و Sketch طراحی می شوند . چرا متفاوت از سایر فرمت هاست ؟ شما می توانید یک فایل SVG را تا چند برابر اندازه اصلی آن بزرگ کنید و یا فوق العاده کوچک کنید آن هم با بالاترین کیفیت . این عکس ها را شما با CSS هم می توانید به شکل دلخواه استفاده کنید .

svg,svg image,عکس svg

استفاده از اندازه تصویرهای مختلف در دستگاه های مختلف

آیا شما فکر میکنید که برای بهتر دیده شدن عکسی در تلفنی با صفحه نمایش 3 اینچی به یک عکس مناسب در مانیتور 32 اینچی احتیاح دارید؟ جواب منفی است ، شما می توانید به طرز قابل توجهی وضوح تصویر را کاهش دهید و کیفیت قابل قبولی را در تلفن ببینید در حالی که حجم فایل شدیدا کاهش پیدا کرده است .

دستگاه های تلفن همراه دارای تکنولوژی 3G / 4G اغلب سرعت کمتری دارند بنابراین تلاش برای کاهش حجم فایل فایل بسیار حیاتی است زیرا 50% بازدیدکنندگان شما از طریق تلفن همراه است .

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

جمع بندی در مورد تصاویر :

پس نکات کلیدی در تصاویر به شرح زیر شد :

  • از فرمت PNG برای تصاویر شفاف (transparent)
  • از فرمت GIF برای تصاویر انیمیشن
  • از SVG برای آیکون های ساده و آرم ها
  • اگر تصویر دارای رنگ های کمی است از فرمت PNG-8 یا GIF
  • برای تصاویر با تعداد رنگ های زیاد از فرمت JPEG با کیفیت پایین تر استفاده شود
  • از تصاویر با اندازه مناسب در سایت خود استفاده کنید برای مثال از تصویر 5000px برای محل 500px استفاده نمی شود
  • از تصاویر کوچکتر برای صفحه نمایش های کوچکتر استفاده کنید . این بخشی از مفهموم طراحی واکنش گرا است .

کوچک کردن CSS و جاوا اسکریپت

تصاویر تنها مواردی نیستند که میشود آن ها را تغییر داد . فایل های متنی سایت را نیز با minifying کردن میتوان کاهش داد .

minifying از روش کاهش تعداد کاراکتر در فایل ها ( این  تنها در مورد فایل های css و js می باشد) استفاده می کند. minifying با از بین بردن فضای خالی (فاصله و شکست خط) و با جایگزین کردن کلمات کوتاه به جای کلمات طولانی این کار را انجام می دهد . minifying  اغلب باعث کاهش 60% حجم فایل می شود .

شما می تواند از cssminifier و JSminifier برای minifying کردن فایل های CSS و JavaScript خود استفاده کنید .

استفاده از هاست سریع تر

جدای از ساخت سایت های کم حجم ، دو راه دیگر برای افزایش سرعت لود سایت وجود دارد :

  • بازدید از سایت با اینترنت پر سرعت
  • استفاده از هاست های با سرعت بیشتر

شما نمی توانید برای همه بازدیدکنندگان سایت خود اینترنت پر سرعت تهیه کنید اما با انتخاب یک هاست با سرعت خوب می توانید این مهم را برای همه فراهم کنید .

می توانید شروع کنید ، ممکن است سرعت در دستان شما باشد

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

نظری ثبت نشده است