Jak zmniejszyć ilość zapytań HTTP w WordPress?
słowa kluczowe:
Im więcej żądań HTTP używa strona WWW, tym wolniej będzie się ładować użytkownikom, którzy ją odwiedzają.
Co to są żądania HTTP?
Każda zbudowana strona WWW składa się z wielu różnych elementów, np. różne pliki obrazów używanych na stronie, arkusze stylów CSS, które kontrolują wygląd, pliki JavaScript itd. Gdy użytkownik odwiedza stronę WWW, to jego przeglądarka pobiera wszystkie zasoby niezbędne dla wywoływanej strony WWW – aby to zrobić, wysyła żądania HTTP do serwera dla każdego z tych zasobów. Serwer odbiera te żądania i następnie odpowiada, np. przesyłając żądane pliki w kierunku przeglądarki.
Każdy element, na który składa się strona WWW może wymagać wysłania oddzielnego żądania / zapytania HTTP. Im więcej żądań HTTP jest potrzebnych do wywołania strony WWW tym wolniej ładuje się strona oraz tym mocniej obciążony jest serwer. Jeśli chcesz, aby Twoja strona WWW ładowała się szybciej, to powinieneś zoptymalizować, czyli zmniejszyć liczbę żądań HTTP.
Warto też wiedzieć, że niektóre żądania HTTP mogą „blokować” inne żądania HTTP. Oznacza to, że przeglądarka nie może rozpocząć wysyłania następnych zapytań, dopóki nie zakończy pobierania wcześniejszych żądań HTTP.
Jak zmniejszyć liczbę żądań HTTP w WordPress?
Najpopularniejsze i najczęściej stosowane są dwie metody optymalizacji ilości żądań HTTP:
- Usuń żądania HTTP. Jeśli to możliwe, należy całkowicie usunąć każde niepotrzebne żądanie HTTP. Na przykład, jeśli masz wtyczkę, która nie dodaje żadnej wartości do Twojej witryny i ładuje własne CSS i JavaScript, po prostu całkowicie usuń tę wtyczkę, aby pozbyć się wszystkich jej żądań HTTP.
- Połącz żądania HTTP. Jeśli masz żądania HTTP, które absolutnie musisz załadować, możesz połączyć je w jeden plik. Na przykład, zamiast sześciu małych plików CSS, możesz połączyć je w jeden większy plik CSS, który nadal będzie ładował się szybciej, ponieważ przeglądarka musi wysyłać mniej żądań (nie zawsze jest to prawdą w przypadku protokołu HTTP / 2 , który omówić poniżej).
Poniższa lista dobry praktyk przy optymalizacji liczby żądań HTTP przy WordPress koncentrują się na usuwaniu żądań HTTP. Na końcu listy znajdziesz sugestie łączenia żądań HTTP. Reguła jest taka, że najpierw warto usunąć wszystko co się tylko da, a następnie połączenie tego co zostało.
Usuń niepotrzebne wtyczki WordPress
Za pomocą funkcji „zbadaj” w przeglądarce internetowej (np. Google Chrome), możesz sprawdzić listę wszystkich żądań niezbędnych do załadowania Twojej strony WWW. Na tej podstawie zidentyfikujesz wtyczki i ocenisz czy czas wykonywania ich zapytań nie jest zbyt długi. Być może będziesz mógł zrezygnować z niektórych wtyczek, które nie są niezbędne i tym samym przyspieszysz ładowanie Twojej strony WWW.
Zamień ciężkie wtyczki na bardziej lekkie
Po usunięciu zbędnych wtyczek w WordPress, następnym sugerowanym krokiem jest sprawdzenie czy możesz zastąpić inne ciężkie wtyczki innymi lżejszymi alternatywnymi. Przykładowo, wtyczki służące do dodawania przycisków do udostępniania w serwisach społecznościowych mogą dodawać wiele zbędnych żądań HTTP. Przy takich wtyczkach warto poszukać innych alternatywnych rozszerzeń, które działają przy użyciu mniejszej ilości żądań HTTP.
Warunkowe ładowanie skryptów, które nie są potrzebne w całym serwisie
Twoja strona WWW może korzystać też z wtyczek, które są potrzebne tylko w określonych częściach witryny, ale mogą w chwili obecnej ładować swoje skrypty wszędzie – co jest zbędne.
Przykładowo, popularna wtyczka Contact Form 7 może być potrzebna tylko na wybranych podstronach serwisu (np. na stronie kontaktowej). Niestety, ale wtyczka Contact Form 7 może ładować swoje skrypty na każdej podstronie, np. mogą być dodawane żądania HTTP na stronach wpisów na blogu, choć nie mają dodanych w swojej zawartości żadnych formularzy kontaktowych.
Sugerowanym rozwiązaniem w przypadku takich wtyczek jest warunkowe ładowanie wtyczek tylko wtedy, gdy są faktycznie potrzebne. Możesz pozwolić, aby Contact Form 7 ładował się tylko na stronach, na których znajdują się formularze kontaktowe i wyłączyć ładowanie na pozostałych podstronach.
Jeśli nie jesteś programistą, to wdrożenie warunkowego ładowania możesz wykonać przy pomocy wtyczek: Asset CleanUp lub Perfmatters.
Usuń niepotrzebne obrazy (i zoptymalizuj pozostałe)
Używanie na stronie WWW ładnych obrazków i innych plików graficznych powoduje, że Twoja witryna jest przyjazna dla użytkownika i bardziej angażująca. Jednak załadowanie każdego obrazu wymaga obsługi osobnego żądania HTTP.
Jeśli korzystasz ze zbyt dużej ilości plików graficznych, to spróbuj usunąć najmniej wartościowe obrazy w celu redukcji ilości żądań HTTP. Być może zabawny GIF będzie zbędnym elementem na podstronie – przemyśl to i znajdź kompromis za każdym razem, gdy chcesz dodać więcej obrazów do swoich treści.
Użyj „lazy loads” przy ładowaniu obrazów i filmów
Popularna funkcja „lazy loads” powoduje, że Twoja witryna będzie czekać na załadowanie obrazów, filmów i ramek iframe aż do momentu, gdy użytkownik przewinie stronę w dół do miejsca, w których znajdują się te elementy. Oznacza to, że wspomniane zasoby nie ładują się od razu i nie ma potrzeby wysyłania żądania HTTP dopóki użytkownik nie przejdzie do części strony, w których wymagane jest ich wyświetlenie.
Ogranicz używanie czcionek niestandardowych lub używaj tylko czcionek systemowych
Przy korzystaniu z niestandardowych czcionek należy zachować ostrożność, ponieważ każdy używany niestandardowy typ czcionki dodaje kolejne żądanie HTTP. Jeśli zamierzasz korzystać z niestandardowych czcionek, to staraj się używać niewielkiej ich liczby. Przykładowo, korzystanie z innej czcionki dla tytułu i treści wpisów lub używanie wszystkich pięciu grubości czcionki może być naprawdę zbędne.
Ta sama zasada obowiązuje przy czcionek ikon, np. Font Awesome lub IcoMoon. Czcionki ikon mogą być przydatne, ale prawdopodobnie nie musisz ładować ich wszystkich bibliotek z ikonami.
Możesz całkowicie wyeliminować żądania HTTP związane z używanymi czcionkami w ramach Twojej strony WWW poprzez korzystanie tylko z czcionek systemowych. Dzięki czemu odwiedzający nie będą musieli ładować żadnych plików czcionek, gdyż już będą je posiadać w swoich systemach.
Wyłącz emotikony WordPress
Domyślnie system WordPress dodaje własne żądanie HTTP związane z ładowaniem biblioteki emotikon. Właściwie jest to tylko jedno pojedyncze żądanie HTTP o małym rozmiarze (5,1 KB), jednak ten plik od dawna jest bolączką fanów optymalizacji systemu WordPress. Najprostszą metodą pozbycia tego jednego żądania jest zainstalowanie i aktywacja bezpłatnej wtyczki: Disable Emojis.
Redukuj / eliminuj żądania HTTP stron trzecich
Przeglądarki internetowe używane przez odwiedzających Twoją witrynę mogą również wysyłać żądania HTTP do zewnętrznych serwerów. Takie żądania mogą być jeszcze bardziej kłopotliwe niż wszystkie opisane w powyższych punktach, ponieważ szybkość ładowania Twojej witryny jest zależna od szybkości tych zewnętrznych serwerów.
Przykładowe popularne zewnętrzne żądania:
- Google Analytics – skrypt śledzenia związany z aplikacją Google Analytics, który wymaga, aby przeglądarki odwiedzających pobierały pliki z serwerów Google w celach statystycznych.
- Osadzone filmy z YouTube – jeśli osadzasz filmy z serwisu YouTube na swoich stronach WWW, to podczas wywoływania tych podstron będzie wykonywanych wiele dodatkowych żądań HTTP do serwerów YouTube.
- Usługi reklamowe innych firm – jeśli korzystasz z zewnętrznych usług reklamowych, to Twoja strona WWW może wysyłać wiele dodatkowych zapytań HTTP do serwerów zewnętrznych.
- Czcionki Google – jeśli na Twojej stronie używasz czcionek pobieranych z serwerów Google, to Twoja strona WWW musi wysłać do nich żądania HTTP, aby załadować pliki używanych czcionek na Twojej stronie WWW.
Połącz obrazy przy pomocy CSS Sprites
Sprites CSS jest techniką optymalizacji stron WWW, która umożliwia połączyć, czyli zredukować ilość żądań HTTP na Twojej stronie WWW. Polega ona na łączeniu wielu mniejszych obrazów, składających się na stronę WWW w jeden większy plik, który przy odpowiednim zastosowaniu plików styli CSS pozwala na pobieranie i wyświetlanie tej samej ilości obrazków z wykorzystaniem o wiele mniejszej ilości zapytań HTTP. Zastosowanie CSS Sprites zapobiega również efektom polegającym na dodatkowym ładowaniu brakujących grafik.
Połącz pliki CSS i JavaScript
Wraz z plikami szablonu WordPress oraz wtyczkami Twoja witryna prawdopodobnie ładuje wiele arkuszy stylów CSS i plików JavaScript – co jest równoznaczne z wieloma żądaniami HTTP. W celu zredukowania ilości żądań związanych ze stylami CSS oraz plikami JavaScript możesz połączyć wszystkie pobierane arkusze CSS w jeden plik.
Wiele wtyczek optymalizacyjnych do WordPress (np. WP Rocket) zawiera wbudowane funkcje, które umożliwiają łączenie zarówno arkuszy styli CSS oraz plików JavaScript.
Odłóż JavaScript blokujący renderowanie
Poprzez odłożenie kodów JavaScript blokujących renderowanie nie zredukujesz liczby żądań HTTPS, ale zoptymalizujesz sposób ich ładowania (np. unikniesz tzw. łączenia krytycznych żądań).
Przy pomocy ładowania asynchronicznego plików możesz zapobiec „blokowaniu” istotnych zasobów, które są potrzebne do szybkiego załadowania widocznej części strony WWW.
Jak zmniejszyć ilość żądań HTTP za pomocą wtyczek?
Do optymalizacji ilości zapytań HTTP na stronach opartych o WordPress możesz skorzystać ze specjalnych wtyczek:
