Ograniczenie zapytań HTTP w WordPress polega przede wszystkim na usunięciu zbędnych zasobów, a dopiero później na optymalizacji tych, które muszą pozostać. Każdy arkusz CSS, skrypt JavaScript, obraz, czcionka czy element zewnętrzny może wymagać osobnego żądania przeglądarki, dlatego ich nadmiar wydłuża ładowanie strony i może pogarszać wyniki TTFB oraz LCP.
Dlaczego liczba zapytań HTTP wpływa na szybkość strony?
Po otwarciu strony przeglądarka pobiera pliki potrzebne do jej wyświetlenia. Dla każdego zasobu wysyła żądanie do serwera, a następnie odbiera odpowiedź. Im więcej takich operacji, tym więcej pracy musi wykonać przeglądarka i serwer.
Niektóre pliki CSS i JavaScript mogą blokować renderowanie. W efekcie użytkownik dłużej czeka na pojawienie się głównej treści, co wpływa między innymi na metrykę LCP. Liczba żądań nie jest jednak jedynym parametrem. Znaczenie mają też rozmiar plików, czas odpowiedzi serwera, kolejność ładowania oraz sposób obsługi zasobów przez HTTP/1.1 lub HTTP/2.
Jak sprawdzić, co generuje najwięcej zapytań?
Najpierw wykonaj pomiar, zamiast wyłączać wtyczki na ślepo. Otwórz stronę w przeglądarce, kliknij ją prawym przyciskiem myszy i wybierz „Zbadaj” albo „Narzędzia deweloperskie”. Następnie przejdź do zakładki Network i odśwież stronę.
Na liście zobaczysz zasoby pobierane podczas ładowania. Zwróć uwagę na ich liczbę, domenę, rozmiar oraz wykres „Waterfall”, który pokazuje kolejność i czas trwania operacji. Diagnostykę ułatwia kilka obserwacji:
- filtruj zasoby według typów CSS, JS, Img, Font i Fetch/XHR;
- sprawdź, które pliki pochodzą z wtyczek lub zewnętrznych usług;
- porównaj stronę główną z podstroną, na której występuje konkretny moduł;
- zobacz, czy skrypty ładują się także tam, gdzie nie są potrzebne.
Do analizy źródła problemu możesz użyć także wtyczki Query Monitor. Pokazuje ona między innymi zapytania do bazy, błędy PHP, wywołania hooków oraz zapytania HTTP API. Nie mierzy wyłącznie liczby plików front-endowych, ale pomaga powiązać wolne działanie z konkretną wtyczką, motywem lub funkcją.
Jak ograniczyć liczbę zapytań HTTP w WordPress?
Usuń zbędne wtyczki i zasoby
Największą korzyść zwykle daje usunięcie elementu, którego strona nie potrzebuje. Jeśli wtyczka dodaje własne pliki CSS, JavaScript lub czcionki, samo ich minifikowanie nie rozwiązuje problemu. Gdy funkcja nie jest używana, usuń wtyczkę całkowicie, a nie tylko ją dezaktywuj.
Ciężkie rozszerzenie można też zastąpić prostszym rozwiązaniem. Dotyczy to na przykład rozbudowanych modułów udostępniania, galerii, sliderów i dodatków, których funkcje są wykorzystywane sporadycznie.
Ładuj skrypty tylko tam, gdzie są potrzebne
Niektóre wtyczki działają na jednej podstronie, ale domyślnie dodają swoje pliki w całym serwisie. Formularz kontaktowy nie musi ładować skryptów na każdym wpisie blogowym. Do warunkowego wyłączania zasobów bez ręcznej edycji kodu służą między innymi Asset CleanUp i Perfmatters.
Przed wyłączeniem pliku sprawdź stronę w widoku użytkownika. Niektóre zasoby mają zależności, a ich usunięcie może zepsuć formularz, menu, koszyk lub elementy motywu.
Ogranicz obrazy, iframe i czcionki
Każdy obraz wymaga osobnego pobrania, choć duża część grafik może znajdować się poza początkowym obszarem widocznym na ekranie. Lazy Load opóźnia pobieranie obrazów, filmów i iframe do momentu, gdy użytkownik zbliży się do nich podczas przewijania. Nie zmniejsza liczby zasobów na całej stronie, ale ogranicza liczbę żądań wykonywanych przy pierwszym widoku.
Podobnie działają czcionki. Ogranicz liczbę rodzin i grubości, rozważ czcionki systemowe albo hostowanie potrzebnych plików lokalnie. Zewnętrzne Google Fonts, analityka, piksele reklamowe, czaty i osadzone filmy z YouTube mogą tworzyć dodatkowe żądania do innych serwerów.
| Typ zasobu | Metoda redukcji | Efekt |
|---|---|---|
| CSS | Usunięcie nieużywanych stylów, minifikacja, warunkowe ładowanie | Mniej plików i mniejszy rozmiar stylów |
| JavaScript | Usunięcie zbędnych skryptów, opóźnienie i ładowanie asynchroniczne | Mniej blokowania renderowania |
| Obrazy | Usunięcie zbędnych grafik, kompresja i Lazy Load | Mniej żądań podczas pierwszego widoku |
| Czcionki | Czcionki systemowe lub mniejsza liczba wariantów | Mniej pobieranych plików fontów |
| Skrypty zewnętrzne | Usunięcie nieużywanych usług i lokalne hostowanie wybranych zasobów | Mniejsza zależność od zewnętrznych serwerów |
Łącz pliki tylko po sprawdzeniu protokołu
W środowisku HTTP/1.1 połączenie kilku małych plików CSS lub JavaScript w jeden większy może ograniczyć liczbę połączeń z serwerem. Nie jest to jednak uniwersalna zasada.
Przy HTTP/2 przeglądarka może pobierać wiele zasobów równolegle w ramach jednego połączenia. Nadmierne łączenie plików może wtedy utrudnić cache’owanie i sprawić, że mała zmiana wymusi pobranie dużego pakietu od nowa.
Dlatego najpierw usuń zasoby, których nie potrzebujesz, później zmniejsz ich rozmiar, a dopiero na końcu testuj łączenie. Wynik sprawdzaj w DevTools oraz narzędziach mierzących Core Web Vitals. CSS Sprites mogą ograniczyć liczbę żądań dla wielu małych ikon, ale przy współczesnych protokołach i responsywnych obrazach nie zawsze są najlepszym wyborem.
Jakie wtyczki pomagają w automatyzacji?
Wybierz jedno główne narzędzie do optymalizacji. Kilka wtyczek wykonujących te same operacje może powodować konflikty, podwójną minifikację albo trudności z diagnozą.
- WP Rocket oferuje cache, minifikację, opóźnianie JavaScriptu i wybrane mechanizmy optymalizacji ładowania.
- Asset CleanUp służy głównie do kontrolowania, gdzie ładowane są pliki CSS i JavaScript.
- Autoptimize pomaga minifikować i, po odpowiedniej konfiguracji, łączyć zasoby.
- Query Monitor służy do diagnostyki wtyczek, zapytań i problemów po stronie WordPressa.
Po każdej zmianie sprawdź stronę główną, formularze, menu, wersję mobilną oraz funkcje sklepu. Automatyzacja nie zastępuje pomiaru, szczególnie gdy serwer korzysta z HTTP/2.
Jaka kolejność działań daje najlepszy efekt?
- Zmierz liczbę żądań i znajdź zasoby generowane przez motyw, wtyczki oraz usługi zewnętrzne.
- Usuń niepotrzebne wtyczki, obrazy, czcionki i skrypty.
- Ogranicz ładowanie pozostałych zasobów do podstron, na których są faktycznie używane.
- Zoptymalizuj rozmiar plików, ustaw Lazy Load i dopiero wtedy testuj ich łączenie.
Najprostsza zasada brzmi: najpierw usuń, potem zoptymalizuj, a na końcu połącz. Liczba zapytań zmienia się wraz z rozwojem strony, instalacją nowych wtyczek i zmianami w motywie, dlatego warto wracać do pomiarów po większych aktualizacjach.
