Frontend Lighthouse CI: ניטור ביצועים רציף לאפליקציות ווב

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

מהו Lighthouse CI?

Lighthouse CI הוא כלי קוד פתוח לבדיקות ביצועים אוטומטיות, המשתלב בצורה חלקה בתהליכי האינטגרציה הרציפה והאספקה הרציפה (CI/CD) שלכם. הוא ממנף את כלי הביקורת Lighthouse של גוגל כדי לספק תובנות מעשיות לגבי ביצועי האתר, הנגישות, ה-SEO ושיטות העבודה המומלצות. על ידי שילוב Lighthouse CI בתהליך העבודה שלכם, תוכלו לנטר באופן רציף את ביצועי האתר, לעקוב אחר רגרסיות, ולהבטיח שכל שינוי קוד תורם לחוויית משתמש טובה יותר. Lighthouse CI אינו קשור לספק ענן ספציפי וניתן להשתמש בו עם הגדרות שונות. לדוגמה, הוא יכול לרוץ בתוך קונטיינר של Docker בשירותים כמו Github Actions, Jenkins, CircleCI ועוד רבים.

למה להשתמש ב-Lighthouse CI?

יישום Lighthouse CI מציע יתרונות רבים:

• זיהוי מוקדם של רגרסיות בביצועים: זהו בעיות ביצועים שנוצרו על ידי שינויי קוד חדשים לפני שהם מגיעים לסביבת הייצור (production).
• שיפור ביצועי האתר: קבלו תובנות מעשיות כיצד למטב את האתר שלכם למהירות, נגישות ו-SEO.
• חווית משתמש משופרת: ספקו אתר מהיר וידידותי יותר למשתמש ששומר על מעורבות המבקרים.
• הפחתת שיעור הנטישה (Bounce Rate): מטבו את זמני הטעינה כדי להפחית את תסכול המשתמשים ולמנוע מהם לעזוב את האתר שלכם.
• הגדלת שיעורי ההמרה: אתר מהיר יותר מוביל בדרך כלל לשיעורי המרה גבוהים יותר ולתוצאות עסקיות טובות יותר.
• בדיקות ביצועים אוטומטיות: שלבו בדיקות ביצועים בתהליך ה-CI/CD שלכם לניטור רציף.
• קבלת החלטות מבוססת נתונים: בססו את מאמצי האופטימיזציה שלכם על מדדי ביצועים ותובנות קונקרטיות.
• מעקב ביצועים לטווח ארוך: נטרו את ביצועי האתר שלכם לאורך זמן כדי לזהות מגמות ולמדוד את ההשפעה של האופטימיזציות שלכם.

תכונות עיקריות של Lighthouse CI

• ביקורות אוטומטיות: מריץ ביקורות Lighthouse באופן אוטומטי כחלק מתהליך ה-CI/CD שלכם.
• תקציבי ביצועים: הגדירו תקציבי ביצועים כדי להבטיח שהאתר שלכם נשאר בגבולות הביצועים המקובלים.
• מעקב רגרסיות: עוקב אחר רגרסיות בביצועים לאורך זמן, ומאפשר לכם לזהות את שינויי הקוד שגרמו להן.
• תובנות מעשיות: מספק דוחות מפורטים עם המלצות מעשיות כיצד לשפר את ביצועי האתר שלכם.
• תצורה ניתנת להתאמה אישית: הגדירו את Lighthouse CI כדי לענות על הצרכים והדרישות הספציפיות שלכם.
• אינטגרציה עם כלי CI/CD: משתלב בצורה חלקה עם כלי CI/CD פופולריים כמו Jenkins, CircleCI, GitHub Actions ו-GitLab CI.
• קוד פתוח: Lighthouse CI הוא פרויקט קוד פתוח, כלומר הוא חופשי לשימוש ולשינוי.

הגדרת Lighthouse CI: מדריך צעד אחר צעד

להלן מדריך מקיף להגדרת Lighthouse CI עבור הפרויקט שלכם:

1. התקנת Lighthouse CI CLI

ראשית, עליכם להתקין את ממשק שורת הפקודה (CLI) של Lighthouse CI באופן גלובלי באמצעות npm או yarn:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. הגדרת Lighthouse CI

צרו קובץ בשם lighthouserc.js בתיקיית השורש של הפרויקט שלכם כדי להגדיר את Lighthouse CI. קובץ זה מגדיר את כתובות ה-URL לביקורת, את כללי ה-assertion ואפשרויות תצורה נוספות.

הנה דוגמה בסיסית לקובץ lighthouserc.js:

            module.exports = {
  ci:
   {
    collect: {
      url: ['http://localhost:3000', 'http://localhost:3000/about']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'temporary-public-storage'
    },
  },
};

            

              
                Copy
              
            
          

הסבר:

• collect.url: מציין את כתובות ה-URL שיבוקרו על ידי Lighthouse. בדוגמה זו, אנו בודקים את דף הבית ואת דף ה-"אודות" של אתר שרץ על localhost:3000. זכרו להחליף זאת בכתובות הרלוונטיות לפרויקט *שלכם*, אשר עשויות לכלול סביבות staging.
• assert.preset: משתמש ב-preset lighthouse:recommended, שמחיל סט של assertions מוגדרים מראש המבוססים על המלצות Lighthouse. זו נקודת התחלה טובה, אך ניתן להתאים אישית את ה-assertions הללו לפי הצורך.
• upload.target: מגדיר היכן יועלו תוצאות Lighthouse CI. האפשרות temporary-public-storage שימושית לבדיקות ופיתוח, אך עבור סביבות ייצור, בדרך כלל תרצו להשתמש בפתרון אחסון קבוע יותר (שנדון בו בהמשך).

3. שילוב Lighthouse CI בתהליך ה-CI/CD שלכם

השלב הבא הוא לשלב את Lighthouse CI בתהליך ה-CI/CD שלכם. הצעדים המדויקים ישתנו בהתאם לספק ה-CI/CD שלכם, אך התהליך הכללי כולל הוספת סקריפט לתצורת ה-CI/CD שלכם שמריץ את פקודות Lighthouse CI.

דוגמה באמצעות GitHub Actions:

צרו קובץ בשם .github/workflows/lighthouse-ci.yml במאגר שלכם עם התוכן הבא:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'
      - name: Install dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/cli@0.11.x
          lhci autorun

            

              
                Copy
              
            
          

הסבר:

• on.push.branches: מפעיל את ה-workflow בדחיפות לענף main.
• on.pull_request: מפעיל את ה-workflow בבקשות משיכה (pull requests).
• jobs.lighthouse.runs-on: מציין את מערכת ההפעלה שתשמש לעבודה (במקרה זה, Ubuntu).
• steps: מגדיר את השלבים שיבוצעו בעבודה:
• actions/checkout@v3: מבצע checkout למאגר.
• actions/setup-node@v3: מגדיר את Node.js.
• npm ci: מתקין את התלויות.
• Run Lighthouse CI: מריץ את פקודות Lighthouse CI:
• npm install -g @lhci/cli@0.11.x: מתקין את ה-CLI של Lighthouse CI באופן גלובלי. *חשוב*: תמיד מומלץ לנעול גרסה ספציפית.
• lhci autorun: מריץ את Lighthouse CI במצב "autorun", אשר אוסף באופן אוטומטי ביקורות, מאמת תקציבי ביצועים, ומעלה את התוצאות.

שיקולים חשובים לשילוב CI/CD:

• הפעלת השרת: לפני הרצת lhci autorun, ודאו ששרת הווב שלכם פועל (למשל, npm start). ייתכן שתצטרכו להוסיף שלב לתצורת ה-CI/CD שלכם כדי להפעיל את השרת ברקע.
• מיגרציות מסד נתונים: אם האפליקציה שלכם תלויה במסד נתונים, ודאו שמיגרציות מסד הנתונים מורצות כחלק מתהליך ה-CI/CD שלכם *לפני* הרצת Lighthouse CI.
• משתני סביבה: אם האפליקציה שלכם דורשת משתני סביבה, ודאו שהם מוגדרים כראוי בסביבת ה-CI/CD שלכם.

4. הרצת Lighthouse CI

כעת, בכל פעם שתדחפו שינויים לענף main או תיצרו בקשת משיכה, ה-workflow של Lighthouse CI ירוץ באופן אוטומטי. התוצאות יהיו זמינות בממשק של GitHub Actions.

5. צפייה בתוצאות Lighthouse CI

תוצאות Lighthouse CI יועלו למיקום שצוין בקובץ lighthouserc.js שלכם (למשל, temporary-public-storage). תוכלו לגשת לתוצאות אלו על ידי לחיצה על הקישור שסופק בפלט ה-CI/CD. תוצאות אלו מספקות מידע מפורט על ביצועי האתר, הנגישות, ה-SEO ושיטות העבודה המומלצות.

הגדרת Assertions ותקציבי ביצועים

Lighthouse CI מאפשר לכם להגדיר assertions ותקציבי ביצועים כדי להבטיח שהאתר שלכם עומד ביעדי הביצועים. Assertions הם כללים הבודקים מדדי ביצועים ספציפיים (לדוגמה, First Contentful Paint, Largest Contentful Paint) מול ספים מוגדרים מראש. תקציבי ביצועים מגדירים מגבלות מקובלות עבור מדדי ביצועים שונים.

הנה דוגמה כיצד להגדיר assertions בקובץ lighthouserc.js שלכם:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      assertions: {
        'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
        'total-blocking-time': ['warn', { maxNumericValue: 500 }],
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.8 }],
      }
    },
   upload: {
      target: 'temporary-public-storage'
    },
  }
};

            

              
                Copy
              
            
          

הסבר:

• first-contentful-paint: מגדיר סף אזהרה עבור First Contentful Paint (FCP) של 2000ms.
• largest-contentful-paint: מגדיר סף אזהרה עבור Largest Contentful Paint (LCP) של 2500ms.
• cumulative-layout-shift: מגדיר סף אזהרה עבור Cumulative Layout Shift (CLS) של 0.1.
• total-blocking-time: מגדיר סף אזהרה עבור Total Blocking Time (TBT) של 500ms.
• categories:performance: מגדיר סף אזהרה עבור הציון הכולל של קטגוריית הביצועים על 0.9.
• categories:accessibility: מגדיר סף שגיאה עבור הציון הכולל של קטגוריית הנגישות על 0.8.

רמות Assertion:

• off: משבית את ה-assertion.
• warn: מציג אזהרה אם ה-assertion נכשל.
• error: מכשיל את ריצת Lighthouse CI אם ה-assertion נכשל.

התאמה אישית של Assertions:

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

בחירת יעד להעלאת דוחות Lighthouse CI

האפשרות upload.target בקובץ lighthouserc.js שלכם מציינת היכן יועלו תוצאות Lighthouse CI. היעד temporary-public-storage נוח לבדיקות ופיתוח, אך אינו מתאים לסביבות ייצור מכיוון שהנתונים אינם נשמרים לצמיתות.

הנה כמה יעדי העלאה חלופיים:

• שרת Lighthouse CI: הגישה המומלצת לסביבות ייצור היא להשתמש בשרת Lighthouse CI. שרת Lighthouse CI מספק פתרון אחסון קבוע לתוצאות Lighthouse CI שלכם, וכן ממשק משתמש לצפייה וניתוח הנתונים. ניתן לפרוס אותו לספקי ענן שונים או לארח אותו על תשתית משלכם.
• Google Cloud Storage: אתם יכולים להעלות את תוצאות Lighthouse CI שלכם ל-bucket של Google Cloud Storage. זהו פתרון חסכוני וניתן להרחבה לאחסון הנתונים שלכם.
• Amazon S3: בדומה ל-Google Cloud Storage, אתם יכולים להעלות את תוצאות Lighthouse CI שלכם ל-bucket של Amazon S3.

הגדרת שרת Lighthouse CI:

הגדרת שרת Lighthouse CI כוללת את השלבים הבאים:

1. התקנת שרת Lighthouse CI: ניתן להתקין את שרת Lighthouse CI באמצעות npm או yarn:

            npm install -g @lhci/server
yarn global add @lhci/server
            

              
                Copy
              
            
          

2. הגדרת מסד הנתונים: שרת Lighthouse CI דורש מסד נתונים לאחסון הנתונים שלו. ניתן להשתמש במגוון מסדי נתונים, כולל PostgreSQL, MySQL ו-SQLite. הגדירו את פרטי החיבור למסד הנתונים בקובץ ה-.env.
3. הפעלת שרת Lighthouse CI: הפעילו את שרת Lighthouse CI באמצעות הפקודה lhci server.
4. הגדרת ה-CLI של Lighthouse CI לשימוש בשרת: עדכנו את קובץ lighthouserc.js שלכם כדי להשתמש בשרת Lighthouse CI כיעד ההעלאה:

            module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000']
    },
    assert: {
      preset: 'lighthouse:recommended'
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'http://your-lhci-server.com',
      token: 'YOUR_LHCI_TOKEN'
    },
  }
};

            

              
                Copy
              
            
          

החליפו את http://your-lhci-server.com בכתובת ה-URL של שרת Lighthouse CI שלכם ואת YOUR_LHCI_TOKEN באסימון הגישה (access token) של הפרויקט שלכם.

שיטות עבודה מומלצות לשימוש ב-Lighthouse CI

כדי להפיק את המרב מ-Lighthouse CI, עקבו אחר השיטות המומלצות הבאות:

• הרצת Lighthouse CI על כל שינוי קוד: שלבו את Lighthouse CI בתהליך ה-CI/CD שלכם כדי להריץ ביקורות על כל שינוי קוד. זה יעזור לכם לתפוס רגרסיות בביצועים מוקדם.
• הגדרת תקציבי ביצועים: הגדירו תקציבי ביצועים כדי להבטיח שהאתר שלכם נשאר בגבולות הביצועים המקובלים.
• ניטור מגמות ביצועים: עקבו אחר ביצועי האתר שלכם לאורך זמן כדי לזהות מגמות ולמדוד את ההשפעה של האופטימיזציות שלכם.
• תעדוף מאמצי אופטימיזציה: התמקדו קודם כל באופטימיזציה של מדדי הביצועים הקריטיים ביותר.
• השתמשו בנתוני עולם אמיתי: השתמשו בנתונים מהעולם האמיתי כדי לבסס את מאמצי האופטימיזציה שלכם. לדוגמה, ניתן להשתמש ב-Google Analytics כדי לזהות את הדפים הפופולריים ביותר בקרב המשתמשים שלכם.
• בדיקה על מכשירים אמיתיים: בדקו את האתר שלכם על מכשירים אמיתיים כדי להבטיח שהוא מתפקד היטב בתנאי עולם אמיתי.
• סקירה קבועה של תוצאות Lighthouse CI: הקפידו לסקור באופן קבוע את תוצאות Lighthouse CI ולנקוט בפעולה כדי לטפל בכל בעיות ביצועים שזוהו.
• אופטימיזציית תמונות: מטבו את התמונות שלכם כדי להקטין את גודל הקובץ שלהן מבלי לפגוע באיכות. כלים כמו ImageOptim (macOS), TinyPNG ו-ImageKit שימושיים לכך.
• מזעור (Minify) של CSS ו-JavaScript: מזערו את קבצי ה-CSS וה-JavaScript שלכם כדי להקטין את גודלם. כלים כמו UglifyJS ו-CSSNano יכולים לעזור בכך.
• מינוף שמירת מטמון בדפדפן (Browser Caching): השתמשו במנגנוני שמירת מטמון בדפדפן כדי להפחית את מספר הבקשות שהאתר שלכם מבצע לשרת.
• שימוש ברשת אספקת תוכן (CDN): השתמשו ב-CDN כדי להפיץ את תוכן האתר שלכם לשרתים ברחבי העולם. זה יכול לשפר את זמני הטעינה עבור משתמשים במיקומים גיאוגרפיים שונים. שירותים כמו Cloudflare ו-Amazon CloudFront הם CDN פופולריים.
• דחיית טעינת תמונות מחוץ למסך (Defer Offscreen Images): יישמו טעינה עצלה (lazy loading) עבור תמונות שאינן נראות מיד על המסך. זה יכול לשפר משמעותית את זמן טעינת הדף הראשוני. ניתן להשתמש במאפיין loading="lazy" לטעינה עצלה פשוטה.
• הסרת משאבים חוסמי רינדור (Render-Blocking Resources): זהו והסירו משאבים שחוסמים את רינדור הדף שלכם. זה כולל לעתים קרובות הטמעת CSS קריטי (inlining) ודחיית טעינת CSS ו-JavaScript שאינם קריטיים.
• הפחתת זמן ביצוע JavaScript: נתחו את קוד ה-JavaScript שלכם כדי לזהות ולמטב פונקציות איטיות. טכניקות כמו פיצול קוד (code splitting) וניעור עצים (tree shaking) יכולות לעזור להפחית את כמות ה-JavaScript שיש להוריד ולהריץ.

טכניקות מתקדמות ב-Lighthouse CI

לאחר שתהיו נוחים עם היסודות של Lighthouse CI, תוכלו לחקור כמה טכניקות מתקדמות כדי לשפר עוד יותר את ניטור הביצועים שלכם:

• ביקורות Lighthouse מותאמות אישית: אתם יכולים ליצור ביקורות Lighthouse מותאמות אישית כדי לבדוק בעיות ביצועים ספציפיות הרלוונטיות לאפליקציה שלכם.
• תצורת Headless Chrome: הגדירו את Headless Chrome לשימוש באמולציות מכשירים ספציפיות או בהגדרות ויסות רשת (network throttling).
• אינטגרציה עם כלי ניטור: שלבו את Lighthouse CI עם כלי הניטור הקיימים שלכם (לדוגמה, New Relic, Datadog) כדי לקבל תמונה מקיפה יותר של ביצועי האתר שלכם.
• בדיקות רגרסיה ויזואלית: שלבו את Lighthouse CI עם כלים לבדיקת רגרסיה ויזואלית כדי לזהות שינויים ויזואליים שעלולים להשפיע על הביצועים.

Lighthouse CI לקהלים גלובליים: שיקולים לאתרים בינלאומיים

כאשר משתמשים ב-Lighthouse CI עבור אתרים המיועדים לקהלים גלובליים, יש לקחת בחשבון את הנקודות הבאות:

• בדיקה ממספר מיקומים: זמני התגובה של השרת יכולים להשתנות באופן משמעותי בהתבסס על מיקום המשתמש. השתמשו ב-CDN (רשת אספקת תוכן) ושקלו להריץ ביקורות Lighthouse CI מאזורים גיאוגרפיים שונים כדי לקבל תמונה מדויקת יותר של הביצועים עבור המשתמשים הבינלאומיים שלכם. חלק מספקי ה-CI/CD מציעים אפשרויות לציין את המיקום הגיאוגרפי של ה-runner.
• התחשבות בתנאי רשת: מהירויות הרשת והשהיות (latency) משתנות מאוד ברחבי העולם. הדמו תנאי רשת שונים במהלך ביקורות ה-Lighthouse CI שלכם כדי להבין כיצד האתר שלכם מתפקד תחת אילוצים שונים. Lighthouse מאפשר לווסת את חיבור הרשת, ובכך לדמות חיבורים איטיים יותר כמו 3G.
• לוקליזציה של תוכן: ודאו שהתוכן המותאם לשפות שונות ממוטב כראוי. זה כולל אופטימיזציה של תמונות עבור שפות וערכות תווים שונות, וקידוד נכון כדי למנוע בעיות תצוגה.
• טעינת גופנים: מטבו את טעינת הגופנים עבור שפות שונות. שקלו להשתמש ב-font-display: swap כדי למנוע מטקסט להיות בלתי נראה במהלך טעינת הגופן.
• סקריפטים של צד שלישי: היו מודעים לסקריפטים של צד שלישי, שכן הם יכולים להשפיע באופן משמעותי על הביצועים, במיוחד עבור משתמשים באזורים עם חיבורי רשת איטיים יותר. בדקו את ביצועי הסקריפטים של צד שלישי באופן קבוע ושקלו להשתמש בטעינה אסינכרונית או לארח בעצמכם סקריפטים קריטיים.
• אופטימיזציה למובייל: השימוש במובייל נפוץ בחלקים רבים של העולם. ודאו שהאתר שלכם מותאם למכשירים ניידים ושהביקורות של Lighthouse CI כוללות בדיקות ספציפיות למובייל.

פתרון בעיות נפוצות ב-Lighthouse CI

להלן מספר בעיות נפוצות שאתם עשויים להיתקל בהן בעת שימוש ב-Lighthouse CI וכיצד לפתור אותן:

• Lighthouse CI נכשל עם שגיאת "Timeout": זה יכול לקרות אם לאתר שלכם לוקח יותר מדי זמן להיטען או אם Lighthouse CI אינו מצליח להתחבר לאתר שלכם. נסו להגדיל את ערך הזמן הקצוב (timeout) בקובץ lighthouserc.js שלכם או בדקו את יומני השרת של האתר שלכם לאיתור שגיאות.
• Lighthouse CI מדווח על תוצאות לא עקביות: תוצאות Lighthouse יכולות להשתנות מעט בין ריצות עקב תנאי רשת או גורמים אחרים. הריצו מספר ביקורות כדי לקבל ממוצע יציב יותר.
• Lighthouse CI נכשל בהעלאת התוצאות: בדקו את תצורת upload.target שלכם וודאו ששרת Lighthouse CI שלכם פועל ונגיש. כמו כן, ודאו שהגדרתם את אסימון הגישה הנכון.
• Lighthouse CI מדווח על רגרסיות ביצועים לא צפויות: חקרו את שינויי הקוד שבוצעו לפני שהרגרסיה זוהתה. השתמשו בדוחות של Lighthouse CI כדי לזהות את מדדי הביצועים הספציפיים שירדו והתמקדו במאמצי האופטימיזציה שלכם באזורים אלו.

סיכום

Frontend Lighthouse CI הוא כלי רב עוצמה לניטור ביצועים רציף של אפליקציות ווב. על ידי שילוב Lighthouse CI בתהליך ה-CI/CD שלכם, תוכלו לזהות ולטפל בבעיות ביצועים באופן יזום, ולהבטיח שהאתר שלכם מספק חווית משתמש אופטימלית. זכרו להתאים את ההגדרות, כללי ה-assertion ומיקומי הבדיקה עבור קהלים גלובליים כדי ליצור את החוויה הטובה ביותר האפשרית עבור משתמשים ברחבי העולם.

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