Czym jest lighthouse?
Jest to narzędzie stworzone przez firmę Google, które pokazuje informacje o tym, jak nasza strona, wypada w kontekście:
- Performance
- PWA
- SEO (podstawowe sprawdzenie)
- Best Practices
- Accessibility
Jest to raport, który może pomóc nam poprawić wyniki, które mogą przełożyć się na większych ruch na stronie oraz również np. na SEO.
Jak zainstalować lighthouse?
Domyślnie lighthouse dostępny jest w Chrome Web Store jako plugin do Chrome. Jednak mamy też przynajmniej dwa inne sposoby, aby mieć do niego dostęp z konsoli np.:
- Docker – Jest obraz dockerowy, który zawiera lighthouse i pozwala z niego korzystać po ściągnięciu.
- NPM package – w dzisiejszym wpisie skorzystamy z tego sposobu.
Czego potrzebujemy?
- Linux – Oczywiście możemy skorzystać z Windowsa, jednak do tego celu skorzystam z Linuxa, którem wystarcza słabsza instancja, więc dzięki temu możemy dokonać oszczędności, bo Windows potrzebuje więcej RAMu i lepszy procesor (Głównie przez tryb graficzny).
- NodeJS oraz NPM – potrzebujemy npm wraz z nodejs do ściągnięcia ligthouse
- Chrome (w trybie headless) – przez to, że korzystamy z Lighthouse na linuxie bez interfejsu graficznego to nasz Chrome, który jest wykorzystywany przez Lighthouse korzysta z trybu headless, który został wprowadzony w 59 wersji Chrome. Dzięki temu interfejs graficzny nie jest potrzebny, a my możemy korzystać ze słabszej (tańszej) instancji.
Czego potrzebujemy?
Ja dzięki uprzejmości firmy OVH korzystam z ich serwerów. Polecam je, bo w dobrej cenie możemy mieć dobry serwer na, którym możemy się uczyć, jak i również korzystać z niego w celach komercyjnych.
Plusem serwerów VPS jest możliwość uczenia się w bardziej „realnym” środowisku, bo jednak jest to serwer zdalny, a nie localhost. Również możecie korzystać z Waszej lokalnej maszyny.
Zaczynamy!
Zaczynamy od instalacji npm oraz nodejs na naszej maszynie.
Instalacja NPM i NodeJS
curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -
Następnie
sudo apt install nodejs
Również, jeżeli chcemy, możemy skorzystać z nvm, który pozwala mieć kilka wersji nodejs i npm jednocześnie.
Instalacja Chromium
sudo apt install chromium-browser
Instalacja Lighthouse
npm install -g lighthouse
Podstawowe przydatne parametry
–headless
Jeżeli nie będziemy mieli interfejsu graficznego na naszej instancji, to domyślne uruchomienie dla danego url nie będzie możliwe, bo lighthouse czeka na instancje chrome domyślnie w trybie graficznym. W tej sytuacji musimy dodać flagę –headless dla chrome, który używany jest przez lighthouse.
Również polecam uruchamiać z opcją –no-sandbox, bo często bez tej opcji lighthouse nie może połączyć się z daną wersją chrome.
Tworzenie raportu z określonej strony
Inne przydatne komendy
–quiet – bardzo przydatny parametr, który pozwala nam wykonywać komendy związane z lighthousem w tzw. trybie cichym, więc podczas tworzenia raportu nie widzimy logów, które pojawiają się domyślnie.
–no-throttling – opcja przydatna, gdy naszego lighthouse chcemy zainstalować na serwerze np. w innej lokalizacji à la klient i ta lokalizacja będzie wystarczająco dobrze symulować te warunki. Pamiętajmy, że większość świata korzysta z połączenia zbliżonego do sieci 3g, a nie LTE.
–output – opcja, która pozwala nam uzyskać raport lightouse w konkretnym typie pliku. Mamy trzy możliwości: .csv, .html, oraz .json. Możemy łączyć i mieć np. dwa różne typy dla naszego outputu.
Html jest domyślnym formatem pliku, w którym raport tworzony jest. Do czego CSV lub .JSON może się przydać?
Ja stworzyłem na swoje potrzeby mini program, który porównywał pomiędzy uruchomieniami dwie wersje raportu. Dzięki temu możemy porównywać ostatnią wersję, która była robiona np. przed dodaniem zmian na staging, a z wersją strony gdzie ta zmiana już jest. To da nam możliwość sprawdzenia, czy dodane zmiany na staging nie spowodowały gorszych wyników w lighthousie jeszcze przed dokonaniem deploya.
–disable-device-emulation – opcja, która pozwala wyłączyć emulowanie mobilnego urządzenia i zamiast tego uruchomić lighthouse w wersji desktopowej. Domyślnie lighthouse korzysta z emulowania połączenia 3g oraz Neuxusa 5x.
Na co trzeba zwrócić uwagę?
Na pewno na to, że wartości w kategorii performance są powiązane z szybkością internetu, więc mogą wahać się nawet o kilka punktów procentowych, jeżeli nasze np. lokalne połączenie nie jest zbyt stabilne.
Jak wygląda raport po wygenerowaniu w htmlu?
Przydatne rozszerzenie do lighthouse – PWMetrics
PWMetrics – Biblioteka, która służy do generowania raportu performance, dla strony, którą chcemy sprawdzić (pod spodem korzysta z lighthouse).
Jak instalujemy Yarna?
Dodajemy repozytorium dla Yarna:
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
Aktualizujemy apt-get oraz instalujemy Yarna:
sudo apt-get update && sudo apt-get install yarn
Instalujemy PWMetrics
yarn global add pwmetrics
Raport w PWMetrics
Przydatne parametry
–runs – Możemy określić ile razy, chcemy uruchomić raport, aby wyniki były bardziej realne (dla performance internet ma duży wpływ).
–upload – Możliwość zapisania naszych wyników do google drive.
Podsumowanie
W dzisiejszym wpisie pokazałem lighthouse, który pozwala tworzyć raport z określonych stron dzięki temu, możemy mieć szybki feedback na temat tego, co warto poprawić na naszej stronie. Często są to niewielkie rzeczy, które mogą poprawić nasz wynik co, może przełożyć się na większy ruch, bo strona np. ładuje się szybciej, więc użytkownicy chętniej z niej korzystają.
