Jak korzystać z Google Lighthouse do testowania wydajności witryny internetowej – TechCult
Różne / / November 07, 2023
Jeśli chodzi o wyższą pozycję Twojej witryny w wynikach wyszukiwania, szybkość witryny jest czynnikiem, którego nie można zignorować. Nie tylko zachwyca użytkowników, ale także przekłada się na zwiększoną widoczność. W końcu nikt nie chce kliknąć strony i czekać w nieskończoność na jej załadowanie. Widzisz na przykład TechCult, nasze blogi ładują się dość szybko, prawda? Hah, żarty na bok. Jeśli martwisz się, że Twoja witryna nie będzie mogła uzyskać rankingu z powodu niskiej prędkości, Google Lighthouse jest tutaj, aby Ci pomóc. W dzisiejszym artykule pokażemy Ci jak wykorzystać Google Lighthouse do testów wydajnościowych.
![Jak korzystać z Google Lighthouse do testowania wydajności witryny](/f/7f811fe66422ab98c5e958550414c475.png)
Co to jest Google Lighthouse i jak go używać do testowania wydajności?
Powszechnie mówi się przysłowie, że pierwsze wrażenie jest ostatnim. W związku z tym często witryna, która ładuje się szybko, wyróżnia się lepszym doświadczeniem użytkownika, co ostatecznie może skutkować zwiększeniem współczynników konwersji. Nawet wyszukiwarki takie jak Google umieszczają szybciej ładujące się witryny wyżej w wynikach wyszukiwania.
Google Lighthouse to zautomatyzowane narzędzie typu open source, które pomaga twórcom i właścicielom witryn internetowych oceniać i poprawiać jakość stron internetowych. Przeprowadza audyty wydajności, dostępności, najlepszych praktyk i SEO zarówno dla urządzeń mobilnych, jak i komputerów stacjonarnych. Na podstawie szczegółowych raportów i rekomendacji użytkownicy mogą zoptymalizować działanie witryny, aby zapewnić większe zaangażowanie użytkowników. Lighthouse można uruchomić na dowolnej stronie internetowej, dostępnej publicznie lub prywatnie. Zobaczmy, jak to działa i jak możesz z niego skorzystać.
Metoda 1: Bezpośrednio dodaj i uruchom Lighthouse
Lighthouse jest również dostępny dla użytkowników w postaci rozszerzenia Google, które możesz pobrać, aby przeprowadzić dla siebie audyty w przeglądarce Chrome. Wykonaj poniższe kroki:
1. Odwiedzić Strona sklepu Chrome Web Store z rozszerzeniem Lighthouse w dowolnej przeglądarce internetowej.
2. Kliknij Dodaj do Chrome.
![Kliknij Dodaj do Chrome dla Google Lighthouse](/f/ad6fe62b112f529c85e847e2eb0f4f7b.png)
3. Wybierać Dodaj rozszerzenie potwierdzać.
4. Po dodaniu uruchom witrynę w przeglądarce, którą chcesz przeanalizować.
5. Kliknij na Ikona rozszerzenia (łamigłówka). obok paska adresu i wybierz Latarnia morska.
6. Kliknij Generuj raport.
![Kliknij opcję Generuj raport. | testowanie wydajności latarni morskiej](/f/3f25d112b7f9b1fb93f9220e8165bb2f.png)
Otóż to! W ciągu kilku sekund Lighthouse wygeneruje szczegółowy raport analizujący witrynę, dla której przeprowadziłeś test.
Metoda 2: Użyj PageSpeed Insights
Google PageSpeed Insights to także narzędzie do testowania wydajności sieci który wykorzystuje Lighthouse jako silnik analityczny. Dzięki temu możesz go używać do generowania raportów dla swojej witryny. Wykonaj kroki:
1. Odwiedzić Statystyki PageSpeed strona internetowa.
2. Wpisz adres URL witryny w polu tekstowym i kliknij Analizować.
![Wpisz adres URL witryny w polu tekstowym i kliknij Analizuj.](/f/e87dd332ed467e60b1004f5137ae3baf.png)
Po zakończeniu testów otrzymasz raport dotyczący wrażeń użytkowników przeglądarki Chrome, który przedstawia wyniki, jakich doświadczyli prawdziwi użytkownicy.
![Wyniki PageSpped Insights | testowanie wydajności latarni morskiej](/f/8069809c9c171fb448f1de6c4a4cd10d.png)
Sekcja Diagnozuj problemy z wydajnością przedstawia wynik Lighthouse. Możesz sprawdzić wyniki zarówno dla urządzeń mobilnych, jak i stacjonarnych.
![Wyniki Lighthouse — diagnozuj problemy z wydajnością](/f/552b36918980db18d172f623f38b0736.png)
Metoda 3: Uruchom Lighthouse w DevTools
Lighthouse ma swój panel w Google Chrome DevTools, którego możesz także użyć do testowania wydajności, jeśli Twoja witryna działa na serwerze lokalnym lub także w przypadku witryn wymagających logowania. Oto jak to zrobić:
1. Odwiedź witrynę, którą chcesz poddać audytowi.
2. Kliknij prawym przyciskiem myszy w dowolnym miejscu strony i wybierz Sprawdzać z menu.
![Kliknij prawym przyciskiem myszy w dowolnym miejscu strony i wybierz z menu opcję Sprawdź. | testowanie wydajności latarni morskiej](/f/e893bef1e22a7473542798a872dc1d8e.png)
3. Kliknij na >> ikona (Więcej zakładek) i wybierz Latarnia morska z menu kontekstowego.
![Kliknij na (karty Więcej) i wybierz Latarnię morską z menu kontekstowego.](/f/9da5ba5935dd9335d517fab2fef5c487.png)
4. Kliknij na Analizuj ładowanie strony w prawym górnym rogu i poczekaj, aż wyniki będą gotowe.
Notatka: Wybierz Urządzenie odpowiednio i zachowaj wszystkie Kategorie włączony.
![Kliknij przycisk Analizuj ładowanie strony w prawym górnym rogu i poczekaj, aż wyniki będą gotowe.](/f/dc4311b7879bba6b28382f2e71577273.png)
Można także zmienić tryb. Lighthouse w DevTools udostępnia trzy tryby testowania:
- Nawigacja: Wyświetla ogólne wyniki, w tym wydajność, dostępność i SEO.
![Wyniki nawigacji Lighthouse w DevTools | testowanie wydajności latarni morskiej](/f/fa3f155cd7c9f18f39983688d551bf17.png)
- Okres czasu: Pokazuje wyniki na podstawie czasu potrzebnego na załadowanie strony i interakcję z internautą. Podczas trwania testu konieczna będzie interakcja ze stroną.
![Ocena Timespan Lightshouse DevTools](/f/b8b8a74643b6b10ac4ad378adf012875.png)
- Migawka: Oblicza wynik dla bieżącej strony
![Wynik Snapshot Lighthouse DevTools | testowanie wydajności latarni morskiej](/f/446b17f9aee799792bf815ed24c365da.png)
Przeczytaj także:31 najlepszych narzędzi do skrobania sieci
Metoda 4: Użyj modułu Lighthouse z wierszem poleceń
Lighthouse jest również dostępny jako moduł Node, który można zintegrować z systemami ciągłej integracji i używać jako wiersza poleceń lub programowo. Wszystko, czego wymaga, to wersja węzła. Jeśli masz Node.js zainstalowany na komputerze, wykonaj poniższe czynności:
1. Zaloguj się do swojego serwera i uruchom następującą komendę, aby zainstalować moduł globalny Lighthouse na urządzeniu:
npm install -g lighthouse
2. Po zainstalowaniu uruchom następujące polecenie, aby wykonać test Lighthouse:
lighthouse -- view
Możesz wyświetlić wszystkie dostępne opcje za pomocą następującego polecenia.
lighthouse --help
Jak Lighthouse oblicza wynik
Google Lighthouse łączy i ocenia różne aspekty wskaźników wydajności witryny, takie jak wydajność, dostępność, najlepsze praktyki, SEO i PWA. Po pomyślnym zakończeniu audytu generuje raport zawierający ocenę dla każdego aspektu, a także zalecenia dotyczące niezbędnych ulepszeń, aby poprawić wydajność i interakcję użytkownika z Twoją witryną. Strony internetowe są zazwyczaj oceniane w skali od 0 do 100.
Wydajność
Lighthouse analizuje szybkość ładowania strony internetowej. Wynik wydajności jest obliczany z uwzględnieniem następujących wskaźników:
- Pierwsza merytoryczna farba (FCP): Jak szybko na ekranie pojawia się pierwszy element treści
- Największa zawartość farby (LCP): Mierzy czas potrzebny, aby największy element treści stał się widoczny
- Łączne przesunięcie układu (CLS): Mierzy liczbę nieoczekiwanych zmian układu występujących podczas ładowania strony, aby ocenić stabilność wizualną strony. Niski CLS oznacza, że strona jest stabilna.
- Całkowity czas blokowania: Mierzy czas, przez który główny wątek jest zablokowany i nie reaguje na działania użytkownika.
- Indeks prędkości: Wskazuje, jak szybko cała zawartość strony jest całkowicie widoczna
Te wskaźniki mierzą szybkość ładowania witryny i stabilność wizualną. Na ten raport wpływa kilka czynników, takich jak rozmiar i liczba obrazów, liczba użytych wtyczek oraz wydajność kodu witryny.
![Ocena wydajności Latarnia morska | testowanie wydajności latarni morskiej](/f/8ca1f8c0e79108464f972ed6055d6551.png)
Lighthouse oblicza wynik, biorąc średnią ważoną wartości metryki. Oczywiście pomiary o wyższej wadze mają większy wpływ na całkowity wynik Wyniku. Wyniki wskaźników nie są wyświetlane w raporcie, ale są obliczane w tle. Możesz kliknąć opcję Zobacz kalkulator, aby uzyskać dostęp do szczegółowej kalkulacji czynników wpływających na Twoją witrynę.
![Kalkulator punktacji Lighthouse za wydajność](/f/b169f5bcf76e53d6a5c24cee84537897.png)
Dostępność
Jest to wynik zorientowany na użytkownika, który mierzy, jak łatwo użytkownicy niepełnosprawni mają dostęp do Twojej witryny. Wpływ na to mają takie czynniki, jak obecność tekstu alternatywnego na obrazach, użycie atrybutów ARIA i dostępność klawiatury w Twojej witrynie. Każdy audyt dostępności kończy się sukcesem lub porażką. Strona nie otrzymuje punktów za częściowe przejście audytu dostępności, w przeciwieństwie do audytów wydajności.
- Tekst alternatywny dla obrazów: Wszystkie obrazy na stronie powinny mieć odpowiedni i opisowy tekst alternatywny, ponieważ jest to potrzebne użytkownikom z wadami wzroku, którzy interpretują obrazy za pomocą czytników ekranu.
- Semantyczny kod HTML: Właściwe użycie semantycznych elementów HTML, takich jak tytuł, nagłówki, listy itp., pomaga czytnikom ekranu i innemu oprogramowaniu wspomagającemu zrozumieć strukturę strony
- Kontrast kolorów: Kolor Kontrast pomiędzy tekstem a jego tłem powinien spełniać standardy określone w Wytycznych dotyczących dostępności treści internetowych. Wystarczający kontrast kolorów gwarantuje, że tekst będzie czytelny dla osób słabowidzących lub daltonistów.
![Wynik dostępności Latarnia morska Google | testowanie wydajności latarni morskiej](/f/b18358eef570d804cf28319111b5bc33.png)
Przeczytaj także: Jak zbudować witrynę internetową za pomocą ChatGPT
Najlepsze praktyki
Lighthouse mierzy, jak dobrze Twoja witryna przestrzega najlepszych praktyk tworzenia stron internetowych i standardów kodowania, i na tej podstawie podaje ocenę. Sprawdza wykorzystanie nowoczesnych funkcji JavaScript i bezpiecznych połączeń (HTTPS) i jest pod wpływem czynników takie jak użycie minifikacji i kompresji, obecność nagłówków zabezpieczających i użycie pliku robots.txt akta. Niektóre z typowych audytów w jego ramach obejmują:
- Unikaj dużych bibliotek JavaScript
- Unikaj nieużywanego CSS
- Włącz kompresję tekstu
- Wyeliminuj zasoby blokujące renderowanie
- Cache przeglądarki dźwigni
- Obsługuj zasoby statyczne za pomocą wydajnych zasad pamięci podręcznej
![Wynik Best Practices Lighthouse](/f/2d27de23a93501aed1432faccf97e0f8.png)
SEO
SEO mierzy, jak dobrze witryna jest zoptymalizowana pod kątem wyszukiwarek. Wpływ na to mają takie czynniki, jak obecność meta opisów i tagów tytułowych, użycie odpowiednich słów kluczowych oraz struktura treści Twojej witryny. Wynik oblicza się poprzez uśrednienie wyników z następujących audytów:
- Tytuł dokumentu
- Opis
- Nagłówki
- Obrazy
- Spinki do mankietów
- Metaopis
- plik robots.txt
![Wynik SEO w Google Lighthouse | testowanie wydajności latarni morskiej](/f/93c9c1cd95a5c26240c1337afa2dd700.png)
Przeczytaj także: 27 najlepszych bezpłatnych usług hostingowych witryn internetowych
Jak interpretować wyniki
Lighthouse konwertuje każdą surową wartość metryki na wynik metryki od 0 do 100. Im wyższy wynik, tym lepiej. Wyniki metryk są pokolorowane według następujących zakresów:
- 0 do 49 (czerwony trójkąt): Słabo
- 50 do 89 (kwadrat pomarańczowy): wymaga poprawy
- 90 do 100 (zielone kółko): Dobrze
Podczas przeprowadzania testów na tej samej stronie internetowej często obserwuje się wahania w ogólnych wynikach. Zmienność tę można przypisać kilku czynnikom.
- Każda analiza zapewnia jedynie wgląd w wydajność ładowania pojedynczej strony. Ponieważ nie ma identycznych ładowań dwóch stron, czasy ładowania mogą się naturalnie różnić.
- Na szybkość strony może wpływać obecność treści dynamicznych, takich jak reklamy lub często zmieniające się elementy, rozszerzenia przeglądarki zmieniające żądania sieciowe oraz działania w tle na komputerze.
- Wyniki uzyskane w różnych środowiskach, takich jak PageSpeed Insights i komputer lokalny, mogą nie być bezpośrednio porównywalne ze względu na różnice w warunkach sprzętowych i sieciowych.
Jak poprawić swój wynik w latarni morskiej
Lighthouse dostarcza zarówno dane laboratoryjne (testy symulowane), jak i dane terenowe (dane rzeczywistego użytkownika), aby ocenić wydajność strony internetowej. Dane terenowe zapewniają wgląd w to, jak rzeczywiści użytkownicy korzystają z witryny, natomiast dane laboratoryjne są przydatne do testowania zmian i ulepszeń.
![projektowanie stron internetowych](/f/26dc96a3e7f35319a0f7c23dbd4d7e69.jpg)
Zacznij od skoncentrowania się na zaleceniach w dziedzinie wydajności. Szybciej ładująca się witryna poprawi komfort użytkowania i może poprawić Twój ranking SEO. Gdy Twój wynik ulegnie poprawie, możesz zacząć skupiać się na zaleceniach w innych obszarach. Ponieważ dostępność i SEO są istotnymi elementami ogólnej jakości Twojej witryny, warto poświęcić wysiłek na ulepszenie również tych obszarów.
Przeczytaj także: Zyro vs Wix: jakiego kreatora stron internetowych wybrać?
Dodatkowe wskazówki dla początkujących
Jeśli właśnie zaprojektowałeś i uruchomiłeś swoją witrynę internetową, oto kilka wskazówek, które warto zachować:
- Nie daj się przytłoczyć licznym sugestiom zawartym w raporcie Lighthouse. Zacznij od najważniejszej porady i kieruj się w dół listy.
- Raport Lighthouse może służyć do śledzenia Twojego rozwoju na przestrzeni czasu. Twoje oceny Lighthouse powinny się poprawić w miarę wykonywania zaleceń.
- Pamiętaj, aby przetestować swoją witrynę na wielu urządzeniach i przeglądarkach. Ponieważ raport Lighthouse opiera się na pojedynczym teście, niezwykle ważne jest przetestowanie witryny na kilku urządzeniach i przeglądarkach, aby upewnić się, że działa ona prawidłowo dla wszystkich użytkowników.
Mamy nadzieję, że nasz przewodnik pomógł Ci zrozumieć, jak korzystać Google Lighthouse do testowania wydajności Twojej witryny i w ten sposób go ulepszyć. Jeśli masz do nas jakieś pytania lub sugestie, daj nam znać w sekcji komentarzy. Bądź na bieżąco z TechCult, aby uzyskać więcej takich informacyjnych blogów.
Henry to doświadczony pisarz zajmujący się tematyką techniczną, którego pasją jest udostępnianie skomplikowanych tematów technologicznych codziennym czytelnikom. Dzięki ponad dziesięcioletniemu doświadczeniu w branży technologicznej Henry stał się zaufanym źródłem informacji dla swoich czytelników.