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

Milica Mihajlija

Po określeniu budżetu skuteczności możesz skonfigurować proces tworzenia kampanii. aby móc je śledzić. Istnieje wiele narzędzi, które umożliwiają definiowanie progów wybranych danych o skuteczności i ostrzegą Cię, jeśli przekroczysz budżet. Sprawdź jak wybrać taki, który najlepiej odpowiada Twoim potrzebom i Twojej obecnej konfiguracji. 🕵️‍♀️

Budżety wydajności w 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 (5 lub nowsza) obsługuje ustawianie budżetów wydajności na podstawie:

• rozmiar zasobu
• liczba zasobów

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

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

Budżety ustawia się w pliku JSON, a po zdefiniowaniu ich nowej wartości „Ponad budżet” informuje, czy przekraczasz limity.

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łącz wskazówki dotyczące wydajności w systemie webpack.config.js, 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 zakończeniu kompilacji Webpack generuje kolorową listę zasobów wraz z ich rozmiarami. Wszystkie elementy powyżej budżetu są wyróżnione na żółto.

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

Budżety są porównywane z rozmiarami nieskompresowanych zasobów. Rozmiar nieskompresowanego JavaScriptu jest związany z czasem wykonywania, a uruchamianie dużych plików może długo trwać, szczególnie na urządzeniach mobilnych.

.

Grupowanie

Bundlesize to prosty pakiet npm, który służy do testowania rozmiaru zasobu pod kątem ustawionego progu. Może działać lokalnie i integrować się z CI.

Interfejs wiersza poleceń Bundle

Uruchom interfejs wiersza poleceń pakietu o rozmiarze pakietu, podając próg i plik, który chcesz przetestować.

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

Grupowanie wyników generuje oznaczone kolorami wyniki testów w jednym wierszu.

Tworzenie pakietów dla CI

Największe korzyści z rozmiaru pakietu uzyskasz, jeśli zintegrujesz go z CI, aby automatycznie egzekwować limity rozmiarów w żądaniach pull. Jeśli test rozmiaru pakietu się nie powiedzie, żądanie pull nie zostanie scalone. Działa w przypadku żądań pull z GitHub za pomocą Travis CI, CircleCI, Wercker i Drone.

Być może masz obecnie szybką aplikację, ale dodanie nowego kodu często może to zmienić. Zaznaczenie żądań pull z rozmiarem pakietu pomoże Ci uniknąć spadków wydajności. Bootstrap, Tinder, Trivago i wiele innych firm korzysta z niej, aby kontrolować swoje budżety.

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

Domyślnie testuje ona rozmiary zasobów spakowanych do formatu 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 kontroli narzędzia Lighthouse. Załóżmy, że budżet na wynik wydajności Lighthouse wynosi 100. Czasami łatwiej jest monitorować jedną liczbę niż poszczególne budżety zasobów, a wyniki Lighthouse uwzględniają wiele różnych 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ę pozostać w zielonej strefie z wynikami przynajmniej 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 w GitHubie spadnie poniżej ustawionego progu, bot Lighthouse może uniemożliwić scalanie żądania pull. ⛔

Lighthouse Bot komentuje Twoją prośbę o przeciągnięcie, podając zaktualizowane wyniki. To użyteczna funkcja, która zachęca do dyskusji na temat wydajności w miarę zachodzących zmian w kodzie.

Jeśli stwierdzisz, że Twoje żądanie pull jest zablokowane przez niski wynik Lighthouse, przeprowadź kontrolę za pomocą interfejsu wiersza poleceń Lighthouse lub narzędzi dla programistów. Generuje raport ze szczegółowymi informacjami o wąskich gardłach i wskazówkami dotyczącymi prostych optymalizacji.

Podsumowanie