بعد تحديد ميزانية الأداء، يحين وقت إعداد عملية التصميم لتتبّعها. هناك عدد من الأدوات التي تسمح لك بتحديد الحدود الدنيا لمقاييس الأداء المختارة، وتحذّرك في حال تجاوز الميزانية. تعرف على كيفية اختيار أفضل ما يناسب احتياجاتك والإعداد الحالي. 🕵️ ♀️
ميزانيات Lighthouse الخاصة بالأداء
Lighthouse هي أداة تدقيق تختبر المواقع الإلكترونية في بعض المجالات الرئيسية، مثل الأداء وتسهيل الاستخدام وأفضل الممارسات ومستوى أداء موقعك الإلكتروني كتطبيق ويب تقدّمي.
يتيح إصدار سطر الأوامر من Lighthouse (الإصدار 5 والإصدارات الأحدث) ضبط ميزانيات الأداء استنادًا إلى ما يلي:
- حجم المورد
- عدد الموارد
يمكنك ضبط ميزانيات لأيٍّ من أنواع الموارد التالية:
document
font
image
media
other
script
stylesheet
third-party
total
يتم ضبط الميزانيات في ملف JSON، وبعد تحديدها، يُخبرك العمود الجديد "تجاوز الميزانية" بما إذا كنت تتجاوز أي حدود.
نصائح أداء حزمة الويب
Webpack هي أداة تصميم فعالة لتحسين كيفية تسليم الرموز البرمجية للمستخدمين. وتتيح أيضًا إعداد ميزانيات الأداء استنادًا إلى حجم مادة العرض.
فعِّل تلميحات الأداء في webpack.config.js
للحصول على تحذيرات أو أخطاء سطر الأوامر عند ازدياد حجم الحزمة بشكل يتجاوز الحدّ الأقصى. ويُعدّ هذا الأمر وسيلة رائعة للبقاء على دراية بأحجام مواد العرض خلال عملية التطوير.
بعد خطوة الإصدار، تقدِّم حزمة الويب قائمة بمواد العرض وأحجامها مصنَّفة حسب اللون. يتم تمييز أي شيء يتجاوز الميزانية باللون الأصفر.
إنّ الحدّ الأقصى التلقائي لكلّ من مواد العرض ونقاط الدخول هو 250 كيلوبايت. يمكنك تحديد أهدافك الخاصة في ملف الإعداد.
تتمّ مقارنة الميزانيات بأحجام مواد العرض غير المضغوطة. يرتبط حجم JavaScript غير المضغوط بوقت التنفيذ، وقد يستغرق تنفيذ الملفات الكبيرة وقتًا طويلاً، خاصةً على الأجهزة الجوّالة.
حجم الحزمة
Bundlesize هي حزمة بسيطة من npm تختبر حجم مادة العرض وفقًا للحد الأدنى الذي حدّدته. ويمكن تشغيله محليًا ودمجه مع CI.
واجهة سطر الأوامر بحجم الحزمة
شغِّل bundlesize CLI من خلال تحديد حدّ والملف الذي تريد اختباره.
bundlesize -f "dist/bundle.js" -s 170kB
ينتج عن Bundlesize نتائج اختبار مصنَّفة حسب اللون في سطر واحد.
حجم الحزمة لمعيار CI
ستحصل على أقصى قيمة من حجم الحزمة إذا دمجتها مع CI لفرض حدود الحجم على طلبات السحب. في حال تعذّر اختبار حجم الحزمة، لا يتم دمج طلب السحب هذا. تعمل هذه الميزة مع طلبات السحب على GitHub مع Travis CI وCircleCI وWercker وDrone.
ربما يكون لديك تطبيق سريع اليوم، ولكن إضافة رمز جديد يمكن أن يؤدي في كثير من الأحيان إلى تغيير ذلك. سيساعدك التحقّق من طلبات السحب من خلال حجم الحزمة على تجنب أي تراجع في الأداء. يستخدم Bootstrap وTinder وTrivago وغيرهم الكثيرين من أجل الحفاظ على ميزانياتهم.
وباستخدام حجم الحزمة، يمكن وضع حدود لكل ملف على حدة. ويكون هذا الأمر مفيدًا على وجه الخصوص عند تقسيم حزمة في تطبيقك.
وهي تختبر أحجام مواد العرض المضغوطة بتنسيق gzip بشكل تلقائي. يمكنك استخدام خيار الضغط للتبديل إلى ضغط broli أو إيقافه بالكامل.
برنامج تتبُّع Lighthouse
يتكامل برنامج Lighthouse Bot مع Travis CI ويفرض الميزانيات استنادًا إلى أي من فئات تدقيق Lighthouse الخمس. على سبيل المثال، ميزانية قدرها 100 لنتيجة أداء Lighthouse. قد يكون من الأسهل أحيانًا تتبّع رقم واحد بدلاً من أن تأخذ ميزانيات مواد العرض الفردية، وتأخذ نتائج Lighthouse في الاعتبار عدة أمور.
يُجري برنامج تتبُّع Lighthouse عملية تدقيق بعد نشر موقع إلكتروني على خادم مرحلي. في .travis.yml
، يمكنك تحديد ميزانيات لفئات معيّنة من Lighthouse مع خيارات --perf
أو --a11y
أو --bp
أو --seo
أو --pwa
. استهدف البقاء في المنطقة الخضراء بدرجات 90 على الأقل.
after_success: - ./deploy.sh # Deploy the PR changes to staging server - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test
إذا كانت نتائج طلب السحب على GitHub أدنى من الحدّ الذي ضبطته، يمكن أن يمنع برنامج Lighthouse Bot دمج طلب السحب. ⛔
بعد ذلك، يعلّق برنامج Lighthouse Bot على طلب السحب مع عرض النتائج المعدَّلة. وهذه ميزة أنيقة تشجع على التحدث حول الأداء مع حدوث تغييرات في التعليمات البرمجية.
إذا تبيّن لك أنّ طلب السحب محظور بسبب نتيجة سيئة في Lighthouse، يمكنك إجراء تدقيق باستخدام واجهة سطر الأوامر في Lighthouse أو في أدوات مطوّري البرامج. وينشئ تقريرًا بتفاصيل حول المؤثِّرات السلبية وتلميحات عن تحسينات بسيطة.
ملخّص
الأداة | CLI | CI | ملخّص |
---|---|---|---|
منارة | ✔️ | ❌ |
|
حزمة الويب | ✔️ | ❌ |
|
حجم الحزمة | ✔️ | ✔️ |
|
برنامج تتبُّع Lighthouse | ❌ | ✔️ |
|