Optymalizacja WordPress – jak to wykonać?

Promocja na hosting WordPress

Im więcej żądań HTTP używa strona WWW, tym wolniej będzie się ładować użytkownikom, którzy ją odwiedzają. Jak zmniejszyć ilość zapytań HTTP w WordPress? Dowiedz się z tego artykułu.

Jeśli zmniejszysz liczbę żądań HTTP to przyspieszysz ładowanie witryny, poprawisz jej wydajność, a być może również zwiększysz jej pozycje w wynikach wyszukiwania Google.

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.

Bądź ostrożny przy ustawianiu warunkowego ładowania, ponieważ „wycięcie za dużo” może spowodować problemy, np. jeśli przypadkowo wyłączysz skrypty, które są naprawdę niezbędne. Jeśli nie czujesz się pewnie, możesz zatrudnić programistę, który Ci w tym pomoże.

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.

Przed dodaniem obrazu do swoich treści pamiętaj, aby zmienić jego rozmiar i skompresować. Nie spowoduje to zmniejszenia ilości zapytań HTTP, jednak zmniejszy ich rozmiar, co również ma wpływ na szybsze ładowanie strony WWW.

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.

WordPress od wersji 5.5 został wyposażony w natywne rozwiązanie „lazy loads”. Możesz też skorzystać z popularnych wtyczek optymalizacyjnych, które również umożliwiają uruchomienie „lazy loads” w ramach całej Twojej strony WWW.

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.

    Możesz zrezygnować z używania Google Analytics i korzystać z modułów statystyk dostępnych na Twoim serwerze. Jeśli jednak Google Analytics jest dla Ciebie niezbędne (np. z uwagi na dodatkowe zaawansowane integracje), możesz eksperymentować z hostowaniem tych skryptów lokalnie. Wtyczki optymalizacyjne WordPress takie jak: WP Rocket mają wbudowane narzędzia do lokalnego hostowania skryptów zewnętrznych takich jak Google Analytics.

  • 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.

    Możesz włączyć „lazy loads” w celu wstrzymania ładowania osadzonych filmów dopóki nie będzie to potrzebne. Zamiast ładować od razu cały film możesz zastąpić początkowe ładowanie video wybraną miniaturką. Spowoduje to opóźnienie wysyłania żądań HTTP do momentu, gdy odwiedzający będzie chciał odtworzyć wideo.

  • 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.

    Na przykład, jeśli wtyczka dodaje własne żądania stron trzecich (tak jak robi to powyższa wtyczka AddThis), możesz ją usunąć i użyć czegoś bardziej zoptymalizowanego.

  • 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.

Używanie CSS Sprites jest zasadne w przypadku obrazków takich jak: logo lub ikony. Nie należy stosować CSS Sprites przy innych obrazkach, np. dodawanych w treści wpisów publikowanych na blogu.

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:

Bardzo dobrym rozwiązaniem dla optymalizacji WordPress jest skorzystanie z usługi hostingu WordPress i tym samym wykorzystania ustawień serwera, które będą w stanie przyspieszyć działanie Twojej witryny internetowej. Warto także zwrócić uwagę, by hosting dla WordPress oparty był o LiteSpeed, który zapewni możliwość skorzystania z rewelacyjnej wtyczki optymalizującej WordPress – LiteSpeed Cache.

Powyższe wtyczki nie zmodyfikują za Ciebie używanych motywów i wtyczek, jednak mogą pomóc w optymalizacji Twojej witryny w znaczącym stopniu i przyspieszyć jej czas ładowania.

Jak zoptymalizować WordPress?

Aby strona internetowa oparta o WordPress wczytywała się szybciej i była bezpieczna, oprócz zmniejszenia ilości zapytań HTTP możesz wykonać dodatkowe operacje mające na celu zoptymalizowanie systemu CMS.

Zrezygnuj ze zbędnych wtyczek i dodatków

Upewnij się, że wszystkie zainstalowane w WordPress wtyczki i motywy są Ci faktycznie potrzebne. Może to znacząco przyśpieszyć działanie Twojej strony, gdyż nawet nieużywane komponenty mogą być po części ładowane i spowalniać ładowanie witryny.

Każde takie rozszerzenie jak motyw czy wtyczka może składać się z bardzo dużej ilości plików, które znajdują się na serwerze i mogą być potencjalnym celem ataków. Warto minimalizować każde ryzyko zhakowania naszej witryny – a najlepszym na to sposobem w takiej sytuacji jest usunięcie zbędnych plików.

Zrezygnowanie z niektórych wtyczek, które nie są niezbędne może skutkować znaczącym przyspieszeniem ładowania Twojej strony WWW.

Wykonaj optymalizacje obrazków użytych na stronie

Umieszczanie na stronie internetowej plików graficznych o wielkości kilku megabajtów nie jest dobrym pomysłem i zdecydowanie nie powoduje, że witryna jest ładniejsza. Wielu użytkowników nie zobaczy nawet takiego dużego zdjęcia, gdyż zapewne zamknie zakładkę przeglądarki zanim się takie duże zdjęcie załaduje.

Do optymalizacji grafik możesz użyć narzędzi on-line, które umożliwiają kompresje plików graficznych. Możesz też skorzystać z popularnych wtyczek do WordPress, które będą automatycznie kompresować wszystkie zdjęcia podczas ich ładowania do biblioteki WordPress. Przy użyciu takich wtyczek możesz wykonać kompresję wszystkich obrazków, które załadowałeś do biblioteki od początku istnienia Twojej witryny. Warto też zacząć korzystanie z nowoczesnego formatu dla plików graficznych WEBP – do tego również znajdziesz specjalne wtyczki.

Zoptymalizowanie plików graficznych użytych na stronie internetowej może spowodować wzrost pozycji Twojej witryny w wynikach wyszukiwania, ponieważ Google zwraca szczególną uwagę na średni czas ładowania witryny podczas umieszczania stron w swoim rankingu.

Wykonaj czyszczenie bazy danych MySQL

Każdy wpis WordPress może posiadać wiele wersji i każda z nich jest zapisana w bazie danych MySQL jako swoista kopia zapasowa, którą możesz przywrócić. Duża ilość wpisów oraz ich zapisanych wersji może powodować znaczne powiększenie rozmiaru bazy danych, które może skutkować wolniejszym działaniem witryny podczas ładowania.

Możesz spróbować wyczyścić bazę danych z zapisanych starszych wersji swoich postów przy użyciu wtyczek takich jak: Optimize Database after Deleting Revisions, która umożliwia też dodatkowe funkcje optymalizacji innych tabel znajdujących się w bazie danych używanej przez WordPress.

Korzystaj z wtyczek do pamięci podręcznej cache

Podczas każdej próby załadowania strony internetowej opartej o WordPress, serwer musi wykonać wiele operacji, aby wyświetlić witrynę użytkownikowi w przeglądarce. Im więcej plików i danych do załadowania tym dłużej może trwać ładowanie strony WWW. Wtyczki do cache znacząco przyspieszają ładowanie plików poprzez zapisywanie danych w pamięci podręcznej – przez co nie muszą być ładowane przy każdym wywołaniu witryny.

Wtyczki cache umożliwiają też zoptymalizowanie ilości zapytań generowanych przez witrynę WordPress. Użycie konkretnej wtyczki zależy przede wszystkim od środowiska i serwera, na którym działa strona internetowa. Jeśli korzystasz z usługi hostingowej opartej o webserver Apache, to warto skorzystać z takich wtyczek pamięci podręcznej jak WP Fastest Cache, która jest bardzo łatwa w konfiguracji.

Korzystaj z nowych wersji PHP, które są szybsze

WordPress do swojego działania wymaga korzystania z popularnego PHP. Interpreter PHP jest powszechnie stosowany przez większość odwiedzanych przez nas stron internetowych i jest wciąż rozwijany przez swoich twórców – wciąż wydawane są jego kolejne wersje. Z reguły każda nowsza wersja PHP charakteryzowała się szybszym działaniem oraz poprawą bezpieczeństwa.

Spróbuj zmniejszyć rozmiar plików HTML, JS, CSS

Witryny internetowe zbudowane w oparciu o system WordPress mogą składać się m.in. z kodu HTML, CSS oraz Java Script. Popularną metodą optymalizacji WordPress jest minifikowanie (zmniejszanie) kodu, polegające na usunięciu zbędnych znaków przy jednoczesnym zachowaniu poprawnego działania – przez co ładowanie witryny jest szybsze.

Najczęściej właściciele witryn zbudowanych na WordPress w celu zmniejszania rozmiarów plików HTML, JS oraz CSS stosują popularną wtyczkę o nazwie: Autoptimize.

Dodaj AMP dla urządzeń mobilnych

Google z myślą o przyspieszeniu ładowania stron internetowych na urządzeniach mobilnych stworzyło technologię AMP. Wdrożenie AMP na stronie WordPress spowoduje znaczne przyspieszenie jej ładowania oraz może spowodować lepsze pozycjonowanie witryny w wynikach wyszukiwania Google.

W skrócie: AMP powoduje przygotowywanie specjalnych wersji podstron – okrojonych ze zbędnych elementów, które mogły spowalniać ładowanie naszej witryny na urządzeniach mobilnych. Jest to swojego rodzaju uproszczona wersja strony internetowej dedykowana tylko urządzeniom mobilnym takim jak smartfony czy tablety.

Dlaczego potwierdzenie odczytu e-mail nie działa w każdym programie?

Większość programów pocztowych i systemów Webmail, a także serwerów pocztowych, nie pozwala sprawdzić czy wiadomość e-mail wysłana do...

Panel WordPress wygląda na uszkodzony – brak motywu w wp-admin

Wyobraź sobie sytuację: właśnie ukończyłeś aktualizacje WordPress, ale gdy logujesz się do panelu administracyjnego (wp-admin), na ekranie...

Co to jest i do czego służy motyw potomny w WordPress?

WordPress to potężna platforma do tworzenia stron internetowych, która oferuje ogromną elastyczność podczas ich projektowania - m.in. dzięki...

Domeny, hosting, serwery VPS i poczta e-mail

Nie znalazłeś odpowiedzi na swoje pytanie?

Nasze Biuro Obsługi Klienta jest do Twojej dyspozycji.

Telefon

Kontakt w sprawie usług i zamówień

Czynne:
poniedziałek - piątek
8.00 - 16.00
Infolinia:
+48 71 715 27 24

Poczta

Kontakt mailowy w sprawie usług i zamówień

Czynne:
poniedziałek - niedziela
24h na dobę
Email:
bok@domenomania.pl