Jak zrobić mniej żądań HTTP w WordPress (11 wskazówek)

Aby wyświetlić Twoją witrynę, przeglądarka użytkownika wyśle ​​żądania HTTP do Twojego serwera. Jeśli jednak masz wiele niezoptymalizowanych plików, serwer musi przetworzyć wiele żądań. Ponieważ mogą one znacznie wydłużyć czas ładowania strony, chcesz, aby Twoja witryna wysyłała mniej żądań HTTP.

Na szczęście można je zmniejszyć, o czym jest ten wpis.

Wprowadzenie do żądań HTTP

Za każdym razem, gdy użytkownik odwiedza Twoją witrynę, jego przeglądarka musi pobrać zasoby z Twojego serwera. Aby się z nim komunikować, przeglądarka wysyła żądania za pomocą protokołu HTTP (Hypertext Transfer Protocol).

Strony internetowe zawierają różne formy danych, a pliki HTML, CSS, obrazy i filmy są przechowywane na serwerze – renderowanie tych treści w przeglądarce wymaga żądań HTTP.

Oto kroki, które należy wykonać, gdy ktoś przegląda Internet:

Należy zauważyć, że renderowanie witryny nie wymaga tylko jednego żądania HTTP. Każdy pojedynczy plik obrazu, arkusz stylów wtyczek, skrypt JavaScript, czcionka internetowa i tak dalej mają zazwyczaj swój własny. Dlatego jeśli Twoja witryna jest niezoptymalizowana, może to negatywnie wpłynąć na czas ładowania.

Dlaczego możesz chcieć, aby Twoja witryna WordPress wysyłała mniej żądań HTTP

Podczas tworzenia witryny internetowej ważne jest, aby zminimalizować liczbę niepotrzebnych plików. Wtedy przeglądarka odwiedzającego nie musi żądać tak wielu zasobów z serwera. Ponieważ Twoja witryna będzie wysyłać mniej żądań HTTP, ładuje się znacznie szybciej.

Z grubsza przyjmuje się, że większa liczba żądań HTTP prowadzi do wolniejszej szybkości strony. Jeśli przed wyrenderowaniem strony jest więcej zasobów do pobrania, użytkownicy będą musieli długo czekać na wyświetlenie zawartości.

Na przykład witryna zawierająca tylko 50 żądań ładuje się zazwyczaj szybciej niż witryna zawierająca 70 żądań. Dzieje się tak, ponieważ jest mniej zasobów do przetworzenia i pobrania.

Prawdziwa historia jest nieco bardziej złożona, ponieważ nie wszystkie żądania HTTP są sobie równe. Jedno duże, wolno ładujące się żądanie HTTP może mieć większy wpływ niż pięć małych, szybko ładujących się żądań HTTP. Ale jako ogólna zasada – mniej żądań HTTP = szybciej ładująca się strona .

Zmniejszając liczbę żądań HTTP w swojej witrynie, poprawisz swoje podstawowe wskaźniki internetowe, a zwłaszcza wynik LCP (ang. Largest Content Paint). To z kolei może poprawić wrażenia użytkownika (UX), ponieważ odwiedzający szybciej zobaczą treść.

Jak przetestować żądania HTTP witryny

Jak wspomnieliśmy wcześniej, żądania HTTP są częścią renderowania. Jednak nie każde żądanie HTTP jest takie samo. Zanim zaczniesz ograniczać ich liczbę w swojej witrynie, musisz dokładnie wiedzieć, na które z nich kierować reklamy.

Aby to zrobić, możesz użyć narzędzia do analizy wydajności, takiego jak GTmetrix. Zacznij od wprowadzenia adresu URL swojej witryny i kliknij Przetestuj swoją witrynę :

Otrzymasz raport wydajności zawierający informacje o rozmiarze strony i łącznej liczbie żądań. Aby wyświetlić te dane, przewiń w dół do szczegółów strony :

Możesz także przeglądać indywidualne prośby, klikając zakładkę Wodospad . To pokaże, jak długo trwało pobieranie każdego pliku:

Korzystając z wykresu wodospadu, możesz określić, które elementy w Twojej witrynie powodują niepotrzebne żądania HTTP. Po znalezieniu problemu możesz wdrożyć odpowiednie rozwiązanie i przyspieszyć swoją stronę internetową.

Jak widać na powyższym wykresie, każde żądanie HTTP ma inny rozmiar i ładuje się w innym czasie.

Jeśli chcesz jak największego zwrotu ze swoich wysiłków, spróbuj skupić się na wyeliminowaniu największych i najwolniejszych żądań HTTP.

Powinieneś także skupić się na usuwaniu żądań HTTP innych firm ( zasobów, które Twoja witryna ładuje z serwera innej osoby, takich jak skrypty Google Analytics ). Te żądania stron trzecich wymagają dodatkowych wyszukiwań DNS i mają inne wady wydajności.

Jak zmniejszyć liczbę żądań HTTP w WordPress i przyspieszyć swoją witrynę (11 wskazówek)

Po przetestowaniu witryny nadszedł czas, aby zredukować liczbę żądań HTTP.

Poniżej omówimy 11 różnych sposobów zmniejszania liczby żądań HTTP i optymalizacji pozostałych żądań HTTP. Kilka z tych wskazówek niekoniecznie wyeliminuje żądania HTTP, ale zoptymalizuje żądania, aby przyspieszyły ładowanie, co jest nadal ważne dla przyspieszenia witryny.

1. USUŃ NIEPOTRZEBNE WTYCZKI
2. ODROCZENIE JAVASCRIPT BLOKUJĄCEGO RENDER I/LUB OPÓŹNIENIE WYKONANIA JAVASCRIPT
3. WARUNKOWO ZAŁADUJ SKRYPTY
4. MINIMALIZUJ ŻĄDANIA OSÓB TRZECICH
5. ZOPTYMALIZUJ SWOJE OBRAZY
6. WDRAŻAJ LENIWE ŁADOWANIE
7. UŻYWAJ STOSU CZCIONEK SYSTEMOWYCH
8. POŁĄCZ CSS I JAVASCRIPT
9. UŻYWAJ SPRITES CSS DO ŁĄCZENIA OBRAZÓW
10. MINIFIKUJ KOD SWOJEJ WITRYNY
11. WYŁĄCZ EMOJI

1. Usuń niepotrzebne wtyczki

Możesz mieć zainstalowanych wiele wtyczek w swojej witrynie. Nawet jeśli nie używasz ich aktywnie, niepotrzebne wtyczki mogą zwiększać liczbę żądań HTTP i spowalniać Twoje strony internetowe.

Aby przeanalizować prośby o wtyczki, wyszukaj „wtyczki” w raporcie GTmetrix Waterfall. Spowoduje to wyświetlenie tylko żądań HTTP pochodzących z folderu wp-content/plugins :

Aby zobaczyć, która wtyczka utworzyła żądanie, najedź kursorem myszy na wynik. Aby zoptymalizować witrynę, przejrzyj listę, szukając niepotrzebnych wtyczek. Jeśli jakieś narzędzie nie przyczynia się aktywnie do Twojej witryny, rozważ jego usunięcie.

2. Odłóż JavaScript blokujący renderowanie i/lub opóźnij wykonanie JavaScript

Jeśli chcesz wykonywać mniej żądań HTTP i optymalizować swoje żądania HTTP, skupienie się na JavaScript to kolejna świetna taktyka.

Istnieją dwa główne sposoby optymalizacji ładowania kodu JavaScript w witrynie:

1. Odłóż JavaScript blokujący renderowanie
2. Opóźnij wykonanie JavaScript

Odłóż JavaScript blokujący renderowanie

Odroczenie kodu JavaScript blokującego renderowanie samo w sobie nie usunie żądań HTTP, ale sprawi, że ładowanie kodu JavaScript w Twojej witrynie nie będzie blokować ważniejszych żądań HTTP.

Podczas procesu ładowania przeglądarka może napotkać zasób blokujący renderowanie. Te pliki CSS lub JavaScript wstrzymują renderowanie do czasu przetworzenia zasobu. Jeśli masz te niepotrzebne pliki, mogą wydłużyć czas wyświetlania treści.

Dodanie atrybutów odroczenia lub asynchronizacji do tych plików poinformuje przeglądarkę o konieczności ich późniejszego wykonania. W przypadku atrybutów odroczenia skrypty są pobierane podczas analizowania kodu HTML, a następnie wykonywane. Atrybuty asynchroniczne uruchomią skrypt, gdy tylko będzie dostępny.

Aby to zaimplementować, możesz użyć wtyczki specyficznej dla funkcji, takiej jak bezpłatna wtyczka Async JavaScript.

Lub wiele wtyczek o ogólnej wydajności / pamięci podręcznej również oferuje tę funkcję, w tym WP Rocket i FlyingPress.

Możesz również ustawić to ręcznie w kodzie swojej witryny, jeśli czujesz się komfortowo.

Aby zaimplementować atrybut odroczenia, wystarczy otworzyć plik functions.php i znaleźć tag <script> dla zasobu. Tutaj wstaw atrybut odroczenia:

 <script src="resource.js" defer></script>

Oto jak wygląda atrybut asynchroniczny:

 <script src="resource.js" async></script>

Ogólnie rzecz biorąc, najlepiej jest używać atrybutów asynchronicznych. Będziesz jednak musiał użyć atrybutów odroczenia, gdy skrypt opiera się na innym skrypcie.

Opóźnij wykonanie JavaScript

Jeśli chcesz wykonywać mniej żądań HTTP podczas początkowego wczytywania strony, inną popularną taktyką jest opóźnienie wykonania części/całego kodu JavaScript w witrynie do momentu interakcji użytkownika.

Gdy to ustawisz, Twoja witryna będzie czekać na załadowanie plików, aż użytkownik wykona jakąś interakcję, taką jak kliknięcie, przewinięcie itp.

Przenosząc te żądania HTTP na późniejszy etap wizyty, możesz wykonać mniej żądań HTTP przy początkowym ładowaniu i znacznie przyspieszyć pomiary zorientowane na wrażenia użytkownika, takie jak największa zawartość treści.

Aby to skonfigurować, możesz użyć jednej z tych wtyczek zwiększających wydajność:

• Rakieta WP
• Latająca prasa
• Perfmatters

Oto jak to wygląda we FlyingPress – możesz opóźnić wszystkie swoje skrypty z wyjątkiem wybranych skryptów lub opóźnić tylko wybrane skrypty:

3. Warunkowo ładuj skrypty

Niektóre wtyczki niepotrzebnie ładują skrypty w całej witrynie. Na przykład wtyczka może obsługiwać tylko formularze na stronie Kontakt z nami , ale dodawać skrypty do innego obszaru. W takim przypadku zalecamy warunkowe załadowanie skryptów wtyczki.

Aby warunkowo załadować wtyczki, rozważ zainstalowanie narzędzia takiego jak Perfmatters. Jest wyposażony we wbudowanego menedżera skryptów do wyłączania wtyczek lub pojedynczych skryptów na określonych stronach lub postach:

Jako bezpłatną opcję możesz również rozważyć wtyczkę Asset CleanUp.

Warunkowo załaduj swoje wtyczki, a następnie ponownie uruchom swoją witrynę przez GTmetrix. Jeśli nadal zauważasz nadmiar żądań HTTP, czas przejść do następnej metody.

4. Zminimalizuj żądania stron trzecich

Podczas ładowania witryny przeglądarka użytkownika może pobierać dane z platformy innej firmy, co wymaga dodatkowych żądań HTTP. Ponadto, ponieważ polegasz na serwerze innej firmy, te żądania mogą znacznie spowolnić Twoją witrynę.

Oto kilka przykładów skryptów innych firm:

• Osadzone filmy z YouTube
• Skrypty śledzące Google Analytics
• Czcionki Google
• Reklamy stron trzecich

Podobnie jak zasoby blokujące renderowanie, możesz zastosować atrybuty asynchroniczne lub odroczone do skryptów innych firm.

W przypadku usług takich jak Google Analytics i Google Fonts możesz również rozważyć hosting ich lokalnie za pomocą takich wtyczek:

• OMGF – hostuj lokalnie czcionki Google.
• CAOS – lokalnie hostuj Google Analytics.

5. Zoptymalizuj swoje obrazy

Podobnie jak w przypadku wtyczek, ważne jest usunięcie zbędnych obrazów z witryny. Ponieważ każdy obraz wymaga własnego żądania HTTP, warto zminimalizować liczbę zdjęć w witrynie.

Następnie wszystkie obrazy muszą zostać zoptymalizowane. Chociaż nie zmniejszy to liczby żądań HTTP, zmniejszy ich rozmiar. Może to skutecznie skrócić czas ładowania strony.

Jednym z najlepszych optymalizatorów obrazu jest Optimole. Ta wtyczka freemium oferuje kompleksowy zestaw funkcji optymalizacji obrazu, w tym:

• Udostępnianie obrazów adaptacyjnych, które są zoptymalizowane pod kątem urządzenia każdego użytkownika.
• Kompresowanie obrazów.
• Zmiana rozmiaru obrazów.
• Konwersja obrazów do optymalnych formatów.
• Udostępnianie obrazów za pośrednictwem wbudowanej sieci dostarczania treści (CDN).

Podczas przesyłania nowych obrazów Optimole skompresuje je i zmieni ich rozmiar. Dzięki temu nie będziesz musiał martwić się o duże pliki graficzne wymagające nadmiernych zasobów.

6. Zaimplementuj leniwe ładowanie

Dobrym pomysłem jest również wdrożenie leniwego ładowania. Zapobiega to ładowaniu obrazów i filmów widocznych poniżej strony widocznej na ekranie, dopóki użytkownik nie przewinie strony w dół.

Spowoduje to przeniesienie tych żądań HTTP na późniejszy etap wizyty użytkownika, co pozwala wykonać mniej żądań HTTP przy początkowym ładowaniu i przyspieszyć czas największego malowania zawartości.

WordPress 5.5 dodał wbudowane leniwe ładowanie obrazów przy użyciu leniwego ładowania natywnej przeglądarki.

Jednak nie wszystkie przeglądarki obsługują natywne ładowanie z opóźnieniem. Dodatkowo, użycie dedykowanej wtyczki do leniwego ładowania daje większą kontrolę nad funkcją leniwego ładowania w Twojej witrynie.

Na przykład możesz chcieć wykluczyć kilka pierwszych obrazów z leniwego ładowania, aby uniknąć negatywnego wpływu na czasy największej zawartości.

Jeśli korzystasz z wtyczki Optimole z poprzedniej sekcji, zawiera ona również wbudowaną funkcję do optymalnego leniwego ładowania obrazów witryny.

Możesz także dodatkowo dostosować leniwe ładowanie w ustawieniach wtyczki.

7. Użyj stosu czcionek systemowych

Możesz użyć różnych niestandardowych czcionek, aby Twoja witryna była wyjątkowa. Jednak każda nowa czcionka spowoduje dodanie kolejnego żądania HTTP podczas ładowania witryny.

Z tego powodu najlepiej ograniczyć liczbę używanych niestandardowych czcionek.

Alternatywnie możesz trzymać się stosu czcionek systemowych, który wykorzystuje natywne czcionki z systemu operacyjnego odwiedzającego.

Niektóre motywy, takie jak Neve, GeneratePress lub Astra, umożliwiają powrót do czcionek systemowych. Możesz jednak zmienić stos czcionek za pomocą CSS.

8. Połącz CSS i JavaScript

Innym sposobem na zmniejszenie liczby żądań HTTP dotyczących plików CSS i JavaScript jest połączenie oddzielnych plików CSS i JavaScript w jeden arkusz stylów lub plik.

Dzięki wtyczce Autoptimize będziesz mógł łatwo agregować pliki witryny w zaledwie kilku krokach:

W obszarze Ustawienia > Automatyczna optymalizacja włącz wtyczkę, aby zoptymalizować kod JavaScript i CSS. Następnie zaznacz pola wyboru Aggregate JS-files i Aggregate CSS-files :

Spowoduje to skompilowanie Twojego CSS w jeden plik, a JavaScript w inny. Zamiast wysyłać wiele próśb o wiele plików, funkcja Autooptimize umożliwia Twojej witrynie wysyłanie mniejszej liczby żądań HTTP.

Uwaga – chociaż połączenie CSS i JavaScript to pewny sposób na ograniczenie żądań HTTP, może nie mieć żadnego rzeczywistego wpływu na wydajność w zależności od dostawcy usług hostingowych.

Jeśli twój host korzysta z protokołu HTTP/2 lub nowszego (co obecnie robi większość hostów), właściwie lepiej nie łączyć plików, ponieważ HTTP/2 obsługuje multipleksowanie (co oznacza, że ​​może pobierać wiele plików z serwera bez wielu żądań serwera).

Jeśli nie masz pewności, czy Twój host korzysta z protokołu HTTP/2, możesz skontaktować się z pomocą techniczną.

9. Użyj duszków CSS do łączenia obrazów

W typowej witrynie WordPress każdy obraz jest osobnym plikiem. Jeśli na stronie znajduje się wiele zdjęć, przeglądarka wysyła kilka żądań HTTP. Jednak duszek CSS połączy te obrazy w jeden plik.

CSS Sprites Tool to bezpłatne oprogramowanie do tworzenia i dostosowywania duszków CSS. Aby rozpocząć, upuść obrazy w polu przesyłania:

Po wygenerowaniu duszka CSS dodaj go do biblioteki multimediów WordPress. Następnie możesz użyć wygenerowanego kodu HTML i CSS, aby umieścić każdy obraz na swojej stronie internetowej.

10. Zminimalizuj kod swojej witryny

Zmniejszenie plików witryny nie pomoże zmniejszyć liczby żądań HTTP, ale pomoże zoptymalizować nieuniknione żądania HTTP dotyczące kodu HTML, CSS i JavaScript witryny.

Podczas pisania kodu możesz uwzględnić znaki i odstępy, które poprawiają czytelność. Ponieważ nie są one niezbędne do przetworzenia żądania, możesz je usunąć.

Najprostszym sposobem na zminimalizowanie kodu witryny WordPress jest użycie wtyczki, takiej jak wspomniana wcześniej wtyczka Autoptimize.

Większość wtyczek do buforowania WordPress zawiera również funkcje minimalizacji kodu, w tym WP Rocket, FlyingPress, WP Fastest Cache i inne.

Lub, jeśli korzystasz z CDN Cloudflare, możesz także poprosić Cloudflare o zminimalizowanie twojego kodu.

Po zminimalizowaniu plików witryny żądania HTTP będą miały krótszy czas realizacji. Dzięki lżejszemu kodowi przyspieszysz swoją witrynę i zminimalizujesz nieporęczne żądania.

11. Wyłącz emotikony

Domyślnie emotikony WordPress dodają dodatkowe żądanie HTTP do Twojej witryny. Aby pozbyć się jeszcze jednego żądania HTTP, możesz wyłączyć emotikony WordPress.

Aby uzyskać najprostszą opcję, możesz po prostu zainstalować lekką wtyczkę Wyłącz emotikony.

Alternatywnie możesz dodać ten kod do pliku functions.php motywu potomnego lub wtyczki menedżera kodu, takiej jak fragmenty kodu:

 /** * Disable the emojis */ function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } add_action( 'init', 'disable_emojis' ); /** * Filter function used to remove the tinymce emoji plugin. * * @param array $plugins * @return array Difference betwen the two arrays */ function disable_emojis_tinymce( $plugins ) { if ( is_array( $plugins ) ) { return array_diff( $plugins, array( 'wpemoji' ) ); } else { return array(); } } /** * Remove emoji CDN hostname from DNS prefetching hints. * * @param array $urls URLs to print for resource hints. * @param string $relation_type The relation type the URLs are printed for. * @return array Difference between the two arrays. */ function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) { if ( 'dns-prefetch' == $relation_type ) { /** This filter is documented in wp-includes/formatting.php */ $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://sworg/images/core/emoji/2/svg/' ); $urls = array_diff( $urls, array( $emoji_svg_url ) ); } return $urls; }

Po wdrożeniu wszystkich tych wskazówek powinieneś mieć witrynę z mniejszą liczbą żądań HTTP!

Wykonuj mniej żądań HTTP w swojej witrynie 🎯

Z grubsza przyjmuje się, że im więcej żądań HTTP ma Twoja witryna, tym wolniej się ładuje. Może to negatywnie wpłynąć na wrażenia użytkownika (UX) Twojej witryny, powodując, że odwiedzający opuszczają ją bez przeczytania treści lub zakupu produktu.

Aby przyspieszyć swoją witrynę, chcesz wyeliminować jak najwięcej żądań HTTP i zoptymalizować pozostałe żądania HTTP, aby ładowały się tak szybko, jak to możliwe.

Dzięki wskazówkom zawartym w tym poście możesz wykonać oba zadania i stworzyć szybko ładującą się witrynę dla odwiedzających.

👉 Pamiętaj jednak, że optymalizacja żądań HTTP Twojej witryny to tylko jeden element układanki wydajności. Będziesz także potrzebować wysokiej jakości hostingu WordPress, jeśli chcesz, aby Twoja witryna ładowała się szybko – sprawdź nasze najlepsze podsumowanie hostingu WordPress, aby zobaczyć najlepsze opcje.

Czy masz pytania dotyczące zmniejszenia liczby żądań HTTP w WordPress? Zapytaj nas w sekcji komentarzy poniżej!