Audytowanie i ocenianie za pomocą Lighthouse
Proszę uruchamiać Lighthouse w DevTools lub CI, odczytywać wynik wydajności i diagnostykę oraz ustalać priorytety możliwości zapewniających największe oszczędności.
Audytowanie i ocenianie za pomocą Lighthouse to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest Lighthouse?
Lighthouse to open-source'owe narzędzie firmy Google do przeprowadzania audytów. Symuluje ładowanie strony i ocenia ją w kategoriach Performance, Accessibility, Best Practices, SEO oraz PWA. Jest wbudowane w Chrome DevTools i można je uruchamiać z poziomu CLI lub CI.
Uruchamianie Lighthouse w DevTools
Należy otworzyć DevTools, kliknąć kartę Lighthouse, wybrać kategorie i urządzenie (mobile/desktop), a następnie kliknąć „Analyze page load”. Symulowany test trwa około 30 sekund.
Składniki wyniku wydajności
Wynik Performance (0–100) jest średnią ważoną następujących wskaźników: LCP (25%), Total Blocking Time (30%), CLS (25%), FCP (10%), Speed Index (10%). Poprzeczka jest ustawiona wysoko — wynik co najmniej 90 oznacza „Good”.
First Contentful Paint (FCP)
FCP wskazuje moment wyrenderowania pierwszego fragmentu treści (tekstu lub obrazu). Różni się od LCP — FCP uwzględnia dowolny element, a LCP największy element. Dobry wynik: poniżej 1,8 s.
Total Blocking Time (TBT)
TBT mierzy czas, przez który główny wątek jest blokowany przez zadania JavaScript trwające dłużej niż 50 ms. Wysoki TBT oznacza, że strona wydaje się nie reagować, nawet jeśli wygląda na gotową.
Czytanie sekcji Opportunities
Lighthouse wyświetla sekcję „Opportunities” z szacowanymi oszczędnościami, na przykład „Eliminate render-blocking resources: 1.2s”. Należy sortować wyniki według oszczędności i najpierw naprawiać elementy o największym wpływie.
Typowe możliwości optymalizacji
Najczęstsze usprawnienia to: odraczanie lub asynchroniczne ładowanie niekrytycznych skryptów, umieszczanie krytycznego CSS bezpośrednio w dokumencie, wstępne ładowanie kluczowych żądań, używanie CDN, włączanie kompresji tekstu (Brotli/gzip) oraz serwowanie nowoczesnych formatów obrazów.
Lighthouse CLI
Lighthouse można uruchamiać z wiersza poleceń, aby wykonywać audyty za pomocą skryptów.
npm install -g lighthouse
lighthouse https://example.com \
--output html \
--output-path ./report.html \
--chrome-flags="--headless"Lighthouse CI w GitHub Actions
Należy uruchamiać audyty przy każdym pull requeście i przerywać kompilację, jeśli wyniki spadną poniżej ustalonych progów.
# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
audit:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm ci && npm run build
- uses: treosh/lighthouse-ci-action@v11
with:
configPath: ./lighthouserc.jsonKonfiguracja Lighthouse: asercje wyników
Należy zdefiniować asercje w pliku lighthouserc.json, aby odrzucać pull requesty, które powodują pogorszenie wyników.
{
"ci": {
"assert": {
"assertions": {
"categories:performance": ["error", { "minScore": 0.9 }],
"categories:accessibility": ["error", { "minScore": 0.95 }],
"largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
}
}
}
}Ograniczanie sieci i symulacja urządzenia
Lighthouse domyślnie symuluje wolną sieć 4G i procesor telefonu ze średniej półki. Jest to zamierzone — użytkownicy korzystający z prawdziwych urządzeń w środowisku produkcyjnym mają wolniejsze połączenia niż Państwa komputer deweloperski.
Zmienność wyników — dlaczego się wahają
Wyniki Lighthouse różnią się między uruchomieniami z powodu zmiennego czasu wykonywania JavaScriptu. Należy uruchomić audyt 3–5 razy i wybrać medianę. Do automatycznego obliczania mediany można użyć opcji numberOfRuns w Lighthouse CI.
Szybki sprawdzian
Który wskaźnik Lighthouse mierzy czas, przez który główny wątek jest blokowany przez długie zadania JavaScript?
Podsumowanie: Lighthouse
Lighthouse przeprowadza audyty kategorii Performance, Accessibility, Best Practices, SEO i PWA. Wynik Performance jest średnią ważoną wskaźników LCP, TBT, CLS, FCP i Speed Index. Sekcja Opportunities porządkuje usprawnienia według szacowanych oszczędności. Lighthouse można uruchamiać w DevTools, z CLI lub w CI za pomocą treosh/lighthouse-ci-action. Aby uwzględnić zmienność wyników, należy wybrać medianę z wielu uruchomień.
Często zadawane pytania
Czy lekcja „Audytowanie i ocenianie za pomocą Lighthouse” jest bezpłatna?
Tak — pełny tekst „Audytowanie i ocenianie za pomocą Lighthouse” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Audytowanie i ocenianie za pomocą Lighthouse”?
Proszę uruchamiać Lighthouse w DevTools lub CI, odczytywać wynik wydajności i diagnostykę oraz ustalać priorytety możliwości zapewniających największe oszczędności. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Audytowanie i ocenianie za pomocą Lighthouse”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Core Web Vitals: LCP, FID, CLS
- Audytowanie i ocenianie za pomocą Lighthouse
- Optymalizacja obrazów: lazy loading i formaty WebP
- Dzielenie kodu i leniwe trasy