Darmowe narzędzie: Wydajność

Test szybkości strony internetowej

Ładujemy Twoją stronę jak telefon ze średniej półki na wolnym łączu 4G, mierzymy, jak szybko pojawia się główna treść i jak bardzo strona skacze, oraz pokazujemy, co ją obciąża. Jeśli Google ma dane rzeczywistych użytkowników Twojej witryny, je również zobaczysz.

Za darmo. Zwykle trwa krócej niż minutę.

Co sprawdza to narzędzie

  • Telefon na wolnym 4G

    Strona ładuje się w Chromium jako telefon klasy Moto G Power (412 × 823) z opóźnieniem 150 ms, pobieraniem około 1,6 Mb/s, wysyłaniem 750 kb/s i 4× wolniejszym procesorem. To profil, którego Lighthouse używa w testach mobilnych.

  • Largest Contentful Paint

    Kiedy zakończyło się renderowanie największego obrazu lub bloku tekstu na pierwszym ekranie i który to był element.

  • Cumulative Layout Shift

    Jak bardzo widoczna treść nieoczekiwanie przesuwała się podczas ładowania strony.

  • Total Blocking Time

    Jak długo skrypty obciążały przeglądarkę tak bardzo, że nie mogła zareagować na dotknięcie: suma tych części każdego długiego zadania, które przekraczają 50 ms. To laboratoryjny zamiennik wskaźnika Interaction to Next Paint.

  • Co pobiera strona

    Łączna liczba bajtów i żądań z podziałem na obrazy, skrypty, CSS i czcionki oraz udział zasobów zewnętrznych (third-party).

  • Ciężkie obrazy i pliki blokujące renderowanie

    Obrazy większe niż 150 KB lub znacznie szersze niż miejsce, w którym są wyświetlane, oraz pliki CSS i skryptów, które wstrzymują pierwsze renderowanie.

  • Dane rzeczywistych użytkowników z Chrome

    Chrome UX Report od Google dla Twojego źródła (origin) na telefonach, na 75. percentylu: LCP, INP i CLS, jeśli witryna ma dla Google wystarczający ruch.

Czego nie może sprawdzić

  • Dawać takich samych wyników przy każdym uruchomieniu. Wyniki laboratoryjne zależą od sieci, obciążenia serwera i skryptów zewnętrznych, więc porównuj trendy, a nie pojedyncze pomiary.
  • Dokładnie odwzorować wyników PageSpeed Insights. Oba narzędzia używają podobnego profilu telefonu, ale działają na innych maszynach i w innych sieciach.
  • Zmierzyć INP w laboratorium. INP wymaga prawdziwych interakcji, więc test laboratoryjny pokazuje TBT, a dane rzeczywistych użytkowników pokazują INP, jeśli są dostępne.
  • Pokazać danych rzeczywistych użytkowników dla każdej witryny. Chrome UX Report obejmuje ostatnie 28 dni i tylko źródła z wystarczającym ruchem z Chrome.
  • Przetestować więcej niż jedną podaną stronę. Płatny Raport wydajności testuje 3 kluczowe strony i szereguje przyczyny wraz z poprawkami.

Dlaczego to ważne

Strona, która w biurowym Wi-Fi na szybkim laptopie działa błyskawicznie, na telefonie ze średniej półki przy słabym zasięgu może ładować się kilka sekund. Właśnie taką sytuację odtwarza ten test, bo to tam ciężkie obrazy i skrypty wyrządzają najwięcej szkód.

Core Web Vitals to miary tego doświadczenia według Google: ładowanie (LCP), responsywność (INP) i stabilność wizualna (CLS). Google uwzględnia je w rankingu, ale podkreśla, że dobre wrażenia ze strony nie przeważają nad trafną treścią. Większy wpływ mają na ludzi: wolna lub skacząca strona traci odwiedzających, zanim cokolwiek przeczytają.

Przyczyny są zwykle konkretne: nieskompresowany obraz główny (hero) ważący kilka megabajtów, widżet czatu ładowany przed treścią, czcionka internetowa, która ukrywa tekst, albo baner wstawiany nad stroną już po jej wyświetleniu. Test wskazuje element LCP i najcięższe pliki, dzięki czemu widać, która z tych przyczyn występuje.

Jak czytać wyniki

Largest Contentful Paint (LCP)
Dobry poniżej 2,5 s, słaby powyżej 4 s. Jeśli elementem LCP jest obraz, najważniejsze są jego rozmiar i priorytet ładowania; jeśli tekst, sprawdź czcionki internetowe i CSS blokujący renderowanie.
Cumulative Layout Shift (CLS)
Dobry poniżej 0,1, słaby powyżej 0,25. Wynik bez jednostki, który łączy to, jaka część ekranu się przesunęła i jak daleko.
Total Blocking Time (TBT)
Dobry poniżej 200 ms, słaby powyżej 600 ms. Wysoki TBT zapowiada wolne reakcje na dotknięcia u prawdziwych użytkowników.
Bajty i żądania
Nie ma oficjalnego limitu; zobacz, który typ dominuje. Obrazy to zwykle największa część, a duży udział zasobów zewnętrznych wskazuje na aplikacje, tagi i widżety.
Ciężkie obrazy
Każdy obraz większy niż 150 KB lub pobierany w znacznie większej szerokości, niż jest wyświetlany, wraz z rozmiarem pliku i wymiarami.
Pliki blokujące renderowanie (Render-blocking files)
CSS i synchroniczne skrypty, które przeglądarka musi pobrać, zanim cokolwiek wyświetli.
Dane rzeczywistych użytkowników (Field data, 75. percentyl)
Prawdziwi użytkownicy Chrome na telefonach w ciągu ostatnich 28 dni. 75. percentyl oznacza, że trzy na cztery wczytania strony były co najmniej tak szybkie. INP jest dobry poniżej 200 ms i słaby powyżej 500 ms.
Brak danych rzeczywistych użytkowników
Google nie ma wystarczającego ruchu z Chrome dla Twojego źródła. Nie mówi to nic o szybkości Twojej strony; opieraj się na wynikach laboratoryjnych.

Jak naprawić najczęstsze problemy

  • Wolny obraz LCP

    Udostępniaj obraz główny w rozmiarze, w jakim jest wyświetlany, za pomocą srcset, w formacie WebP lub AVIF. Nie stosuj dla niego leniwego ładowania (lazy loading), dodaj fetchpriority="high" i umieść go w HTML jako element img, zamiast ładować go skryptem lub jako tło w CSS.

  • Treść, która skacze podczas ładowania

    Nadaj obrazom, filmom i osadzonym elementom atrybuty width i height lub właściwość CSS aspect-ratio. Zarezerwuj miejsce na banery, komunikaty o cookies i reklamy albo wyświetlaj je jako nakładki, które nie przesuwają treści w dół. W przypadku czcionek internetowych użyj font-display: optional lub czcionki zastępczej o dopasowanym rozmiarze.

  • Wysoki Total Blocking Time

    Najpierw usuń aplikacje, tagi i wtyczki, których już nie używasz; ich skrypty często zostają, nawet gdy przestajesz z nich korzystać. Czat, opinie i analitykę ładuj z atrybutem defer lub po tym, jak strona stanie się interaktywna. W Shopify sprawdź Online Store › Themes › Customize › App embeds.

  • CSS i skrypty blokujące renderowanie

    Dodaj defer do skryptów, które nie muszą działać przed pierwszym renderowaniem, wstaw bezpośrednio do HTML niewielką ilość CSS potrzebną do pierwszego ekranu i usuń arkusze stylów dla funkcji, których strona nie używa.

  • Zbyt ciężkie obrazy

    Zmniejszaj obrazy przed przesłaniem (szerokość około 2000 px w zupełności wystarcza na baner na całą szerokość) i kompresuj je. Shopify i WordPress mogą automatycznie serwować mniejsze wersje, gdy motyw o nie prosi, więc sprawdź, czy Twój motyw używa responsywnych rozmiarów obrazów.

Pytania o to narzędzie

Dlaczego moje wyniki różnią się od PageSpeed Insights?

Testy laboratoryjne zależą od maszyny, sieci i momentu pomiaru. PageSpeed Insights uruchamia Lighthouse na serwerach Google i symuluje wolne połączenie, a my stosujemy ograniczanie przepustowości w prawdziwej przeglądarce. Spodziewaj się podobnych zakresów, a nie identycznych liczb.

Jaki LCP jest dobry?

Według web.dev 2,5 sekundy lub mniej dla co najmniej 75% wczytań strony. Powyżej 4 sekund to wynik słaby.

Dlaczego nie ma danych rzeczywistych użytkowników dla mojej witryny?

Chrome UX Report obejmuje tylko źródła, które są publicznie wykrywalne i mają wystarczająco dużo wizyt użytkowników Chrome udostępniających statystyki użytkowania. Wiele małych witryn nie osiąga tego poziomu; test laboratoryjny i tak pokazuje, co naprawić.

Dlaczego test odbywa się na wolnym telefonie, a nie na komputerze?

Bo właśnie tam problemy pojawiają się najpierw. Szybki laptop ukrywa ciężkie obrazy i skrypty, które na telefonie ze średniej półki kosztują sekundy, a Lighthouse używa tego samego profilu telefonu w swoich testach mobilnych.

Co się stało z First Input Delay?

W marcu 2024 roku Interaction to Next Paint (INP) zastąpił First Input Delay jako wskaźnik Core Web Vitals. INP uwzględnia opóźnienia interakcji podczas całej wizyty, a nie tylko pierwszej.

Źródła

Powiązane narzędzia

Raport wydajności ($55, jednorazowo) zaczyna od pełnego darmowego skanu i dodaje więcej podstron, zmianę do wprowadzenia dla każdego wykrytego problemu, plik PDF i ponowne testy do weryfikacji poprawek.

Raport wydajności: szczegóły