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

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

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

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

למרות שאפשר לבדוק את הביצועים במארח מקומי, בדרך כלל האתר ישיג ביצועים שונים בשרתים פעילים. כדי לקבל תמונה מציאותית יותר, עדיף לפרוס את האתר בשרת Staging. אפשר להשתמש בכל שירות אירוח. במדריך הזה נסביר על אירוח ב-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.
• מקלידים את המילה 'ציבורי' בתור הספרייה הציבורית.
• כדי להגדיר כאפליקציה עם דף יחיד, מקלידים "N" (לא).

התהליך הזה יוצר קובץ תצורה firebase.json ברמה הבסיסית (root) של ספריית הפרויקט.

איזה כיף, הכול מוכן לפריסה! הפעלה:

firebase deploy

בעוד שבריר שנייה תהיה לך אפליקציה פעילה.

3. הגדרת טראוויס

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

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

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

כדי להתחיל באינטגרציה רציפה (CI) צריך שני דברים:

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

במאגר 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 של הפרויקט, עוברים אל אפשרויות נוספות > הגדרות > משתני סביבה.

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

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

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

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

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

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

5. הגדרת בוט Lighthouse

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

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

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

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

הוספת Lighthouse בוט לפרויקט שלך

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

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

והוסיפו את הקטע הזה ל-package.json:

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

הוספת בוט Lighthouse לתצורת טראוויס

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

ב-.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 ב-Travis

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

כדי להפעיל את הבדיקה של 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.

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