Wydajność strony zapewnia natychmiastowy przegląd wydajności dowolnej strony — metryki czasu ładowania (FCP, DOMContentLoaded, pełne ładowanie, TTI), statystyki DOM (liczba elementów, głębokość zagnieżdżenia, liczba słuchaczy zdarzeń) i podział zasobów pokazujący liczbę i rozmiar JavaScript, CSS, obrazów, czcionek i innych zasobów. Kolorowo kodowany wynik wydajności daje szybki wskaźnik zdrowia.
Profilowanie wydajności za pomocą Lighthouse lub WebPageTest zapewnia głęboką analizę, ale wymaga czasu i produkuje przytłaczające raporty. Czasami potrzebujesz tylko szybkiej odpowiedzi: "Czy ta strona jest szybka czy wolna? Jaki jest największy problem?" Wydajność strony daje ci ten natychmiastowy przegląd. Odczytuje dane czasu z Performance API przeglądarki i Navigation Timing API (dane, które są już zbierane — bez dodatkowego ładowania strony) i prezentuje je w czystym, wizualnym panelu. Górna sekcja pokazuje kluczowe metryki czasu: First Contentful Paint (gdy pojawia się pierwsza zawartość), DOMContentLoaded (gdy HTML jest w pełni parsowany), Pełne ładowanie (gdy wszystkie zasoby kończą) i Time to Interactive (gdy strona staje się responsywna). Każda metryka jest kolorowo kodowana — zielony dla szybkiej, żółty dla umiarkowanej, czerwony dla wolnej — na podstawie progów Web Vitals. Poniżej podział zasobów pokazuje, ile przepustowości jest wydawane na JavaScript, CSS, obrazy, czcionki i inne typy zasobów, z wizualnymi wykresami słupkowymi dla łatwego porównania. Sekcja statystyk DOM pokazuje łączną liczbę elementów, maksymalną głębokość zagnieżdżenia i liczbę słuchaczy zdarzeń — wskaźniki złożoności DOM wpływające na wydajność renderowania.
Pokazuje First Contentful Paint (FCP), DOMContentLoaded, Pełne ładowanie strony i Time to Interactive (TTI) — cztery najważniejsze metryki wydajności. Każda jest kolorowo kodowana: zielony (szybki), żółty (umiarkowany), czerwony (wolny) na podstawie ustalonych progów Web Vitals.
Wizualny wykres słupkowy pokazujący liczbę i łączny rozmiar każdego typu zasobu: pliki JavaScript, arkusze stylów CSS, obrazy, czcionki i inne zasoby. Natychmiast zobacz, który typ zasobu wnosi najwięcej do wagi strony.
Pokazuje łączną liczbę elementów DOM, maksymalną głębokość zagnieżdżenia i łączną liczbę słuchaczy zdarzeń. Duże rozmiary DOM (2000+ elementów) i głębokie zagnieżdżenie (15+ poziomów) są oznaczane jako potencjalne wąskie gardła wydajności.
Pojedynczy wynik 0-100 podsumowuje stan wydajności strony, kolorowo kodowany zielony (85+), żółty (50-84) lub czerwony (0-49). Oparty na ważonej kombinacji metryk czasu i wydajności zasobów.
Pokazuje łączny rozmiar wszystkich pobranych zasobów w MB. Podzielony na kategorie, więc możesz zobaczyć, że 842 KB to JavaScript, 245 KB to obrazy, a 128 KB to CSS — identyfikując najcięższych kontrybutorów.
Odczytuje dane wydajności z Performance API przeglądarki — dane, które są już zbierane podczas normalnego ładowania strony. Bez syntetycznego ponownego testowania, bez dodatkowych żądań sieciowych i bez wpływu na wydajność z uruchamiania narzędzia.
Otwórz dowolną stronę i uzyskaj natychmiastowy przegląd wydajności. Czy jest szybka (zielony wynik), umiarkowana (żółty) czy wolna (czerwony)? Panel odpowiada na to w mniej niż sekundę — bez czekania na uruchomienie Lighthouse.
Jeśli strona jest wolna, podział zasobów pokazuje dlaczego. 1,2 MB JavaScriptu? To wąskie gardło. 800 KB niezoptymalizowanych obrazów? To naprawa. Wizualny podział czyni najcięższych kontrybutorów oczywistymi.
Uruchom Wydajność strony przed wprowadzeniem optymalizacji, zanotuj metryki. Wprowadź zmiany, załaduj ponownie i uruchom ponownie. Porównaj FCP, czas ładowania i łączną wagę strony, aby zweryfikować, czy twoje optymalizacje miały oczekiwany wpływ.
Uruchom Wydajność strony na swojej stronie i stronach konkurencji. Porównaj czasy ładowania, wagi stron i dystrybucje zasobów. Czy konkurenci wysyłają mniej JavaScriptu? Czy ich obrazy są lepiej zoptymalizowane?
Uruchamiaj narzędzie na kluczowych stronach regularnie podczas developmentu. Jeśli wynik wydajności spada lub waga strony nagle wzrasta, wprowadziłeś regresję — wychwyć ją, zanim dotrze do produkcji.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Wydajność strony. Panel pojawia się natychmiast z danymi wydajności dla bieżącego ładowania strony.
Sprawdź cztery kluczowe metryki czasu na górze: FCP, DOMContentLoaded, Pełne ładowanie i TTI. Zielone wartości są szybkie, żółte umiarkowane, czerwone wymagają poprawy.
Spójrz na wykres słupkowy zasobów, aby zobaczyć, który typ zasobu jest najcięższy. JavaScript jest często największym kontrybutorem — jeśli JS przekracza 500 KB, może być warto rozważyć dzielenie kodu lub leniwe ładowanie.
Przejrzyj statystyki DOM. Jeśli liczba elementów przekracza 1500 lub głębokość zagnieżdżenia przekracza 15, rozważ uproszczenie znaczników, aby poprawić wydajność renderowania.
Ogólny wynik daje szybki benchmark. Uruchom narzędzie przed i po optymalizacjach, aby zmierzyć poprawę.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.
