Testujemy front-end: Lighthouse

13 stycznia 2018 | Narzędzia

Dawno nie pisałam o żadnym narzędziu. Czas to zmienić 🙂 Dzisiaj opiszę Wam narzędzie, które każdy tester niemalże na pewno na pod ręką, ale nie każdy o nim wie, nie każdy też używa.

Lighthouse, bo o nim chcę opowiedzieć, to kolejne po Koa11y i GTmetrix narzędzie, które przyda nam się, jeżeli chcemy testować Front-end naszej aplikacji. Dostęp do niego jak wspomniałam jest bajecznie prosty, zwłaszcza dla tych z nas, którzy używają na co dzień przeglądarki Chrome – od paru już wersji Lighthouse znajdziemy wśród arsenału narzędzi developerskich jakie oferuje Google. Co na temat Lighthouse ma do powiedzenia przeglądarkowy gigant możecie przeczytać sami tutaj.

Aby włączyć narzędzie musimy otworzyć chromowe narzędzia developerskie (Ctrl + Shift + I) i… przejść do zakładki Audits.

Aby rozpocząć analizę klikamy “Perform an audit…” i wybieramy zakres. Nasz serwis możemy przetestować pod kątem:

  • User Experience (czy strona spełnia wymagania Progressive Web Apps)
  • Wydajności
  • Dobrych praktyk nowoczesnego web developmentu
  • Dostępności

Na potrzeby tego wpisu pozostawiłam wszystkie opcje włączone, co pozwoli przy okazji porównać wyniki z tymi wygenerowanymi przy okazji wcześniej opisanych narzędzia.

Po uruchomieniu testu w oknie przeglądarki możemy podpatrzeć, co dla nas robi Lighthouse.

W górnej części znajdziemy opcje, które pozwolą nam uruchomić nowy raport (+) lub pobrać raport jako .json. Jest też lista rozwijana z poprzednimi raportami, dzięki czemu możemy porównać wyniki przed i po poprawkach (jeśli oczywiście takie zrobimy :))

Przejdźmy do tego, co Lighthouse nam wypluł 😛 Test przeprowadzałam jak zwykle na jakosctobedzie.pl i (też jak zwykle) specjalnie nie mam się czym chwalić 🙂 Każde z 4 kryteriów zawiera listę audytów które “zaliczyły fejla” oraz tych, które przeszły.

Zacznijmy od tego, co już testowałam, czyli wydajność i dostępność.

W kwestii wydajności Google nie był dla mnie tak łaskawy, jak metryki oferowane przez GTmetrix. Wówczas otrzymałam odpowiednio 89% oraz 72%. Lighthouse wycenia wydajność strony głównej mojego bloga na 58%. W GTmetrix mogłam wygenerować film z testu, a w raporcie omawianego narzędzia znajdziemy oś czasu z klatkami pokazującymi stopień załadowania strony w danej sekundzie. Dodatkowo narzędzi podpowiada co mogę poprawić aby skrócić czas ładowania.

Dostępność wypadła najlepiej – Lighthouse wycenił ją na 89%. Również tutaj znajdziemy wskazówki co poprawić, choć nie tak dokładne i szczegółowe jak w Koa11y/Pa11y. Ale musimy też pamiętać, że Koa11y i Pa11y to narzędzia dedykowane do tylko jednego rodzaju testów.

Test sprawdzający zgodność z Progressive Web Apps wypadł najgorzej – 55%. Dobre praktyki też kuleją, choć jest nieco lepiej – 55%.

I… to by było tyle audytu 🙂 Wiem, że ten wpis jest raczej krótki, ale jego celem było pokazanie Wam, jak proste narzędzie mamy tuż pod ręką. A jak lepiej pokazać prostotę, niż prostym wpisem? 🙂 Lighthouse jest łatwo dostępny i łatwy w obsłudze.

Najnowsze wpisy

Czy testowanie jest dla każdego?

Do tego wpisu zainspirowała mnie dyskusja, jaka rozgorzała wokół gościnnego wpisu Marcina, który jakiś czas temu opublikowałam. Pytanie o to, czy testowanie oprogramowania jest dla każdego, pojawia się często w kończących się gorącymi wymianami zdań wątkach na grupie facebookowej Testowanie Oprogramowania.

KISS, czyli nie komplikuj, głuptasku

Łapka w górę, kto słyszał o regule KISS. Oczywiście nie mogę Was widzieć, ale wyobrażam sobie, że zgłosiłby się każdy, kto już dłuższy czas pracuje przy wytwarzaniu oprogramowania, a ten, kto pisze automaty i programuje już na sto procent.

“Mindset” to nie wszystko

Sporo czasu zabierałam się do tego, by napisać dzisiejszy wpis. I nie, wcale nie chodzi mi o to, że powinnam była go wrzucić wczoraj, ale o to, że trochę obawiam się wsadzania kija w mrowisko.

Pin It on Pinterest

Podoba Ci się wpis?

Podziel się ze znajomymi!