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

Milica Mihajlija

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

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

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

בדיקות של Lighthouse Bot ב-GitHub נכשלות
בדיקות של Lighthouse Bot ב-GitHub.

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

1. הגדרה

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

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

2. פריסה ב-Firebase

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

פריסה ב-Firebase

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

npm install -g firebase-tools

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

firebase login

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

firebase init

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

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

במהלך התהליך הזה נוצר קובץ הגדרות firebase.json בספריית השורש של הפרויקט.

כל הכבוד, הכול מוכן לפריסה! הרצה:

firebase deploy

תוך שנייה תהיה לכם אפליקציה פעילה.

3. הגדרת Travis

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

שילוב של אפליקציות GitHub ב-Travis CI

אחרי שיש לכם חשבון

עוברים אל Settings (הגדרות) בפרופיל, לוחצים על הכפתור Sync account (סנכרון החשבון) ומוודאים שמאגר הפרויקט מופיע ב-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 אומר ל-Travis להתקין את כל התלות ולבנות את האפליקציה. עכשיו אתם יכולים לדחוף את האפליקציה לדוגמה למאגר שלכם ב-GitHub. אם עוד לא עשיתם את זה, מריצים את הפקודה הבאה:

git push origin main

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

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

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

אישור של Firebase

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

firebase login:ci

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

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

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

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

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

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

דוחפים את השינוי הזה ל-GitHub ומחכים לפריסה האוטומטית הראשונה. אם תבדקו את יומן הרישום של Travis, בקרוב יופיע בו הכיתוב ✔️ Deploy complete!‎ (הפריסה הושלמה).

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

5. הגדרת Lighthouse Bot

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

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

סטטוס שיתוף הפעולה של בוט Lighthouse

אישור הבקשות האלה הוא תהליך ידני, ולכן הוא לא תמיד מתבצע באופן מיידי. לפני שמתחילים בבדיקה, מוודאים ש-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_success:

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

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

Lighthouse Bot יבדוק רק בקשות משיכה, כך שאם תבצעו push לענף הראשי עכשיו, תקבלו רק את ההודעה This script can only be run on Travis PR requests ביומן של Travis.

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

  1. יצירת ענף חדש
  2. דחיפה ל-GitHub
  3. שליחת pull request

מחכים בדף של בקשת המיזוג עד ש-Lighthouse Bot יתחיל לשיר. 🎤

ציונים שעוברים ב-Lighthouse

העברת בדיקות ב-GitHub

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

אפשרויות נוספות ב-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.