שימוש בבוט 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

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

npm install -g firebase-tools

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

firebase login

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

firebase init

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

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

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

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

firebase deploy

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

3. ההגדרה של Travis

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

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

עוברים אל 'הגדרות' בפרופיל, לוחצים על הלחצן 'סנכרון חשבון' ומוודאים שהמאגר של הפרויקט מופיע ב-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. אם הכול תקין, צבע הסטטוס של ה-build ישתנה מצהוב לירוק תוך כמה דקות. 🎉

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 לפרוס את האפליקציה אחרי כל build מוצלח. מוסיפים אותן בסוף הקובץ .travis.yml. 🔚

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

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

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

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

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

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

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

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

הוספת ה-bot של Lighthouse לפרויקט

בשלב הבא מוסיפים את 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

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

Lighthouse Bot יבדוק רק בקשות משיכה, כך שאם תדחוףו להסתעפות הראשית עכשיו, יופיע ביומן טראוויס רק את ההודעה 'אפשר להריץ את הסקריפט הזה רק בבקשות של Travis PR'.

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

1. איך מבצעים צ'ק-אאוט של הסתעפות חדשה
2. דחיפה ל-GitHub
3. שליחת בקשת משיכה

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

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

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

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

--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, ה-PR ייכשל.

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