Jak ograniczyć żądania HTTP / S w WordPress

Oto historia, którą pokochasz, jeśli chcesz przyspieszyć swoją witrynę WordPress.


Innego dnia zbudowałem błyszczącą stronę internetową. Poszedłem na całość i dodałem WooCommerce, Google Tag Manager, OneSignal, helpdesk, Yoast, radio na żywo (o tak, zrobiłem), Cookie Notice, media społecznościowe i kilka innych wtyczek.

Tak jak ty, chciałem zrobić wrażenie na moich gościach, a przynajmniej tak mi się wydawało. Ale potem wszystko stało się nieznośnie powolne. Po wielu udrękach wystrzeliłem GTMetrix aby usunąć problem.

Ku mojemu przerażeniu zobaczyłem to:

wyniki testu prędkości gtmetrix

Czy byłem pod wrażeniem? Piekło dla NAW! Chciałem uzyskać doskonały wynik A i skrócić czas ładowania strony poniżej dwóch sekund.

Więc nacisnąłem przycisk ponownego testowania, ale zgadnij co? Wciąż ten sam obrzydliwy wynik. Byłem przerażony, nawet zły. Ale nie poddaję się łatwo, ponieważ tego rodzaju rzeczy są niedopuszczalne.

Czy wiesz, co potem zrobiłem? Testowałem stronę na Pingdom ponieważ GTMetrix może go ssać. Ale poniżej znajdują się ponure wyniki, jeszcze raz:

wyniki testu szybkości narzędzi pingdom

Byłem zirytowany. Przysłowiowy kolec w moim ciele był błędnym żądaniem HTTP, ponieważ mogłem szybko naprawić wiele innych problemów.

Co gorsza, użyłem motywu e-commerce WordPress, który załadował miliard elementy do budowy strony głównej. W mojej obronie wyglądało to niesamowicie. Niektórzy użytkownicy zgodzili się, że projekt też był trafiony, więc nie popadłem w samą sztuczkę ��

Ale świetny wygląd i wolne prędkości nie idą w parze. Potrzebowałem rozwiązania i szybko.

Jak mogę ograniczyć żądania HTTP w mojej witrynie WordPress?

Za każdym razem, gdy odwiedzasz witrynę WordPress, wiele danych przenosi się między przeglądarką a serwerami witryny. Innymi słowy, WordPress wysyła żądania HTTP do różnych serwerów, aby budować to, co użytkownicy widzą podczas ładowania Twojej witryny.

Jeśli Twoja witryna WordPress wymaga wielu elementów do załadowania, będziesz mieć więcej żądań HTTP i odwrotnie. Więcej żądań HTTP oznacza powolną stronę internetową, słabe wrażenia użytkownika (UX), złe wyniki SEO i niskie współczynniki konwersji.

Witryny WordPress są zazwyczaj dynamiczne, co oznacza, że ​​wyświetlenie witryny w przeglądarce wymaga wielu różnych części. Dobrą wiadomością jest to, że możesz zmniejszyć żądania HTTP i znacznie przyspieszyć swoją witrynę.

W dzisiejszym poście dowiesz się dokładnie, jak to zrobić!

Raporty z GTMetrix i Pingdom zwykle pokazują, gdzie leży problem. W związku z tym przetestuj witrynę za pomocą obu narzędzi, aby znaleźć obszary, które musisz poprawić. Po przygotowaniu raportów możesz zmniejszyć liczbę żądań HTTP / S i przyspieszyć swoją witrynę WordPress.

Krok 1: Declutter

Chłopaki, jeśli masz wiele rzeczy na swojej stronie WordPress, będziesz miał zbyt wiele żądań HTTP. To nie wymaga myślenia. Pierwszym krokiem do ograniczenia żądań HTTP jest odtajnianie.

Rozumiem przez to pozbycie się wszystkich wtyczek, których nie potrzebujesz. Wtyczki WordPress zawierają wiele plików, np. PHP, CSS lub JavaScript (JS). Każdy plik uruchamiany przez każdą wtyczkę utworzy żądanie HTTP.

Jeśli masz mnóstwo wtyczek, na pewno będziesz mieć więcej żądań HTTP. Im mniej wtyczek, tym mniej żądań. To jest po prostu proste.

Co robić?

Przeprowadź audyt swoich wtyczek. Które wtyczki musisz uruchomić, aby uruchomić witrynę? Czy są jakieś wtyczki, których nie potrzebujesz? Czy masz wtyczki, które łączą się z serwerami innych firm? Czy możesz obejść się bez tych wtyczek?

Aby zmniejszyć liczbę żądań HTTP, odinstaluj wszystkie niepotrzebne wtyczki. Jeśli potrzebujesz wtyczki od czasu do czasu, zainstaluj ją tylko wtedy, gdy jej potrzebujesz. Następnie odinstaluj wtyczkę.

To samo dotyczy motywów i treści WordPress, których nie używasz. Wyczyść wszystkie te rzeczy. Usuń wszystko, czego nie potrzebujesz; wpływa na szybkość i bezpieczeństwo Twojej witryny.

Możesz przejść dodatkową milę i ładować wtyczki selektywnie. Na przykład, jeśli potrzebujesz tylko formularza kontaktowego 7 do załadowania strony kontaktowej, możesz zatrzymać ładowanie innych wtyczek na tej konkretnej stronie.

To byłoby niesamowite, nie zgadzasz się? I pomyśleć, że potrzebujesz tylko Wtyczka Asset CleanUp WordPress.

Wtyczka WP Asset CleanUp WordPress

Wtyczka jest łatwa w użyciu i dość wydajna. Lub, jak ujmuje to programista:

„Asset CleanUp” skanuje twoją stronę i wykrywa wszystkie załadowane zasoby. Wszystko, co musisz zrobić, edytując stronę / post, to po prostu wybrać CSS / JS, które nie są konieczne do załadowania, w ten sposób zmniejszając wzdęcia.

Oczyść swoją instalację już hombre; pozbyć się śmieci – uwzględniono spam w komentarzach. O tak, wyeliminuj zepsute linki i zoptymalizuj bazę danych. Są to ważne obszary, które należy rozważyć, jeśli chodzi o zwiększenie szybkości witryny, ale przechodzę do dygresji.

Wróćmy do zmniejszania żądań HTTP.

Krok 2: Zoptymalizuj obrazy

Witryna bez obrazów jest, no cóż, ponura. Mówią, że obraz mówi tysiąc słów, i to jest fajne. Ale każdy obraz odpowiada na żądanie HTTP. Aby dodać soli do obrażeń, obrazy są na pierwszym miejscu wśród elementów, których ładowanie zajmuje dużo czasu.

Nie możemy jednak zignorować faktu, że większość motywów WordPress (czytane witryny) opiera się na obrazach i wiele obrazów w tym zakresie. W związku z tym, w jaki sposób można ograniczyć żądania HTTP, optymalizując obrazy?

Na początek pozbądź się wszystkich zdjęć, których nie używasz. Bądźcie bezwzględni; pozbyć się tego wzdęcia – nie potrzebujesz go. Następnie skompresuj i zoptymalizuj obrazy, aby usunąć niepotrzebne dane z plików.

Wtyczka kompresji WP

Chociaż istnieje wiele wtyczek do wyboru, naprawdę lubimy WP Compress. Chociaż jest to usługa premium, potężna automatyczna optymalizacja obrazów, bezstratna kompresja, przetwarzanie w chmurze w celu zmniejszenia obciążenia serwera, obsługa obrazów WebP, automatyczna zmiana rozmiaru i inne sprawiają, że inwestycja jest tego warta (sprawdź naszą recenzję, aby dowiedzieć się więcej). Dodatkowo możesz uzyskać 100 zdjęć za darmo – co najmniej możesz spróbować.

Optymalizacja obrazów nie zmniejsza samych żądań HTTP, ale zmniejsza rozmiar plików graficznych, co przekłada się na lepszą prędkość stron w dół linii.

Alternatywnie, aby zmniejszyć liczbę żądań HTTP, wykorzystaj moc Duszki obrazu CSS. Dla niewtajemniczonych duszek jest zbiorem obrazów umieszczonych w jednym pliku obrazu.

Następnie za pomocą sztuczek CSS możesz wybrać, która część obrazu ma zostać wyświetlona. Ale w jaki sposób zmniejsza to liczbę żądań HTTP? Oto analogia.

Powiedz, że potrzebujesz pięciu zdjęć na swojej stronie głównej. Aby załadować witrynę, instalacja WordPress spowoduje pięć podróży na serwer w celu pobrania obrazów. Teraz, jeśli umieścisz wszystkie pięć obrazów w jednym pliku obrazu (duszka), twoja instalacja WordPress zrobi tylko jedną podróż.

Czy widzisz, gdzie idę z tym? Im mniej podróży, tym mniej żądań HTTP. Najlepsze jest to, że nie musisz się pocić, aby tworzyć i wdrażać obrazki CSS. Możesz użyć narzędzia takiego jak CSS Sprite Generator. Wdrożenie ikonek CSS jest łatwe, pod warunkiem, że znasz się na CSS.

Pro Wskazówka: Możesz zapomnieć o duszkach graficznych CSS, jeśli witryna korzysta z protokołu HTTP / 2, który obsługuje asynchroniczne ładowanie obrazów i skryptów. GTMetrix nie bierze pod uwagę HTTP / 2 przy ocenie wydajności, więc nie martw się, jeśli wydaje się, że twoje zdjęcia generują mnóstwo żądań HTTP.

Ale mówię: Jeśli duszki obrazu CSS mogą znacznie zmniejszyć żądania HTTP w Twojej witrynie i wiesz, jak to zaimplementować, skorzystaj z niego i skreśl te dodatkowe sekundy poza czasem ładowania strony. Czy masz HTTP / 2.

W końcu pojedynczy plik obrazu wymaga pojedynczego żądania HTTP. Dziesięć osobnych obrazów wymaga 10 żądań HTTP i tak dalej. Wiem, że masz dryf.

Krok 3: Połącz i zminimalizuj HTML, CSS i JavaScript

Główną przyczyną wielu żądań HTTP na mojej stronie WordPress były zewnętrzne pliki CSS i JavaScript. Tak, walczyłem z 43 skryptami JS i 22 plikami CSS. To aż 66 żądań HTTP.

Spośród około 130 żądań HTTP zewnętrzne żądania CSS i JavaScript stanowiły około 51% problemu! To po prostu śmieszne. Dzięki, GTMetrix, uderz mnie pięścią.

Jeśli połączę i zminimalizuję te 44 pliki JS i 22 CSS, mogę znacznie zmniejszyć moje żądania HTTP, rozmiar strony internetowej i czas ładowania. Ale na czym polega ten „łączący” i „minimalizujący” biznes?

Według Raelene Morey of Words by Birds (jestem wielkim fanem ��), minimalizacja to proces „… usuwania niepotrzebnych znaków, takich jak komentarze, formatowanie, białe znaki i nowe wiersze z plików HTML, CSS i JavaScript, które nie są potrzebne do kod do wykonania. ”

Minimalizacja zmniejsza rozmiar pliku, eliminując wszystkie pozostałe znaki, pozostawiając tylko kod. Ale jeśli masz ponad 66 zewnętrznych skryptów, minimalizacja nie zrobi wiele, aby zminimalizować żądania HTTP. W tym celu musisz połączyć pliki CSS i JavaScript.

Ponownie Raelene mówi:

Tymczasem łączenie plików wygląda tak, jak się wydaje. Na przykład, jeśli twoja strona ładuje 5 zewnętrznych plików CSS i 5 zewnętrznych plików JavaScript, połączenie CSS i JavaScript w jeden osobny plik spowoduje tylko 2 żądania zamiast 10.

Rozumiesz? Mam taką nadzieję. Łączenie plików zmniejsza liczbę żądań HTTP. Z drugiej strony, minimalizacja zmniejsza rozmiar pliku. Połącz oba, a zabijesz dwa ptaki tym samym kamieniem.

Czy są jakieś wtyczki? Tak oczywiście!

WP Rocket WordPress Cache Plugin

Informacje i pobieranie Zobacz wersję demonstracyjną

Istnieje mnóstwo wtyczek WordPress do łączenia i minimalizowania plików. Dobrym przykładem jest wtyczka WP Rocket. Jest to w zasadzie jedna z najlepszych wtyczek do buforowania, oferująca funkcje łączenia i zmniejszania plików za pomocą kilku kliknięć.

Kolejny popularny (i wolny) jest opcja Automatyczna optymalizacja podłącz.

Nawiasem mówiąc, zmniejszając liczbę zewnętrznych plików CSS i skryptów JS? Na przykład, a nie wymieniamy tutaj nazwisk, czy naprawdę potrzebujesz platformy do komentowania innych firm? Czy potrzebujesz wtyczki do radia na żywo??

Nie ma znaczenia, co mówię, wyeliminuj wszystkie zewnętrzne skrypty i pliki, których nie potrzebujesz.

Krok 4: Dostosuj pliki CSS i JavaScript blokujące renderowanie

W niektórych przypadkach łączenie plików może nie być opcją, szczególnie w przypadku plików i skryptów innych firm, które często się zmieniają. W takich przypadkach możesz odroczyć ładowanie takich zasobów. HTTP / 2 obsługuje asynchroniczne ładowanie plików, co oznacza, że ​​wszystkie pliki ładują się jednocześnie.

Jeśli z jakiegoś powodu nie trwa ładowanie asynchroniczne (być może nie używasz HTTP / 2 lub skrypty nie są asynchroniczne), pliki te mogą znacznie spowolnić Twoją witrynę.

Pamiętaj, że strony ładują się od góry do dołu. Jeśli masz CSS i JS blokujące renderowanie u góry strony, przeglądarka przestanie się ładować, dopóki pliki nie zostaną w pełni załadowane. W związku z tym użytkownicy będą widzieć pustą stronę, dopóki skrypty nie zostaną załadowane, co zajmuje dużo czasu.

W jaki sposób? Przenieś wszystkie skrypty blokujące renderowanie z góry na dół strony internetowej. Ale bądź ostrożny tutaj; nie musisz przenosić wszystkich skryptów na dół. Mówię to, ponieważ Twoja strona może wymagać CSS i JS, aby zapewnić bardzo wciągające wrażenia.

Jeśli odłożysz niektóre pliki CSS lub JavaScript, użytkownicy mogą zobaczyć zniekształconą wersję strony, dopóki strona nie zostanie w pełni załadowana, co jest dokładnie przeciwieństwem tego, co chcesz osiągnąć.

Dlatego odkładaj tylko skrypty, które nie są konieczne do załadowania strony. W ten sposób użytkownicy nie będą czekać wieki na załadowanie strony. Dlaczego? Ponieważ będziesz potrzebować mniej żądań HTTP, aby dostarczyć wiadomość.

Nie zmniejsza samych żądań HTTP (ponieważ wszystkie skrypty i pliki zostaną w końcu załadowane), ale zmniejsza liczbę żądań HTTP potrzebnych do renderowania strony.

To bardzo przypomina leniwe ładowanie obrazów; obraz jest ładowany tylko wtedy, gdy znajduje się w rzutni, a nie gdy ładuje się reszta (i najważniejsze części) strony.

Nawiasem mówiąc, poprawienie CSS i JS blokujących renderowanie może ujawnić pliki i skrypty, których nie potrzebujesz budować strony internetowej.

Na przykład, jeśli jakiś skrypt JS zewnętrznego udostępniania społecznościowego trwa długo, możesz go odroczyć. Ponadto możesz go wyeliminować i włączyć udostępnianie społecznościowe w swoim motywie.

Wyeliminujesz żądania HTTP i przyspieszysz swoją witrynę, zachowując tę ​​samą funkcjonalność. Rozumiem, że funkcje kodowania w twoim motywie to duże wyzwanie dla większości początkujących, więc skontaktuj się z zaawansowanym użytkownikiem WP lub deweloperem.

Alternatywnie możesz użyć wtyczki WP Rocket do naprawy skryptów blokujących renderowanie, ale bądź ostrożny. Przeczytaj ich dokumentację, ponieważ jeśli coś zepsujesz, możesz łatwo zepsuć swoją witrynę.

Czy są dostępne bezpłatne opcje? Oczywiście! Pracujemy z WordPress, pamiętasz? Możesz użyć Asynchroniczny JavaScript, wśród innych wtyczek.

Krok 5: Użyj buforowania i CDN

Czy wiesz, że buforowanie i sieci CDN mogą zmniejszyć liczbę żądań HTTP? Na początku nie wydaje się to faktem, ale jeśli weźmiesz pod uwagę to, co dzieje się za kulisami, możesz użyć buforowania i CDN na swoją korzyść.

Buforowanie polega na przechowywaniu plików statycznych w przeglądarce, aby użytkownicy nie pobierali plików podczas kolejnych wizyt. Załóżmy, że masz wtyczkę pamięci podręcznej, a użytkownik pobiera treść z pamięci podręcznej przy pierwszej wizycie.

Podczas kolejnych wizyt Twoja witryna nie będzie wysyłać próśb do serwera. Zamiast tego będzie obsługiwał buforowane zasoby z przeglądarki, zmniejszając żądania HTTP i zwiększając szybkość witryny.

CDN (lub doontent reelivery N.etwork) to sieć serwerów rozmieszczonych na całym świecie. CDN również korzysta z buforowania, ale dla jeszcze większych prędkości dostawca CDN obsługuje Twoje buforowane treść z serwera najbliższego odwiedzającemu.

Krótsze odległości oznaczają szybsze dostarczanie treści, a buforowanie oznacza, że ​​Twoja witryna nie musi ponownie pobierać tej samej treści z centralnego serwera. Czy to ma dla ciebie sens??

Wtyczka Cloudflare CDN

A najlepsze jest to, że istnieje wiele bezpłatnych opcji CDN (lub przynajmniej bezpłatne wersje próbne, dzięki czemu można dosłownie zobaczyć różnicę, którą robi). W WPExplorer używamy i bardzo polecamy CLoudflare, ale wybierz CDN, który Twoim zdaniem działa najlepiej dla Ciebie.

Bonus: Sprawdź, czy obsługiwany jest protokół HTTP / 2

Być może robisz wszystko, aby zmniejszyć liczbę żądań HTTP, ale twój host może być przyczyną twoich nieszczęść. Nie zdziw się; pytając i myśląc, kto – w obecnych czasach – używa niczego poza HTTP / 2?

Prawdopodobnie nawet nie wiesz co HTTP / 2 chodzi o. Na początek HTTP / 2 obsługuje między innymi asynchroniczne ładowanie plików. Ma inne zalety w porównaniu z HTTP 1.0, ale to lekcja na kolejny dzień.

Jeśli używasz HTTP 1.0 lub niższej, zauważysz znaczną liczbę żądań HTTP.

Nie bądź szybki w osądzaniu; Widziałem dostawców usług hostingowych, którzy nadal używają HTTP 1.0 i starszych wersji PHP. Tak, nawet z widocznymi zaletami HTTP / 2 i PHP 7. Nawet nie blefuję; niektórzy z ich klientów przychodzą do mnie, gdy niektóre z ich wtyczek nie działają, co jest irytujące!

Ale tak naprawdę dlaczego? Fakt, że niektórzy dostawcy hostingu nie przejmują się faktem, że PHP 5.6 jest przestarzały i ma luki w zabezpieczeniach, to coś innego. A jeśli nie obsługują HTTP / 2, jest to naprawdę dla Ciebie przełom.

Test KeyCDN HTTP / 2

Skontaktuj się z gospodarzem lub użyj Narzędzie KeyCDN aby sprawdzić, czy twój serwer obsługuje HTTP / 2. Najlepszy hosting obsługuje HTTP / 2 i najnowszą wersję PHP. Jeśli Twój host opóźnia się w obu przypadkach, poproś go o uaktualnienie lub wybranie lepszego hosta internetowego.

Ostatnie słowa

Ograniczanie żądań HTTP w witrynie WordPress polega na eliminowaniu rzeczy, których nie potrzebujesz. Jeśli masz wiele rzeczy na swojej stronie WordPress, będziesz mieć dużo żądań HTTP i stosunkowo wolne prędkości stron.

Aby zmniejszyć liczbę żądań HTTP, odfiltruj witrynę, zoptymalizuj obrazy, napraw skrypty blokujące renderowanie, użyj buforowania i upewnij się, że Twój host obsługuje HTTP / 2. Poza tym staraj się tworzyć proste i czyste strony internetowe, które nie wymagają ładowania wielu zasobów.

Jeśli masz pytania, daj nam znać w sekcji komentarzy poniżej. Pozdrawiam szybsze strony internetowe i wspaniałą przyszłość!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me