Lighthouse: optymalizacja szybkości strony

Sofia Emelianova
Sofia Emelianova

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.

Kot Tony.

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:

  1. Zremiksuj projekt witryny w Glitch. Nowy projekt otworzy się na karcie. Ta karta będzie nazywana kartą edytora.

    Pierwotne źródło i kartę edytora po kliknięciu przycisku Remiks.

    Nazwa projektu zmienia się z tony na losową nazwę. Masz teraz własną edytowalną kopię kodu. Później możesz wprowadzić w nim zmiany.

  2. 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ć.

    Karta demonstracyjna.

  3. Otwórz Narzędzia deweloperskie obok wersji demonstracyjnej.

    Narzędzia deweloperskie i wersja demonstracyjna.

Określ punkt odniesienia

Dane podstawowe to zapis skuteczności witryny przed wprowadzeniem jakichkolwiek ulepszeń.

  1. Otwórz panel Lighthouse. Może być ukryty za Więcej paneli.

    Panel Lighthouse.

  2. 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 > 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 Trzy tryby.
    • 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.
  3. Kliknij Analizuj wczytanie strony. Po 10–30 sekundach w panelu Lighthouse wyświetli się raport skuteczności witryny.

    Raport Lighthouse dotyczący wydajnoś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.

Zgłoszenie z błędem.

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ść.

Ogólny wynik skuteczności.

Dane

Przewiń w dół do sekcji Dane i kliknij Rozwiń widok. Aby przeczytać dokumentację dotyczącą danego rodzaju danych, kliknij Więcej informacji.

Sekcja Wskaźniki.

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.

Zrzuty ekranu przedstawiające wygląd strony podczas wczytywania.

Możliwości

Następna jest sekcja Możliwości, która zawiera konkretne wskazówki, jak poprawić wczytywanie tej konkretnej strony. skuteczność reklam.

W sekcji Możliwości.

Kliknij możliwość, aby dowiedzieć się o niej więcej.

Więcej informacji o możliwości kompresji tekstu.

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.

Sekcja Diagnostyka.

Zaliczone audyty

Sekcja Zaliczone audyty pokazuje, co witryna robi prawidłowo. Kliknij, aby rozwinąć .

sekcji Zaliczone audyty.

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 Ustawienia > Użyj dużych wierszy żądań.

Kolumna Rozmiar w panelu Sieć z dużymi wierszami żądań.

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:

  1. Kliknij bundle.js i otwórz kartę Nagłówki.

    Karta Nagłówki.

  2. W sekcji Nagłówki odpowiedzi poszukaj nagłówka content-encoding. Nie zobaczysz żadnej. co oznacza, że plik bundle.js nie został skompresowany. Gdy zasób jest skompresowany, ten nagłówek jest zwykle ustawiony na gzip, deflate lub br. 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:

  1. 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'));
    ...
    
  2. Pamiętaj, by umieścić app.use(compression()) przed app.use(express.static('build')).

    Edytowanie pliku server.js.

  3. 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:

  1. 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 przypadku bundle.js to rozmiar pliku, który został wysłany przez sieć, a dolna wartość 1.4 MB to rozmiar pliku nieskompresowanego.

    Kolumna Rozmiar zawiera teraz 2 różne wartości dla zasobów tekstowych.

  2. Sekcja Nagłówki odpowiedzi bundle.js powinna teraz zawierać nagłówek content-encoding: gzip.

    Sekcja Nagłówki odpowiedzi zawiera teraz nagłówek kodowania treści.

Ponownie uruchom raport Lighthouse na stronie, aby zmierzyć wpływ kompresji tekstu na jej wczytywanie skuteczność:

  1. Otwórz panel Lighthouse i na pasku działań u góry kliknij Dodaj. Przeprowadź kontrolę....

    Przycisk Przeprowadź kontrolę.

  2. Pozostaw ustawienia bez zmian i kliknij Analizuj wczytywanie strony.

    Raport Lighthouse po włączeniu kompresji tekstu.

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.

  1. 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.

    Szczegółowe informacje na temat „prawidłowego rozmiaru obrazów” możliwość

  2. Wróć na kartę edytora, otwórz src/model.js.

  3. 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.

  4. Sprawdź stronę ponownie, aby zobaczyć, jak ta zmiana wpływa na wydajność wczytywania.

    Raport Lighthouse po zmianie rozmiaru obrazów.

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ć.

Ilość danych przesłanych przed zmianą rozmiaru i po niej.

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.

  1. Kliknij Wyeliminuj zasoby blokujące renderowanie, aby wyświetlić te zasoby: lodash.js i jquery.js.

    Więcej informacji o funkcji „redukuj zasoby blokujące renderowanie” możliwość.

  2. 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.
  3. Zacznij pisać Coverage i kliknij Pokaż zasięg.

    Otwieram menu poleceń w panelu Lighthouse.

    W panelu otworzy się karta Stan.

    Karta Zasięg

  4. Kliknij Odśwież. Na karcie Pokrycie znajdziesz informacje o tym, jaka część kodu w językach bundle.js, jquery.js i lodash.js jest wykonywana podczas wczytywania strony.

    Raport Stan w indeksie.

    Na tym zrzucie ekranu widać, że około 74% i 30% plików jQuery i Lodash nie jest używane.

  5. 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.

    Wyświetlenie pliku jQuery w panelu Źródła.

  6. 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.jslodash.js są w ogóle potrzebne do wczytania strony? Karta Blokowanie żądań pokazuje, co się dzieje, gdy zasoby są niedostępne.

  1. Kliknij kartę Sieć i ponownie otwórz menu poleceń.
  2. Zacznij pisać blocking i wybierz Pokaż blokowanie żądań. Otworzy się karta Request Block (Blokowanie żądań).

    Karta Poproś o blokowanie.

  3. Kliknij Dodaj. Dodaj wzór, wpisz /libs/* w polu tekstowym i naciśnij Enter, by potwierdzić.

    Dodanie wzorca blokującego jakiekolwiek żądania do „libs” katalogu.

  4. 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.

    Panel Sieć pokazuje, że żądania zostały zablokowane.

  5. Kliknij Usuń. 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ę:

  1. Wróć na kartę edytora, otwórz template.html.
  2. 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>
    
  3. Poczekaj, aż strona zostanie ponownie skompilowana i wdrożona.

  4. Sprawdź stronę jeszcze raz w panelu Lighthouse. Twój ogólny wynik powinien być znowu lepszy.

    Raport Lighthouse po usunięciu zasobów blokujących renderowanie.

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.

  1. Otwórz Wydajność > Ustawienia. Ustawienia rejestrowania i ustaw Sieć na Wolna sieć 3G, a Procesor na 6-krotne spowolnienie.

    Ustawienia ograniczania wykorzystania procesora i sieci w panelu Wydajność

    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.

  2. 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.

    Ślad wczytywania strony w panelu Wydajność.

Ś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.

Sekcja Przegląd śledzenia.

Żół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:

  1. Kliknij sekcję Czasy, aby ją rozwinąć.

    W sekcji Czasy.

    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.

  2. Ponownie kliknij Czas, aby zwinąć tę sekcję.

  3. 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ń.

    Sekcja Główna.

    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.

  4. 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.

    Aktywność mineBitcoin.

    Wygląda na to, że w tej aplikacji funkcja App powoduje wiele wywołań funkcji mineBitcoin. Wygląda na to, że Tomek może używać urządzeń swoich fanów do wydobywania kryptowalut...

  5. 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.

    Karta Od dołu do góry.

    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:

  1. Na karcie edytora otwórz webpack.config.js.
  2. Zmień "mode":"development" na "mode":"production".
  3. Poczekaj na wdrożenie nowej kompilacji.
  4. Ponownie zweryfikuj stronę.

    Raport Lighthouse po skonfigurowaniu pakietu internetowego do użycia w trybie produkcyjnym.

Zmniejsz aktywność JavaScriptu, usuwając wywołanie mineBitcoin:

  1. Na karcie edytora otwórz src/App.jsx.
  2. Skomentuj wywołanie funkcji this.mineBitcoin(1500) w: constructor.
  3. Poczekaj na wdrożenie nowej kompilacji.
  4. Ponownie sprawdź stronę.

Raport Lighthouse po usunięciu zbędnych zadań związanych z JavaScriptem.

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.