Blog | Internet | QA

Google Lighthouse - przydatne narz─Ödzie do audytu stron internetowych

┬Ě maciej

Google Lighthouse to zdobywaj─ůce coraz wi─Öksz─ů popularno┼Ť─ç narz─Ödzie do audytu stron internetowych, kt├│re pomaga w podniesieniu ich jako┼Ťci w niekt├│rych obszarach. Narz─Ödzie jest wbudowane w DevToolsy w Google Chrome (uruchamiane klawiszem F12). Od tego roku dost─Öpne jest tak┼╝e jako wtyczka do Firefoksa. Znajdziemy je r├│wnie┼╝ jako modu┼é do Node.js. Narz─Ödzie umo┼╝liwia audyt strony pod k─ůtem:

  • wydajno┼Ťci,
  • zgodno┼Ťci z PWA (Progressive Web App),
  • stosowania dobrych praktyk,
  • dost─Öpno┼Ťci (accessibility),
  • SEO.

Do wyboru jest audyt zar├│wno w wersji desktopowej, jak i mobilnej (emuluj─ůcy urz─ůdzenia mobilne). Raport z testowania daje bardzo przydatne wskaz├│wki co do obszar├│w, kt├│re mog─ů nam umkn─ů─ç podczas normalnego testowania funkcjonalnego a maj─ů znaczenie w testach niefunkcjonalnych (np. testach dost─Öpno┼Ťci), o kt├│rych cz─Östo si─Ö zapomina. Nie wa┼╝ne, czy jeste┼Ť testerem, programist─ů, czy prowadzisz zwyk┼éy blog, czy stron─Ö firmow─ů - to narz─Ödzie dostarczy Ci warto┼Ťciowych informacji o stanie dowolnej strony i cenne wskaz├│wki poprawy.

 

Lighthouse

Google Lighthouse to narz─Ödzie z otwartym kodem ┼║r├│d┼éowym, kt├│ry dost─Öpny jest na Githubie. U┼╝ywam go dosy─ç cz─Östo tu┼╝ przed wdro┼╝eniem nowych wersji swoich stron. Pomaga wychwyci─ç pewne niuanse, kt├│re mo┼╝emy przeoczy─ç podczas webmasteringu a mog─ů mie─ç istotn─ů rol─Ö np. w indeksowaniu przez przegl─ůdarki. Warto tak┼╝e przyjrze─ç si─Ö opcji emulowania urz─ůdze┼ä mobilnych. Cz─Östo nasza strona mo┼╝e osi─ůga─ç dobre wyniki przy wybraniu opcji desktop a mo┼╝emy si─Ö niemile zaskoczy─ç, je┼Ťli wykonamy audyt pod k─ůtem urz─ůdze┼ä mobilnych. Warto o tym pami─Öta─ç, bo obecnie dostosowanie strony pod k─ůtem smartfon├│w i tablet├│w to podstawa. Dla kogo to narz─Ödzie? W zasadzie dla ka┼╝dego posiadacza strony internetowej, jak i programisty, testera i innych os├│b, kt├│re troszcz─ů si─Ö o jako┼Ť─ç.

 

W przypadku dużych projektów warto zadbać, aby testy odbywały automatycznie w ramach Continuous Integration (CI) - np. w ramach Github Actions.

 

U┼╝ycie

U┼╝ycie narz─Ödzia jest bardzo proste, zw┼éaszcza je┼╝eli korzystamy z przegl─ůdarki Google Chrome. Wystarczy:

  • wcisn─ů─ç przycisk F12, kt├│ry otwiera narz─Ödzia developera (znane wszystkim programistom web),
  • przej┼Ť─ç do ostatniej zak┼éadki Lighthouse,
  • wybra─ç interesuj─ůce nas kategorie audytu,
  • wybra─ç urz─ůdzenie (mobile/desktop),
  • klikn─ů─ç przycisk [Generate report] i czeka─ç na wynik.

 

Okno aplikacji Google Lighthouse

 

W przypadku Lighthouse jako wtyczki do Firefoksa jest to r├│wnie┼╝ bardzo proste:

  • nale┼╝y zainstalowa─ç wtyczk─Ö dost─Öpn─ů tutaj,
  • po zainstalowaniu wybra─ç ikonk─Ö latarni, kt├│ra pojawi┼éa si─Ö na pasku w przegl─ůdarce,
  • klikn─ů─ç ko┼éo z─Öbate je┼╝eli chcemy zmieni─ç ustawienia,
  • klikn─ů─ç przycisk [Generate report] i czeka─ç na wynik.

 

Wyniki ukazane s─ů w bardzo przyst─Öpny i intuicyjny spos├│b i a┼╝ zach─Öcaj─ů, aby je poprawi─ç. Mo┼╝emy je zapisa─ç, aby mie─ç por├│wnanie do stanu po wprowadzonych poprawkach. Raport mo┼╝na podejrze─ç na stronie https://googlechrome.github.io/lighthouse/viewer/.

 

Wydajno┼Ť─ç (Performance)

W Lighthouse 6 w wyznaczaniu metryki performance (przedzia┼é 1-100) brane s─ů pod uwag─Ö warto┼Ťci o poni┼╝szych wagach:

SkładowaOpisWaga
First Contentful PaintCzas od momentu rozpocz─Öcia ┼éadowania do za┼éadowania pierwszego elementu tre┼Ťci - tekst, obrazek (wliczaj─ůc obrazek t┼éa), elementy <svg> i niepuste elementy <canvas>15%
Speed IndexWska┼║nik mierzy czas, jak szybko zawarto┼Ť─ç witryny jest wizualnie wy┼Ťwietlana podczas ┼éadowania strony. Jest to okre┼Ťlane za pomoc─ů mierzenia wizualnej progresji pomi─Ödzy klatkami wideo z ┼éadowania strony.15%
Largest Contentful PaintMetryka wskazuje czas renderowania najwi─Ökszego bloku obrazu lub tekstu widocznego w viewporcie.25%
Time to InteractiveMetryka TTI mierzy czas od momentu rozpocz─Öcia ┼éadowania strony do momentu za┼éadowania jej g┼é├│wnych zale┼╝no┼Ťci i mo┼╝liwo┼Ťci interakcji z witryn─ů przez u┼╝ytkownika.15%
Total Blocking TimeMetryka TBT mierzy ca┼ékowity czas pomi─Ödzy FCP (First Contentful Paint) a TTI (Time to Interactive), kiedy g┼é├│wny w─ůtek jest zablokowany i nie pozwala na interakcj─Ö z witryn─ů.25%
Cumulative Layout ShiftCLS to miara wszystkich indywidualnych zmian uk┼éadu (layout shift), kt├│re wyst─Öpuj─ů podczas u┼╝ytkowania strony. Szczeg├│┼éy tutaj.5%

 

Dost─Öpno┼Ť─ç (Accessibility)

Kategoria accessibility weryfikuje czy strona jest dostosowana do czytnik├│w ekranu oraz, czy jej elementy s─ů odpowiednio kontrastowe. Dob├│r odpowiednich kolor├│w na stronie pomaga ludziom z zaburzeniami rozpoznawania barw. Te pierwsze to g┼é├│wnie weryfikacja atrybut├│w ARIA, opis├│w grafik (znacznik alt), czy np. sprawdzenie uzupe┼énionego tagu <title>.

 

Na elementy audytu sk┼éadaj─ů si─Ö tak┼╝e sprawdzenia, kt├│re nie s─ů wykonywane automatycznie i mog─ů by─ç wykonane jedynie r─Öcznie (10 element├│w). Ich lista jest dost─Öpna w raporcie, pod kategori─ů Additional items to manually check.

Lighthouse accessibility - checklista błędów

 

Dobre praktyki (Best practices)

Poszczeg├│lne sprawdzenia weryfikuj─ů stosowanie og├│lnych dobrych praktyk na stronie. Niekt├│re z nich to:

  • brak deklaracji DOCTYPE w HTML,
  • brak wy┼Ťwietlanych b┼é─Öd├│w w konsoli przegl─ůdarki,
  • brak obrazk├│w z nieodpowiednim ratio,
  • nieu┼╝ywanie HTTP/2,
  • nieu┼╝ywanie HTTPS,
  • u┼╝ywanie bibliotek JavaSriptowych ze znanymi podatno┼Ťciami,
  • niewymuszanie podania zgody u┼╝ytkownika na geolokalizacj─Ö przy ┼éadowaniu strony.

I inne. Wi─Öcej mo┼╝na znale┼║─ç na stronie web.dev.

 

Search Engine Optimization (SEO)

Na li┼Ťcie dotycz─ůcej SEO jest 15 pozycji, z czego jedna do weryfikacji r─Öcznej (weryfikacja uporz─ůdkowanych danych (structured data). Na li┼Ťcie automatycznych weryfikacji s─ů m.in.:

  • obecno┼Ť─ç tagu <meta name="viewport"> z w┼éa┼Ťciwo┼Ťciami width albo initial-scale.
  • istniej─ůcy tag <title>
  • uzupe┼énione meta description
  • poprawno┼Ť─ç pliku robots.txt
  • indeksowalno┼Ť─ç link├│w

 

W tym wpisie pomin─ů┼éem jeszcze jedn─ů kategori─Ö - Progressive Web App. Wydaj─Ö si─Ö, ┼╝e aplikacje PWA szybko nie stan─ů si─Ö standardem.

 

Źródła:


Dodaj nowy komentarz

Brak komentarzy