Frontend-Performance-Tests: Integration von Lighthouse CI für kontinuierliche Verbesserung

In der heutigen digitalen Landschaft ist die Leistung von Websites von größter Bedeutung. Langsame Ladezeiten, Probleme mit der Barrierefreiheit und schlechte SEO können die Benutzererfahrung und damit die Geschäftsergebnisse erheblich beeinträchtigen. Frontend-Performance-Tests sind zu einem wesentlichen Bestandteil des modernen Softwareentwicklungszyklus geworden, um sicherzustellen, dass Websites und Webanwendungen für ein globales Publikum schnell, zuverlässig und benutzerfreundlich sind. Dieser Artikel befasst sich mit der Integration von Lighthouse CI, einem leistungsstarken Open-Source-Tool, in Ihre Continuous-Integration-Pipeline (CI), um Frontend-Performance-Tests zu automatisieren und eine kontinuierliche Verbesserung voranzutreiben.

Warum sind Frontend-Performance-Tests wichtig?

Bevor wir uns mit Lighthouse CI befassen, wollen wir verstehen, warum Frontend-Performance-Tests von entscheidender Bedeutung sind:

• Benutzererfahrung (User Experience): Eine schnelle und reaktionsschnelle Website bietet eine bessere Benutzererfahrung, was zu einem höheren Engagement und geringeren Absprungraten führt. Stellen Sie sich einen potenziellen Kunden in Tokio, Japan, vor, der versucht, ein Produkt auf einer langsam ladenden E-Commerce-Website zu kaufen. Er wird die Seite wahrscheinlich verlassen und nach Alternativen suchen.
• SEO-Ranking: Suchmaschinen wie Google berücksichtigen die Geschwindigkeit und Leistung von Websites als Rankingfaktoren. Schnellere Websites neigen dazu, in den Suchergebnissen höher zu ranken, was zu mehr organischem Traffic führt. Googles Core Web Vitals-Initiative betont die Bedeutung von Faktoren wie Largest Contentful Paint (LCP), First Input Delay (FID) und Cumulative Layout Shift (CLS) für SEO.
• Barrierefreiheit: Leistungsverbesserungen führen oft zu einer besseren Barrierefreiheit für Benutzer mit Behinderungen. Optimierter Code und optimierte Bilder können die Erfahrung für Benutzer verbessern, die auf Bildschirmleser angewiesen sind oder nur über eine begrenzte Bandbreite verfügen.
• Konversionsraten: Eine schnellere Website kann sich direkt auf die Konversionsraten auswirken. Studien haben gezeigt, dass bereits eine Verzögerung von einer Sekunde bei der Seitenladezeit zu einem signifikanten Rückgang der Konversionen führen kann. Denken Sie an einen Benutzer in Mumbai, Indien, der versucht, einen Flug zu buchen. Ein langsamer Buchungsprozess könnte dazu führen, dass er den Kauf abbricht und sich für einen Konkurrenten entscheidet.
• Ressourcenoptimierung: Performance-Tests helfen dabei, Bereiche zu identifizieren, in denen Ressourcen optimiert werden können, was zu Kosteneinsparungen bei der Serverinfrastruktur und der Bandbreitennutzung führt.

Einführung in Lighthouse CI

Lighthouse CI ist ein quelloffenes, automatisiertes Tool, das für die nahtlose Integration in Ihre CI/CD-Pipeline entwickelt wurde. Es führt Lighthouse aus, ein beliebtes, von Google entwickeltes Prüfungstool, und liefert Einblicke in die Leistung, Barrierefreiheit, SEO, Best Practices und Progressive Web App (PWA)-Konformität Ihrer Website. Lighthouse CI hilft Ihnen dabei:

• Leistungsprüfungen zu automatisieren: Führen Sie Lighthouse-Prüfungen automatisch mit jedem Commit oder Pull-Request aus.
• Leistung im Zeitverlauf zu verfolgen: Überwachen Sie Leistungsmetriken im Zeitverlauf und identifizieren Sie Regressionen frühzeitig.
• Performance-Budgets festzulegen: Definieren Sie Performance-Budgets und lassen Sie Builds fehlschlagen, wenn diese überschritten werden.
• Integration mit CI/CD-Systemen: Integrieren Sie es mit beliebten CI/CD-Systemen wie GitHub Actions, GitLab CI, CircleCI und Jenkins.
• Bei Leistungsproblemen zusammenzuarbeiten: Teilen Sie Lighthouse-Berichte und arbeiten Sie mit Ihrem Team zusammen, um Leistungsprobleme zu lösen.

Einrichtung von Lighthouse CI

Hier ist eine Schritt-für-Schritt-Anleitung zur Einrichtung von Lighthouse CI in Ihrem Projekt:

1. Lighthouse CI installieren

Installieren Sie die Lighthouse CI CLI global mit npm oder yarn:

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

              
                Copy
              
            
          

2. Lighthouse CI konfigurieren

Erstellen Sie eine lighthouserc.js-Datei im Stammverzeichnis Ihres Projekts, um Lighthouse CI zu konfigurieren. Hier ist eine Beispielkonfiguration:

            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
              
            
          

Lassen Sie uns diese Konfiguration aufschlüsseln:

• collect.url: Ein Array von zu prüfenden URLs. Dieses Beispiel prüft die Startseite und die „Über uns“-Seite. Sie sollten alle kritischen Seiten Ihrer Website einbeziehen und dabei verschiedene Anwendungsfälle berücksichtigen. Eine E-Commerce-Website könnte beispielsweise die Startseite, Produktlistenseiten, Produktdetailseiten und den Bezahlvorgang umfassen.
• collect.startServerCommand: Der Befehl zum Starten Ihres Entwicklungsservers. Dies ist notwendig, wenn Lighthouse CI gegen eine lokale Entwicklungsumgebung laufen muss.
• collect.numberOfRuns: Die Anzahl der Durchläufe der Lighthouse-Prüfungen für jede URL. Das mehrfache Ausführen von Prüfungen hilft, Schwankungen bei Netzwerkbedingungen und anderen Faktoren zu minimieren.
• assert.assertions: Eine Reihe von Zusicherungen (Assertions) zur Validierung der Lighthouse-Prüfergebnisse. Jede Zusicherung gibt eine Metrik oder Kategorie und einen Schwellenwert an. Wenn der Schwellenwert nicht erreicht wird, schlägt der Build fehl. Dieses Beispiel legt Schwellenwerte für die Kategorien Leistung, Barrierefreiheit, Best Practices und SEO fest. Es legt auch Schwellenwerte für spezifische Metriken wie First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) und Cumulative Layout Shift (CLS) fest.
• upload.target: Gibt an, wohin die Lighthouse-Berichte hochgeladen werden sollen. temporary-redirect lädt die Berichte an einen temporären Speicherort hoch und stellt eine URL für den Zugriff bereit. Andere Optionen umfassen die Verwendung des Lighthouse CI-Servers oder Cloud-Speicherlösungen wie Google Cloud Storage oder Amazon S3.

3. Integration mit Ihrem CI/CD-System

Der nächste Schritt ist die Integration von Lighthouse CI in Ihre CI/CD-Pipeline. Hier ist ein Beispiel für die Integration mit GitHub Actions:

Erstellen Sie eine .github/workflows/lighthouse.yml-Datei in Ihrem Repository:

            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
              
            
          

Dieser Workflow führt die folgenden Schritte aus:

• Checkt den Code aus.
• Richtet Node.js ein.
• Installiert Abhängigkeiten.
• Führt Lighthouse CI aus. Dieser Schritt baut zuerst die Anwendung (npm run build) und führt dann lhci autorun aus, was die Lighthouse-Prüfungen durchführt und die Ergebnisse anhand der konfigurierten Schwellenwerte überprüft.

Passen Sie diesen Workflow an Ihr spezifisches CI/CD-System und Ihre Projektanforderungen an. Wenn Sie beispielsweise GitLab CI verwenden, würden Sie eine .gitlab-ci.yml-Datei mit ähnlichen Schritten konfigurieren.

4. Lighthouse CI ausführen

Committen Sie Ihre Änderungen und pushen Sie sie in Ihr Repository. Die CI/CD-Pipeline wird Lighthouse CI automatisch ausführen. Wenn eine der Zusicherungen fehlschlägt, schlägt der Build fehl und gibt den Entwicklern wertvolles Feedback. Die Lighthouse CI-Berichte sind unter der vom CI/CD-System bereitgestellten URL verfügbar.

Erweiterte Konfiguration und Anpassung

Lighthouse CI bietet eine breite Palette von Konfigurationsoptionen und Anpassungsmöglichkeiten. Hier sind einige erweiterte Funktionen:

1. Verwendung des Lighthouse CI Servers

Der Lighthouse CI Server bietet ein zentrales Dashboard zur Verfolgung von Leistungsmetriken über die Zeit, zur Verwaltung von Projekten und zur Zusammenarbeit bei Leistungsproblemen. Um den Lighthouse CI Server zu verwenden, müssen Sie eine Instanz einrichten und Ihre lighthouserc.js-Datei so konfigurieren, dass Berichte an den Server hochgeladen werden.

Stellen Sie zuerst den Server bereit. Es gibt verschiedene Bereitstellungsoptionen, darunter Docker, Heroku und Cloud-Anbieter wie AWS und Google Cloud. Detaillierte Anweisungen zur Bereitstellung des Servers finden Sie in der Lighthouse CI-Dokumentation.

Sobald der Server läuft, aktualisieren Sie Ihre lighthouserc.js-Datei, damit sie auf den Server verweist:

            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
              
            
          

Ersetzen Sie YOUR_LHCI_SERVER_URL durch die URL Ihres Lighthouse CI Servers und YOUR_LHCI_SERVER_TOKEN durch ein vom Server generiertes Token. Das Token authentifiziert Ihre CI-Pipeline beim Server.

2. Festlegen von Performance-Budgets

Performance-Budgets definieren akzeptable Schwellenwerte für spezifische Metriken. Lighthouse CI ermöglicht es Ihnen, Performance-Budgets festzulegen und Builds fehlschlagen zu lassen, wenn diese Budgets überschritten werden. Dies hilft, Leistungsregressionen zu verhindern und stellt sicher, dass Ihre Website innerhalb akzeptabler Leistungsgrenzen bleibt.

Sie können Performance-Budgets in Ihrer lighthouserc.js-Datei mithilfe der Eigenschaft assert.assertions definieren. Um beispielsweise ein Performance-Budget für den First Contentful Paint (FCP) festzulegen, können Sie die folgende Zusicherung hinzufügen:

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

              
                Copy
              
            
          

Diese Zusicherung lässt den Build fehlschlagen, wenn der FCP größer als 2500 Millisekunden ist.

3. Anpassen der Lighthouse-Konfiguration

Mit Lighthouse CI können Sie die Lighthouse-Konfiguration an Ihre spezifischen Bedürfnisse anpassen. Sie können verschiedene Lighthouse-Einstellungen konfigurieren, wie zum Beispiel:

• onlyAudits: Eine Liste der auszuführenden Prüfungen festlegen.
• skipAudits: Eine Liste der zu überspringenden Prüfungen festlegen.
• throttling: Netzwerkeinschränkungseinstellungen konfigurieren, um verschiedene Netzwerkbedingungen zu simulieren.
• formFactor: Den Formfaktor (Desktop oder Mobil) zur Emulation festlegen.
• screenEmulation: Bildschirmsimulationseinstellungen konfigurieren.

Um die Lighthouse-Konfiguration anzupassen, können Sie dem Befehl lhci autorun ein --config-path-Flag übergeben, das auf eine benutzerdefinierte Lighthouse-Konfigurationsdatei verweist. Eine vollständige Liste der Konfigurationsoptionen finden Sie in der Lighthouse-Dokumentation.

4. Prüfung authentifizierter Seiten

Die Prüfung authentifizierter Seiten erfordert einen etwas anderen Ansatz. Sie müssen Lighthouse CI eine Möglichkeit zur Authentifizierung geben, bevor die Prüfungen ausgeführt werden. Dies kann durch Cookies oder durch Skripting des Anmeldevorgangs erreicht werden.

Ein gängiger Ansatz ist die Verwendung des --extra-headers-Flags, um Authentifizierungscookies an Lighthouse CI zu übergeben. Sie können die Cookies aus den Entwicklertools Ihres Browsers erhalten, nachdem Sie sich auf der Website angemeldet haben.

Alternativ können Sie ein Puppeteer-Skript verwenden, um den Anmeldevorgang zu automatisieren und dann Lighthouse-Prüfungen auf den authentifizierten Seiten durchzuführen. Dieser Ansatz bietet mehr Flexibilität und ermöglicht es Ihnen, komplexe Authentifizierungsszenarien zu handhaben.

Best Practices für Frontend-Performance-Tests mit Lighthouse CI

Um die Vorteile von Lighthouse CI zu maximieren, befolgen Sie diese Best Practices:

• Führen Sie Lighthouse CI regelmäßig aus: Integrieren Sie Lighthouse CI in Ihre CI/CD-Pipeline, um Prüfungen automatisch bei jedem Commit oder Pull-Request durchzuführen. Dies stellt sicher, dass Leistungsregressionen frühzeitig erkannt und umgehend behoben werden.
• Setzen Sie realistische Performance-Budgets: Definieren Sie Performance-Budgets, die anspruchsvoll, aber erreichbar sind. Beginnen Sie mit konservativen Budgets und verschärfen Sie diese schrittweise, während sich die Leistung Ihrer Website verbessert. Erwägen Sie, je nach Komplexität und Bedeutung unterschiedliche Budgets für verschiedene Seitentypen festzulegen.
• Konzentrieren Sie sich auf Schlüsselmetriken: Priorisieren Sie die wichtigsten Leistungsmetriken, die den größten Einfluss auf die Benutzererfahrung und die Geschäftsergebnisse haben. Googles Core Web Vitals (LCP, FID und CLS) sind ein guter Ausgangspunkt.
• Untersuchen und beheben Sie Leistungsprobleme: Wenn Lighthouse CI Leistungsprobleme identifiziert, untersuchen Sie diese gründlich und implementieren Sie geeignete Lösungen. Verwenden Sie die Lighthouse-Berichte, um die Ursachen der Probleme zu identifizieren und die wirkungsvollsten Korrekturen zu priorisieren.
• Überwachen Sie die Leistung im Zeitverlauf: Verfolgen Sie Leistungsmetriken im Zeitverlauf, um Trends und Muster zu erkennen. Verwenden Sie den Lighthouse CI Server oder andere Überwachungstools, um Leistungsdaten zu visualisieren und Verbesserungspotenziale zu identifizieren.
• Schulen Sie Ihr Team: Stellen Sie sicher, dass Ihr Team die Bedeutung der Frontend-Performance versteht und weiß, wie man Lighthouse CI effektiv einsetzt. Bieten Sie Schulungen und Ressourcen an, um ihnen zu helfen, ihre Fähigkeiten und Kenntnisse zu verbessern.
• Berücksichtigen Sie globale Netzwerkbedingungen: Berücksichtigen Sie bei der Festlegung von Performance-Budgets die Netzwerkbedingungen in verschiedenen Teilen der Welt. Benutzer in Gebieten mit langsameren Internetgeschwindigkeiten haben möglicherweise eine andere Erfahrung als Benutzer in Gebieten mit schnelleren Geschwindigkeiten. Verwenden Sie Tools, um während des Testens verschiedene Netzwerkbedingungen zu simulieren.
• Optimieren Sie Bilder: Die Bildoptimierung ist ein entscheidender Aspekt der Frontend-Performance. Verwenden Sie Tools wie ImageOptim, TinyPNG oder Online-Konverter, um Bilder ohne Qualitätsverlust zu komprimieren und zu optimieren. Verwenden Sie moderne Bildformate wie WebP, die eine bessere Komprimierung und Qualität als herkömmliche Formate wie JPEG und PNG bieten. Implementieren Sie Lazy Loading für Bilder, die nicht sofort im Ansichtsfenster sichtbar sind.
• Minifizieren und komprimieren Sie Code: Minifizieren Sie Ihren HTML-, CSS- und JavaScript-Code, um die Dateigrößen zu reduzieren. Verwenden Sie Tools wie UglifyJS, Terser oder Online-Minifier. Aktivieren Sie die Gzip- oder Brotli-Komprimierung auf Ihrem Server, um die Größe der übertragenen Dateien weiter zu reduzieren.
• Nutzen Sie Browser-Caching: Konfigurieren Sie Ihren Server so, dass er entsprechende Cache-Header für statische Assets wie Bilder, CSS- und JavaScript-Dateien festlegt. Dies ermöglicht es Browsern, diese Assets zwischenzuspeichern und ein wiederholtes Herunterladen zu vermeiden.

Fazit

Die Integration von Lighthouse CI in Ihren Entwicklungsworkflow ist ein entscheidender Schritt zum Aufbau von hochleistungsfähigen, barrierefreien und SEO-freundlichen Websites. Durch die Automatisierung von Frontend-Performance-Tests und die Verfolgung der Leistung im Zeitverlauf können Sie Leistungsprobleme frühzeitig erkennen und beheben, die Benutzererfahrung verbessern und Geschäftsergebnisse steigern. Machen Sie Lighthouse CI zu einem festen Bestandteil und etablieren Sie kontinuierliche Leistungsverbesserung als zentralen Wert in Ihrem Entwicklungsprozess. Denken Sie daran, dass die Website-Performance keine einmalige Anstrengung ist, sondern ein fortlaufender Prozess, der ständige Aufmerksamkeit und Optimierung erfordert. Berücksichtigen Sie kulturelle und regionale Faktoren, um allen Ihren Benutzern, unabhängig von ihrem Standort oder Gerät, eine nahtlose Erfahrung zu gewährleisten. Indem Sie die in diesem Artikel beschriebenen Best Practices befolgen, können Sie sicherstellen, dass Ihre Website den Benutzern weltweit eine schnelle, zuverlässige und angenehme Erfahrung bietet.