Zwiększ swoje umiejętności w zakresie wykrywania wydajności dzięki narzędziom Lighthouse i Chrome DevTools.
Programista często nie ma kontroli nad tym, które skrypty innych firm wczytujesz. Zanim zaczniesz optymalizować treści zewnętrzne, musisz przeprowadzić analizy i dowiedzieć się, co spowalnia działanie Twojej witryny. 🕵️
Z tego posta dowiesz się, jak za pomocą Lighthouse i Chrome DevTools wykrywać wolne zasoby innych firm. W tym poście omówiono coraz bardziej zaawansowane techniki, które najlepiej sprawdzają się w połączeniu z innymi metodami.
Jeśli masz tylko 5 minut
Audyt wydajności Lighthouse pozwala znaleźć możliwości przyspieszenia wczytywania stron. Powolne skrypty innych firm mogą pojawić się w sekcji Diagnostyka w sekcjach Skróć czas wykonywania JavaScript i Unikaj bardzo dużych ładunków sieciowych.
Aby przeprowadzić kontrolę:
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Lighthouse.
- Kliknij Urządzenia mobilne.
- Zaznacz pole wyboru Wydajność. (Możesz wyczyścić pozostałe pola wyboru w sekcji Audyty).
- Kliknij Symuld Fast 3G, 4x CPU Spowolnienie.
- Zaznacz pole wyboru Wyczyść pamięć wewnętrzną.
- Kliknij Przeprowadź kontrole.
Wykorzystanie przez inne firmy
Audyt Lighthouse (Wykorzystanie rozwiązań zewnętrznych) pokazuje listę dostawców zewnętrznych używanych przez stronę. To omówienie pomaga lepiej zrozumieć ogólny obraz sytuacji i rozpoznawać zbędny kod innej firmy. Kontrola jest dostępna w rozszerzeniu Lighthouse, a wkrótce zostanie dodana do Narzędzi deweloperskich w Chrome 77.
Skrócenie czasu wykonywania JavaScriptu
Inspekcja Lighthouse Zmniejszanie czasu wykonywania JavaScriptu wyróżnia skrypty, których analizowanie, kompilowanie i ocenianie trwa bardzo długo. Zaznacz pole wyboru Pokaż zasoby innych firm, aby wykryć skrypty innych firm, które obciążają procesor.
Unikaj bardzo dużych ładunków sieciowych
Audyt Lighthouse pozwala unikać bardzo dużych ładunków sieciowych identyfikuje żądania sieciowe, w tym te pochodzące od innych firm, które mogą spowolnić wczytywanie strony. Kontrola kończy się niepowodzeniem,gdy ładunek sieciowy przekracza 4000 KB.
Blokowanie żądań sieciowych w Narzędziach deweloperskich w Chrome
Blokowanie żądań sieciowych w Narzędziach deweloperskich w Chrome pozwala sprawdzić, jak zachowuje się strona, gdy określony skrypt, arkusz stylów lub inny zasób jest niedostępny. Gdy znajdziesz skrypty innych firm, które mogą mieć wpływ na wydajność, zmierz, jak zmienia się czas wczytywania, blokując żądania wysyłane do tych skryptów.
Aby włączyć blokowanie żądań: 1. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie. 1. Kliknij kartę Sieć. 1. Kliknij prawym przyciskiem myszy dowolne żądanie w panelu Sieć. 1. Wybierz Zablokuj URL prośby.
W panelu Narzędzia deweloperskie pojawi się karta Blokowanie żądań. Tam możesz zarządzać zablokowanymi żądaniami.
Aby zmierzyć wpływ skryptów zewnętrznych:
- Czas wczytywania strony możesz zmierzyć w panelu Sieć. Aby emulować rzeczywiste warunki, włącz ograniczanie sieci i ograniczanie procesora. (W przypadku szybszych połączeń i sprzętu komputerowego wpływ kosztownych skryptów może nie być tak reprezentatywny jak w przypadku telefonu komórkowego.
- Zablokuj adresy URL lub domeny odpowiedzialne za skrypty innych firm, których dotyczy problem.
- Załaduj ponownie stronę i jeszcze raz sprawdź, jak długo trwa wczytywanie bez zablokowanych skryptów innych firm.
Szybkość wczytywania strony powinna się zwiększać, ale czasami blokowanie skryptów innych firm może nie przynieść oczekiwanych rezultatów. W takim przypadku ogranicz listę zablokowanych adresów URL, aż odszukasz ten, który spowalnia pracę.
Pamiętaj, że wykonanie co najmniej trzech pomiarów i sprawdzenie wartości mediany prawdopodobnie da bardziej stabilne wyniki. Materiały innych firm mogą czasami pobierać inne zasoby przy każdym wczytaniu strony, więc to podejście pozwala uzyskać bardziej realistyczne szacunki. Narzędzia deweloperskie obsługują teraz wiele nagrań w panelu Wydajność, co jest nieco łatwiejsze.