Włącz budżety wydajności w proces tworzenia kampanii

Po określeniu budżetu wydajności nadszedł czas na skonfigurowanie procesu kompilacji, który pozwoli Ci go śledzić. Masz do dyspozycji wiele narzędzi, które pozwolą Ci definiować progi dla wybranych danych o skuteczności i ostrzegać Cię, gdy przekroczysz budżet. Dowiedz się, jak wybrać taki, który najlepiej odpowiada Twoim potrzebom i obecnej konfiguracji. 🕵️ ♀️

Budżety wydajności w Lighthouse

Lighthouse to narzędzie kontrolne, które testuje witryny pod kątem kilku kluczowych obszarów: wydajności, ułatwień dostępu, sprawdzonych metod i wydajności witryny jako progresywnej aplikacji internetowej.

Wersja Lighthouse z wierszem poleceń (wersja 5 lub nowsza) umożliwia ustawianie budżetów wydajności na podstawie:

  • rozmiar zasobu
  • liczba zasobów

Możesz ustawiać budżety dla następujących typów zasobów:

  • document
  • font
  • image
  • media
  • other
  • script
  • stylesheet
  • third-party
  • total

Budżety są ustalane w pliku JSON, a po zdefiniowaniu ich w nowej kolumnie „Ponad budżet” pojawia się informacja o tym, czy przekraczasz jakieś limity.

Sekcja Budżety w raporcie Lighthouse
Sekcja „Budżety” w raporcie Lighthouse

Wskazówki dotyczące wydajności pakietu internetowego

Webpack to zaawansowane narzędzie do kompilacji służące do optymalizacji sposobu dostarczania kodu użytkownikom. Umożliwia też ustawianie budżetów skuteczności na podstawie rozmiaru zasobu.

Włącz wskazówki dotyczące wydajności w usłudze webpack.config.js, aby otrzymywać ostrzeżenia lub błędy wiersza poleceń, gdy rozmiar pakietu przekroczy limit. To świetny sposób na zwrócenie uwagi na wielkość zasobów podczas tworzenia aplikacji.

Po zakończeniu etapu kompilacji narzędzie Webpack wygeneruje listę zasobów wraz z ich rozmiarami w różnych kolorach. Wszystkie elementy powyżej budżetu są wyróżnione na żółto.

Dane wyjściowe pakietu internetowego z wyróżnieniem pliku package.js
Wyróżniony plikbundle.js jest większy niż budżet

Domyślny limit zarówno dla zasobów, jak i punktów wejścia, wynosi 250 KB. Własne wartości docelowe możesz ustawić w pliku konfiguracji.

Ostrzeżenie dotyczące rozmiaru pakietu Webpack
Ostrzeżenie o rozmiarze pakietu internetowego ⚠️

Budżety są porównywane z rozmiarami nieskompresowanych komponentów. Rozmiar nieskompresowanego kodu JavaScriptu zależy od czasu wykonywania, a wykonywanie dużych plików może zająć dużo czasu, zwłaszcza na urządzeniach mobilnych.

Rekomendacja dotycząca optymalizacji wydajności pakietu internetowego
Dodatkowa funkcja: pakiet internetowy nie tylko Cię ostrzega, ale podpowie, jak zmniejszyć rozmiar pakietów. 💁

Połącz

Bundlesize to prosty pakiet npm, który testuje rozmiar zasobu względem ustawionego progu. Może działać lokalnie i integrować się z CI.

Połącz interfejs wiersza poleceń

Uruchom interfejs wiersza poleceń bundlesize, określając próg i plik, który chcesz przetestować.

bundlesize -f "dist/bundle.js" -s 170kB

Powoduje grupowanie wyników testów oznaczonych kolorami w jednym wierszu.

Test interfejsu wiersza poleceń pakietu z niepomyślnym wynikiem
Błąd testu interfejsu wiersza poleceń pakietu ❌
Niepowodzenie testu interfejsu wiersza poleceń pakietu rozmiaru pakietu
Test interfejsu wiersza poleceń pakietu z powodzeniem ✔️

Utwórz pakiety dla CI

Aby uzyskać maksymalną wartość z rozmiaru pakietu, zintegrujesz go z CI, aby automatycznie egzekwować limity rozmiaru w żądaniach pull. Jeśli test rozmiaru pakietu się nie powiedzie, żądanie pull nie zostanie scalone. Działa z żądaniami pull z GitHuba za pomocą Travis CI, CircleCI, Wercker i Drone.

Grupuj stan sprawdzania w GitHubie
Grupuj stan sprawdzania na GitHubie

Być może masz już szybką aplikację, ale dodanie nowego kodu często zmienia to. Sprawdzanie żądań pull z rozmiarem pakietu pomoże uniknąć spadków wydajności. Bootstrap, Tinder, Trivago i wiele innych firm korzystają z niej, aby kontrolować swój budżet.

Dzięki rozmiarowi pakietu możesz ustawić progi dla każdego pliku oddzielnie. Jest to szczególnie przydatne, gdy dzielisz pakiet w aplikacji.

Domyślnie testowane są rozmiary zasobów skompresowanych gzip. Możesz użyć opcji kompresji, by przejść na kompresję Brotli, lub całkowicie ją wyłączyć.

Bot Lighthouse

Bot Lighthouse

Lighthouse Bot integruje się z Travis CI i egzekwuje budżety na podstawie dowolnej z 5 kategorii audytów Lighthouse. Na przykład budżet równy 100, który pozwoli uzyskać wynik skuteczności w Lighthouse. Czasem łatwiej jest obserwować 1 liczbę niż budżety poszczególnych komponentów, a wyniki w Lighthouse uwzględniają wiele czynników.

Wyniki z Lighthouse 🎬
Wyniki Lighthouse 🎬

Po wdrożeniu witryny na serwerze testowym narzędzie Lighthouse Bot przeprowadza kontrolę. W ramach funkcji .travis.yml ustaw budżety dla poszczególnych kategorii Lighthouse z opcjami --perf, --a11y, --bp, --seo lub --pwa. Staraj się pozostać w zielonej strefie z wynikiem co najmniej 90.

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

Jeśli wyniki żądania pull na GitHubie spadną poniżej ustawionego przez Ciebie progu, bot Lighthouse może uniemożliwić scalanie żądań pull. ⛔

Stan sprawdzania bota Lighthouse na GitHubie
Stan sprawdzania bota Lighthouse na GitHubie

Bot Lighthouse komentuje Twoje żądanie pull ze zaktualizowanymi wynikami. Jest to ciekawa funkcja, która zachęca do dyskusji na temat wydajności w miarę wprowadzania zmian w kodzie.

Wyniki raportowania Lighthouse w żądaniu pull
Wyniki raportowania Lighthouse w żądaniu pull 💬

Jeśli zauważysz, że żądanie pull jest blokowane z powodu słabego wyniku Lighthouse, przeprowadź kontrolę za pomocą interfejsu wiersza poleceń Lighthouse lub narzędzi deweloperskich. Generuje raport ze szczegółowymi informacjami o wąskich gardłach i wskazówkami, które pomogą Ci w prostej optymalizacji.

Podsumowanie

Narzędzie CLI CI Podsumowanie
Latarnia morska ✔️
  • Budżety różnych typów zasobów w zależności od ich rozmiaru lub liczby.
pakiet internetowy ✔️
  • Budżety oparte na rozmiarach zasobów wygenerowanych przez pakiet internetowy.
  • Sprawdza rozmiary nieskompresowane.
rozmiar pakietu ✔️ ✔️
  • Budżety oparte na rozmiarach konkretnych zasobów.
  • Sprawdza rozmiary skompresowane i nieskompresowane.
Bot Lighthouse ✔️
  • Budżety określane na podstawie wyników z Lighthouse.