Google Lighthouse

Google Lighthouse to automatyczne narzędzie do oceny jakości stron internetowych, stworzone i udostępnione przez Google. Jest to otwartoźródłowe narzędzie, które może być używane przez deweloperów do testowania swoich stron pod kątem różnych metryk, które mogą wpływać na wydajność strony i doświadczenia użytkownika.

Lighthouse analizuje stronę pod kątem różnych aspektów, takich jak:

1. Wydajność: Sprawdza, jak szybko strona ładuje się i staje się interaktywna dla użytkownika.
2. Dostępność: Ocenia, jak łatwo jest korzystać z Twojej strony dla osób z różnymi ograniczeniami, takimi jak niedowidzenie lub niepełnosprawności ruchowe.
3. Najlepsze praktyki: Sprawdza, czy Twoja strona stosuje się do najlepszych praktyk ustalonych przez branżę, takich jak bezpieczne połączenia HTTPS i poprawne formatowanie plików CSS.
4. SEO: Sprawdza, czy Twoja strony jest łatwo odkrywalna dla wyszukiwarek, oceniając metatagi, statusy HTTP, atrybuty alt obrazów itp.
5. Progressive Web App (PWA): Sprawdza, czy Twoja strona spełnia kryteria Google dla aplikacji typu Progressive Web App.

Można go używać w kilka różnych sposobów – jako dodatek do przeglądarki Chrome, jako narzędzie linii poleceń lub jako część ciągłej integracji w procesie tworzenia oprogramowania. Lighthouse generuje raport, który zawiera wyniki dla każdej kategorii, wskazując obszary, które wymagają poprawy, co czyni go nieocenionym narzędziem dla deweloperów webowych.

Google Lighthouse – sprawdzane parametry

Google Lighthouse sprawdza wiele różnych parametrów w celu oceny strony internetowej. Oto niektóre z kluczowych aspektów, które analizuje:

1. Wydajność: Ocena wydajności skupia się na tym, jak szybko strona jest ładowana i staje się interaktywna. Obejmuje to metryki takie jak:
   • First Contentful Paint (FCP): Mierzy, ile czasu upływa od momentu, gdy strona zaczyna się ładować, do momentu, gdy dowolna zawartość (tekst, obraz) jest renderowana na ekranie.
   • Speed Index (SI): Mierzy, jak szybko zawartość na stronie jest widoczna podczas ładowania.
   • Largest Contentful Paint (LCP): Mierzy czas od rozpoczęcia ładowania strony do renderowania największego elementu zawartości (np. obrazu lub bloku tekstu) na ekranie.
   • Time to Interactive (TTI): Mierzy, ile czasu upływa od momentu, gdy strona zaczyna się ładować, do momentu, gdy jest w pełni interaktywna i reaguje na interakcje użytkownika.
   • Total Blocking Time (TBT): Mierzy całkowity czas, w którym strona jest zablokowana i nie jest w stanie reagować na interakcje użytkownika.
2. Dostępność: Dostępność ocenia, jak łatwo jest korzystać z Twojej strony dla osób z różnymi ograniczeniami. Obejmuje takie elementy jak:
   • Poprawne zastosowanie atrybutów ARIA.
   • Kontrast kolorów między tłem a tekstem.
   • Czy wszystkie elementy interaktywne są dostępne dla użytkowników klawiatury.
   • Czy wszystkie obrazy mają tekst alternatywny.
3. Najlepsze praktyki: Sprawdza, czy Twoja strona stosuje się do ogólnie przyjętych najlepszych praktyk. Na przykład:
   • Czy strona używa bezpiecznych połączeń HTTPS.
   • Czy wszystkie linki mają atrybuty rel="noopener".
   • Czy strona unika stosowania przestarzałych API.
4. SEO: Sprawdza, czy Twoja strona jest łatwo odkrywalna dla wyszukiwarek. Na przykład:
   • Czy strona ma poprawny tag <title>.
   • Czy wszystkie linki są crawlable.
   • Czy strona ma status HTTP 200.
5. Progressive Web App (PWA): Ocena PWA sprawdza, czy strona spełnia kryteria dla aplikacji typu Progressive Web App. Na przykład:
   • Czy strona jest dostępna offline.
   • Czy strona ładuje się szybko, nawet na wolnych sieciach.
   • Czy strona jest serwowana przez HTTPS.

Raport Lighthouse dostarcza szczegółowe informacje na temat każdego z tych aspektów, wskazując obszary, które wymagają poprawy.

Google Lighthouse może być używane na kilka różnych sposobów, w tym jako wtyczka (rozszerzenie) do przeglądarki.

Najpopularniejszą wtyczką jest Lighthouse dostępne jako rozszerzenie do przeglądarki Google Chrome. Można go zainstalować bezpośrednio z Chrome Web Store. Po zainstalowaniu, Lighthouse jest dostępne w przeglądarce i może być używane do generowania raportów bezpośrednio na stronach, które odwiedzasz.

Narzędzia i rozszerzenia, które integrują Lighthouse

Istnieje także wiele innych narzędzi i rozszerzeń, które integrują Lighthouse. Na przykład:

1. WebPageTest: Jest to popularne narzędzie do testowania wydajności stron internetowych, które teraz zawiera Lighthouse jako jeden z jego testów.
2. PageSpeed Insights: Google’s PageSpeed Insights teraz korzysta z Lighthouse do generowania swoich raportów o wydajności.
3. Web.dev: Strona web.dev od Google również korzysta z Lighthouse do generowania raportów o wydajności strony.
4. CI/CD integracje: Różne narzędzia ciągłej integracji (Continuous Integration), takie jak Jenkins czy CircleCI, mają wtyczki lub integracje z Lighthouse, które pozwalają na automatyczne generowanie raportów Lighthouse podczas procesu budowania oprogramowania.

Różne wersje narzędzia Lighthouse, w tym wtyczki do przeglądarek i integracje CI/CD, mogą lepiej służyć różnym potrzebom, w zależności od Twojego procesu pracy i tego, jak chcesz używać Lighthouse.

Google Lighthouse w nowej wersji informuje o przestarzałych bibliotekach JavaScript

Google Lighthouse jest nieocenionym narzędziem dla deweloperów i specjalistów SEO. Dostarcza szczegółowych informacji na temat możliwych ulepszeń w zakresie wydajności i bezpieczeństwa strony. Raporty zawierają wskazówki dotyczące multimediów, sugerują zmiany w zakresie optymalizacji pamięci podręcznej oraz wskazują te elementy kodu CSS i JavaScript, które nie są używane w trakcie renderowania strony.

Obecnie ostrzeżenia związane z JavaScript możemy znaleźć w trakcie analizy Page Speed Insights. O ile oczywiście takie błędy Google Lighthouse wykryje w kodzie naszej strony.

JavaScript

Javascript jest jednym z najczęściej używanych języków w projektowaniu stron internetowych. Jest językiem, który jak większość języków korzysta z bibliotek gotowych fragmentów kodu. Dzięki temu programiści nie muszą tworzyć kodu, który już został stworzony. Takie podejście charakterystyczne jest dla rozwiązań Open Source, do jakich należy JavaScript.

Taką przykładową biblioteką jest NPM (Node Package Manager) ułatwia ona włączanie do projektu istniejących wcześniej bibliotek. Taki sposób projektowania można porównać do góry lodowej. Jej wierzchołek jest tym, co widzimy ponad taflą wody.

W przypadku strony internetowej jest to zatem kod JavaScript napisany na jej potrzeby. Kod ten korzysta z wielu bibliotek wspólnych, wykorzystywanych przez inne strony www. Połączenia z tym kodem przechowywane są przez NPM w katalogu .node_modules. Dzięki tym połączeniom kod naszej strony komunikuje się z poszczególnymi bibliotekami zewnętrznymi.

Taki sposób projektowania wiąże się z licznymi problemami nadmiaru. Nasz kod odwołuje się do wielu bibliotek.Te biblioteki mają wiele powiązanych ze sobą elementów. Ilość odwołań kaskadowo rośnie, przez co przedłuża proces generowania kodu. Dla zwykłego użytkownika takiego jak ja objawia się to tym, że strona ładuje się długo. To jest bardzo denerwujące, prawda?

Istnieje algorytm optymalizacji zwany „tree shaking”, który wybiera tylko te elementy i powiązania bibliotek, które wykorzystywane są w danym kodzie. Ten algorytm nie zawsze działa dobrze w starszych wersjach. Jeśli nasze strona nie aktualizuje tego składnika, może przez to tracić na szybkości ładowania. Co powoduje obciążenie dla Google i wyższy współczynnik odrzuceń.

Jaki to ma wpływ na SEO

Specjaliści SEO muszą też być programistami. Szczególnie istotna jest wiedza w zakresie HTML, JavaScript.

Jeśli nie masz wiedzy w tym zakresie może być Ci trudno poprawnie nadzorować pracę nad optymalizacją kodu JavaScript. Na szczęście Ja i mój zespół mamy taką wiedzę.

Szczególnie ważne jest gdy trafiają się nam projekty klientów, którzy nie mają wsparcia programistycznego. Wtedy musimy posiłkować się naszą wiedzą lub gotowymi rozwiązaniami.

SEO dla programistów

Optymalizacja JavaScriptu jest głównie zadaniem dla specjalistów SEO. Nie mniej programiści JavaScript też powinni mieć przynajmniej wiedzę na temat potrzeb jakie są związane z optymalizacją czasu ładowania się stron. Pierwszym krokiem będzie dodanie PageSpeed Insights – Google Developers do listy obowiązkowych narzędzi.