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 kontroli, które testuje witryny pod kątem wydajności, ułatwień dostępu, sprawdzonych metod i wydajności witryny 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.

Sekcji „Budżety” w raporcie Lighthouse

Wskazówki dotyczące wydajności pakietu Webpack

Webpack to zaawansowane narzędzie do tworzenia optymalizacji, które pozwala zoptymalizować sposób dostarczania kodu do użytkowników. 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, aby pamiętać o rozmiarach zasobów w trakcie programowania.

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

Zaznaczony bundle.js jest większy niż Twój budżet

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

Ostrzeżenie dotyczące rozmiaru pakietu Webpacka ⚠️

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.

Uwaga: rozmiary skompresowanych zasobów wpływają na czas transferu, co jest bardzo ważne w przypadku wolnych sieci.

Dodatkowa funkcja: webpack nie tylko wyświetla ostrzeżenie, ale też podaje rekomendację dotyczącą zmniejszenia rozmiaru pakietów. 💁

Bundlesize

Bundlesize to prosty pakiet npm, który służy do testowania rozmiaru zasobu pod kątem ustawionego progu. Może być uruchamiany lokalnie i integrowany z procesem CI.

Interfejs wiersza poleceń Bundlesize

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.

Nieudany test interfejsu wiersza poleceń bundlesize ❌

Przejście testu interfejsu wiersza poleceń bundlesize ✔️

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.

Informacje o stanie sprawdzania rozmiaru pakietu w GitHubie

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 nakłada budżety na podstawie dowolnej z 5 kategorii audytu Lighthouse. Może to być na przykład budżet 100 dla wyniku wydajności Lighthouse. Czasami łatwiej jest monitorować jedną liczbę niż poszczególne budżety zasobów, a wyniki Lighthouse uwzględniają wiele różnych czynników.

Wyniki Lighthouse 💯

Bot Lighthouse przeprowadza audyt po wdrożenie witryny na serwerze testowym. W .travis.yml ustaw budżety dla poszczególnych kategorii Lighthouse za pomocą 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. ⛔

Stan sprawdzania przez bota Lighthouse na GitHubie

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.

Wyniki raportowania Lighthouse w żądaniu pull 💬

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

Narzędzie	interfejs CLI	CI	Podsumowanie
Latarnia morska	✔️	❌	Budżety dla różnych typów zasobów na podstawie ich rozmiaru lub liczby.
Webpack	✔️	❌	Budżety na podstawie rozmiarów komponentów generowanych przez webpack. Sprawdza nieskompresowane rozmiary.
rozmiar pakietu	✔️	✔️	budżety na podstawie rozmiarów poszczególnych zasobów; Sprawdza rozmiary skompresowane i nieskompresowane.
Bot Lighthouse	❌	✔️	Budżety na podstawie wyników Lighthouse.