Co spowalnia witrynę i jak to zmierzyć?

Moduł 6: Szybkość · Czas czytania: 9 minut

Cel lekcji: Po tej lekcji będą Państwo potrafili zmierzyć, gdzie ucieka czas, i rozpoznać różnicę między opóźnieniem po stronie serwera a opóźnieniem w przeglądarce.

Kluczowe pojęcia: TTFB, Core Web Vitals (LCP, INP, CLS), dane laboratoryjne, dane terenowe, PageSpeed Insights, karta sieć, kompresja, zewnętrzne skrypty, limity pakietu hostingowego, 503

Najpierw zmierzyć, potem majstrować

"Strona jest wolna" może mieć dziesięć różnych przyczyn. Kto bez pomiaru instaluje jednocześnie wtyczkę cache, wtyczkę optymalizacji obrazów i większy pakiet hostingowy, ten potem nie wie, co pomogło, a do tego ma trzy rzeczy więcej do pilnowania. Dlatego zawsze proszę zacząć od trzech pytań (takich samych, jak w instrukcji swojego dostawcy hostingu):

1. Wszystko działa wolno, czy tylko panel administracyjny? Wolny panel administracyjny przy szybkiej części publicznej wskazuje na wtyczki, które dużo robią w panelu, albo na boty atakujące stronę logowania.
2. Zawsze, czy tylko w określonych momentach? Tylko w godzinach szczytu albo gdy działa zaplanowane zadanie: wtedy pakiet osiąga swoje limity.
3. U wszystkich, czy tylko u Państwa? Proszę spróbować na telefonie przez 4G lub 5G, albo poprosić kogoś innego o sprawdzenie. Jeśli tylko u Państwa jest wolno, przyczyną jest połączenie internetowe lub VPN.

Dwie połowy: serwer i przeglądarka

Czas, który czeka odwiedzający, składa się z dwóch części (lekcja 1.2):

1. Serwer tworzy HTML: serwer WWW, PHP, wtyczki, baza danych. Widać to jako TTFB (time to first byte), czyli czas do pierwszego bajtu odpowiedzi. web.dev podaje jako zasadę, że większość witryn powinna dążyć do TTFB wynoszącego 0,8 sekundy lub mniej.
2. Przeglądarka odczytuje ten HTML, a następnie pobiera wszystko, co się w nim znajduje: arkusze stylów, skrypty, czcionki, obrazy, wideo, kody pomiarowe, widżety czatu. Dopiero gdy wystarczająco dużo z tego zostanie wczytane, odwiedzający coś widzi.

Wysoki TTFB rozwiązuje się po stronie serwera: cache (lekcja 6.2), mniej lub lżejsze wtyczki, nowsza wersja PHP, uporządkowana baza danych (lekcja 6.3) lub więcej mocy obliczeniowej. Niski TTFB przy mimo to wolnej stronie wskazuje na stronę przeglądarki: zbyt duże obrazy, zbyt dużo skryptów, zewnętrzne elementy.

Core Web Vitals

Google mierzy doświadczenie odwiedzających za pomocą trzech wskaźników, Core Web Vitals:

INP zastąpił w marcu 2024 roku starszy wskaźnik FID. Google wykorzystuje te wskaźniki między innymi przy rankingowaniu wyników wyszukiwania, ale najważniejszy powód, by je poprawiać, jest prosty: odwiedzający rezygnują przy wolnej lub przeskakującej stronie.

Dane laboratoryjne i dane terenowe

Istnieją dwa rodzaje pomiarów, które dają różne liczby:

• Dane laboratoryjne: test w jednym momencie, z jednego miejsca, z symulowanym telefonem i połączeniem. Przydatne do porównań (przed i po zmianie), ale to nie jest prawdziwy odwiedzający.
• Dane terenowe: pomiary u prawdziwych odwiedzających korzystających z Chrome, z ostatnich 28 dni. To właśnie realnie odczuwają odwiedzający. Małe strony często mają zbyt mało odwiedzających, by uzyskać dane terenowe.

PageSpeed Insights (pagespeed.web.dev) pokazuje oba: u góry dane terenowe (jeśli są dostępne), poniżej test laboratoryjny z wynikiem i konkretnymi zaleceniami. Proszę nie patrzeć bezkrytycznie na wynik od 0 do 100. Proszę przyjrzeć się poszczególnym elementom: czy LCP jest słaby, ponieważ serwer jest wolny (TTFB), czy dlatego, że duże zdjęcie waży 3 MB?

Proszę zawsze testować kilka razy (liczby się zmieniają) i testować też zwykłą podstronę, nie tylko stronę główną.

Samodzielna obserwacja w przeglądarce

Narzędzia deweloperskie w przeglądarce (F12) pokazują, co naprawdę się dzieje:

• Karta Sieć: proszę odświeżyć stronę z wyłączonym cache (zaznaczyć opcję "Wyłącz pamięć podręczną"). Widać każdy wczytywany plik, jego rozmiar i czas pobierania. Proszę posortować według rozmiaru: największe pliki to zwykle obrazy. Proszę posortować według domeny: ile pochodzi od innych podmiotów (czcionki, kody pomiarowe, filmy)?
• Pierwsze żądanie (sam HTML): proszę kliknąć na nie, karta Czas. "Waiting for server response" to TTFB.
• Nagłówki tego pierwszego żądania: czy jest kompresja (content-encoding: br lub gzip), i czy strona pochodziła z cache (lekcja 6.2)?

Typowi winowajcy

W praktyce opóźnienia w WordPressie wynikają zazwyczaj z jednej z tych przyczyn:

1. Brak cache stron: każda strona jest tworzona od nowa przy każdej wizycie (lekcja 6.2).
2. Zbyt wiele lub zbyt ciężkich wtyczek, zwłaszcza takich, które przy każdym żądaniu wywołują usługi zewnętrzne lub wykonują ciężkie zapytania (lekcja 5.3).
3. Duże obrazy: zdjęcie 5 MB prosto z telefonu na stronie głównej (lekcje 4.4 i 6.3).
4. Ciężki motyw lub kreator stron, który na każdej stronie wczytuje wiele skryptów i arkuszy stylów (lekcja 5.1).
5. Elementy zewnętrzne: czcionki, filmy, widżety czatu, kody pomiarowe, przyciski mediów społecznościowych od innych podmiotów. Każdy z nich to połączenie z innym serwerem, który może być wolny.
6. Stara wersja PHP (lekcja 8.4).
7. Nieuporządkowana baza danych: tysiące wersji roboczych, spam, tabele logów wtyczek (lekcja 6.3).
8. Boty: roboty indeksujące, roboty AI i próby logowania obciążają pakiet (lekcja 7.3).
9. Pakiet osiąga swoje limity: za mało mocy obliczeniowej (CPU), procesów lub pamięci w stosunku do ruchu.

Limity Państwa pakietu

Przy hostingu współdzielonym każdy pakiet otrzymuje ustaloną część zasobów serwera: moc obliczeniową, pamięć, szybkość dysku oraz liczbę jednoczesnych procesów. Jeśli strona zużywa więcej, zostaje spowolniona albo odwiedzający otrzymują komunikat błędu 503 (Service Unavailable, u niektórych dostawców hostingu "Resource Limit Is Reached"). W DirectAdmin z CloudLinux widać to w sekcji Resource Usage (z "faults", jeśli strona została spowolniona), a dzięki X-Ray widać, która wtyczka lub które zapytanie zajmuje czas na danej stronie. Inni dostawcy hostingu mają podobne zestawienia, czasem dostępne tylko na żądanie.

Większy pakiet pomaga, jeśli strona rzeczywiście potrzebuje więcej zasobów (ruchliwy sklep internetowy). Nie rozwiązuje on źle skonfigurowanej strony: problem wtedy wraca później. Proszę najpierw znaleźć przyczynę.

Podsumowanie

• Proszę najpierw zmierzyć: wszystko czy tylko panel administracyjny, zawsze czy czasami, u wszystkich czy tylko u Państwa.
• TTFB to strona serwera (cel to 0,8 sekundy lub mniej); reszta to to, co ładuje przeglądarka.
• Core Web Vitals: LCP (2,5 s), INP (200 ms) i CLS (0,1); INP zastąpił FID w 2024 roku.
• PageSpeed Insights pokazuje dane terenowe i dane laboratoryjne; karta sieć pokazuje, co naprawdę się ładuje.
• Większość opóźnień wynika z braku cache, ciężkich wtyczek, dużych obrazów i elementów zewnętrznych; większy pakiet to dopiero ostatni krok.

Quiz

Zadanie

Zadanie A6.1: Zmierzenie TTFB i kompresji. Proszę wpisać adres swojej strony oraz, jeśli Państwo chcą, jedną zwykłą podstronę (na przykład stronę kontaktową). Program trzykrotnie pobierze każdą stronę bez plików cookie i poda środkowy wynik TTFB, rozmiar HTML oraz informację, czy serwer wysyła HTML w formie skompresowanej (content-encoding gzip lub br). Proszę porównać wynik z testem w PageSpeed Insights i zanotować, co zwraca uwagę.

Więcej informacji

Poniższe artykuły opisują kroki w panelach WebOké; w innych panelach działają one w podobny sposób.

• Instrukcja DirectAdmin 18.3: Moja strona internetowa działa wolno
• Instrukcja DirectAdmin 17.3: Resource Usage: CPU, pamięć i procesy
• Instrukcja DirectAdmin 17.4: X-Ray: wykrywanie wolno działających stron
• Instrukcja DirectAdmin 17.5: 503 of 'Resource Limit Is Reached': co teraz zrobić?
• Moja strona internetowa działa wolno lub zużywa zbyt dużo CPU: jak przyspieszyć jej działanie
• Core Web Vitals (web.dev, w j. angielskim): https://web.dev/articles/vitals
• PageSpeed Insights: https://pagespeed.web.dev/