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

Milica Mihajlija

Po zdefiniowaniu budżetu wydajności należy skonfigurować proces kompilacji, aby go monitorować. Istnieje wiele narzędzi, które umożliwiają definiowanie wartości progowych dla wybranych danych o skuteczności i ostrzegają, jeśli przekroczysz budżet. Dowiedz się, jak wybrać opcję, która najlepiej odpowiada Twoim potrzebom i obecnej konfiguracji. 🕵️‍♀️

Budżety wydajności Lighthouse

Lighthouse to narzędzie do przeprowadzania audytów, które testuje witryny pod kątem kilku kluczowych obszarów: wydajności, dostępności, sprawdzonych metod i skuteczności jako progresywnej aplikacji internetowej.

Wersja wiersza poleceń Lighthouse (w wersji 5 lub nowszej) obsługuje ustawianie budżetów na potrzeby skuteczności na podstawie:

• rozmiar zasobu
• liczba zasobów

Możesz ustawiać budżety dla tych typów zasobów:

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

Budżety są ustawiane w pliku JSON, a po ich zdefiniowaniu nowa kolumna „Powyżej budżetu” informuje, czy przekraczasz jakieś limity.

Wskazówki dotyczące wydajności Webpack

Webpack to potężne narzędzie do kompilacji, które optymalizuje sposób dostarczania kodu użytkownikom. Umożliwia też ustawianie budżetów skuteczności na podstawie rozmiaru zasobu.

W webpack.config.js włącz wskazówki dotyczące wydajności, aby otrzymywać ostrzeżenia lub błędy w wierszu poleceń, gdy rozmiar pakietu przekroczy limit. To świetny sposób na to, aby pamiętać o rozmiarach zasobów przez cały czas tworzenia.

Po etapie kompilacji webpack wygeneruje listę zasobów z ich rozmiarami i kolorami. Wszystko, co przekracza budżet, jest podświetlone na żółto.

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

Budżety są porównywane z rozmiarami nieskompresowanych komponentów. Nieskompresowany rozmiar kodu JavaScript jest powiązany z czasem wykonania, a duże pliki mogą być wykonywane bardzo długo, zwłaszcza na urządzeniach mobilnych.

Bundlesize

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

Interfejs wiersza poleceń Bundle

Uruchom bundlesize CLI, podając próg i plik, który chcesz przetestować.

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

Polecenie Bundlesize wyświetla wyniki testów z oznaczeniem kolorami w jednym wierszu.

Rozmiar pakietu dla CI

Najwięcej korzyści z bundlesize uzyskasz, jeśli zintegrujesz go z CI, aby automatycznie stosować limity rozmiaru w przypadku żądań pull. Jeśli test rozmiaru pakietu się nie powiedzie, żądanie pull nie zostanie scalone. Działa ona w przypadku żądań pull na GitHubie z Travis CI, CircleCI, Wercker i Drone.

Twoja aplikacja może być obecnie szybka, ale dodanie nowego kodu może to zmienić. Sprawdzanie żądań pull z bundlesize pomoże Ci uniknąć regresji wydajności. Używają go m.in. Bootstrap, Tinder i Trivago, aby kontrolować swoje budżety.

Za pomocą parametru bundlesize można ustawić progi dla każdego pliku osobno. Jest to szczególnie przydatne, jeśli w aplikacji dzielisz pakiet.

Domyślnie testuje rozmiary skompresowanych zasobów. 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 kontroli Lighthouse. Może to być na przykład budżet 100 dla wyniku wydajności Lighthouse. Czasami łatwiej jest obserwować jeden numer niż poszczególne budżety zasobów, a oceny Lighthouse biorą pod uwagę wiele czynników.

Po wdrożeniu witryny na serwerze testowym Lighthouse Bot przeprowadza kontrolę. W sekcji .travis.yml ustaw budżety dla poszczególnych kategorii Lighthouse, używając opcji --perf, --a11y, --bp, --seo lub --pwa. Staraj się utrzymywać wyniki na poziomie co najmniej 90, aby pozostać w zielonej strefie.

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 w GitHub spadną poniżej ustawionego przez Ciebie progu, bot Lighthouse może uniemożliwić połączenie żądania pull. ⛔

Lighthouse Bot komentuje Twoje żądanie pull z aktualnymi wynikami. To użyteczna funkcja, która zachęca do dyskusji na temat wydajności w miarę przeprowadzania zmian w kodzie.

Jeśli okaże się, że Twoje żądanie pull zostało zablokowane z powodu niskiej oceny Lighthouse, przeprowadź audyt za pomocą Lighthouse CLI lub w DevTools. Generuje raport z szczegółami dotyczącymi wąskich gardeł i wskazówkami dotyczącymi prostych optymalizacji.

Podsumowanie