Zwiększ swoje umiejętności detektywistyczne w zakresie wydajności dzięki Lighthouse i Narzędziom deweloperskim w Chrome.
Jako programista często nie masz kontroli nad skryptami innych firm wczytywanymi przez Twoją witrynę. Zanim zoptymalizujesz treści zewnętrzne, musisz trochę podziałać się jak detektyw, aby dowiedzieć się, co spowalnia Twoją witrynę. 🕵️
Z tego artykułu dowiesz się, jak używać Lighthouse i Narzędzi deweloperskich w Chrome do identyfikowania wolno działających zasobów innych firm. W poście znajdziesz opis coraz bardziej zaawansowanych technik, które najlepiej stosować w połączeniu.
Jeśli masz tylko 5 minut
Audyt wydajności w Lighthouse pomaga odkrywać możliwości przyspieszania wczytywania stron. Powolne skrypty innych firm prawdopodobnie pojawią się w sekcji Diagnostyka w ramach audytów Skrócenie czasu wykonywania kodu JavaScript i Unikanie ogromnych ładunków sieciowych.
Aby przeprowadzić kontrolę:
- Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
- Kliknij kartę Lighthouse.
- Kliknij Mobilne.
- Zaznacz pole wyboru Wydajność. (możesz odznaczyć pozostałe pola w sekcji Audyt).
- Kliknij Symulacja szybkiej sieci 3G, 4-krotne spowolnienie procesora.
- Zaznacz pole wyboru Wyczyść pamięć podręczną.
- Kliknij Uruchom kontrole.
Używanie kodu spoza witryny
Weryfikacja Lighthouse Używanie kodu spoza witryny zawiera listę zewnętrznych dostawców, których używa dana strona. Dzięki temu omówieniu możesz lepiej zrozumieć ogólny obraz i zidentyfikować zbędny kod innych firm. Audyt jest dostępny w rozszerzeniu Lighthouse i wkrótce zostanie dodany do narzędzi dla programistów w Chrome 77.
Skracanie czasu wykonywania kodu JavaScript
Audyt Lighthouse Skróć czas wykonywania kodu JavaScript wskazuje skrypty, których analizowanie, kompilowanie lub ocenianie zajmuje dużo czasu. Zaznacz pole wyboru Pokaż zasoby innych firm, aby znaleźć skrypty innych firm, które obciążają procesor.
Unikaj ogromnych obciążeń sieci
Weryfikacja Lighthouse Unikanie ogromnych ładunków sieciowych identyfikuje żądania sieciowe, w tym pochodzące od zewnętrznych dostawców, które mogą wydłużać czas wczytywania strony. Kontrola kończy się niepowodzeniem,gdy obciążenie sieci przekracza 4000 KB.
Blokowanie żądań sieciowych w Narzędziach deweloperskich w Chrome
Blokowanie żądań sieci w Narzędziach deweloperskich w Chrome pozwala sprawdzić, jak zachowuje się strona, gdy nie jest dostępny określony skrypt, szablon lub inny zasób. Gdy wykryjesz skrypty innych firm, które Twoim zdaniem wpływają na wydajność, zmierz, jak zmienia się czas wczytywania po zablokowaniu żądań wysyłanych do tych skryptów.
Aby włączyć blokowanie żądań: 1. Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu). 1. Kliknij kartę Sieć. 1. Kliknij prawym przyciskiem myszy dowolne żądanie w panelu Sieć. 1. Wybierz Blokuj URL żądania.
W schowku Narzędzi deweloperskich pojawi się karta Blokowanie żądań. Możesz tam zarządzać zablokowanymi żądaniami.
Aby mierzyć wpływ skryptów zewnętrznych:
- Zmierz czas wczytywania strony, korzystając z panelu Sieć. Aby emulować warunki z rzeczywistego świata, włącz ograniczanie wykorzystania sieci i ograniczanie wykorzystania procesora. (w przypadku szybszych połączeń i sprzętu komputerowego wpływ drogich skryptów może być mniej reprezentatywny niż w przypadku telefonów komórkowych).
- Zablokuj adresy URL lub domeny odpowiedzialne za skrypty innych firm, które Twoim zdaniem stanowią problem.
- Załaduj stronę ponownie i pomiaruj czas jej wczytywania bez zablokowanych skryptów innych firm.
Powinna się zwiększyć szybkość działania, ale czasami blokowanie skryptów innych firm może nie przynieść oczekiwanego efektu. W takim przypadku zmniejsz listę zablokowanych adresów URL, aż znajdziesz ten, który powoduje spowolnienie.
Pamiętaj, że wykonanie co najmniej 3 przebiegów pomiaru i sprawdzenie wartości mediany prawdopodobnie przyniesie bardziej stabilne wyniki. Treści innych firm mogą czasami pobierać różne zasoby podczas wczytywania strony, dlatego takie podejście może zapewnić bardziej realistyczną ocenę. Narzędzia deweloperskie obsługują teraz wiele nagrań w panelu Skuteczność, co ułatwia ich tworzenie.