Omówienie
Aby przeprowadzić kompleksowy audyt witryny, użyj panelu Lighthouse. Panel Lighthouse generuje raport, który dostarcza tych informacji o Twojej witrynie:
- Wyniki
- Ułatwienia dostępu
- Sprawdzone metody
- SEO
... i wiele innych danych.
Ten samouczek ułatwia rozpoczęcie korzystania z Lighthouse w Narzędziach deweloperskich w Chrome.
Aby dowiedzieć się więcej o innych sposobach poprawy jakości stron internetowych za pomocą Lighthouse, zapoznaj się z dokumentacją Lighthouse.
Cel samouczka
W tym samouczku dowiesz się, jak za pomocą Narzędzi programistycznych Chrome znaleźć sposoby na szybsze wczytywanie stron.
Czytaj dalej lub obejrzyj wersję wideo tego samouczka:
Wymagania wstępne
Musisz mieć podstawowe doświadczenie w programowaniu stron internetowych, podobne do tego na kursie wprowadzenie do zajęć Web Development.
Nie musisz wiedzieć nic o wydajności wczytywania.
Wprowadzenie
Tu Tony. Tony jest bardzo znany w kociem społeczeństwie. Stworzył stronie internetowej, gdzie fani mogą dowiedzieć się, co na niej gra co jeść. Fanom uwielbiają tę stronę, ale Tony nadal słyszy skargi, że wolno się wczytuje. Tomek poprosił Cię o pomoc w przyspieszeniu strony.
Krok 1. Sprawdź witrynę
Gdy chcesz poprawić szybkość wczytywania witryny, zacznij od audytu. Kontrola ma 2 ważne funkcje:
- Tworzy wartość bazową, na podstawie której możesz mierzyć kolejne zmiany.
- Daje ono dostęp do praktycznych wskazówek dotyczących tego, jakie zmiany przyniosą największe korzyści.
Skonfiguruj
Najpierw musisz skonfigurować nowe środowisko pracy stronie Tony’ego, na której możesz wprowadzić zmiany do tego później:
Zremiksuj projekt witryny w Glitch. Nowy projekt otworzy się na karcie. Ta karta będzie nazywana kartą edytora.
Nazwa projektu zmienia się z tony na losową nazwę. Masz teraz własną edytowalną kopię kodu. Później możesz wprowadzić w nim zmiany.
U dołu karty edytora kliknij Podgląd > Wyświetl podgląd w nowym oknie. Wersja demonstracyjna otworzy się w nowej karcie. Ta karta będzie nazywana kartą demonstracyjną. Wczytanie strony może trochę potrwać.
Otwórz Narzędzia deweloperskie obok wersji demonstracyjnej.
Określ punkt odniesienia
Dane podstawowe to zapis skuteczności witryny przed wprowadzeniem jakichkolwiek ulepszeń.
Otwórz panel Lighthouse. Może być ukryty za
Więcej paneli.Dopasuj ustawienia konfiguracji raportu Lighthouse do tych widocznych na zrzucie ekranu. Oto wyjaśnienie funkcji różne opcje:
- Wyczyść pamięć wewnętrzną. Zaznaczenie tego pola wyboru spowoduje wyczyszczenie miejsca na dane powiązanego ze stroną przed każdą kontrolą. Pozostaw to ustawienie włączone, jeśli chcesz kontrolować sposób, w jaki użytkownicy odwiedzają Twoją witrynę po raz pierwszy. Wyłącz to ustawienie, jeśli chcesz korzystać z witryny po raz kolejny.
- Włącz próbkowanie JS. Ta opcja jest domyślnie wyłączona. Gdy ta opcja jest włączona, dodaje do zrzutu wydajności szczegółowe stosy wywołań JavaScriptu, ale może spowalniać generowanie raportów. Ślad jest dostępny w
- Symulowane ograniczanie (domyślnie) . Ta opcja symuluje typowe warunki przeglądania na urządzeniu mobilnym. Nazywa się to „symulowanym” bo Lighthouse w rzeczywistości nie ogranicza przepustowości podczas procesu kontroli. Zamiast tego po prostu ekstrapoluje, ile czasu zajmie wczytanie strony na urządzeniu mobilnym. Ustawienie Ograniczanie wykorzystania narzędzi deweloperskich (zaawansowane) powoduje natomiast ograniczenie wydajności procesora i sieci, co skutkuje dłuższym procesem kontroli.
- Tryb > Trzy tryby. Nawigacja (domyślna). W tym trybie analizujemy pojedyncze wczytanie strony i tego właśnie potrzebujemy w tym samouczku. Więcej informacji znajdziesz w artykule
- Urządzenie > Urządzenia mobilne. Opcja na urządzeniach mobilnych zmienia ciąg znaków klienta użytkownika i symuluje widoczny obszar. Opcja na komputery wyłącza w zasadzie tylko zmiany wprowadzane na urządzeniach mobilnych.
- Kategorie > Wydajność. Jedna włączona kategoria sprawia, że Lighthouse generuje raport tylko z odpowiednim zestawem kontroli. Inne kategorie możesz pozostawić włączone, jeśli chcesz zobaczyć, jakie typy rekomendacji się pojawiają. Wyłączenie nietrafnych kategorii nieznacznie przyspiesza proces kontroli.
Kliknij Analizuj wczytanie strony. Po 10–30 sekundach w panelu Lighthouse wyświetli się raport skuteczności witryny.
Postępowanie w przypadku błędów w raportach
Jeśli w raporcie Lighthouse pojawi się błąd, otwórz kartę demonstracyjną w oknie incognito bez żadnych innych otwartych kart. Dzięki temu nie uruchamiasz Chrome z czystego stanu. Zwłaszcza rozszerzenia do Chrome zakłócają proces kontroli.
Interpretowanie raportu
Liczba u góry raportu to ogólny wynik skuteczności witryny. Gdy później wprowadzisz zmiany w kodzie, liczba ta powinna wzrosnąć. Wyższy wynik oznacza większą skuteczność.
Dane
Przewiń w dół do sekcji Dane i kliknij Rozwiń widok. Aby przeczytać dokumentację dotyczącą danego rodzaju danych, kliknij Więcej informacji.
W tej sekcji znajdziesz dane liczbowe dotyczące skuteczności witryny. Każdy rodzaj danych zapewnia wgląd w inny aspekt skuteczności. Na przykład Pierwsze wyrenderowanie treści. informuje, kiedy treść jest po raz pierwszy malowana na ekranie, co jest ważnym kamieniem milowym podczas wczytywania strony, natomiast Czas do interakcji wskazuje punkt, jest gotowy do obsługi interakcji z użytkownikiem.
Zrzuty ekranu
Następny jest zbiór zrzutów ekranu, który pokazuje, jak strona wyglądała po załadowaniu.
Możliwości
Następna jest sekcja Możliwości, która zawiera konkretne wskazówki, jak poprawić wczytywanie tej konkretnej strony. skuteczność reklam.
Kliknij możliwość, aby dowiedzieć się o niej więcej.
Kliknij Więcej informacji..., aby wyświetlić dokumentację wyjaśniającą, dlaczego możliwość jest ważna i jaka jest ich konkretna zalecenia dotyczące jego rozwiązania.
Diagnostyka
Sekcja Diagnostyka zawiera więcej informacji o czynnikach wpływających na czas wczytywania strony.
Zaliczone audyty
Sekcja Zaliczone audyty pokazuje, co witryna robi prawidłowo. Kliknij, aby rozwinąć .
Krok 2. Eksperyment
Sekcja Możliwości w raporcie Lighthouse zawiera wskazówki, jak poprawić skuteczność reklam. W tej sekcji wdrożysz zalecane zmiany w bazie kodu, kontrolując witryny po każdej zmianie, aby zmierzyć jej wpływ na szybkość witryny.
Włącz kompresję tekstu
Z Twojego raportu wynika, że włączenie kompresji tekstu to jedna z najważniejszych możliwości poprawy na wydajność strony.
Kompresja tekstu polega na zmniejszeniu lub skompresowaniu pliku tekstowego przed przesłaniem To tak jak można skompresować folder przed wysłaniem go e-mailem, aby zmniejszyć jego rozmiar.
Zanim włączysz kompresję, możesz ręcznie sprawdzić, czy zasoby tekstowe są skompresowane.
Otwórz panel Sieć i zaznacz Użyj dużych wierszy żądań.
Ustawienia >W każdej komórce Rozmiar znajdują się 2 wartości. Wartość górna to rozmiar pobranego zasobu. Wartość dolna to rozmiar nieskompresowanego zasobu. Jeśli obie wartości są takie same,
zasób nie jest kompresowany podczas przesyłania przez sieć. W tym przykładzie para klucz-wartość
zarówno górna, jak i dolna wartość w kolumnach bundle.js
to 1.4 MB
.
Możesz też sprawdzić stopień kompresji, sprawdzając nagłówki HTTP zasobu:
Kliknij bundle.js i otwórz kartę Nagłówki.
W sekcji Nagłówki odpowiedzi poszukaj nagłówka
content-encoding
. Nie zobaczysz żadnej. co oznacza, że plikbundle.js
nie został skompresowany. Gdy zasób jest skompresowany, ten nagłówek jest zwykle ustawiony nagzip
,deflate
lubbr
. Wyjaśnienie tych wartości znajdziesz w dyrektywach.
Wystarczy z tymi wyjaśnieniami. Czas na zmiany. Włącz kompresję tekstu, dodając kilka elementów wierszy kodu:
Na karcie edytora otwórz
server.js
i dodaj te 2 (wyróżnione) wiersze:... const fs = require('fs'); const compression = require('compression'); app.use(compression()); app.use(express.static('build')); ...
Pamiętaj, by umieścić
app.use(compression())
przedapp.use(express.static('build'))
.Zaczekaj, aż Glitch wdroży nową wersję witryny. Uśmiechnięty emotikon w lewym dolnym rogu oznacza, że wdrożenie zostało zakończone.
Skorzystaj z poznanych wcześniej przepływów pracy, aby ręcznie sprawdzić, czy kompresja działa:
Wróć na kartę demonstracyjną i załaduj ponownie stronę.
Kolumna Rozmiar powinna teraz zawierać dwie różne wartości zasobów tekstowych, takich jak
bundle.js
. Górna wartość269 KB
w przypadkubundle.js
to rozmiar pliku, który został wysłany przez sieć, a dolna wartość1.4 MB
to rozmiar pliku nieskompresowanego.Sekcja Nagłówki odpowiedzi
bundle.js
powinna teraz zawierać nagłówekcontent-encoding: gzip
.
Ponownie uruchom raport Lighthouse na stronie, aby zmierzyć wpływ kompresji tekstu na jej wczytywanie skuteczność:
Otwórz panel Lighthouse i na pasku działań u góry kliknij Przeprowadź kontrolę....
Pozostaw ustawienia bez zmian i kliknij Analizuj wczytywanie strony.
Super! To chyba postęp. Ogólny wynik skuteczności powinien wzrosnąć, co oznacza, że strona działa szybciej.
Kompresja tekstu w świecie rzeczywistym
Większość serwerów ma naprawdę proste rozwiązania umożliwiające kompresję. Wyszukaj informacje o tym, do skonfigurowania dowolnego serwera używanego do kompresji tekstu.
Zmień rozmiar obrazów
Z nowego raportu wynika, że prawidłowe wymiary zdjęć to jeszcze większa szansa.
Zmiana rozmiaru obrazów skraca czas wczytywania dzięki zmniejszeniu rozmiaru plików z obrazami. Jeśli użytkownik ogląda obrazy na ekranie urządzenia mobilnego o szerokości 500 pikseli, nie ma sensu wysyłanie obrazu o szerokości 1500 pikseli. Najlepiej jest wysłać zdjęcie o szerokości maksymalnie 500 pikseli.
W raporcie kliknij Odpowiedni rozmiar obrazów, aby sprawdzić, których rozmiarów obrazy należy zmienić. Wygląda na to, że wszystkie 4 obrazy są za duże.
Wróć na kartę edytora, otwórz
src/model.js
.Zawartość komórki
const dir = 'big'
zastąp komórkąconst dir = 'small'
. Ten katalog zawiera kopie tych samych obrazów, których rozmiar został zmieniony.Sprawdź stronę ponownie, aby zobaczyć, jak ta zmiana wpływa na wydajność wczytywania.
Wygląda na to, że zmiana ma tylko niewielki wpływ na ogólny wynik skuteczności. Jedna rzecz że nie widać wyraźnie, ile danych sieciowych oszczędzasz użytkowników. Łącznie Stary rozmiar zdjęć wynosił około 6,1 MB, podczas gdy obecnie ma on tylko około 633 kB. Możesz to sprawdzić na pasku stanu u dołu panelu Sieć.
Zmiana rozmiaru obrazów w świecie rzeczywistym
W przypadku małej aplikacji jednorazowe zmiana rozmiaru może być wystarczająca. W przypadku dużych aplikacji nie jest skalowalna. Oto kilka strategii zarządzania obrazami w dużych aplikacjach:
- Zmieniaj rozmiar obrazów podczas kompilacji.
- W procesie kompilacji utwórz różne rozmiary każdego obrazu, a potem użyj w kodzie pliku
srcset
. Podczas działania przeglądarka wybiera rozmiar najlepiej odpowiadający urządzeniu, na którym ma działać. Zobacz Obrazy o zbliżonych rozmiarach. - Używaj sieci CDN związanej z obrazami, która umożliwia dynamiczne zmienianie rozmiaru obrazu w razie potrzeby.
- A najlepiej zoptymalizuj każdy obraz. Może to przynieść ogromne oszczędności. Optymalizacja polega na przepuszczeniu obrazu przez specjalny program, który zmniejsza rozmiar pliku. Zobacz Ważne Optymalizacja obrazu.
Wyeliminuj zasoby blokujące renderowanie
Z najnowszego raportu wynika, że obecnie największą szansą jest wyeliminowanie zasobów blokujących renderowanie.
Zasób blokujący renderowanie to zewnętrzny plik JavaScript lub CSS, który musi pobrać przeglądarka. przeanalizować i wykonać, zanim będzie mogła wyświetlić stronę. Chodzi o uruchamianie tylko podstawowych elementów CSS i JavaScript kod wymagany do prawidłowego wyświetlania strony.
Pierwszym zadaniem jest więc znalezienie kodu, który nie musi być wykonywany podczas wczytywania strony.
Kliknij Wyeliminuj zasoby blokujące renderowanie, aby wyświetlić te zasoby:
lodash.js
ijquery.js
.W zależności od używanego systemu operacyjnego naciśnij następujące klawisze, aby otworzyć menu poleceń:
- Mac: Command + Shift + P.
- W systemach Windows, Linux i ChromeOS naciśnij Control + Shift + P.
Zacznij pisać
Coverage
i kliknij Pokaż zasięg.Kliknij
Odśwież. Na karcie Pokrycie znajdziesz informacje o tym, jaka część kodu w językachbundle.js
,jquery.js
ilodash.js
jest wykonywana podczas wczytywania strony.Na tym zrzucie ekranu widać, że około 74% i 30% plików jQuery i Lodash nie jest używane.
Kliknij wiersz jquery.js. Narzędzia deweloperskie otworzy plik w panelu Źródła. Linia kodu została wykonana, jeśli obok niej znajduje się zielony pasek. Czerwony pasek obok wiersza kodu oznacza, że kod nie został wykonany i jest nie są potrzebne podczas wczytywania strony.
Przewiń trochę kod jQuery. Niektóre wiersze, które są „wykonane” są tak naprawdę po prostu komentarzy. Użycie tego kodu za pomocą minifikatora, który usuwa komentarze, to kolejny sposób na zmniejszenie rozmiaru tego pliku.
Krótko mówiąc, jeśli pracujesz z własnym kodem, karta Stan ułatwia analizę kodu, wiersz po wierszu i wysyłać tylko kod wymagany do wczytania strony.
Czy pliki jquery.js
i lodash.js
są w ogóle potrzebne do wczytania strony? Karta Blokowanie żądań pokazuje, co się dzieje, gdy zasoby są niedostępne.
- Kliknij kartę Sieć i ponownie otwórz menu poleceń.
Zacznij pisać
blocking
i wybierz Pokaż blokowanie żądań. Otworzy się karta Request Block (Blokowanie żądań).Kliknij Dodaj wzór, wpisz
/libs/*
w polu tekstowym i naciśnij Enter, by potwierdzić.Odśwież stronę. Żądania jQuery i Lodash mają kolor czerwony, co oznacza, że zostały zablokowane. Strona nadal się wczytuje i jest interaktywna, więc wygląda na to, że te zasoby nie są w ogóle potrzebne.
Kliknij Usuń wszystkie wzorce, aby usunąć wzorzec blokowania
/libs/*
.
Ogólnie rzecz biorąc, karta Request Blokowanie (Blokowanie żądań) przydaje się do symulowania zachowania strony, gdy Zasób nie jest dostępny.
Teraz usuń z kodu odwołania do tych plików i ponownie sprawdź stronę:
- Wróć na kartę edytora, otwórz
template.html
. Usuń odpowiednie tagi
<script>
:<head> ... <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="/libs/lodash.js"></script> <script src="/libs/jquery.js"></script> <title>Tony's Favorite Foods</title> </head>
Poczekaj, aż strona zostanie ponownie skompilowana i wdrożona.
Sprawdź stronę jeszcze raz w panelu Lighthouse. Twój ogólny wynik powinien być znowu lepszy.
Optymalizacja krytycznej ścieżki renderowania w rzeczywistości
Krytyczna ścieżka renderowania odnosi się do kodu potrzebnego do wczytania strony. Ogólnie rzecz biorąc, może przyspieszyć ładowanie strony, przesyłając tylko krytyczny kod podczas jej wczytywania, a potem leniwe ładowanie wszystko inne.
- Nie jest prawdopodobne, że znajdziesz skrypty, które możesz usunąć od razu, ale często okaże się, że wielu skryptów nie trzeba wczytywać podczas wczytywania strony, a zamiast tego można je wczytywać asynchronicznie. Zapoznaj się z sekcją Używanie asynchronicznego i opóźniania.
- Jeśli używasz platformy, sprawdź, czy ma ona tryb produkcyjny. Ten tryb może korzystać z funkcji: jak trząsanie drzewem w celu wyeliminowania niepotrzebnego kodu, który blokuje newralgiczne renderowanie.
Mniej pracy z wątkiem głównym
Najnowszy raport pokazuje pewne potencjalne oszczędności w sekcji Możliwości, ale jeśli przewiniesz do sekcji Diagnostyka wygląda na to, że największym wąskim gardłem jest zbyt wiele głównego wątku. działania.
Wątek główny to miejsce, w którym przeglądarka wykonuje większość zadań związanych z wyświetlaniem strony, takich jak analizowanie i wykonywanie kodu HTML, CSS i JavaScript.
Celem jest wykorzystanie panelu Skuteczność do analizowania działań w wątku głównym w czasie, gdy wczytywania strony i znajdować sposoby odroczenia lub usunięcia niepotrzebnej pracy.
Otwórz Wydajność > Ustawienia rejestrowania i ustaw Sieć na Wolna sieć 3G, a Procesor na 6-krotne spowolnienie.
Urządzenia mobilne mają zwykle większe ograniczenia sprzętowe niż laptopy czy komputery stacjonarne, więc te ustawienia umożliwiają wczytywanie strony tak, jakby użytkownik korzystał z mniej wydajnego urządzenia.
Kliknij
Załaduj ponownie. Narzędzia deweloperskie ponownie ładują stronę, a następnie wyświetlają wizualizację wszystkiego, co trzeba zrobić, aby załadować stronę. Ta wizualizacja będzie nazywana trace.
Śledzenie pokazuje aktywność w kolejności chronologicznej od lewej do prawej. Wykresy FPS, CPU i NET w góra zawiera przegląd klatek na sekundę, aktywności procesora i aktywności sieci.
Żółta ściana widoczna w sekcji Przegląd oznacza, że procesor był całkowicie zajęty wykonywaniem skryptów. To wskazówka, że możesz przyspieszyć wczytywanie strony, zmniejszając ilość kodu JavaScript.
Zbadaj log czasu, aby znaleźć sposoby na ograniczenie pracy w języku JavaScript:
Kliknij sekcję Czasy, aby ją rozwinąć.
W React jest sporo czasów działań użytkownika. Wygląda na to, że aplikacja Tony’ego korzysta z trybu programistycznego React. Przejście na tryb produkcyjny w React prawdopodobnie przyniesie łatwe korzyści w zakresie wydajności.
Ponownie kliknij Czas, aby zwinąć tę sekcję.
Przejrzyj sekcję Główne. Ta sekcja zawiera chronologiczny dziennik aktywności wątku głównego. od lewej do prawej. Oś Y (od góry do dołu) pokazuje przyczynę wystąpienia zdarzeń.
W tym przykładzie zdarzenie
Evaluate Script
spowodowało wykonanie funkcji(anonymous)
, co spowodowało wykonanie polecenia__webpack__require__
, wykonanie polecenia./src/index.jsx
itd.Przewiń na sam dół sekcji Main (Główne). Gdy korzystasz z platformy, większość aktywności jest spowodowana przez strukturę, która zwykle składa się mają większą kontrolę. Aktywność spowodowana przez Twoją aplikację znajduje się zwykle na dole.
Wygląda na to, że w tej aplikacji funkcja
App
powoduje wiele wywołań funkcjimineBitcoin
. Wygląda na to, że Tomek może używać urządzeń swoich fanów do wydobywania kryptowalut...Otwórz kartę Od dołu do góry u dołu. Na tej karcie można znaleźć informacje o działaniach, które trwały najdłużej. Jeśli w sekcji Od dołu nie widzisz nic, kliknij etykietę sekcji Główna.
Sekcja Od dołu zawiera informacje tylko o wybranej aktywności lub grupie aktywności. Jeśli na przykład klikniesz jedną z aktywności
mineBitcoin
, Sekcja Od dołu zawiera tylko informacje o jednym działaniu.Kolumna Czas własny pokazuje, ile czasu poświęcono bezpośrednio na poszczególne działania. W tym przypadku około 82% czasu wątku głównego zostało poświęcone funkcji
mineBitcoin
.
Czas sprawdzić, czy używasz trybu produkcyjnego i zmniejszasz aktywność JavaScriptu który przyspiesza wczytywanie strony. Zacznij od trybu produkcyjnego:
- Na karcie edytora otwórz
webpack.config.js
. - Zmień
"mode":"development"
na"mode":"production"
. - Poczekaj na wdrożenie nowej kompilacji.
Ponownie zweryfikuj stronę.
Zmniejsz aktywność JavaScriptu, usuwając wywołanie mineBitcoin
:
- Na karcie edytora otwórz
src/App.jsx
. - Skomentuj wywołanie funkcji
this.mineBitcoin(1500)
w:constructor
. - Poczekaj na wdrożenie nowej kompilacji.
- Ponownie sprawdź stronę.
Jak zawsze, możesz na przykład zmniejszyć wartości Największe wyrenderowanie treści i Skumulowane przesunięcie układu.
Zmniejszenie głównego wątku w świecie rzeczywistym
Ogólnie rzecz biorąc, panel Skuteczność dostarcza informacji o aktywności użytkowników w witrynie. podczas ładowania strony i znajdować sposoby usunięcia niepotrzebnej aktywności.
Jeśli wolisz sposób działania podobny do console.log()
, interfejs API User Timing API umożliwia
dowolnie zaznaczać określone fazy cyklu życia aplikacji, aby śledzić, jak długo trwa
fazy budowania.
Podsumowanie
- Aby zoptymalizować wydajność wczytywania strony, zawsze zaczynaj od aby przeprowadzić kontrolę. Audyt stanowi punkt odniesienia i zapewnia wskazówki na temat tego, i ich ulepszanie.
- Wprowadzaj po jednej zmianie i sprawdzaj stronę po każdej zmianie, aby zobaczyć, jak taka niewielka zmiana wpływa na skuteczność.
Dalsze kroki
Wykonuj audyty w swojej witrynie. Jeśli potrzebujesz pomocy z interpretacją raportu lub znalezienia sposobów na poprawę wydajności wczytywania, skorzystaj z tych sposobów na uzyskanie pomocy od społeczności Narzędzi deweloperskich:
- Zgłoś błędy w tym dokumencie w repozytorium developer.chrome.com.
- Raporty o błędach możesz zgłaszać w Narzędziach deweloperskich na stronie Błędy w Chromium.
- Omów funkcje i zmiany na liście adresowej. Nie używaj listy adresowej do pytania do zespołu pomocy. Zamiast tego użyj Stack Overflow.
- Ogólną pomoc dotyczącą korzystania z Narzędzi deweloperskich znajdziesz na stronie Stack Overflow. Żeby zgłosić błędy, zawsze używaj narzędzia Błędy w Chromium.
- Napisz do nas na tweeta przez @ChromeDevTools.