שימוש בבוט Lighthouse להגדרת תקציב ביצועים

Milica Mihajlija

השקעת מאמצים רבים כדי להגיע מהר, עכשיו כדאי להקפיד לפעול במהירות בעזרת אוטומציה בדיקת ביצועים באמצעות Lighthouse Bot.

Lighthouse מעניק לאפליקציה שלכם ציונים ב-5 קטגוריות, ואחת מהן היא ביצועים. אפשר לנסות לזכור עוקבים אחרי שינויים בביצועים בעזרת DevTools או Lighthouse CLI כל גם כשאתם עורכים את הקוד, אתם לא צריכים לעשות את זה. כלים יכולים לבצע בשבילכם את הדברים המייגעים. Travis CI הוא שירות מעולה מריצה בדיקות של האפליקציה בענן באופן אוטומטי בכל פעם שדוחפים קוד חדש.

Lighthouse Bot משתלב עם Travis CI, והתכונה של תקציב הביצועים שלו מבטיחה שלא תתבצע פגיעה לא מכוונת בביצועים בלי שתבחינו בכך. אתם יכולים להגדיר את המאגר כך שלא יאפשר למזג בקשות משיכה אם הציונים של Lighthouse נמוכים מהסף שהגדרתם (למשל, פחות מ-96/100).

אפשר לבדוק את הביצועים ב-localhost, אבל בדרך כלל הביצועים של האתר יהיו שונים בשרתים פעילים. כדי לקבל תמונה מציאותית יותר, מומלץ לפרוס את האתר בשרת ייעודי לניסיון. אפשר להשתמש בכל שירות אירוח. במדריך הזה נשתמש באירוח ב-Firebase.

1. הגדרה

האפליקציה הפשוטה הזו עוזרת לך למיין שלושה מספרים.

משכפלים את הדוגמה מ-GitHub, ולהוסיף אותו כמאגר בחשבון GitHub שלכם.

2. פריסה ב-Firebase

כדי להתחיל, צריך חשבון Firebase. אחרי שתסיימו, תוכלו ליצור פרויקט חדש במסוף Firebase בלחיצה על 'הוספת פרויקט':

פריסה ב-Firebase

כדי לפרוס את האפליקציה, תצטרכו את Firebase CLI. גם אם כבר התקנתם אותו, מומלץ לעדכן את ה-CLI לגרסה האחרונה לעיתים קרובות באמצעות הפקודה הבאה:

npm install -g firebase-tools

כדי לתת הרשאה ל-CLI של Firebase, מריצים את הפקודה:

firebase login

עכשיו מאתחלים את הפרויקט:

firebase init

במהלך ההגדרה, תוצג לכם בקונסולה סדרה של שאלות:

• כשמתבקשים לבחור תכונות, בוחרים באפשרות 'אירוח'.
• לפרויקט ברירת המחדל ב-Firebase, בוחרים את הפרויקט שיצרתם במסוף Firebase.
• הקלד "ציבורי" בתור הספרייה הציבורית שלכם.
• מקלידים 'N' (לא) כדי להגדיר אפליקציה של דף יחיד.

התהליך הזה יוצר קובץ תצורה firebase.json בתיקיית השורש של הפרויקט.

כל הכבוד. הכול מוכן לפריסה! הפעלה:

firebase deploy

תוך רגע תהיה לכם אפליקציה פעילה.

3. ההגדרה של Travis

תצטרכו לפתוח חשבון ב-Travis ואז להפעיל את השילוב של GitHub Apps בקטע 'הגדרות' בפרופיל.

אחרי שיוצרים חשבון

עליך לעבור אל 'הגדרות' שמתחת לפרופיל, ללחוץ על הלחצן 'סנכרון חשבון' ולוודא מאגר הפרויקטים שלכם רשום ב-Travis.

כדי להתחיל את תהליך השילוב הרציף, צריך שני דברים:

1. להכיל קובץ .travis.yml בתיקיית השורש
2. כדי להפעיל build באמצעות git push רגיל

במאגר lighthouse-bot-starter כבר יש קובץ YAML של .travis.yml:

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

קובץ ה-YAML מנחה את טראוויס להתקין את כל יחסי התלות ולבנות את האפליקציה. עכשיו תורכם לדחוף את האפליקציה לדוגמה למאגר שלכם ב-GitHub. מריצים את הפקודה הבאה, אם עדיין לא עשיתם זאת:

git push origin main

לוחצים על המאגר בקטע 'הגדרות' ב-Travis כדי לראות את ה-Travis של הפרויקט במרכז הבקרה. אם הכול תקין, צבע הסטטוס של ה-build ישתנה מצהוב לירוק תוך כמה דקות. 🎉

4. אוטומציה של פריסת Firebase באמצעות Travis

בשלב 2, התחברתם לחשבון Firebase ופרסתם את האפליקציה מה שורת הפקודה firebase deploy. כדי ש-Travis תפרוס את האפליקציה שלך עליך לתת הרשאה ל-Firebase. איך עושים את זה? באמצעות אסימון Firebase. 🗝️🔥

נותנים הרשאה ל-Firebase

כדי ליצור את האסימון, מריצים את הפקודה הבאה:

firebase login:ci

תיפתח כרטיסייה חדשה בחלון הדפדפן כדי ש-Firebase תוכל לאמת אתכם. לאחר מכן, מביטים לאחור במסוף ורואים את האסימון החדש שנוצר. מעתיקים אותו וחוזרים ל-Travis.

במרכז הבקרה של Travis בפרויקט, עוברים אל More options (אפשרויות נוספות) > הגדרות > משתני סביבה.

מדביקים את האסימון בשדה הערך, נותנים למשתנה את השם FIREBASE_TOKEN ומוסיפים אותו.

הוספת פריסה להגדרות של Travis

צריך להוסיף את השורות הבאות כדי להורות ל-Travis לפרוס את האפליקציה אחרי כל build מוצלח. מוסיפים אותן בסוף הקובץ .travis.yml. 🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

צריך להעביר את השינוי הזה ל-GitHub ולהמתין לפריסה האוטומטית הראשונה. אם תסתכלו ביומן של טראוויס, בקרוב אמור להופיע הכיתוב ✔️ הפריסה הושלמה!

עכשיו בכל פעם שמבצעים שינויים באפליקציה, הם פרוסים באופן אוטומטי ב-Firebase.

5. הגדרת ה-bot של Lighthouse

ה-bot הידידותי של Lighthouse מעדכן אתכם לגבי הדירוגים של האפליקציה ב-Lighthouse. צריך רק הזמנה למאגר שלך.

ב-GitHub, עוברים להגדרות הפרויקט ומוסיפים את lighthousebot כמשתף פעולה ('הגדרות' > 'שותפי עריכה'):

אישור הבקשות האלה הוא תהליך ידני ולכן הן לא תמיד מתבצעות באופן מיידי. לפני שמתחילים את הבדיקה, צריך לוודא ש-lighthousebot אישר את סטטוס שיתוף הפעולה שלו. בינתיים, צריך גם להוסיף מפתח נוסף למשתני הסביבה של הפרויקט ב-Travis. אפשר להשאיר כאן את כתובת האימייל כדי לקבל מפתח ל-Lighthouse Bot בתיבת הדואר הנכנס. 📬

ב-Travis, מוסיפים את המפתח הזה כמשתנה סביבה ונותנים לו את השם LIGHTHOUSE_API_KEY:

הוספה של Lighthouse Bot לפרויקט

בשלב הבא מוסיפים את Lighthouse Bot לפרויקט באמצעות הפקודה הבאה:

npm i --save-dev https://github.com/ebidel/lighthousebot

ולהוסיף את הביט הזה אל package.json:

"scripts": {
  "lh": "lighthousebot"
}

הוספת Lighthouse Bot לתצורה של Travis

הטריק האחרון הוא לבדוק את הביצועים של האפליקציה אחרי כל בקשת משיכה.

בקטע .travis.yml, מוסיפים עוד שלב ב-after_ עשויות:

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

המערכת תבצע בדיקת Lighthouse בכתובת ה-URL שצוינה, לכן צריך להחליף את https://staging.example.com בכתובת ה-URL של האפליקציה (כלומר your-app-123.firebaseapp.com).

כדאי להגדיר סטנדרטים גבוהים ולשנות את ההגדרה כך שלא תאשרו שינויים באפליקציה שיורידו את ציון הביצועים מתחת ל-95:

- npm run lh -- --perf=95 https://staging.example.com

שליחת בקשת משיכה כדי להפעיל בדיקת Bot של Lighthouse ב-Travis

ה-bot של Lighthouse יבדוק רק בקשות משיכה, כך שאם תשלחו עכשיו דחיפה להסתעפויות הראשית, יופיע ביומן של Travis רק הכיתוב "This script can only be run on Travis PR requests".

כדי להפעיל את הבדיקה של Lighthouse Bot:

1. תשלום בסניף חדש
2. דחיפה ל-GitHub
3. שליחת בקשת משיכה

עליכם להמתין בדף של בקשת המשיכה ולחכות לבוט של Lighthouse שישיר. 🎤

ציון הביצועים מצוין, האפליקציה לא עברה את התקציב והבדיקה עברה.

אפשרויות נוספות ב-Lighthouse

זכור לך ש-Lighthouse בודק 5 קטגוריות שונות? אפשר לאכוף ציונים עבור כל אחד מאלה שיש לגביו דגלים ב-Lighthouse Bot:

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

דוגמה:

npm run lh -- --perf=93 --seo=100 https://staging.example.com

הבדיקה תיכשל אם ציון הביצועים יירד מתחת ל-93 או אם ציון ה-SEO יירד מתחת ל-100.

אפשר גם לבחור שלא לקבל תגובות מ-Lighthouse Bot באמצעות האפשרות --no-comment.