Obserwowanie, jak Twoja witryna WordPress ładuje się w ślimaczym tempie, może być niezwykle frustrujące. Po zarządzaniu setkami witryn tutaj na WPBeginner odkryliśmy, że jednym z największych zabójców prędkości jest coś, czego możesz nawet nie widzieć: zbyt wiele żądań HTTP.
Każde żądanie obrazu, skryptu lub pliku dodaje trochę więcej czasu ładowania, co może szybko się sumować i powodować odejście odwiedzających. Dobra wiadomość jest taka, że nie musisz być programistą, aby znacząco wpłynąć na wydajność swojej witryny.
Przygotowaliśmy listę dokładnych, przyjaznych dla początkujących metod, których używamy do ograniczania tych żądań. Przejdźmy przez proste kroki, aby Twoja witryna była zauważalnie szybsza.
Dlaczego zmniejszać liczbę żądań HTTP w WordPressie?
Czy zastanawiałeś się kiedyś, dlaczego niektóre strony ładują się wiecznie? Każda strona WordPress jest jak układanka składająca się z różnych elementów, takich jak obrazy, pliki CSS, JavaScript, osadzone filmy i inne. Wszystkie te komponenty muszą się połączyć, aby strona się pojawiła.
Wyobraź sobie swoją przeglądarkę jako zapracowanego kelnera biegającego tam i z powrotem do kuchni, aby zebrać każdy składnik osobno. Może to spowolnić proces, zwłaszcza jeśli Twoja witryna jest bogata w elementy wizualne i funkcje. Każdy element zwiększa czas ładowania.
Ponadto nasze strony internetowe nie polegają tylko na tym, co jest przechowywane na serwerze. Często pobierają dane z zewnętrznych źródeł, takich jak Google Analytics lub widżety mediów społecznościowych. Chociaż te dodatki mogą sprawić, że Twoja witryna będzie bogatsza i bardziej interaktywna, jeśli nie są zoptymalizowane, mogą spowolnić Twoją witrynę.
Te niezoptymalizowane elementy mogą stać się ciężkim bagażem, który frustruje odwiedzających oczekujących szybkiego ładowania. Wolna strona internetowa może prowadzić do jednosesundowej zwłoki, kosztując Cię konwersje, wyświetlenia stron, a nawet satysfakcję klienta, jak podkreślono w badaniu Strange Loop.
Dlatego zmniejszanie liczby żądań HTTP jest ważne. Tak jak zrobiliśmy to tutaj na WPBeginner, skupienie się na tym może znacząco poprawić szybkość Twojej witryny, zwiększyć zaangażowanie użytkowników i ostatecznie przyspieszyć rozwój Twojej firmy. Szybkość to nie tylko techniczne zwycięstwo, to strategiczna przewaga.
Jak zidentyfikować żądania HTTP
Zanim pokażemy Ci, jak zmniejszyć liczbę żądań HTTP w WordPress, omówimy, jak je zidentyfikować.
Możesz łatwo przeglądać żądania HTTP wysyłane przez Twoją witrynę za pomocą narzędzi deweloperskich przeglądarki. Wyświetli to listę plików, które muszą zostać załadowane, aby wyświetlić stronę internetową.
Na przykład w Google Chrome możesz otworzyć narzędzia deweloperskie, przechodząc do Widok » Deweloper » Inspekcja. Możesz również kliknąć prawym przyciskiem myszy na stronie i wybrać „Inspekcja” z menu.
Następnie przejdź do zakładki „Sieć”. Odśwież stronę, a zobaczysz listę wszystkich załadowanych zasobów, w tym wewnętrznych i zewnętrznych żądań HTTP.
Aby łatwo zobaczyć tylko zewnętrzne żądania HTTP, poszukaj paska narzędzi filtrujących na górze panelu Sieć i zaznacz pole wyboru oznaczone jako „żądania stron trzecich”. Ukryje to wszystkie pliki ładowane z Twojej własnej domeny.
Jeśli chcesz zobaczyć tylko określone typy plików, które mogą wpływać na czas ładowania, takie jak JS (JavaScript) lub CSS, po prostu użyj przycisków u góry, aby przefiltrować listę.
Uważaj na pliki, które wolno się ładują. Możesz sprawdzić kolumnę „Czas”, aby zobaczyć, ile czasu zajmuje załadowanie każdego z tych zasobów. Następnie możesz kliknąć nagłówek tej kolumny, aby posortować listę według czasu, a kliknięcie jej po raz drugi umieści najwolniej ładujące się pliki na górze.
Kiedy spojrzysz na czwartą kolumnę „Inicjator”, czasami zobaczysz nazwę wtyczki lub motywu, który załadował plik. Zanotuj wszelkie wtyczki lub motywy, które żądają wolno ładujących się plików.
Możesz użyć narzędzi firm trzecich, takich jak Pingdom do uzyskania bardziej szczegółowego raportu. Więcej informacji znajdziesz w naszym przewodniku na temat śledzenia żądań domen stron trzecich w WordPressie.
Teraz, gdy wiesz, jak identyfikować żądania HTTP, przejdźmy do najskuteczniejszych sposobów ich redukcji w Twojej witrynie WordPress.
- Połącz pliki CSS i JavaScript
- Lenistwo ładowania obrazów i filmów
- Użyj systemu dostarczania treści (CDN)
- Wykorzystaj buforowanie przeglądarki
- Minimalizuj użycie zasobów zewnętrznych
- Bonus: Włącz kompresję Gzip
- Często zadawane pytania dotyczące redukcji żądań HTTP
- Dodatkowe zasoby dotyczące wydajności WordPressa
1. Połącz pliki CSS i JavaScript
Najlepszym sposobem na zmniejszenie liczby żądań HTTP wysyłanych do Twojej witryny jest zmniejszenie liczby plików, do których trzeba uzyskać dostęp. Możesz połączyć wiele plików, aby zmniejszyć liczbę żądań HTTP bez utraty funkcjonalności.
Na przykład, zamiast mieć wiele plików CSS dla różnych części projektu Twojej witryny, możesz połączyć je w jeden plik. Ten pojedynczy plik będzie zawierał cały niezbędny kod stylów, a przeglądarka będzie musiała wykonać tylko jedno żądanie zamiast wielu.
Podobnie, możesz połączyć wiele plików JavaScript w jeden, zmniejszając liczbę żądań potrzebnych do załadowania interaktywnych elementów Twojej witryny.
Uwaga: Chociaż łączenie plików jest świetną praktyką, warto wiedzieć, że nowoczesne protokoły sieciowe, takie jak HTTP/2, mogą ładować wiele małych plików bardzo szybko, czasami nawet szybciej niż jeden duży plik.
Jednak w przypadku witryn na starszym hostingu lub dla maksymalnej kompatybilności, łączenie i minifikacja plików pozostaje solidną strategią ograniczania żądań. Narzędzia takie jak WP Rocket robią to inteligentnie za Ciebie! 👍
Kilka wtyczek WordPress może zautomatyzować ten proces za Ciebie. Popularne opcje to WP Rocket (płatna) i Autoptimize (bezpłatna).
Szczegółowe informacje na temat korzystania z tych wtyczek znajdziesz w naszym przewodniku jak naprawić blokowanie renderowania JavaScript i CSS w WordPress.
Oprócz łączenia plików, te wtyczki będą je również minimalizować. Usuwa to niepotrzebne znaki, takie jak białe znaki i komentarze, z kodu, zmniejszając pliki bez wpływu na ich funkcjonalność.
To dodatkowo poprawia szybkość ładowania, zmniejszając ilość danych, które muszą zostać pobrane.
2. Lenistwo ładowania obrazów i filmów
Lenistwo ładowania (lazy loading) to kolejny świetny sposób na poprawę wydajności Twojej strony internetowej, zwłaszcza jeśli Twoje strony zawierają dużo obrazów lub filmów.
Warto zauważyć, że WordPress domyślnie automatycznie leniwie ładuje obrazy, co jest świetnym początkiem. Jednak wtyczki takie jak WP Rocket dają Ci większą kontrolę i mogą również leniwie ładować filmy i ramki iframe, co może mieć jeszcze większe znaczenie.
Zazwyczaj WordPress ładuje wszystkie pliki multimedialne przed wyświetleniem strony internetowej, nawet jeśli te obrazy lub filmy znajdują się niżej na stronie i nie są od razu widoczne dla użytkownika. Może to znacznie wydłużyć początkowy czas ładowania strony.
Lenistwo ładowania optymalizuje ten proces, opóźniając ładowanie obrazów i filmów do momentu, gdy znajdą się one w widoku użytkownika.
Te pomocne samouczki pomogą Ci dowiedzieć się, jak skonfigurować leniwe ładowanie na swojej stronie WordPress:
- Jak łatwo leniwie ładować obrazy w WordPressie
- Jak łatwo dodać leniwego ładowania dla filmów w WordPress
- Jak zastosować leniwe ładowanie Gravatarów w komentarzach WordPress
3. Użyj sieci dostarczania treści (CDN)
Użycie sieci dostarczania treści (CDN) to kolejna skuteczna strategia poprawy szybkości ładowania Twojej strony WordPress, szczególnie dla użytkowników znajdujących się daleko od Twojego serwera internetowego.
W przeciwieństwie do poprzednich metod, CDN nie zmniejsza liczby żądań HTTP. Zamiast tego optymalizuje sposób obsługi tych żądań.
Zazwyczaj pliki Twojej strony internetowej są przechowywane na jednym serwerze internetowym, a użytkownicy z całego świata muszą pobierać pliki z tej jednej lokalizacji.
CDN przechowuje kopie plików Twojej strony internetowej na szybkich serwerach zlokalizowanych na całym świecie, a są one dostarczane do przeglądarki użytkownika z najbliższego mu serwera.
Możesz być zainteresowany naszym porównaniem ekspertów najlepszych usług CDN dla WordPressa, aby dowiedzieć się, która opcja najlepiej pasuje do Twojej strony internetowej.
W WPBeginner używamy Cloudflare do poprawy szybkości ładowania naszych stron, a Ty możesz postępować zgodnie z naszym samouczkiem krok po kroku na temat konfiguracji Cloudflare Free CDN w WordPress.
4. Wykorzystaj buforowanie przeglądarki
Możesz również wykorzystać buforowanie przeglądarki, aby zmniejszyć liczbę żądań HTTP do Twojej witryny, zwłaszcza jeśli masz powracających użytkowników, którzy często odwiedzają Twoją stronę.
Kiedy użytkownik odwiedza Twoją stronę internetową po raz pierwszy, jego przeglądarka pobiera wszystkie niezbędne zasoby, takie jak obrazy, arkusze stylów i pliki JavaScript. Pamięć podręczna przeglądarki pozwala przeglądarce przechowywać kopie tych plików lokalnie na komputerze użytkownika.
Następnym razem, gdy odwiedzą Twoją witrynę, przeglądarka sprawdzi swoją lokalną pamięć podręczną przed wysłaniem żądań HTTP do Twojego serwera. Jeśli w pamięci podręcznej zostanie znaleziony nieprzedawniony plik, przeglądarka użyje lokalnego pliku zamiast pobierać go ponownie.
To znacznie zmniejsza liczbę żądań HTTP wysyłanych do Twojego serwera, co skutkuje szybszym ładowaniem dla powracających odwiedzających.
Jednakże, jeśli zawartość Twojej strony internetowej jest często aktualizowana, ważne jest, aby ustawić odpowiednie czasy wygaśnięcia dla buforowanych zasobów. Zapewnia to, że Twoi użytkownicy ostatecznie otrzymają najnowsze wersje Twoich plików.
Możesz kontrolować, jak długo zasoby są buforowane, dodając nagłówki Expires w WordPressie. Te nagłówki informują przeglądarkę, kiedy buforowany plik powinien być uznany za nieaktualny i wymaga ponownego pobrania z Twojego serwera.
5. Zminimalizuj użycie zasobów zewnętrznych
Wiele wtyczek i motywów WordPress ładuje zasoby, takie jak skrypty, arkusze stylów i obrazy, z zewnętrznych stron internetowych, takich jak Google Analytics, Facebook i dostawcy czcionek.
Te zewnętrzne żądania HTTP mogą wpłynąć na szybkość ładowania Twojej witryny, ponieważ przeglądarka musi połączyć się z wieloma serwerami, aby pobrać wszystkie niezbędne komponenty.
Nawet jeśli te zewnętrzne zasoby są zoptymalizowane pod kątem szybkości, używanie ich zbyt wielu może spowolnić działanie Twojej strony internetowej.
Aby zmniejszyć te zewnętrzne żądania HTTP, możesz zacząć od dezaktywacji i usunięcia wtyczek i motywów, których faktycznie nie potrzebujesz.
Powinieneś również rozważyć znalezienie alternatyw dla wszelkich wtyczek lub motywów, które żądają wolno ładujących się plików. Mogłeś zauważyć niektóre podczas identyfikowania żądań HTTP wcześniej.
A podczas wybierania wtyczek WordPress, zwracaj uwagę na zewnętrzne zasoby, które ładują. Powinieneś wybierać wtyczki, które priorytetowo traktują wydajność i unikać tych, które ładują nadmierne zewnętrzne skrypty lub style.
Aby uzyskać bardziej szczegółową kontrolę nad wtyczkami, rozważ użycie narzędzia do zarządzania wtyczkami, takiego jak Plugin Organizer. Pozwala to na selektywne ładowanie wtyczek tylko na stronach, gdzie są one potrzebne.
Wreszcie, niestandardowe czcionki internetowe są często ładowane od zewnętrznych dostawców, takich jak Google Fonts, i mogą znacząco przyczynić się do żądań HTTP. Powinieneś ograniczyć liczbę rodzin czcionek i wag, których używasz, lub rozważyć użycie czcionek systemowych, które są już zainstalowane na komputerach użytkowników.
W WPBeginner przeszliśmy na czcionki systemowe w 2021 roku, co poprawiło czas ładowania naszych stron, zwłaszcza dla użytkowników z wolniejszymi połączeniami internetowymi. Możesz dowiedzieć się, jak zrobić to samo w naszym przewodniku na temat wyłączania czcionek Google na swojej stronie WordPress.
6. Bonus: Włącz kompresję Gzip
Ostatnia wskazówka to włączenie kompresji GZIP, aby zmniejszyć rozmiar plików na serwerze internetowym.
Chociaż nie zmniejsza to bezpośrednio liczby żądań HTTP, przyspiesza proces i sprawia, że przesyłanie plików Twojej witryny jest szybsze.
Często zadawane pytania dotyczące redukcji żądań HTTP
Poniżej znajdują się niektóre z najczęściej zadawanych pytań dotyczących optymalizacji żądań HTTP i poprawy szybkości witryny WordPress.
1. Czym jest żądanie HTTP?
Żądanie HTTP to sytuacja, w której przeglądarka internetowa prosi serwer o fragment informacji potrzebny do załadowania strony internetowej. Może to być obraz, arkusz stylów (plik CSS), skrypt (plik JavaScript) lub jakakolwiek inna część Twojej witryny. Każdy pojedynczy plik wymaga oddzielnego żądania.
2. Ile żądań HTTP to za dużo dla strony internetowej?
Nie ma jednej magicznej liczby, ponieważ zależy to od złożoności Twojej witryny. Jednak dobrym celem dla większości stron internetowych małych firm jest pozostanie poniżej 50-60 żądań na stronę. Im mniej żądań musi wykonać Twoja witryna, tym szybciej zazwyczaj ładuje się ona dla Twoich odwiedzających.
3. Jaki jest najłatwiejszy sposób dla początkującego na zmniejszenie liczby żądań HTTP?
Dla początkujących najłatwiejszą metodą jest użycie wtyczki do buforowania i optymalizacji, takiej jak WP Rocket. Może ona automatycznie łączyć pliki CSS i JavaScript za pomocą kilku kliknięć, co znacznie zmniejsza liczbę żądań bez konieczności dotykania kodu.
4. Czy CDN zmniejsza liczbę żądań HTTP?
Nie, sieć dostarczania treści (CDN) nie zmniejsza faktycznej liczby żądań. Zamiast tego sprawia, że są one znacznie szybsze. CDN przechowuje kopie Twoich plików na serwerach na całym świecie, więc gdy przeglądarka użytkownika żąda pliku, jest on dostarczany z najbliższej możliwej lokalizacji, skracając czas ładowania.
Dodatkowe zasoby dotyczące wydajności WordPressa
Mamy nadzieję, że ten samouczek pomógł Ci dowiedzieć się, jak zmniejszyć liczbę żądań HTTP w WordPress. Możesz również zapoznać się z naszymi innymi poradnikami ekspertów dotyczącymi poprawy szybkości i wydajności witryny.
Testowanie i diagnozowanie szybkości witryny
- Jak prawidłowo przeprowadzić test prędkości strony internetowej
- Jak używać GTmetrix do poprawy wydajności witryny
- Jak przeprowadzić test obciążeniowy strony WordPress
Kluczowe usprawnienia wydajności
- Dlaczego WordPress działa wolno? (I jak to naprawić)
- Jak zoptymalizować obrazy pod kątem wydajności sieci
Zaawansowane techniki optymalizacji
- Jak szybkie PHP i& MySQL mogą przyspieszyć witrynę
- Jak unikać ogromnych ładunków sieciowych w WordPress
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Masz pytanie lub sugestię? Zostaw komentarz, aby rozpocząć dyskusję.