دسته بندی ها

گنجاندن بودجه عملکرد در فرایند توسعه سایت

بارگذاری سریع وبسایت

بعد از تهیه بودجه عملکردی سایت، برای دستیابی به اهداف و افزایش سرعت سایت باید بودجه را در فرایند توسعه وب‎سایت وارد کنیم.

اولین بودجه کارایی و سرعت سایت Performance budgets

بعد از اینکه که بودجه عملکرد را تعریف کردید، زمان آن رسیده است که فرآیند توسعه را برای نظارت بر دستیابی به اهداف بودجه تهیه شده تنظیم کنید. ابزارهایی وجود دارند که به شما امکان می‌دهند آستانه‌هایی را برای معیارهای انتخابی تعریف کنید که در صورت تجاوز از بودجه به شما هشدار دهند. در این مقاله قصد داریم به شما بیاموزیم که چگونه یکی را انتخاب کنیم که به بهترین وجه با نیازها و تنظیمات فعلی مطابقت داشته باشد. 🕵️‍♀️

بودجه عملکرد در توسعه وب با Lighthouse

Lighthouse یک ابزار بررسی و ممیزی است که سایت‌ها را در چند زمینه کلیدی آزمایش می‌کند – سرعت ، دسترسی، بهترین شیوه‌ها و سرعت سایت شما به عنوان یک برنامه وب پیشرفته (progressive web application).

Lighthouse به روش های مختلفی قابل استفاده است اما برای اینکه از آن برای تنظیم بودجه عملکرد سایت استفاده کنید و انحراف از مقادیر مشخص شده را به شما گزارش دهد باید از نسخه خط فرمان آن (command line version) استفاده کنید

ابزار Lighthouse (v5+) command line version از تنظیم بودجه عملکرد بر اساس موارد زیر پشتیبانی می‌کند:

  • اندازه منبع
  • تعداد منابع

می‌توانید برای هر یک از انواع منابع زیر بودجه تعیین کنید:

  • document
  • font
  • image
  • media
  • other
  • script
  • stylesheet
  • third-party
  • total

بودجه‌ها در یک فایل JSON تنظیم می‌شوند و پس از تعریف آن‌ها، ستون جدید «Over Budget» به شما می‌گوید که آیا از هر محدودیتی فراتر می‌روید یا خیر.

گنجاندن بودجه عملکرد در فرایند توسعه سایت - بخش "بودجه ها" در گزارش Lighthouse
بخش “بودجه ها” در گزارش Lighthouse

تنظیمات هشدار بودجه عملکرد در فرایند توسعه با Webpack

Webpack یک ابزار ساخت قدرتمند برای بهینه‌سازی نحوه تحویل کد شما به کاربران است. همچنین از تنظیم بودجه عملکرد بر اساس اندازه فایل‌ها و دارایی‌ها پشتیبانی می‌کند.

برای استفاده از این ابزار محدوده های بودجه عملکرد را در webpack.config.js فعال کنید تا زمانی که اندازه بسته شما بیش از حد مجاز افزایش می‌یابد، اخطارها یا خطاهای خط فرمان را دریافت کنید. این یک روش عالی برای حفظ اندازه و حجم دارایی ها در طول توسعه وب سایت است.

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

تنظیمات هشدار بودجه عملکرد در Webpack
حجم فایل bundle.js که به رنگ زرد درآمده از بودجه تعیین شده فراتر رفته است ❗

حد پیش‌فرض (هم برای دارایی‌ها و هم برای نقاط ورودی) 250 کیلوبایت است. شما می‌توانید اهداف خود را در فایل پیکربندی تنظیم کنید.

گنجاندن بودجه عملکرد در فرایند توسعه سایت
هشدار اندازه بسته وب پک ⚠️

در ابزار webpack بودجه ها با حجم دارایی ها در حالت فشرده نشده مقایسه می‌شوند، و این بدین دلیل است که فایل های جاوا اسکریپت برای اجرا از حالت فشرده خارج می‌شوند و اجرای فایل های بزرگ به خصوص در دستگاه های تلفن همراه ممکن است زمان زیادی ببرد.

اندازه فایل‌ها در حالت فشرده بر زمان انتقال تأثیر می‌گذارد، که در شبکه های کند بسیار مهم است.

ویژگی Bonus: بسته webpack نه تنها به شما هشدار می دهد، بلکه به شما توصیه می کند که چگونه بسته های خود را کوچک کنید. 💁
ویژگی Bonus: بسته webpack نه تنها به شما هشدار می دهد، بلکه به شما توصیه می کند که چگونه بسته های خود را کوچک کنید. 💁

Bundlesize

Bundlesize یک بسته ساده npm است که اندازه دارایی را با برابر آستانه ای که شما در بودجه کارایی تعیین کرده اید آزمایش می‌کند و می‌تواند به صورت محلی اجرا شود و یا با CI ادغام گردد.

Bundlesize CLI

با تعیین آستانه و فایلی که می‌خواهید آزمایش کنید، Bundlesize CLI را اجرا کنید.

bundlesize -f "dist/bundle.js" -s 170kB

Bundlesize نتایج آزمون را به صورت رنگی را در یک خط نشان می‌دهد.

Bundlesize نتایج آزمون را به صورت رنگی را در یک خط نشان می‌دهد.
تست bundlesize CLI ناموفق ❌
Bundlesize نتایج آزمون را به صورت رنگی را در یک خط نشان می‌دهد.
تست bundlesize CLI موفق ✔️

Lighthouse CI

Lighthouse CI - گنجاندن بودجه عملکرد در فرایند توسعه سایت

می‌توان Lighthouse Ci را با ابزار Travis CI ادغام و بودجه را بر اساس هر یک از پنج پارامتر Lighthouse اعمال کرد. به عنوان مثال، یک بودجه با نمره 100 برای عملکرد Lighthouse و مراقبت از رعایت آن در فرایند توسعه ساده‌تر از بودجه بندی و بررسی تک تک پارامترهای Lighthouse است.

گنجاندن بودجه عملکرد در فرایند توسعه سایت،پس از استقرار یک سایت در سرور،  Lighthouse CI بررسی را شروع می‌کند

پس از استقرار یک سایت در سرور، Lighthouse CI بررسی را شروع می‌کند. در travis.yml برای معیارهای خاص Lighthouse با گزینه های--perf, --a11y, --bp, --seo و --pwa بودجه تعیین کنید. برای مثال می‌توانید با در نظر گفتن 90 به عنوان حداقل امتیاز برای همیشه معیار مورد نظرتان سبز بماند.

جمع‌بندی

ابزارCLICIخلاصه
Lighthouse✔️بودجه برای انواع مختلف منابع بر اساس اندازه یا تعداد آنها.
webpack✔️بودجه بر اساس اندازه دارایی های تولید شده توسط وب پک.
اندازه های فشرده نشده را بررسی می‌کند.
bundlesize✔️✔️بودجه بر اساس اندازه منابع خاص.
اندازه های فشرده یا غیر فشرده را بررسی می‌کند.
Lighthouse ci✔️بودجه بر اساس امتیازات Lighthouse.

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

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