Testowanie wydajności frontendu: Integracja Lighthouse CI w celu ciągłego doskonalenia

W dzisiejszym cyfrowym świecie wydajność strony internetowej jest najważniejsza. Wolne czasy ładowania, problemy z dostępnością i słabe SEO mogą znacząco wpłynąć na doświadczenie użytkownika, a w konsekwencji na wyniki biznesowe. Testowanie wydajności frontendu stało się istotną częścią nowoczesnego cyklu życia oprogramowania, zapewniając, że strony i aplikacje internetowe są szybkie, niezawodne i przyjazne dla użytkowników na całym świecie. W tym artykule omówimy integrację Lighthouse CI, potężnego narzędzia open-source, z potokiem ciągłej integracji (CI) w celu zautomatyzowania testowania wydajności frontendu i napędzania ciągłego doskonalenia.

Dlaczego testowanie wydajności frontendu jest ważne?

Zanim zagłębimy się w Lighthouse CI, zrozummy, dlaczego testowanie wydajności frontendu jest kluczowe:

• Doświadczenie użytkownika: Szybka i responsywna strona internetowa zapewnia lepsze wrażenia użytkownika, co prowadzi do większego zaangażowania i niższych wskaźników odrzuceń. Wyobraź sobie potencjalnego klienta w Tokio, w Japonii, próbującego kupić produkt na wolno ładującej się stronie e-commerce. Prawdopodobnie porzuci on stronę i poszuka alternatyw.
• Ranking SEO: Wyszukiwarki takie jak Google biorą pod uwagę szybkość i wydajność strony jako czynniki rankingowe. Szybsze strony mają tendencję do zajmowania wyższych pozycji w wynikach wyszukiwania, co przyciąga więcej ruchu organicznego. Inicjatywa Google Core Web Vitals podkreśla znaczenie takich czynników jak Largest Contentful Paint (LCP), First Input Delay (FID) i Cumulative Layout Shift (CLS) dla SEO.
• Dostępność: Poprawa wydajności często prowadzi do lepszej dostępności dla użytkowników z niepełnosprawnościami. Zoptymalizowany kod i obrazy mogą poprawić doświadczenie użytkowników korzystających z czytników ekranu lub tych z ograniczoną przepustowością.
• Współczynniki konwersji: Szybsza strona internetowa może bezpośrednio wpływać na współczynniki konwersji. Badania wykazały, że nawet jednosekundowe opóźnienie w czasie ładowania strony może prowadzić do znacznego spadku konwersji. Pomyśl o użytkowniku w Mumbaju, w Indiach, próbującym zarezerwować lot. Wolny proces rezerwacji może spowodować, że porzuci on zakup i wybierze konkurencję.
• Optymalizacja zasobów: Testowanie wydajności pomaga zidentyfikować obszary, w których zasoby mogą być zoptymalizowane, co prowadzi do oszczędności kosztów w zakresie infrastruktury serwerowej i zużycia przepustowości.

Wprowadzenie do Lighthouse CI

Lighthouse CI to zautomatyzowane narzędzie open-source, zaprojektowane do bezproblemowej integracji z Twoim potokiem CI/CD. Uruchamia ono Lighthouse, popularne narzędzie audytowe opracowane przez Google, i dostarcza wglądu w wydajność, dostępność, SEO, najlepsze praktyki i zgodność z Progressive Web App (PWA) Twojej strony internetowej. Lighthouse CI pomaga:

• Automatyzacja audytów wydajności: Uruchamiaj audyty Lighthouse automatycznie z każdym commitem lub pull requestem.
• Śledzenie wydajności w czasie: Monitoruj metryki wydajności w czasie i wcześnie wykrywaj regresje.
• Ustawianie budżetów wydajności: Definiuj budżety wydajności i powoduj niepowodzenie kompilacji, jeśli zostaną przekroczone.
• Integracja z systemami CI/CD: Integruj z popularnymi systemami CI/CD, takimi jak GitHub Actions, GitLab CI, CircleCI i Jenkins.
• Współpraca nad problemami z wydajnością: Udostępniaj raporty Lighthouse i współpracuj z zespołem w celu rozwiązywania problemów z wydajnością.

Konfiguracja Lighthouse CI

Oto przewodnik krok po kroku, jak skonfigurować Lighthouse CI w Twoim projekcie:

1. Instalacja Lighthouse CI

Zainstaluj Lighthouse CI CLI globalnie używając 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 projektu, aby skonfigurować Lighthouse CI. Oto przykładowa konfiguracja:

            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
              
            
          

Przeanalizujmy tę konfigurację:

• collect.url: Tablica adresów URL do audytu. Ten przykład audytuje stronę główną i stronę 'o nas'. Powinieneś uwzględnić wszystkie krytyczne strony swojej witryny, biorąc pod uwagę różne przypadki użycia. Na przykład, strona e-commerce może zawierać stronę główną, strony z listą produktów, strony ze szczegółami produktów i proces realizacji zamówienia.
• collect.startServerCommand: Polecenie uruchamiające serwer deweloperski. Jest to konieczne, jeśli Lighthouse CI ma działać w lokalnym środowisku deweloperskim.
• collect.numberOfRuns: Liczba uruchomień audytów Lighthouse dla każdego adresu URL. Uruchomienie wielu audytów pomaga złagodzić wahania warunków sieciowych i innych czynników.
• assert.assertions: Zestaw asercji do walidacji wyników audytu Lighthouse. Każda asercja określa metrykę lub kategorię oraz próg. Jeśli próg nie zostanie spełniony, kompilacja zakończy się niepowodzeniem. Ten przykład ustawia progi dla kategorii wydajności, dostępności, najlepszych praktyk i SEO. Ustawia również progi dla konkretnych metryk, takich jak First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) i Cumulative Layout Shift (CLS).
• upload.target: Określa, gdzie mają być przesyłane raporty Lighthouse. temporary-redirect przesyła raporty do tymczasowej lokalizacji przechowywania i dostarcza adres URL do ich dostępu. Inne opcje obejmują użycie serwera Lighthouse CI lub rozwiązań chmurowych, takich jak Google Cloud Storage lub Amazon S3.

3. Integracja z systemem CI/CD

Następnym krokiem jest integracja Lighthouse CI z Twoim potokiem CI/CD. Oto przykład integracji z GitHub Actions:

Utwórz plik .github/workflows/lighthouse.yml w swoim repozytorium:

            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
              
            
          

Ten przepływ pracy wykonuje następujące kroki:

• Pobiera kod.
• Konfiguruje Node.js.
• Instaluje zależności.
• Uruchamia Lighthouse CI. Ten krok najpierw buduje aplikację (npm run build), a następnie uruchamia lhci autorun, który wykonuje audyty Lighthouse i porównuje wyniki z skonfigurowanymi progami.

Dostosuj ten przepływ pracy do swojego konkretnego systemu CI/CD i wymagań projektu. Na przykład, jeśli używasz GitLab CI, skonfigurujesz plik .gitlab-ci.yml z podobnymi krokami.

4. Uruchomienie Lighthouse CI

Zatwierdź swoje zmiany i wypchnij je do repozytorium. Potok CI/CD automatycznie uruchomi Lighthouse CI. Jeśli którakolwiek z asercji się nie powiedzie, kompilacja zakończy się niepowodzeniem, dostarczając cenne informacje zwrotne deweloperom. Raporty Lighthouse CI będą dostępne pod adresem URL dostarczonym przez system CI/CD.

Zaawansowana konfiguracja i dostosowywanie

Lighthouse CI oferuje szeroki zakres opcji konfiguracyjnych i możliwości dostosowywania. Oto niektóre z zaawansowanych funkcji:

1. Używanie serwera Lighthouse CI

Serwer Lighthouse CI zapewnia scentralizowany pulpit nawigacyjny do śledzenia metryk wydajności w czasie, zarządzania projektami i współpracy nad problemami z wydajnością. Aby użyć serwera Lighthouse CI, należy skonfigurować instancję i zaktualizować plik lighthouserc.js, aby przesyłać raporty na serwer.

Najpierw wdróż serwer. Dostępne są różne opcje wdrożenia, w tym Docker, Heroku oraz dostawcy chmurowi, tacy jak AWS i Google Cloud. Szczegółowe instrukcje dotyczące wdrażania serwera można znaleźć w dokumentacji Lighthouse CI.

Gdy serwer zostanie uruchomiony, zaktualizuj plik lighthouserc.js, aby wskazywał na serwer:

            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
              
            
          

Zastąp YOUR_LHCI_SERVER_URL adresem URL swojego serwera Lighthouse CI i YOUR_LHCI_SERVER_TOKEN tokenem wygenerowanym przez serwer. Token uwierzytelnia Twój potok CI na serwerze.

2. Ustawianie budżetów wydajności

Budżety wydajności definiują akceptowalne progi dla określonych metryk. Lighthouse CI pozwala na ustawienie budżetów wydajności i powodowanie niepowodzenia kompilacji, jeśli te budżety zostaną przekroczone. Pomaga to zapobiegać regresjom wydajności i zapewnia, że Twoja strona internetowa utrzymuje się w akceptowalnych granicach wydajności.

Możesz zdefiniować budżety wydajności w pliku lighthouserc.js za pomocą właściwości assert.assertions. Na przykład, aby ustawić budżet wydajności dla First Contentful Paint (FCP), możesz dodać następującą asercję:

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

              
                Copy
              
            
          

Ta asercja spowoduje niepowodzenie kompilacji, jeśli FCP będzie większe niż 2500 milisekund.

3. Dostosowywanie konfiguracji Lighthouse

Lighthouse CI pozwala na dostosowanie konfiguracji Lighthouse do Twoich specyficznych potrzeb. Możesz skonfigurować różne ustawienia Lighthouse, takie jak:

• onlyAudits: Określ listę audytów do uruchomienia.
• skipAudits: Określ listę audytów do pominięcia.
• throttling: Skonfiguruj ustawienia ograniczania przepustowości sieci, aby symulować różne warunki sieciowe.
• formFactor: Określ format (desktop lub mobilny) do emulacji.
• screenEmulation: Skonfiguruj ustawienia emulacji ekranu.

Aby dostosować konfigurację Lighthouse, można przekazać flagę --config-path do polecenia lhci autorun, wskazując na niestandardowy plik konfiguracyjny Lighthouse. Pełną listę opcji konfiguracyjnych można znaleźć w dokumentacji Lighthouse.

4. Audytowanie stron wymagających uwierzytelnienia

Audytowanie stron wymagających uwierzytelnienia wymaga nieco innego podejścia. Musisz zapewnić Lighthouse CI sposób na uwierzytelnienie przed uruchomieniem audytów. Można to osiągnąć za pomocą plików cookie lub poprzez skryptowanie procesu logowania.

Jednym z popularnych podejść jest użycie flagi --extra-headers do przekazania ciasteczek uwierzytelniających do Lighthouse CI. Ciasteczka można uzyskać z narzędzi deweloperskich przeglądarki po zalogowaniu się na stronę.

Alternatywnie, można użyć skryptu Puppeteer do zautomatyzowania procesu logowania, a następnie uruchomić audyty Lighthouse na uwierzytelnionych stronach. Takie podejście zapewnia większą elastyczność i pozwala na obsługę złożonych scenariuszy uwierzytelniania.Najlepsze praktyki w testowaniu wydajności frontendu z Lighthouse CI

Aby zmaksymalizować korzyści płynące z Lighthouse CI, postępuj zgodnie z poniższymi najlepszymi praktykami:

• Uruchamiaj Lighthouse CI regularnie: Zintegruj Lighthouse CI ze swoim potokiem CI/CD, aby audyty były uruchamiane automatycznie z każdym commitem lub pull requestem. Zapewni to wczesne wykrywanie i szybkie usuwanie regresji wydajności.
• Ustawiaj realistyczne budżety wydajności: Definiuj budżety wydajności, które są ambitne, ale osiągalne. Zacznij od konserwatywnych budżetów i stopniowo je zacieśniaj w miarę poprawy wydajności witryny. Rozważ ustawienie różnych budżetów dla różnych typów stron, w zależności od ich złożoności i znaczenia.
• Skup się na kluczowych metrykach: Priorytetyzuj kluczowe wskaźniki wydajności, które mają największy wpływ na doświadczenie użytkownika i wyniki biznesowe. Core Web Vitals od Google (LCP, FID i CLS) to dobry punkt wyjścia.
• Badaj i rozwiązuj problemy z wydajnością: Gdy Lighthouse CI zidentyfikuje problemy z wydajnością, dokładnie je zbadaj i wdróż odpowiednie rozwiązania. Użyj raportów Lighthouse, aby zidentyfikować przyczyny problemów i nadać priorytet najbardziej wpływowym poprawkom.
• Monitoruj wydajność w czasie: Śledź metryki wydajności w czasie, aby zidentyfikować trendy i wzorce. Użyj serwera Lighthouse CI lub innych narzędzi monitorujących do wizualizacji danych o wydajności i identyfikacji obszarów do poprawy.
• Edukuj swój zespół: Upewnij się, że Twój zespół rozumie znaczenie wydajności frontendu i wie, jak efektywnie korzystać z Lighthouse CI. Zapewnij szkolenia i zasoby, aby pomóc im rozwijać swoje umiejętności i wiedzę.
• Uwzględnij globalne warunki sieciowe: Ustawiając budżety wydajności, weź pod uwagę warunki sieciowe w różnych częściach świata. Użytkownicy w obszarach z wolniejszym internetem mogą mieć inne doświadczenia niż użytkownicy w obszarach z szybszym połączeniem. Używaj narzędzi do symulacji różnych warunków sieciowych podczas testowania.
• Optymalizuj obrazy: Optymalizacja obrazów jest kluczowym aspektem wydajności frontendu. Używaj narzędzi takich jak ImageOptim, TinyPNG lub konwerterów online do kompresji i optymalizacji obrazów bez utraty jakości. Używaj nowoczesnych formatów obrazów, takich jak WebP, które oferują lepszą kompresję i jakość niż tradycyjne formaty, takie jak JPEG i PNG. Wdróż leniwe ładowanie (lazy loading) dla obrazów, które nie są od razu widoczne w oknie przeglądarki.
• Minifikuj i kompresuj kod: Minifikuj swój kod HTML, CSS i JavaScript, aby zmniejszyć rozmiar plików. Używaj narzędzi takich jak UglifyJS, Terser lub minifikatorów online. Włącz kompresję Gzip lub Brotli na serwerze, aby jeszcze bardziej zmniejszyć rozmiar przesyłanych plików.
• Wykorzystaj pamięć podręczną przeglądarki: Skonfiguruj swój serwer tak, aby ustawiał odpowiednie nagłówki cache dla zasobów statycznych, takich jak obrazy, pliki CSS i JavaScript. Pozwala to przeglądarkom na przechowywanie tych zasobów w pamięci podręcznej i unikanie ich wielokrotnego pobierania.

Podsumowanie

Integracja Lighthouse CI z procesem deweloperskim jest kluczowym krokiem w kierunku tworzenia wydajnych, dostępnych i przyjaznych dla SEO stron internetowych. Automatyzując testowanie wydajności frontendu i śledząc wydajność w czasie, możesz wcześnie identyfikować i rozwiązywać problemy z wydajnością, poprawiać doświadczenie użytkownika i osiągać lepsze wyniki biznesowe. Wdróż Lighthouse CI i uczyń ciągłe doskonalenie wydajności podstawową wartością w swoim procesie deweloperskim. Pamiętaj, że wydajność strony internetowej to nie jednorazowy wysiłek, ale ciągły proces wymagający stałej uwagi i optymalizacji. Uwzględnij czynniki kulturowe i regionalne, aby zapewnić bezproblemowe doświadczenie wszystkim użytkownikom, niezależnie od ich lokalizacji czy urządzenia. Postępując zgodnie z najlepszymi praktykami opisanymi w tym artykule, możesz zapewnić, że Twoja strona będzie działać szybko, niezawodnie i przyjemnie dla użytkowników na całym świecie.