בדיקות ביצועי פרונטאנד: שילוב Lighthouse CI לשיפור מתמיד

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

מדוע בדיקות ביצועי פרונטאנד חשובות?

לפני שנצלול לתוך Lighthouse CI, בואו נבין מדוע בדיקות ביצועי פרונטאנד הן קריטיות:

• חווית משתמש: אתר מהיר ורספונסיבי מספק חווית משתמש טובה יותר, המובילה למעורבות גבוהה יותר ולהפחתת שיעורי נטישה. דמיינו לקוח פוטנציאלי בטוקיו, יפן, המנסה לרכוש מוצר באתר מסחר אלקטרוני הנטען לאט. סביר להניח שהוא ינטוש את האתר ויחפש חלופות.
• דירוג SEO: מנועי חיפוש כמו גוגל מתחשבים במהירות ובביצועי האתר כגורמי דירוג. אתרים מהירים יותר נוטים לדרג גבוה יותר בתוצאות החיפוש, מה שמביא יותר תנועה אורגנית. יוזמת Core Web Vitals של גוגל מדגישה את חשיבותם של גורמים כמו Largest Contentful Paint (LCP), First Input Delay (FID), ו-Cumulative Layout Shift (CLS) עבור SEO.
• נגישות: שיפורי ביצועים מובילים לעיתים קרובות לנגישות טובה יותר עבור משתמשים עם מוגבלויות. קוד ותמונות שעברו אופטימיזציה יכולים לשפר את החוויה עבור משתמשים המסתמכים על קוראי מסך או כאלה עם רוחב פס מוגבל.
• שיעורי המרה: אתר מהיר יותר יכול להשפיע ישירות על שיעורי ההמרה. מחקרים הראו שעיכוב של שנייה אחת בלבד בזמן טעינת הדף יכול להוביל לירידה משמעותית בהמרות. חשבו על משתמש במומבאי, הודו, המנסה להזמין טיסה. תהליך הזמנה איטי עלול לגרום לו לנטוש את הרכישה ולבחור במתחרה.
• אופטימיזציה של משאבים: בדיקות ביצועים עוזרות לזהות אזורים שבהם ניתן לבצע אופטימיזציה של משאבים, מה שמוביל לחיסכון בעלויות במונחים של תשתית שרתים ושימוש ברוחב פס.

היכרות עם Lighthouse CI

Lighthouse CI הוא כלי קוד פתוח ואוטומטי שתוכנן להשתלב בצורה חלקה בתהליך ה-CI/CD שלכם. הוא מריץ את Lighthouse, כלי ביקורת פופולרי שפותח על ידי גוגל, ומספק תובנות לגבי ביצועי האתר, הנגישות, ה-SEO, השיטות המומלצות והתאימות ל-Progressive Web App (PWA). Lighthouse CI עוזר לכם:

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

הגדרת Lighthouse CI

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

1. התקנת Lighthouse CI

התקינו את ה-CLI של Lighthouse CI באופן גלובלי באמצעות npm או yarn:

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

              
                Copy
              
            
          

2. הגדרת תצורה עבור Lighthouse CI

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

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

בואו נפרט את התצורה הזו:

• collect.url: מערך של כתובות URL לביקורת. דוגמה זו בודקת את דף הבית ואת דף האודות. עליכם לכלול את כל הדפים הקריטיים באתר שלכם, תוך התחשבות במקרי שימוש שונים. לדוגמה, אתר מסחר אלקטרוני עשוי לכלול את דף הבית, דפי רשימת מוצרים, דפי פרטי מוצר ותהליך התשלום.
• collect.startServerCommand: הפקודה להפעלת שרת הפיתוח שלכם. זה הכרחי אם Lighthouse CI צריך לרוץ מול סביבת פיתוח מקומית.
• collect.numberOfRuns: מספר הפעמים שיש להריץ ביקורות Lighthouse עבור כל כתובת URL. הרצת ביקורות מרובות עוזרת למתן שינויים בתנאי רשת וגורמים אחרים.
• assert.assertions: סט של קביעות (assertions) לאימות תוצאות ביקורת Lighthouse. כל קביעה מציינת מדד או קטגוריה וסף. אם הסף לא מתקיים, הבנייה תיכשל. דוגמה זו קובעת ספים עבור קטגוריות ביצועים, נגישות, שיטות מומלצות ו-SEO. היא גם קובעת ספים עבור מדדים ספציפיים כמו First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), ו-Cumulative Layout Shift (CLS).
• upload.target: מציין לאן להעלות את דוחות Lighthouse. temporary-redirect מעלה את הדוחות למיקום אחסון זמני ומספק כתובת URL לגישה אליהם. אפשרויות אחרות כוללות שימוש בשרת Lighthouse CI או פתרונות אחסון בענן כמו Google Cloud Storage או Amazon S3.

3. אינטגרציה עם מערכת ה-CI/CD שלכם

השלב הבא הוא לשלב את Lighthouse CI בתהליך ה-CI/CD שלכם. הנה דוגמה כיצד לשלב אותו עם GitHub Actions:

צרו קובץ .github/workflows/lighthouse.yml במאגר שלכם:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

תהליך עבודה (workflow) זה מבצע את השלבים הבאים:

• מוריד את הקוד (checkout).
• מגדיר את Node.js.
• מתקין תלויות.
• מריץ את Lighthouse CI. שלב זה תחילה בונה את היישום (npm run build), ואז מריץ lhci autorun, אשר מבצע את ביקורות Lighthouse ומאמת את התוצאות מול הספים שהוגדרו.

התאימו את תהליך העבודה הזה למערכת ה-CI/CD הספציפית שלכם ולדרישות הפרויקט. לדוגמה, אם אתם משתמשים ב-GitLab CI, תצטרכו להגדיר קובץ .gitlab-ci.yml עם שלבים דומים.

4. הרצת Lighthouse CI

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

תצורה מתקדמת והתאמה אישית

Lighthouse CI מציע מגוון רחב של אפשרויות תצורה והתאמה אישית. הנה כמה תכונות מתקדמות:

1. שימוש בשרת Lighthouse CI

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

ראשית, פרסו את השרת. קיימות אפשרויות פריסה שונות, כולל Docker, Heroku וספקי ענן כמו AWS ו-Google Cloud. עיינו בתיעוד של Lighthouse CI לקבלת הוראות מפורטות על פריסת השרת.

לאחר שהשרת פועל, עדכנו את קובץ ה-lighthouserc.js שלכם כדי שיצביע על השרת:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

החליפו את YOUR_LHCI_SERVER_URL בכתובת ה-URL של שרת Lighthouse CI שלכם ואת YOUR_LHCI_SERVER_TOKEN בטוקן שנוצר על ידי השרת. הטוקן מאמת את תהליך ה-CI שלכם מול השרת.

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

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

ניתן להגדיר תקציבי ביצועים בקובץ ה-lighthouserc.js שלכם באמצעות המאפיין assert.assertions. לדוגמה, כדי להגדיר תקציב ביצועים עבור First Contentful Paint (FCP), ניתן להוסיף את הקביעה הבאה:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

קביעה זו תכשיל את הבנייה אם ה-FCP גדול מ-2500 מילישניות.

3. התאמה אישית של תצורת Lighthouse

Lighthouse CI מאפשר לכם להתאים אישית את תצורת Lighthouse כך שתתאים לצרכים הספציפיים שלכם. ניתן להגדיר הגדרות Lighthouse שונות, כגון:

• onlyAudits: ציינו רשימה של ביקורות להרצה.
• skipAudits: ציינו רשימה של ביקורות לדלג עליהן.
• throttling: הגדירו הגדרות ויסות רשת (throttling) כדי לדמות תנאי רשת שונים.
• formFactor: ציינו את סוג המכשיר (מחשב שולחני או נייד) לאמולציה.
• screenEmulation: הגדירו הגדרות אמולציית מסך.

כדי להתאים אישית את תצורת Lighthouse, ניתן להעביר דגל --config-path לפקודת lhci autorun, המצביע על קובץ תצורת Lighthouse מותאם אישית. עיינו בתיעוד של Lighthouse לקבלת רשימה מלאה של אפשרויות תצורה.

4. ביקורת על דפים הדורשים אימות

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

גישה נפוצה אחת היא להשתמש בדגל --extra-headers כדי להעביר קובצי Cookie של אימות ל-Lighthouse CI. ניתן להשיג את קובצי ה-Cookie מכלי המפתחים של הדפדפן לאחר התחברות לאתר.

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

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

• הריצו את Lighthouse CI באופן קבוע: שלבו את Lighthouse CI בתהליך ה-CI/CD שלכם כדי להריץ ביקורות באופן אוטומטי עם כל קומיט או בקשת משיכה. זה מבטיח שרגרסיות בביצועים יתגלו מוקדם ויטופלו במהירות.
• הגדירו תקציבי ביצועים ריאליים: הגדירו תקציבי ביצועים מאתגרים אך ברי השגה. התחילו עם תקציבים שמרניים והקשיחו אותם בהדרגה ככל שביצועי האתר שלכם משתפרים. שקלו להגדיר תקציבים שונים עבור סוגים שונים של דפים, בהתאם למורכבותם וחשיבותם.
• התמקדו במדדי מפתח: תעדפו את מדדי הביצועים המרכזיים שיש להם את ההשפעה הגדולה ביותר על חווית המשתמש והתוצאות העסקיות. מדדי ה-Core Web Vitals של גוגל (LCP, FID, ו-CLS) הם נקודת התחלה טובה.
• חקרו וטפלו בבעיות ביצועים: כאשר Lighthouse CI מזהה בעיות ביצועים, חקרו אותן ביסודיות ויישמו פתרונות מתאימים. השתמשו בדוחות Lighthouse כדי לזהות את הסיבות השורשיות לבעיות ולתעדף את התיקונים המשפיעים ביותר.
• נטרו ביצועים לאורך זמן: עקבו אחר מדדי ביצועים לאורך זמן כדי לזהות מגמות ודפוסים. השתמשו בשרת Lighthouse CI או בכלי ניטור אחרים כדי להציג נתוני ביצועים ולזהות תחומים לשיפור.
• חנכו את הצוות שלכם: ודאו שהצוות שלכם מבין את חשיבותם של ביצועי פרונטאנד וכיצד להשתמש ב-Lighthouse CI ביעילות. ספקו הדרכה ומשאבים כדי לעזור להם לשפר את כישוריהם וידיעותיהם.
• התחשבו בתנאי רשת גלובליים: בעת הגדרת תקציבי ביצועים, התחשבו בתנאי הרשת באזורים שונים בעולם. למשתמשים באזורים עם מהירויות אינטרנט נמוכות יותר עשויה להיות חוויה שונה מאשר למשתמשים באזורים עם מהירויות גבוהות יותר. השתמשו בכלים לדמות תנאי רשת שונים במהלך הבדיקות.
• בצעו אופטימיזציה לתמונות: אופטימיזציה של תמונות היא היבט קריטי בביצועי פרונטאנד. השתמשו בכלים כמו ImageOptim, TinyPNG, או ממירים מקוונים כדי לדחוס ולבצע אופטימיזציה לתמונות מבלי לאבד איכות. השתמשו בפורמטים מודרניים של תמונות כמו WebP, המציעים דחיסה ואיכות טובות יותר מפורמטים מסורתיים כמו JPEG ו-PNG. הטמיעו טעינה עצלה (lazy loading) עבור תמונות שאינן נראות מיד באזור התצוגה.
• צמצמו ודחסו קוד: בצעו מיניפיקציה לקוד ה-HTML, CSS, ו-JavaScript שלכם כדי להקטין את גודל הקבצים. השתמשו בכלים כמו UglifyJS, Terser, או כלי מיניפיקציה מקוונים. אפשרו דחיסת Gzip או Brotli בשרת שלכם כדי להקטין עוד יותר את גודל הקבצים המועברים.
• מנפו את זיכרון המטמון של הדפדפן (Caching): הגדירו את השרת שלכם כך שיקבע כותרות מטמון מתאימות עבור נכסים סטטיים כמו תמונות, קבצי CSS ו-JavaScript. זה מאפשר לדפדפנים לשמור נכסים אלה במטמון ולהימנע מהורדתם שוב ושוב.

סיכום

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