Навигация по сайту

Популярные статьи

Lighthouse: Audyt strony internetowej z narzędziami dla programistów Chrome

  1. Przeprowadzanie audytu
  2. Kategorie
  3. Wydajność
  4. Progressive Web App
  5. Dostępność
  6. Najlepsze praktyki
  7. SEO
  8. Latarnia morska CLI i więcej narzędzi
  9. Interfejs linii komend
  10. Latarnia morska jako usługa
  11. web.dev
  12. Wniosek

Czy wiesz, że Chrome może przeprowadzić kompleksowy audyt strony internetowej i przeanalizować wiele różnych kategorii, takich jak wydajność, SEO, najlepsze praktyki, dostępność, zgodność z progresywną aplikacją internetową i wiele innych

Czy wiesz, że Chrome może przeprowadzić kompleksowy audyt strony internetowej i przeanalizować wiele różnych kategorii, takich jak wydajność, SEO, najlepsze praktyki, dostępność, zgodność z progresywną aplikacją internetową i wiele innych?

Przeprowadzanie audytu

W wersji 60 Chrome wprowadził świetny nowy dodatek do narzędzi programistycznych. Jest to kompleksowa funkcja audytu stron internetowych obsługiwanych przez narzędzie o nazwie Lighthouse. Jest to narzędzie open source dostępne na stronie GitHub . Aby przeprowadzić audyt, musisz otworzyć Narzędzia Dev Dev (F12) i wybrać kartę Audyty:

Przed uruchomieniem audytu możesz wybrać różne opcje konfiguracji. Po pierwsze, możesz wybrać kategorie, w których chcesz, aby witryna docelowa była kontrolowana. Wyłączenie kategorii przyspiesza analizę, ale na razie zachowajmy wszystkie kategorie. Dodatkowo możesz wybrać, czy Lighthouse powinien przetestować Twoją witrynę jako agenta mobilnego lub stacjonarnego. Na koniec możesz powiedzieć Chrome, aby emulował urządzenie z wolniejszym procesorem i wolniejszym połączeniem sieciowym, dzięki czemu będziesz mógł sprawdzić, jak działa Twoja witryna na urządzeniach przenośnych niższego poziomu z gorszą łącznością. Warto sprawdzić, ponieważ wyniki mogą się znacznie różnić od tego, czego doświadczasz na najnowocześniejszym komputerze PC z superszybkim połączeniem.

Teraz kliknijmy na Uruchom audyty. Chrome analizuje Twoją stronę pod kątem różnych potencjalnych problemów w wybranych kategoriach. Po zakończeniu audytu otrzymasz wynik w każdej kategorii do 100 punktów:

Po zakończeniu audytu otrzymasz wynik w każdej kategorii do 100 punktów:

Pamiętaj, że zainstalowane rozszerzenia Chrome mogą mieć negatywny wpływ na wyniki, więc może być lepiej uruchomić inspekcję w trybie incognito, gdzie te rozszerzenia są wyłączone.

Kategorie

W każdej z kategorii wynik jest obliczany na podstawie sprawdzeń, które się nie powiodły i które przeszły. Możesz dokładnie zobaczyć, co się powiodło, co nie, i możesz przeczytać szczegóły dotyczące każdego czeku. Ponadto niektóre kategorie zawierają listę dodatkowych kontroli ręcznych - kroków, których nie można sprawdzić automatycznie, ale które są nadal ważne i warte przetestowania.

Wydajność

Pierwsza kategoria to Performance. Bez wątpienia kluczowym obszarem, na którym należy się skupić. Zwłaszcza, że ​​wielu użytkowników ma połączenie sieciowe niskiej jakości lub dostęp do witryny z urządzeń mobilnych. Latarnia morska może wziąć to pod uwagę i może symulować powolne połączenie sieciowe i wolny procesor. Możesz być zaskoczony, jak źle działa Twoja witryna w takich okolicznościach. Można to skonfigurować przed uruchomieniem audytu.

Oprócz rankingu 0-100, Lighthouse mierzy różne wskaźniki wydajności, które są bardzo przydatne przy określaniu wydajności postrzeganej przez użytkownika. Nie jest tak ważne, jak długo trwa pełne załadowanie strony ze wszystkimi szczegółami. To, co może mieć znaczący wpływ na wrażenia użytkownika, to fakt, że pierwsza znacząca treść jest malowana na twojej stronie i kiedy zaczyna być interaktywna.

To, co może mieć znaczący wpływ na wrażenia użytkownika, to fakt, że pierwsza znacząca treść jest malowana na twojej stronie i kiedy zaczyna być interaktywna

W metrykach można zobaczyć widok taśmy filmowej . Tak wyglądała Twoja strona podczas procesu ładowania. Przydatne jest sprawdzenie, czy strona stopniowo renderuje niektóre treści, zamiast być przez dłuższy czas białe, ponieważ użytkownicy postrzegają takie strony jako szybsze i rzadziej opuszczają je, gdy strona wciąż się ładuje.

Ale naprawdę użyteczne jest to, że narzędzie zaleca różne sposoby zwiększenia wydajności w przypadku rzeczywistych danych - tyle czasu można zaoszczędzić, rozwiązując różne problemy.

Progressive Web App

Progressive Web Applications to zbiór zasad projektowania i wytycznych Google. Powinno to skutkować płynnym działaniem użytkownika podobnym do natywnej aplikacji mobilnej. Wykorzystuje pracowników usług, dzięki czemu aplikacja może pracować w sieciach niskiej jakości lub nawet w trybie offline. A kiedy jest online, zawsze ma aktualne dane. Powinien być ładowany tylko przez HTTPS, używać powiadomień push i zapewniać doskonałe czasy ładowania i wydajność. Latarnia morska sprawdza, czy aplikacja działa na tle Lista kontrolna PWA .

Aby dowiedzieć się więcej, spróbuj - Twoje pierwsze PWA .

Dostępność

Ta sekcja dotyczy dostępności, co oznacza, że ​​Twoja aplikacja może być używana przez jak największą liczbę użytkowników. Zazwyczaj oznacza to, że użytkownicy z jakimś upośledzeniem lub niepełnosprawnością mają możliwie płynne doświadczenie. Obejmuje to między innymi dostarczanie wystarczającej ilości metadanych dla czytników ekranu - takich jak atrybuty ARIA. Struktura twojej treści musi również wziąć to pod uwagę i powinieneś upewnić się, że używasz właściwych elementów semantycznych (takich jak silny vs b ). Twoje obrazy powinny mieć odpowiednie atrybuty alt, pola formularza powinny mieć dołączone elementy etykiety i tak dalej. Ten przewodnik dostępności podsumowuje to ładnie. Ciekawe jest to, że Lighthouse może analizować twoją stronę pod kątem kontrastu kolorystycznego - to znaczy, że Twój tekst jest łatwy do odczytania na tle.

Najlepsze praktyki

Ta kategoria zawiera różne różne elementy, takie jak używanie przestarzałych konstrukcji, HTTP / 2, HTTPS, rejestrowanie konsoli, obsługa pól haseł i wiele innych. Jedną z rzeczy, które uważam za bardzo interesujące i ważne, jest wykrywanie bibliotek Javascript za pomocą znane luki w zabezpieczeniach . Jest to oparte na integracji z narzędziem innej firmy o nazwie Snyk .

SEO

Ta kategoria koncentruje się na optymalizacji pod kątem wyszukiwarek. Obejmuje głównie to, że aplikacja zawiera wystarczającą ilość metadanych dla wyszukiwarek, takich jak metatagi nagłówka HTML, tytuł, strona nie jest blokowana przed indeksowaniem, linki zawierają opisowy tekst i tak dalej.

Latarnia morska CLI i więcej narzędzi

Rozszerzenie Google Chrome

Pierwotnie, zanim Lighthouse został zintegrowany z narzędziami Dev Dev, był dostępny jako samodzielne rozszerzenie Chrome. I nadal tak jest. Może to być przydatne, jeśli utkniesz w starszej wersji Chrome. Lub Jeśli chcesz wypróbować najnowsze funkcje latarni morskiej. Dzieje się tak, ponieważ stabilny Chrome nie zawiera najnowszej i najlepszej wersji Lighthouse, ale rozszerzenie to działa.

Interfejs linii komend

Bezpośrednia integracja latarni morskiej z Chrome ma jednak swoje ograniczenia. Prawdopodobnie przeprowadzisz audyt kilka razy, gdy jest on wciąż nowy i błyszczący lub podczas początkowego rozwoju. Lub kiedy pamiętasz o tym. Istnieje jednak stałe ryzyko, że nowe zmiany wpłyną na wydajność lub naruszają niektóre najlepsze praktyki. Znacznie lepiej jest zintegrować audyt jako część procesu budowania, aby zautomatyzować całą kontrolę.

Na szczęście latarnia morska jest dostępna jako Narzędzie wiersza poleceń dystrybuowane jako pakiet NPM. Jest również przydatny w przypadkach, gdy potrzebujesz bardziej szczegółowej konfiguracji, ponieważ oferuje większe możliwości dostosowania niż obecnie dostępne narzędzia Dev. Aby uczynić wszystko jeszcze łatwiejszym, oferuje Wtyczka pakietu internetowego .

Latarnia morska jako usługa

Jeśli chcesz, aby integracja z latarnią morską była jeszcze prostsza, istnieje narzędzie o nazwie Treo . Zasadniczo jest to latarnia morska jako usługa. Oferuje przyjemną integrację GitHub, a także sposoby na zerwanie kompilacji w przypadku niespełnienia oczekiwań.

web.dev

Web.dev to nowa strona uruchomiona przez Google. Umożliwia testowanie witryny bezpośrednio z przeglądarki (nie przy użyciu narzędzi programistycznych). Może to mieć kilka zalet w porównaniu z użyciem zintegrowanej latarni morskiej. Przede wszystkim używa najnowszej i najlepszej wersji, w przeciwieństwie do Dev Tools (obecnie 4.0.0 w porównaniu z 3.2.0). Następnie nie zależy już od procesora i sieci bieżącego komputera, ponieważ korzysta z serwerów Google. Może to być przydatne, gdy masz wolniejszą lub niestabilną sieć. Jeśli się zalogujesz, możesz zobaczyć wykresy, jak zmienia się Twój wynik w czasie.

Ale fajnie w web.dev jest to, że oprócz pomiaru za pomocą Lighthouse, jest hostem wiele tutoriali i artykułów pogrupowane w kilka sekcji. Są one bezpośrednio związane z problemami, które monitoruje Lighthouse i obejmują bezpieczeństwo, SEO, dostępność, wydajność i wiele innych. W ten sposób możesz dowiedzieć się o nowoczesnym tworzeniu stron internetowych i jak poprawić wynik strony w Lighthouse.

Wniosek

Latarnia morska oferuje miły sposób testowania aplikacji internetowej pod kątem problemów z wydajnością, zgodności z PWA, SEO, dostępności i innych najlepszych praktyk. Mimo że narzędzie jest dobrze zintegrowane z narzędziami dla programistów Chrome, warto rozważyć zintegrowanie go z procesem kompilacji, aby stale sprawdzać możliwe problemy.