Frontend Lighthouse CI: Ciągłe monitorowanie wydajności dla aplikacji internetowych

W dzisiejszym dynamicznym cyfrowym świecie wydajność strony internetowej ma kluczowe znaczenie. Powolnie ładująca się lub słabo zoptymalizowana witryna może prowadzić do frustracji użytkowników, zmniejszenia zaangażowania i ostatecznie negatywnego wpływu na Twój biznes. I tu właśnie z pomocą przychodzi Lighthouse CI. Ten przewodnik przeprowadzi Cię przez proces wdrażania Lighthouse CI w celu ciągłego monitorowania wydajności, umożliwiając proaktywne identyfikowanie i usuwanie wąskich gardeł wydajności, zanim wpłyną one na Twoich użytkowników.

Czym jest Lighthouse CI?

Lighthouse CI to zautomatyzowane narzędzie do testowania wydajności o otwartym kodzie źródłowym, które bezproblemowo integruje się z Twoim potokiem ciągłej integracji i ciągłego dostarczania (CI/CD). Wykorzystuje narzędzie audytowe Google Lighthouse, aby dostarczyć praktycznych informacji na temat wydajności, dostępności, SEO i najlepszych praktyk Twojej witryny. Włączając Lighthouse CI do swojego przepływu pracy, możesz stale monitorować wydajność swojej strony, śledzić regresje i zapewniać, że każda zmiana w kodzie przyczynia się do lepszego doświadczenia użytkownika. Lighthouse CI nie jest powiązany z jednym konkretnym dostawcą chmury i może być używany z różnymi konfiguracjami. Na przykład może działać w kontenerze Docker na usługach takich jak Github Actions, Jenkins, CircleCI i wielu innych.

Dlaczego warto używać Lighthouse CI?

Wdrożenie Lighthouse CI oferuje wiele korzyści:

• Wczesne wykrywanie regresji wydajności: Identyfikuj problemy z wydajnością wprowadzone przez nowe zmiany w kodzie, zanim trafią na produkcję.
• Poprawa wydajności strony internetowej: Zdobądź praktyczne wskazówki, jak zoptymalizować swoją witrynę pod kątem szybkości, dostępności i SEO.
• Lepsze doświadczenie użytkownika: Dostarczaj szybszą i bardziej przyjazną dla użytkownika witrynę, która utrzymuje zaangażowanie odwiedzających.
• Zmniejszony współczynnik odrzuceń: Optymalizuj czasy ładowania, aby zmniejszyć frustrację użytkowników i zapobiec opuszczaniu przez nich Twojej witryny.
• Zwiększone współczynniki konwersji: Szybsza strona internetowa zazwyczaj prowadzi do wyższych współczynników konwersji i lepszych wyników biznesowych.
• Zautomatyzowane testowanie wydajności: Zintegruj testowanie wydajności ze swoim potokiem CI/CD w celu ciągłego monitorowania.
• Podejmowanie decyzji w oparciu o dane: Opieraj swoje działania optymalizacyjne na konkretnych metrykach wydajności i wnioskach.
• Długoterminowe śledzenie wydajności: Monitoruj wydajność swojej witryny w czasie, aby identyfikować trendy i mierzyć wpływ swoich optymalizacji.

Kluczowe funkcje Lighthouse CI

• Zautomatyzowane audyty: Uruchamia audyty Lighthouse automatycznie w ramach procesu CI/CD.
• Budżety wydajności: Ustawiaj budżety wydajności, aby zapewnić, że Twoja witryna mieści się w dopuszczalnych progach wydajności.
• Śledzenie regresji: Śledzi regresje wydajności w czasie, pozwalając na identyfikację zmian w kodzie, które je spowodowały.
• Praktyczne wnioski: Dostarcza szczegółowe raporty z praktycznymi rekomendacjami, jak poprawić wydajność Twojej witryny.
• Konfigurowalna konfiguracja: Skonfiguruj Lighthouse CI, aby spełniał Twoje specyficzne potrzeby i wymagania.
• Integracja z narzędziami CI/CD: Bezproblemowo integruje się z popularnymi narzędziami CI/CD, takimi jak Jenkins, CircleCI, GitHub Actions i GitLab CI.
• Oprogramowanie open-source: Lighthouse CI jest projektem open-source, co oznacza, że jest darmowy w użyciu i modyfikacji.

Konfiguracja Lighthouse CI: Przewodnik krok po kroku

Oto kompleksowy przewodnik po konfiguracji Lighthouse CI dla Twojego projektu:

1. Instalacja Lighthouse CI CLI

Najpierw musisz zainstalować interfejs wiersza poleceń (CLI) Lighthouse CI globalnie za pomocą npm lub yarn:

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

              
                Copy
              
            
          

2. Konfiguracja Lighthouse CI

Utwórz plik lighthouserc.js w głównym katalogu swojego projektu, aby skonfigurować Lighthouse CI. Ten plik definiuje adresy URL do audytu, reguły asercji i inne opcje konfiguracyjne.

Oto podstawowy przykład pliku lighthouserc.js:

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

            

              
                Copy
              
            
          

Wyjaśnienie:

• collect.url: Określa adresy URL, które mają być audytowane przez Lighthouse. W tym przykładzie audytujemy stronę główną i podstronę "o nas" witryny działającej na localhost:3000. Pamiętaj, aby zastąpić to adresami URL odpowiednimi dla *Twojego* projektu, które mogą obejmować środowiska deweloperskie.
• assert.preset: Używa presetu lighthouse:recommended, który stosuje zestaw predefiniowanych asercji opartych na rekomendacjach Lighthouse. Jest to dobry punkt wyjścia, ale możesz dostosować te asercje w razie potrzeby.
• upload.target: Konfiguruje, gdzie zostaną przesłane wyniki Lighthouse CI. temporary-public-storage jest przydatne do testowania i rozwoju, ale w środowiskach produkcyjnych zazwyczaj będziesz chciał użyć bardziej trwałego rozwiązania do przechowywania danych (omówionego później).

3. Integracja Lighthouse CI z Twoim potokiem CI/CD

Następnym krokiem jest integracja Lighthouse CI z Twoim potokiem CI/CD. Dokładne kroki będą się różnić w zależności od dostawcy CI/CD, ale ogólny proces polega na dodaniu skryptu do konfiguracji CI/CD, który uruchamia polecenia Lighthouse CI.

Przykład z użyciem GitHub Actions:

Utwórz plik o nazwie .github/workflows/lighthouse-ci.yml w swoim repozytorium z następującą zawartością:

            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
              
            
          

Wyjaśnienie:

• on.push.branches: Uruchamia workflow przy pushach do gałęzi main.
• on.pull_request: Uruchamia workflow przy pull requestach.
• jobs.lighthouse.runs-on: Określa system operacyjny do użycia w zadaniu (w tym przypadku Ubuntu).
• steps: Definiuje kroki do wykonania w zadaniu:
• actions/checkout@v3: Pobiera repozytorium.
• actions/setup-node@v3: Konfiguruje Node.js.
• npm ci: Instaluje zależności.
• Run Lighthouse CI: Uruchamia polecenia Lighthouse CI:
• npm install -g @lhci/cli@0.11.x: Instaluje Lighthouse CI CLI globalnie. *Ważne*: Zawsze zaleca się blokowanie konkretnej wersji.
• lhci autorun: Uruchamia Lighthouse CI w trybie "autorun", który automatycznie zbiera audyty, sprawdza budżety wydajności i przesyła wyniki.

Ważne uwagi dotyczące integracji CI/CD:

• Uruchomienie serwera: Przed uruchomieniem lhci autorun, upewnij się, że Twój serwer WWW jest uruchomiony (np. npm start). Może być konieczne dodanie kroku do konfiguracji CI/CD, aby uruchomić serwer w tle.
• Migracje bazy danych: Jeśli Twoja aplikacja korzysta z bazy danych, upewnij się, że migracje bazy danych są uruchamiane w ramach procesu CI/CD *przed* uruchomieniem Lighthouse CI.
• Zmienne środowiskowe: Jeśli Twoja aplikacja wymaga zmiennych środowiskowych, upewnij się, że są one prawidłowo skonfigurowane w Twoim środowisku CI/CD.

4. Uruchomienie Lighthouse CI

Teraz, za każdym razem, gdy wypchniesz zmiany do gałęzi main lub utworzysz pull request, workflow Lighthouse CI uruchomi się automatycznie. Wyniki będą dostępne w interfejsie GitHub Actions.

5. Przeglądanie wyników Lighthouse CI

Wyniki Lighthouse CI zostaną przesłane do lokalizacji określonej w pliku lighthouserc.js (np. temporary-public-storage). Możesz uzyskać do nich dostęp, klikając link podany w wynikach CI/CD. Wyniki te dostarczają szczegółowych informacji na temat wydajności, dostępności, SEO i najlepszych praktyk Twojej witryny.

Konfiguracja asercji i budżetów wydajności

Lighthouse CI pozwala konfigurować asercje i budżety wydajności, aby zapewnić, że Twoja witryna spełnia Twoje cele wydajnościowe. Asercje to reguły, które sprawdzają określone metryki wydajności (np. First Contentful Paint, Largest Contentful Paint) względem predefiniowanych progów. Budżety wydajności definiują dopuszczalne limity dla różnych metryk wydajności.

Oto przykład konfiguracji asercji w pliku 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
              
            
          

Wyjaśnienie:

• first-contentful-paint: Ustawia próg ostrzegawczy dla First Contentful Paint (FCP) na 2000 ms.
• largest-contentful-paint: Ustawia próg ostrzegawczy dla Largest Contentful Paint (LCP) na 2500 ms.
• cumulative-layout-shift: Ustawia próg ostrzegawczy dla Cumulative Layout Shift (CLS) na 0.1.
• total-blocking-time: Ustawia próg ostrzegawczy dla Total Blocking Time (TBT) na 500 ms.
• categories:performance: Ustawia próg ostrzegawczy dla ogólnego wyniku kategorii Wydajność na 0.9.
• categories:accessibility: Ustawia próg błędu dla ogólnego wyniku kategorii Dostępność na 0.8.

Poziomy asercji:

• off: Wyłącza asercję.
• warn: Wyświetla ostrzeżenie, jeśli asercja nie zostanie spełniona.
• error: Powoduje niepowodzenie przebiegu Lighthouse CI, jeśli asercja nie zostanie spełniona.

Dostosowywanie asercji:

Możesz dostosować asercje do swoich specyficznych potrzeb. Na przykład możesz chcieć ustawić bardziej rygorystyczne progi dla krytycznych metryk wydajności lub wyłączyć asercje, które nie są istotne dla Twojej aplikacji.

Wybór miejsca docelowego dla wyników Lighthouse CI

Opcja upload.target w pliku lighthouserc.js określa, gdzie będą przesyłane wyniki Lighthouse CI. Cel temporary-public-storage jest wygodny do testowania i rozwoju, ale nie nadaje się do środowisk produkcyjnych, ponieważ dane nie są trwałe.

Oto kilka alternatywnych miejsc docelowych:

• Serwer Lighthouse CI: Zalecanym podejściem dla środowisk produkcyjnych jest użycie serwera Lighthouse CI. Serwer Lighthouse CI zapewnia trwałe rozwiązanie do przechowywania wyników Lighthouse CI, a także interfejs użytkownika do przeglądania i analizowania danych. Może być wdrożony u różnych dostawców chmury lub hostowany na własnej infrastrukturze.
• Google Cloud Storage: Możesz przesyłać swoje wyniki Lighthouse CI do zasobnika Google Cloud Storage. Jest to opłacalne i skalowalne rozwiązanie do przechowywania danych.
• Amazon S3: Podobnie jak w przypadku Google Cloud Storage, możesz przesyłać swoje wyniki Lighthouse CI do zasobnika Amazon S3.

Konfiguracja serwera Lighthouse CI:

Konfiguracja serwera Lighthouse CI obejmuje następujące kroki:

1. Zainstaluj serwer Lighthouse CI: Możesz zainstalować serwer Lighthouse CI za pomocą npm lub yarn:

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

              
                Copy
              
            
          

2. Skonfiguruj bazę danych: Serwer Lighthouse CI wymaga bazy danych do przechowywania swoich danych. Możesz używać różnych baz danych, w tym PostgreSQL, MySQL i SQLite. Skonfiguruj ustawienia połączenia z bazą danych w pliku .env.
3. Uruchom serwer Lighthouse CI: Uruchom serwer Lighthouse CI za pomocą polecenia lhci server.
4. Skonfiguruj Lighthouse CI CLI do korzystania z serwera: Zaktualizuj plik lighthouserc.js, aby używał serwera Lighthouse CI jako celu przesyłania:

            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
              
            
          

Zastąp http://your-lhci-server.com adresem URL swojego serwera Lighthouse CI i YOUR_LHCI_TOKEN tokenem dostępu dla Twojego projektu.

Najlepsze praktyki korzystania z Lighthouse CI

Aby w pełni wykorzystać możliwości Lighthouse CI, postępuj zgodnie z poniższymi najlepszymi praktykami:

• Uruchamiaj Lighthouse CI przy każdej zmianie kodu: Zintegruj Lighthouse CI ze swoim potokiem CI/CD, aby uruchamiać audyty przy każdej zmianie kodu. Pomoże to wczesne wykrywanie regresji wydajności.
• Ustawiaj budżety wydajności: Zdefiniuj budżety wydajności, aby zapewnić, że Twoja witryna mieści się w dopuszczalnych progach wydajności.
• Monitoruj trendy wydajności: Śledź wydajność swojej witryny w czasie, aby identyfikować trendy i mierzyć wpływ swoich optymalizacji.
• Priorytetyzuj działania optymalizacyjne: Skup się najpierw na optymalizacji najważniejszych metryk wydajności.
• Korzystaj z danych ze świata rzeczywistego: Używaj danych ze świata rzeczywistego, aby informować swoje działania optymalizacyjne. Na przykład możesz użyć Google Analytics, aby zidentyfikować strony najczęściej odwiedzane przez użytkowników.
• Testuj na prawdziwych urządzeniach: Testuj swoją witrynę na prawdziwych urządzeniach, aby upewnić się, że działa dobrze w rzeczywistych warunkach.
• Regularnie przeglądaj wyniki Lighthouse CI: Upewnij się, że regularnie przeglądasz wyniki Lighthouse CI i podejmujesz działania w celu rozwiązania zidentyfikowanych problemów z wydajnością.
• Optymalizuj obrazy: Optymalizuj obrazy, aby zmniejszyć ich rozmiar bez utraty jakości. Przydatne są do tego narzędzia takie jak ImageOptim (macOS), TinyPNG i ImageKit.
• Minifikuj CSS i JavaScript: Minifikuj pliki CSS i JavaScript, aby zmniejszyć ich rozmiar. Mogą w tym pomóc narzędzia takie jak UglifyJS i CSSNano.
• Wykorzystuj buforowanie przeglądarki: Wykorzystuj buforowanie przeglądarki, aby zmniejszyć liczbę żądań, które Twoja witryna wysyła do serwera.
• Używaj sieci dostarczania treści (CDN): Używaj CDN, aby dystrybuować zawartość swojej witryny na serwery na całym świecie. Może to poprawić czas ładowania dla użytkowników w różnych lokalizacjach geograficznych. Usługi takie jak Cloudflare i Amazon CloudFront są popularnymi sieciami CDN.
• Odłóż ładowanie obrazów poza ekranem: Zaimplementuj leniwe ładowanie (lazy loading) dla obrazów, które nie są od razu widoczne na ekranie. Może to znacznie poprawić początkowy czas ładowania strony. Atrybut loading="lazy" może być użyty do prostego leniwego ładowania.
• Eliminuj zasoby blokujące renderowanie: Zidentyfikuj i wyeliminuj zasoby, które blokują renderowanie Twojej strony. Często obejmuje to wstawianie krytycznego CSS (inlining) i odraczanie niekrytycznego CSS i JavaScript.
• Skróć czas wykonywania JavaScriptu: Profiluj swój kod JavaScript, aby zidentyfikować i zoptymalizować wolno działające funkcje. Techniki takie jak code splitting i tree shaking mogą pomóc zmniejszyć ilość JavaScriptu, który musi zostać pobrany i wykonany.

Zaawansowane techniki Lighthouse CI

Gdy już opanujesz podstawy Lighthouse CI, możesz zbadać niektóre zaawansowane techniki, aby jeszcze bardziej ulepszyć monitorowanie wydajności:

• Niestandardowe audyty Lighthouse: Możesz tworzyć niestandardowe audyty Lighthouse, aby testować specyficzne problemy z wydajnością, które są istotne dla Twojej aplikacji.
• Konfiguracja Headless Chrome: Skonfiguruj Headless Chrome, aby używać określonych emulacji urządzeń lub ustawień ograniczania przepustowości sieci.
• Integracja z narzędziami monitorującymi: Zintegruj Lighthouse CI z istniejącymi narzędziami monitorującymi (np. New Relic, Datadog), aby uzyskać bardziej kompleksowy obraz wydajności Twojej witryny.
• Testowanie regresji wizualnej: Połącz Lighthouse CI z narzędziami do testowania regresji wizualnej, aby wykrywać zmiany wizualne, które mogą wpływać na wydajność.

Lighthouse CI dla globalnej publiczności: Wskazówki dla międzynarodowych stron internetowych

Korzystając z Lighthouse CI dla stron internetowych skierowanych do globalnej publiczności, weź pod uwagę następujące kwestie:

• Testuj z wielu lokalizacji: Czasy odpowiedzi serwera mogą się znacznie różnić w zależności od lokalizacji użytkownika. Użyj sieci CDN (Content Delivery Network) i rozważ uruchamianie audytów Lighthouse CI z różnych regionów geograficznych, aby uzyskać dokładniejszy obraz wydajności dla swoich międzynarodowych użytkowników. Niektórzy dostawcy CI/CD oferują opcje określenia lokalizacji geograficznej runnera.
• Uwzględnij warunki sieciowe: Prędkości sieci i opóźnienia różnią się na całym świecie. Symuluj różne warunki sieciowe podczas audytów Lighthouse CI, aby zrozumieć, jak Twoja strona działa w różnych warunkach. Lighthouse pozwala na ograniczanie połączenia sieciowego, symulując wolniejsze połączenia, takie jak 3G.
• Lokalizacja treści: Upewnij się, że Twoje zlokalizowane treści są odpowiednio zoptymalizowane. Obejmuje to optymalizację obrazów dla różnych języków i zestawów znaków oraz prawidłowe kodowanie, aby uniknąć problemów z wyświetlaniem.
• Ładowanie czcionek: Zoptymalizuj ładowanie czcionek dla różnych języków. Rozważ użycie font-display: swap, aby zapobiec niewidoczności tekstu podczas ładowania czcionek.
• Skrypty firm trzecich: Uważaj na skrypty firm trzecich, ponieważ mogą one znacznie wpływać na wydajność, zwłaszcza dla użytkowników w regionach z wolniejszymi połączeniami sieciowymi. Regularnie audytuj wydajność skryptów firm trzecich i rozważ asynchroniczne ładowanie lub samodzielne hostowanie krytycznych skryptów.
• Optymalizacja mobilna: Użycie urządzeń mobilnych jest powszechne w wielu częściach świata. Upewnij się, że Twoja strona jest zoptymalizowana pod kątem urządzeń mobilnych i że Twoje audyty Lighthouse CI obejmują testy specyficzne dla urządzeń mobilnych.

Rozwiązywanie typowych problemów z Lighthouse CI

Oto niektóre typowe problemy, które możesz napotkać podczas korzystania z Lighthouse CI i sposoby ich rozwiązywania:

• Lighthouse CI kończy się błędem "Timeout": Może się to zdarzyć, jeśli Twoja strona ładuje się zbyt długo lub jeśli Lighthouse CI nie może połączyć się z Twoją witryną. Spróbuj zwiększyć wartość limitu czasu w pliku lighthouserc.js lub sprawdź logi serwera swojej witryny w poszukiwaniu błędów.
• Lighthouse CI raportuje niespójne wyniki: Wyniki Lighthouse mogą się nieznacznie różnić między uruchomieniami z powodu warunków sieciowych lub innych czynników. Uruchom wiele audytów, aby uzyskać bardziej stabilną średnią.
• Lighthouse CI nie może przesłać wyników: Sprawdź konfigurację upload.target i upewnij się, że Twój serwer Lighthouse CI jest uruchomiony i dostępny. Sprawdź również, czy masz skonfigurowany prawidłowy token dostępu.
• Lighthouse CI raportuje nieoczekiwane regresje wydajności: Zbadaj zmiany w kodzie, które zostały wprowadzone przed wykryciem regresji. Użyj raportów Lighthouse CI, aby zidentyfikować konkretne metryki wydajności, które uległy pogorszeniu, i skup swoje wysiłki optymalizacyjne na tych obszarach.

Podsumowanie

Frontend Lighthouse CI to potężne narzędzie do ciągłego monitorowania wydajności aplikacji internetowych. Integrując Lighthouse CI ze swoim potokiem CI/CD, możesz proaktywnie identyfikować i rozwiązywać problemy z wydajnością, zapewniając, że Twoja witryna dostarcza optymalne doświadczenie użytkownika. Pamiętaj, aby dostosować swoją konfigurację, reguły asercji i lokalizacje testowe dla globalnej publiczności, aby stworzyć najlepsze możliwe doświadczenie dla użytkowników na całym świecie.

Postępując zgodnie z krokami i najlepszymi praktykami opisanymi w tym przewodniku, możesz znacznie poprawić wydajność swojej witryny, zmniejszyć współczynnik odrzuceń, zwiększyć współczynniki konwersji i ostatecznie osiągnąć swoje cele biznesowe. Zacznij wdrażać Lighthouse CI już dziś i odblokuj pełny potencjał swoich aplikacji internetowych.