Jak składać mniej żądań HTTP w WordPress i GTmetrix YSlow

Musisz złożyć mniej żądań HTTP na swojej stronie WordPress?


Oznacza to po prostu, że musisz zmniejszyć liczbę elementów (żądań) ładowanych w Twojej witrynie.

Wykonuj mniej żądań HTTP

Łączenie plików CSS i JavaScript może pomóc, ale istnieją inne optymalizacje, które mogą zmniejszyć żądania HTTP, takie jak selektywne wyłączanie wtyczek, które nie muszą być ładowane na określonych stronach, wyłączanie skryptów i stylów WooCommerce na stronach innych niż eCommerce lub unikanie wysokiego procesora wtyczki generujące dużą liczbę żądań i spowalniające witrynę.

Zgłaszanie mniejszej liczby żądań HTTP jest zaleceniem w GTmetrix, Pingdom i innych narzędziach do testowania prędkości. Poniższe zalecenia pomogą zmniejszyć liczbę żądań i przyspieszą działanie witryny.

1. Połącz arkusze stylów CSS + JavaScript

Łączenie arkuszy stylów CSS + JavaScript oznacza, że ​​musisz skopiować / wkleić wszystko z plików CSS do 1 pojedynczego pliku. Dzięki temu przeglądarki mogą wysyłać 1 pojedyncze żądanie pliku CSS zamiast wielu żądań. Większość wtyczek pamięci podręcznej ma opcję łączenia plików CSS + JavaScript.

Krok 1: W ustawieniach wtyczki pamięci podręcznej znajdź opcję łączenia i minimalizowania CSS + JavaScript.

Krok 2: Włącz każde ustawienie pojedynczo i uzyskaj wyniki testu w GTmetrix.

Minify Połącz pliki CSS

Minify Połącz pliki JavaScript

Krok 3: Sprawdź widoczne błędy w swojej witrynie. Jeśli zobaczysz błędy, wyświetl kod źródłowy, znajdź problematyczne pliki i wyklucz je z ustawień minimalizacji CSS lub JavaScript. Na przykład jeśli suwak zniknie po włączeniu określonego ustawienia, sprawdź pliki suwaka w kodzie źródłowym i wyklucz plik powodujący problemy. Jeśli nie widzisz błędów, nie ma takiej potrzeby.

Alternatywnie możesz ręcznie połączyć swoje pliki CSS w WordPress pod Wyglądem > Edytor motywów. Wystarczy skopiować i wkleić zawartość we wszystkich plikach do 1 pojedynczego pliku CSS.

Pliki CSP WordPress

2. Selektywnie wyłącz wtyczki

Wiele wtyczek działa w całej witrynie, nawet na stronach, na których nie są potrzebne.

Formularze kontaktowe, udostępnianie społecznościowe, fragment rozszerzony, suwak i niektóre inne wtyczki muszą być ładowane tylko dla niektórych typów treści. Możesz je wyłączyć wszędzie za pomocą Asset CleanUp.

Wyłączenie wtyczek na stronach, na których nie trzeba ich ładować, powoduje mniej żądań HTTP. Nie ogranicza się to do wtyczek; skrypty i style można również wyłączyć na niektórych stronach (np. skrypty, style, fragmenty koszyków WooCommerce można wyłączyć na stronach innych niż eCommerce).

Krok 1: Zainstaluj Asset CleanUp lub Perfmatters (oba pozwalają selektywnie wyłączać wtyczki).

Krok 2: Edytuj stronę lub post, przewiń w dół do sekcji Asset CleanUp i sprawdź, które pliki CSS + JavaScript ładują się na stronie. Mogą to być wtyczki, motywy lub zewnętrzne skrypty.

Wyłącz skrypty zewnętrzne WordPress

Krok 3: Wyłącz wszystkie wtyczki i prośby, których nie potrzebujesz na tej stronie. Możesz je wyłączyć na 1 stronie, w całej witrynie, według typu postu lub użyć RegEx (wyrażenia regularne), aby wyłączyć je dla określonych wzorców adresów URL. RegEx jest dołączony tylko do Perfmatters lub Asset CleanUp Pro.

3. Wyłącz skrypty, style, fragmenty koszyka WooCommerce

Witryny WooCommerce naturalnie generują więcej żądań HTTP.

Zwykle nie tylko wymagają więcej wtyczek, ale także ładują dodatkowe skrypty WooCommerce, style, i fragmenty koszyka. Tak jak możesz selektywnie wyłączyć wtyczki w poprzednim kroku, możesz również selektywnie wyłączyć żądania WooCommerce ładujące się w całej witrynie.

Używając Asset CleanUp lub Perfmatters, wyłącz je na stronach, na których nie trzeba ich ładować:

Asset CleanUp WooCommerce

Alternatywnie, Perfmatters pozwala je wyłączyć jednym kliknięciem:

perfmatters optymalizacja woocommerce

4. Unikaj wtyczek o wysokiej wydajności procesora

Wtyczki o wysokiej wydajności procesora mogą generować mnóstwo żądań HTTP.

Są to zwykle udostępnianie społecznościowe, statystyki (analizy), suwaki, portfele, narzędzia do tworzenia stron, kalendarze, czaty i wtyczki formularzy kontaktowych. Zasadniczo unikaj wtyczek, które pobierają zewnętrzne żądania z zewnętrznych stron internetowych, uruchamiają trwające procesy lub po prostu długo się ładują.

Krok 1: Sprawdź wolne wtyczki w GTmetrix Waterfall lub Monitor zapytań.

Slow-WordPress-Plugin

Krok 2: Unikaj znanych wtyczek o wysokiej wydajności procesora.

  1. Dodaj
  2. Monitorowanie oszustw związanych z kliknięciami AdSense
  3. Kalendarz wydarzeń All-in-One
  4. Backup Buddy
  5. Beaver Builder
  6. Lepsze mapy witryn Google XML WordPress
  7. Broken Link Checker (użyj Dr. Link Check)
  8. Stały kontakt dla WordPress
  9. Formularz kontaktowy 7
  10. Wyświetl wszystkie 65 Wolne wtyczki

Krok 3: Zastąp powolne wtyczki szybszymi, lekkimi wtyczkami. Wymagane są badania i testy.

5. Zamień wtyczki na kod

Możesz uniknąć wielu wtyczek, zastępując je kodem.

Przykłady:

  • Czcionki Google: hostuj czcionki lokalnie
  • Kod śledzenia Google Analytics: wstaw ręcznie
  • Spis treści: zaprojektuj go ręcznie w HTML + CSS
  • Osadzone tweety lub mapy Google: zamiast tego wykonaj zrzut ekranu
  • Wbudowany widżet Facebook: zamień na rzeczywisty widżet Facebook

Wtyczki konsolidujące pomaga również. Klasycznym przykładem jest użycie WP Rocket, który zawiera lokalnie hostowanie czcionek, analitykę i Facebook Pixel, leniwe ładowanie obrazów + wideo, czyszczenie bazy danych, ładowanie wstępne, kontrola pulsu oraz integracja zarówno Cloudflare, jak i wielu CDN. W przypadku innych wtyczek pamięci podręcznej (ponieważ większość z nich nie ma tych funkcji) trzeba zainstalować 6-7 dodatkowych wtyczek, aby uzyskać te optymalizacje prędkości, gdy są one wbudowane w WP Rocket.

6. Wyeliminuj zewnętrzne skrypty

Zewnętrzne skrypty to wszystko, co pobiera żądania z zewnętrznych stron internetowych.

Czcionki Google można łączyć w 1 plik. Filmy można ładować leniwie, a ramka iframe zastępuje obraz podglądu. Wiele skryptów można zoptymalizować, a innych nie. Poniżej kilka przykładów.

  • Czcionki Google: łącz czcionki i hostuj je lokalnie za pomocą wtyczek takich jak WP Rocket, Autoptimize, OMGF, Self-Hosted Google Fonts i Asset CleanUp.
  • Google Analytics: kod śledzenia hosta lokalnie w WP Rocket / CAOS Analytics.
  • Google AdSense: ładuj asynchronicznie i wypróbuj Cloudflare Rocket Loader.
  • mapy Google: zrób zdjęcie mapy Google i dołącz link do wskazówek dojazdu, gdy ludzie klikną obraz (wygląda tak samo dobrze jak mapa)!
  • Menedżer tagów Google: zwykle wyrządza więcej szkody niż pożytku, próbując połączyć wiele skryptów. Powinien być stosowany tylko w przypadku dużych, niezoptymalizowanych witryn.
  • Osadzone filmy wideo: użyj WP Rocket lub WP YouTube Lyte, aby leniwie ładować filmy i zastąpić ramkę iframe obrazem podglądu (filmy są bardzo ciężkim elementem).
  • Osadzone widżety + posty: rób zrzuty ekranu zamiast ich osadzać.
  • Facebook Pixel: WP Rocket może dodawać buforowanie przeglądarki do Facebook Pixel.
  • Gravatars: nic nie działało dla mnie oprócz wyłączenia Gravatars (WP Rocket nie używa ich również na swoim blogu). Możesz jednak wypróbować Harry’ego, FV lub Optimum Gravatar Cache lub spróbować łamać lub ukrywać rozwijane komentarze.
  • Wtyczki udostępniania społecznościowego: niesławnie generuj żądania z Facebooka, Twittera i sieci społecznościowych, aby odświeżyć się jak liczba. Wypróbuj szybszą wtyczkę jak Mops Społeczny, Mashsharer, Snap SpołecznyAddToAny, WP Udostępnianie społecznościowe, lub Łatwy udział społecznościowy

7. Połącz czcionki Google

Czcionki Google można łączyć w celu wygenerowania 1 żądania zamiast wielu żądań.

Google-Fonts-GTmetrix

Następujące wtyczki mają opcje optymalizacji czcionek Google:

  • WP Rocket
  • Asset CleanUp
  • Automatyczna optymalizacja
  • OMGF

Najlepszą metodą jest jednak lokalne hostowanie czcionek Google. Obejmuje to pobieranie czcionek bezpośrednio ze strony internetowej Google Fonts, przy minimalnej liczbie czcionek i ich grubości. Następnie użyj narzędzia takiego jak Transfonter lub konwertuj czcionki na pliki czcionek internetowych. Następnie prześlesz nowe pliki czcionek internetowych do folderu wp-content / uploads, dodasz niestandardową czcionkę do CSS i przetestujesz czcionkę, aby upewnić się, że działa. Ponownie zobacz ten link, aby uzyskać pełny samouczek.

Konwersja czcionek Transfonter-Google-Font

7. Zminimalizuj HTML, CSS, JavaScript

Minimalizowanie plików jest zwykle wykonywane przez wtyczkę pamięci podręcznej (patrz krok 1).

Ale czasami może to uszkodzić twoją stronę. W takim przypadku należy przetestować każde ustawienie jeden po drugim, poszukać problematycznych plików w kodzie źródłowym, a następnie wykluczyć te pliki z minimalizacji za pomocą wtyczki pamięci podręcznej. Jeśli nie widzisz widocznych błędów, nie musisz tego robić.

8. Zoptymalizuj dostawę CSS

To powinno naprawić zasoby blokujące renderowanie element w PageSpeed ​​Insights.

WP Rocket, Autoptimize i inne podobne wtyczki powinny mieć opcję optymalizacji dostarczania CSS. Po prostu przejdź do swoich ustawień i upewnij się, że masz to włączone, i powinno to naprawić.

Zoptymalizuj dostarczanie CSS

9. Asynchronicznie odkładaj / ładuj połączone pliki JavaScript

Asynchroniczny JavaScript oznacza ładowanie plików po strona została zakończona pobieranie.

Można to zrobić za pomocą WP Rocket lub Asynchroniczny JavaScript i powinien naprawić usuń element JavaScript blokujący renderowanie. Async JavaScript daje pełną kontrolę nad skryptami, do których ma zostać dodany atrybut „async” lub „odrocz”, natomiast WP Rocket odracza JavaScript automatycznie za pomocą 1 kliknięcia.

Pliki JavaScript

10. Leniwe ładowanie filmów

Osadzone filmy wideo to zasoby zewnętrzne, które generują żądania HTTP.

Ładowanie może potrwać ponad 2 sekundy! Nie możesz ich całkowicie wyeliminować, ale możesz opóźnij ładowanie filmów do momentu przewinięcia w dół (opóźnione ładowanie) i kliknięcia przycisku odtwarzania (lekkie osadzenie).

Masz tutaj kilka opcji: możesz użyć WP Rocket, aby włączyć leniwe ładowanie i zastąpić iframe YouTube obrazem podglądu. Ale jeśli nie masz WP Rocket, możesz albo spróbować Wtyczka WP YouTube Lyte lub śledź to samouczek na temat lekkich osadzeń w YouTube. Oba działają dobrze.

Oto przykład (i świetny film na WordPress Speed):

11. Dodaj CDN

Sieci CDN mogą pomóc w tworzeniu mniejszej liczby żądań HTTP.

Zamiast zmuszać serwer pochodzenia do odpowiedzi na żądanie, centra danych CDN odciążą przepustowość, jednocześnie zmniejszając obciążenie serwera pochodzenia. Cloudflare jest bezpłatny, więc nie musisz się zastanawiać.

Wiele CDN = więcej centrów danych = szybsze dostarczanie treści i większe odciążanie zasobów. Wiele osób zaczyna od Cloudflare, a następnie w końcu korzysta z StackPath podczas korzystania z wielu CDN (obecnie używam obu). KeyCDN jest również dobry. Nazywa się to „łańcuchem” CDN.

Konfigurowanie wielu sieci CDN
Dzięki Cloudflare przydzielają ci 2 serwery nazw, które zmieniasz w rejestrze domeny. W przypadku innych CDN, takich jak StackPath i KeyCDN, przypisują ci adres URL CDN, który wkleisz w pole URL CDN we wtyczce pamięci podręcznej (większość z nich ma) lub użyj CDN Enabler.

Wiele CDN

12. Minimalizuj przekierowania

Niepotrzebne przekierowania mogą powodować dodatkowe żądania HTTP.

Musisz spojrzeć na raport GTmetrix, aby zobaczyć, co powoduje ten błąd. Czy jest generowany przez zewnętrzny skrypt lub wtyczkę w Twojej witrynie? Czy próbowałeś zoptymalizować ten skrypt lub szukasz bardziej lekkiej wtyczki? Czy to dlatego, że zmieniłeś wersję domeny na inną niż WWW lub HTTPS, ale nie zaktualizowałeś wszystkich linków / obrazów w witrynie, aby odzwierciedlić nową wersję?

Minimalizuj błędy przekierowań

Najczęstsze przyczyny

  • Złe wtyczki
  • Zewnętrzne skrypty
  • Zmieniono na WWW kontra inne niż WWW, ale nie zaktualizowano linków
  • Zmieniono na HTTPS w porównaniu z innymi niż HTTPS, ale nie zaktualizowano linków

13. Optymalizuj obrazy

Aby ograniczyć żądania HTTP spowodowane przez obrazy, istnieją 3 podstawowe sposoby optymalizacji obrazów:

Podaj skalowane obrazy: zmiana rozmiaru dużych obrazów, aby były mniejsze. GTmetrix mówi ci, które obrazy są zbyt duże oraz o prawidłowych wymiarach, do których powinny zostać przycięte / zmienione. Spróbuj utworzyć ściągę wymiarów obrazu, mierząc wymiary suwaków, zdjęć blogu o pełnej szerokości, widżetów i innych obszarów witryny. Następnie przed przesłaniem upewnij się, aby zmienić rozmiar zdjęć do tych prawidłowych wymiarów. Jeśli to zrobisz, nigdy nie powinieneś podawać skalowanych błędów obrazu.

Optymalizuj obrazy (bezstratna kompresja): użyj wtyczki takiej jak ShortPixel (zalecane), Smush lub Imagify, aby skompresować obrazy. Chociaż te wtyczki mówią, że są bezstratne, czasami możesz zauważyć niewielką utratę jakości. Dlatego najlepiej wykonać kopię zapasową zdjęć i przetestować kilka z nich, zanim zbiorczo zoptymalizujesz wszystkie obrazy w swojej witrynie, aby upewnić się, że jesteś zadowolony z jakości.

Określ wymiary obrazu: dodaj szerokość + wysokość do kodu HTML lub CSS obrazu. Odbywa się to automatycznie w Edytorze wizualnym, ale nie w niestandardowym kodzie HTML, niektórych programach do tworzenia stron i ewentualnie w innych obszarach witryny WordPress. GTmetrix pokaże, które obrazy mają te błędy i poda ich prawidłowe wymiary. Aby naprawić błąd, musisz zlokalizować obraz na pulpicie WordPress, edytować HTML lub CSS, a następnie dodać szerokość + wysokość.

Nadal trzeba składać mniej żądań HTTP?

Jeśli nadal potrzebujesz pomocy, zostaw mi komentarz. The WordPress Przyspiesz grupę na Facebooku jest również pomocny lub możesz zatrudnić nas do usług prędkości WordPress z raportami przed + po raportach GTmetrix.

WordPress Przyspiesz grupę na Facebooku

Często Zadawane Pytania

&# x1f680; Co powoduje żądania HTTP?

Żądania HTTP to wszystko, co tworzy żądanie do serwera (na przykład pojedynczy obraz tworzy 1 żądanie). Karta Wodospad GTmetrix informuje, że wszystkie żądania ładują się na stronie.

&# x1f680; Jakie są 5 rzeczy, które możesz zmniejszyć, aby żądać HTTP?

5 łatwych rzeczy, które możesz zrobić, to połączyć pliki CSS + JavaScript, leniwe ładowanie obrazów i filmów, unikanie naszej listy wtyczek o wysokiej wydajności procesora, selektywne wyłączanie wtyczek na niektórych stronach / postach za pomocą Perfmatters lub Asset CleanUp i optymalizację czcionek.

&# x1f680; Czy wtyczka pamięci podręcznej pomoże zredukować żądania HTTP?

Tak, dobra wtyczka pamięci podręcznej powinna pomóc zminimalizować i połączyć pliki, a także zmniejszyć żądania HTTP przy prawidłowej konfiguracji. Mam samouczki dotyczące prawie każdej wtyczki pamięci podręcznej.

&# x1f680; Czy naprawienie innych elementów GTmetrix ograniczy żądania HTTP?

Tak, w wielu przypadkach będzie to szczególnie minimalizować i łączyć pliki, eliminować błędy przekierowania i korzystanie z sieci CDN może również pomóc.

&# x1f680; Która wtyczka pamięci podręcznej najbardziej ogranicza żądania HTTP i jak ją skonfigurować?

Polecam WP Rocket, który został oceniony na pierwszym miejscu w większości ankiet na Facebooku i ma więcej funkcji optymalizacji prędkości niż większość wtyczek pamięci podręcznej, dlatego zwykle daje lepsze wyniki i czasy ładowania w GTmetrix. Sprawdź mój poradnik na temat konfigurowania ustawień WP Rocket.

Dziękuje za przeczytanie :)

Twoje zdrowie,
Tomek

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map