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

Milica Mihajlija

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.

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.

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.

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.

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.

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.

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 osobno. 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

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.

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. ⛔

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.

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