سوالاتی برای ساختن و برقرار کردن راهنمای FrontEnd (جلسه 22) : Performance یا کارائی - قسمت 1

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۲۱ فروردین ۱۳۹۶

frontend

در جلسه گذشته در مورد ابزارهای مربوط به Lint کردن و بهینه سازی کد برای شما توضیحاتی رو قرار دادیم و ابزارهای معروف رو بهتون معرفی کردیم. در این جلسه میخوایم در مورد ابزارهای مربوط به Performance و عملکرد و کارائی توضیح بدیم.

Performance یا کارائی

  • آیا شما از Performance Budget استفاده می کنید؟

هدف اصلی Performance Budget یا بودجه کارائی اینه که شما بر روی عملکرد و کارائی سایت خودتون تمرکز کنید. با اینکار و سختی دادن به خودتون و محدود کردن سایت، کاری میکنید که کاربرانتون با سایتی سریعتر و بهینه تر سر و کار داشته باشن و از کار کردن با اون لذت ببرن. همونطور که میدونید هر سایتی از اجزای مختلف تشکیل شده. CSS و JS و فونتها و ... هر کدام حجمی دارن و زمانی که اونا رو در کنار همدیگه قرار میدیم، حجم بزرگی درست میشه و حالا اگر کاربر وارد سایت بشه، مرورگر این موارد رو دانلود میکنه. بسته به سرعت اینترنت کاربر، زمان دانلود و نمایش سایت مختلف خواهد بود. پس هر چه که ما بتونیم سایز موارد تشکیل دهنده سایتمون رو کمتر کنیم، باعث میشه که کاربران با سایتی سریعتر و بهتر سر و کار داشته باشن. تعدادی معیار یا metric هست که میتونین با استفاده از اونا Performance Budget خودتون رو مشخص کنید. میتونین در این لینک بیشتر در مورد این Metric ها مطالعه کنید.

بعد از اینکه بودجه خودمون رو با استفاده از معیارهای مختلفی که وجود داره محاسبه کردیم، حالا باید تاثیر و نتایج اون رو هم در عمل ببینیم و متوجه بشیم که کارائی و عملکرد سایت بهتر شده است یا نه. در این زمینه هم میتونین از ابزارهای مختلفی برای چک کردن سایتتون استفاده کنید.

یک ابزار بنام performance budget calculator وجود داره که میتونین بودجه سایت خودتون رو با استفاده از اون محاسبه کنید. این سایت از یک نوع خاص از معیارهایی که وجود داره استفاده کرده. شما میاید کاربران هدفتون رو مشخص میکنید. برای اینکار باید دو چیز رو مشخص کنید.

  • نوع اینترنت کاربران هدف که مثلا میتونین کسانی که Mobile 2G Slow دارن رو مشخص کنید
  • مدت زمان لود شدن سایت با توجه به نوع اینترنت انتخاب شده

خب برای اینکار ابتدا وارد سایت مورد نظر میشیم:performance budget calculator 1

خب میخوایم بودجه و مقداری که میتونیم از اون درون سایتمون استفاده کنیم و سایتی بهینه داشته باشیم رو حساب کنیم.

  1. در این قسمت مدت زمان مورد نظر برای لود شدن رو مشخص کنید. ما در اینجا 5 ثانیه قرار میدیم
  2. در این قسمت میتونین نوع ارتباط اینترنتی کاربرانتون رو مشخص کنید. ما در اینجا Mobile 3G Slow رو انتخاب میکنیم
  3. با کلیک بر روی Calculate، بودجه ما با توجه به موارد انتخابی محاسبه میشه.

پس ما میخوایم سایتمون برای کاربرانی که Mobile 3G Slow استفاده میکنن، در مدت زمان 5 ثانیه لود بشه. با کلیک بر روی Calculate بودجه بصورت زیر نمایش داده میشه:performance budget calculator 2

همونطور که میبینید بودجه ما 480 کیلوبایت محاسبه شده. یعنی سایت ما میتونه 480 کیلوبایت بودجه داشته باشه و بر روی موبایلهای 3G Slow، در مدت 5 ثانیه لود و نمایش داده بشه. حالا ما طراح یا مدیر سایت هستیم و 480 کیلوبایت بودجه داریم. باید این بودجه رو بطوری بین اجزای مختلف سایتمون تقسیم کنیم. این سایت خودش بصورت اتوماتیک به هر جزء مقداری رو نسبت داده و برای این مقادیری هم که قرار داده، دلیل های خودش رو داره. مثلا همه ما میدونیم که تصاویر بیشتر از همه از بودجه سهم دارن. همونطور که در تصویر بالا میبینید، مقادیر زیر بصورت اتوماتیک برای اجزا قرار داده شده:

  • HTML با 12KB
  • CSS با 16KB
  • Javascript یا 79KB
  • Images با 302KB
  • Video با 48KB
  • Fonts با 24KB

پس حالا که بودجه رو میدونم، میتونم با توجه به این سایزها کدنویسی کنم و کدهامو فشرده کنم و از دیگر تکنیکهای بهینه سازی که وجود داره استفاده کنم تا از این بودجه تجاوز نکنم. شاید یکی با خودش بگه که من نمیخوام درون سایتم از فونتها و ویدیوها استفاده کنم. پس در تصویر بالا بودجه مربوط به فونت و ویدیو رو میتونین 0 کنید و بجاش اونو بین بقیه موارد تقسیم کنید. برای اینکار برای هر جزء یک اسلایدر وجود داره که میتونین اون رو حرکت بدین. بصورت زیر:performance budget calculator 3

همونطور که دیدید سهمیه مربوط به اجزا رو تغییر دادیم و به سهم CSS و تصاویر افزودیم. بصورت زیر:

  • HTML با 12KB
  • CSS با 61KB
  • Javascript یا 79KB
  • Images با 328KB
  • Video با 0KB
  • Fonts با 0KB

خب بعد از اینکه سهم مربوط به همه رو مشخص کردید، بر روی دکمه Finish کلیک کنید. بعد از اینکار خروجی بصورت زیر به شما نمایش داده میشه:performance budget calculator 4

همونطور که دیدید سهمیه اجزاء رو مشخص کرده. در انتها هم جدولی رو قرار میده که به شما میگه که چه زمانی طول میکشه تا سایت شما با توجه به نوع اینترنت، برای کاربران نمایش داده بشه.performance budget calculator 5

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

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل