Jak przyspieszyć stronę na WordPressie

Jak przyspieszyć stronę na WordPressie – poradnik krok po kroku (2018)

 

Jakiś czas temu opublikowałem artykuł zawierający listę najlepszych wtyczek na platformę WordPress. Dzisiaj natomiast możesz się dowiedzieć jak przyspieszyć stronę na WordPressie, by ładowała się znacznie szybciej oraz osiągała lepsze wyniki zarówno w testach szybkości ładowania, jak i w wyszukiwarce Google.

Początkowe oraz końcowe wyniki w teście GTmetrix znajdują się poniżej.

Przed wykonaniem całej procedury:

Jak przyspieszyć stronę na WordPressie 01

Po zakończeniu procesu:

Jak przyspieszyć stronę na WordPressie 02

 

Tak z kolei prezentują się wyniki testu Pingdom:

Kalifornia (przed przyspieszeniem):

alivebetter.pl - Pingdom test - Kalifornia - 01

Kalifornia (po zakończonym procesie):

alivebetter.pl - Pingdom test - Kalifornia - 02

Szwecja (przed rozpoczęciem):

alivebetter.pl - Pingdom test - Szwecja - 01

Szwecja (po przyspieszeniu):

alivebetter.pl - Pingdom test - Szwecja - 02

 

Poniżej znajduje się instrukcja pokazująca krok po kroku w jaki sposób możesz osiągnąć podobne lub nawet nieco lepsze rezultaty.

 

1. Wybierz odpowiednią firmę hostingową

 

Wybór odpowiedniej firmy hostingowej jest pierwszym i jednym z najważniejszych kroków w procesie optymalizacji czasu ładowania strony internetowej. Jakiś czas temu opublikowałem artykuł z listą najlepszych w kraju i na świecie firm hostingowych. Lista ta jest cały czas aktualna. Od samego początku istnienia tego bloga oraz jego wersji anglojęzycznej jestem niesamowicie zadowolonym klientem firmy SiteGround. Tutaj możesz osobiście, w dowolnym momencie, upewnić się, że obie moje strony znajdują się na serwerze firmy SiteGround: wersja polskojęzyczna, wersja anglojęzyczna.

Czas na przedstawienie danych statystycznych dotyczących najbardziej popularnych firm hostingowych. Na początek średni czas ładowania strony:

SiteGround - czas ładowania strony

Wydajność serwera:

SiteGround - wydajność serwera

Bezpieczeństwo:

SiteGround - bezpieczeństwo

Wsparcie techniczne:

SiteGround - wsparcie techniczne

SiteGround - wsparcie techniczne

SiteGround - wsparcie techniczne

SiteGround - wsparcie techniczne

Bardzo popularny (zwłaszcza w przypadku stron z małym lub średnim ruchem) hosting dzielony oferowany jest przez SiteGround w trzech różnych pakietach cenowych oraz konfiguracjach sprzętowych:

SiteGround - Shared Hosting - porównanie

Najwięcej możliwości daje oczywiście wersja najdroższa – GoGeek. Z tej właśnie opcji korzystam od czasu stworzenia swojej pierwszej strony internetowej w czerwcu 2016 roku:

SiteGround-GoGeek-2018

Oprócz najmocniejszej konfiguracji sprzętowej wśród pakietów hostingu dzielonego, pakiet GoGeek umożliwia dostęp do bardzo wartościowej funkcji Staging (kopia strony, na której możesz testować rozmaite zmiany i przeprowadzać eksperymenty bez obawy o nieumyślną destabilizację działania strony) oraz zwiększa możliwości korzystania z kopii zapasowych strony.

Oczywiście możesz wybrać na początek najtańszy pakiet (StartUp) – i tak jest on znacznie wydajniejszy niż u konkurencji. Pamiętaj jednak, że oprócz najsłabszej konfiguracji sprzętowej, masz możliwość przechowywania zaledwie jednej witryny na koncie tego typu! Z biegiem czasu możesz jednak dokonać upgrade’u z pakietu StartUp na GrowBig lub GoGeek. 🙂

SiteGround - Shared Hosting - porównanie konfiguracji sprzętowej

Pakiety StartUp, GrowBig oraz GoGeek są wystarczające dla ruchu odpowiednio: 10 000, 25 000 oraz 100 000 odwiedzin miesięcznie. Powyżej tej ostatniej wartości należy zdecydować się na cloud hosting lub na hosting dedykowany. Wiążą się one co prawda z większymi opłatami za serwer, lecz przy tak dużym ruchu dochody ze strony internetowej spokojnie pozwolą na poniesienie wyższych opłat. Poprawi się za to również czas ładowania strony.

Gdy już wybierzesz odpowiedni dla siebie pakiet, masz możliwość wyboru lokalizacji serwera, na którym będą przechowywane Twoje pliki. Do wyboru są 4 lokalizacje: Chicago, Londyn, Amsterdam i Singapur.

SiteGround - lokalizacje 2018

Uptime na obu moich blogach według statystyk z serwisu Uptime Robot wynosi 100%.

SiteGround - www.alivebetter.pl - 100% uptime

SiteGround - www.alivebetter.com - 100% uptime

WordPress poleca właśnie SiteGround jako jedną z najlepszych firm hostingowych.

Wsparcie techniczne SiteGround działa bardzo szybko, profesjonalnie i niezawodnie. Poniżej znajdują się screeny z moich trzech zgłoszeń:

SiteGround - wsparcie techniczne

SiteGround - wsparcie techniczne

SiteGround - wsparcie techniczne

Warto przeczytać również ten artykuł opublikowany na blogu SiteGround. Sztuczna inteligencja zapobiegająca atakom na stronę to najbardziej nowoczesne rozwiązanie, niespotykane do tej pory w żadnej innej firmie hostingowej.

Dodatkowo warto zwrócić uwagę na znajdujące się pod artykułem komentarze. Część z nich możesz przeczytać poniżej:

SiteGround - AI - sztuczna inteligencja - zapobieganie atakom

SiteGround - AI - sztuczna inteligencja - zapobieganie atakom - komentarze

SiteGround - AI - sztuczna inteligencja - zapobieganie atakom - komentarze

* Jeśli kierujesz swoją stronę tylko do odbiorców ze swojego kraju/regionu, możesz pozostać przy poprzednim dostawcy hostingu. Jeśli strona jest skierowana do odbiorców z całego świata, zalecane jest przeniesienie jej na serwer firmy SiteGround.

 

2. Skonfiguruj w odpowiedni sposób CDN (Cloudflare)

 

Po zalogowaniu się do panelu administracyjnego SiteGround i kliknięciu My Accounts -> Information & Settings -> Access cPanel -> Cloudflare -> Manage -> Settings powinieneś zobaczyć okno zarządzania ustawieniami Cloudflare. Poniżej znajduje się zrzut z optymalnymi ustawieniami.

SiteGround - Cloudflare - optymalne ustawienia

Po zalogowaniu się na https://www.cloudflare.com masz znacznie większe możliwości zarządzania ustawieniami Cloudflare. Optymalne ustawienia znajdują się na zdjęciach poniżej:

Cloudflare - optymalne ustawienia

Cloudflare - optymalne ustawienia

Cloudflare - optymalne ustawienia

Cloudflare - optymalne ustawienia

Cloudflare - optymalne ustawienia

Cloudflare - optymalne ustawienia

Cloudflare - optymalne ustawienia

Cloudflare - optymalne ustawienia

Powyższy zrzut pochodzi z ustawień mojej witryny anglojęzycznej. W przypadku polskojęzycznej oczywiście końcówka .com zmienia się na .pl.

Ścieżka w punkcie 1 to ścieżka logowania do mojej witryny. Gdybyś chciał/-a zmienić domyślną ścieżkę na własną, polecam skorzystanie z wtyczki WPS Hide Login i dodanie tej ścieżki do Page Rules w sposób widoczny na powyższym obrazku.

Cloudflare - optymalne ustawienia

 

3. Usuń zbędne przekierowania (redirects 301/302)

 

Ten problem co prawda nie dotyczył mojej strony www.alivebetter.pl, ale dotyczył www.alivebetter.com. Jako że obie te strony posiadają certyfikaty SSL, a przesyłane na nich dane są szyfrowane (zielona kłódka po lewej stronie paska adresu), adres strony zaczyna się od „https://”, a nie „http://”. W przypadku strony anglojęzycznej pojawiły się dwa przekierowania zamiast jednego.

alivebetter.com - redirects

Problem został rozwiązany po kontakcie ze wsparciem technicznym firmy SiteGround. Rozwiązaniem okazało się skonfigurowanie Cloudflare w sposób podany w punkcie drugim artykułu oraz dodanie poniższych linijek:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^alivebetter\.com [NC]
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.alivebetter.com/$1 [R=301,L]

do pliku .htaccess. Aby go zmodyfikować, należy zalogować się do panelu użytkownika SiteGround, kliknąć My Accounts -> Information & Settings -> Access cPanel -> File Manager -> Go, przejść do folderu public_html, zaznaczyć plik .htaccess i kliknąć Code Editor -> Edit.

Edit .htaccess

Pamiętaj, by w drugiej oraz w czwartej linii wpisać adres strony swojej zamiast mojej 🙂

 

4. Kompresuj obrazy dodawane do strony

 

Kompresja zdjęć również jest ważnym czynnikiem w procesie przyspieszania strony. Istnieje kilka znanych, popularnych wtyczek służących do optymalizacji grafiki, np. EWWW Image Optimizer, Imagify Image Optimizer, Kraken.io Image Optimizer, WP Smush. Ja stosuję jednak od dłuższego czasu wtyczkę ShortPixel Image Optimizer i zdecydowanie każdemu ją polecam! Większość zdjęć umieszczonych na tej stronie została najpierw skompresowana online za pomocą tinyjpg.com, następnie za pomocą wtyczki WP Smush, a mimo tego ShortPixel zdołał zmniejszyć ich rozmiar o kolejne 25-30% praktycznie bez utraty jakości!

ShortPixel statistics 2018

 

5. Zainstaluj możliwie najlepszą wtyczkę do przyspieszania WordPressa

 

Znaczna część użytkowników platformy WordPress zna z pewnością wtyczkę W3 Total Cache. Istnieją jednak podobne wtyczki, które zapewniają lepsze rezultaty. Jedną z nich jest WP Fastest Cache. Do wyboru są dwie wersje tej wtyczki – darmowa oraz płatna. Optymalna konfiguracja WP Fastest Cache znajduje się na poniższej fotografii.

WP Fastest Cache - optymalne ustawienia

Są to ustawienia darmowej wersji wtyczki. Można przetestować również wersję płatną, aczkolwiek za chwilę poznasz lepsze i bardziej efektywne rozwiązanie. Wyniki po skonfigurowaniu darmowej wersji WP Fastest Cache niewiele różnią się od początkowych.

Najlepszym wyborem jest wtyczka WP Rocket. Jest to wtyczka płatna – najtańsza wersja (za 39 USD) może zostać zainstalowana na jednej witrynie, najdroższa (za 199 USD) nie ma ograniczenia dotyczącego liczby stron.

WP Rocket - cennik 2018

Co ważne, po wybraniu najtańszego lub średniego pakietu masz możliwość wyboru droższego pakietu i zamiast pełnej kwoty dopłacasz jedynie różnicę pomiędzy dotychczasowym a przyszłym pakietem.

WP Rocket - upgrade 2018

Jeśli zechcesz odnowić licencję przed upływem roku, możesz zyskać nawet ponad 50-procentową zniżkę!

WP Rocket - renewal discount 2018

Po zainstalowaniu i odpowiednim skonfigurowaniu WP Rocket udało mi się osiągnąć wyniki, które już widziałeś/-aś na początku artykułu. Poniżej zamieszczam screeny z konfiguracją wtyczki WP Rocket:

WP Rocket - settings - Dashboard 2018

WP Rocket - settings - Cache 2018

WP Rocket - settings - File Optimization 01 2018

WP Rocket - settings - File Optimization 02 2018

WP Rocket - settings - File Optimization 03 2018

WP Rocket - settings - Media 2018

WP Rocket - settings - Preload 2018

WP Rocket - settings - Advanced Rules 2018

WP Rocket - settings - Database 01 2018

WP Rocket - settings - Database 02 2018

WP Rocket - settings - CDN 2018

WP Rocket - settings - Add-ons 2018

WP Rocket - settings - Cloudflare 2018

Narzędzie to jest kompatybilne z większością motywów i wtyczek.

W przypadku problemów z działaniem strony po instalacji WP Rocket, powinieneś zmienić część ustawień (zwłaszcza minifying i caching). W razie braku poprawy może zaistnieć konieczność deaktywacji wtyczki. Wtedy strona powinna powrócić do poprzedniego stanu.

Wtyczka WP Rocket jest regularnie aktualizowana i ma bardzo bogatą dokumentację online.

Zarówno SiteGround jak i WP Rocket (należące do najważniejszych elementów procesu przyspieszania strony) oferują 30-dniową lub 14-dniową gwarancję satysfakcji. Oznacza to, że w razie niezadowolenia możesz odzyskać wpłacone pieniądze w ciągu 30 (lub 14) dni od daty dokonania transakcji.

Pamiętaj również, by używać możliwie najmniejszej liczby wtyczek do WordPressa. Te, z których nie korzystasz, warto deaktywować lub nawet odinstalować w celu przyspieszenia ładowania strony.

Oprócz tego pamiętaj, by aktualizować na bieżąco motyw (tzw. theme) oraz wtyczki (pluginy), które masz zainstalowane i aktywne. Ważne jest również aktualizowanie WordPressa, lecz w przypadku stron ulokowanych na serwerach firmy SiteGround aktualizacje te przeprowadzane są na bieżąco automatycznie. 🙂

Wyniki mojej strony w testach ładowania mogą nieco się różnić od pokazanych w artykule ze względu na dodany na pasku bocznym skrypt Flag Counter. Mimo wszystko, strona działa obecnie znacznie szybciej niż przed wykonaniem podanych wyżej kroków. 🙂

12 komentarzy
  • Żaneta
    Posted at 10:52h, 14 sierpnia Odpowiedz

    Mi pomogło. Wyniki w GTmetrix poprawione z 81/77 na 98/96. Strona również ładuje się szybciej. 🙂 Super, że tu trafiłam! 🙂

  • Grzegorz
    Posted at 13:57h, 15 sierpnia Odpowiedz

    Doskonały przewodnik. Dzięki niemu wyniki we wszelkich testach szybkości ładowania stron znacznie się poprawiły. Ponadto, łatwo zauważyć, że strona ładuje się szybciej – i na PC i na urządzeniach przenośnych 🙂

  • Mikołaj
    Posted at 05:17h, 17 sierpnia Odpowiedz

    Znakomity przewodnik. U mnie działa rewelacyjnie 🙂 Nie spodziewałem się, że w tak prosty sposób można skrócić czas ładowania strony.

  • Admin
    Posted at 07:09h, 17 sierpnia Odpowiedz

    Cieszę się, że poradnik okazał się pomocny 🙂

  • Janek
    Posted at 12:52h, 19 sierpnia Odpowiedz

    Działa rewelacyjnie. Czas ładowania strony skrócił mi się z ponad 5 sekund do ok. 1 sekundy, wyniki w gtmetrix poszły w góre o ok. 20 pkt – z 76/71 na 95/96 🙂 Wyniki ładowania strony w Pingdom również znacznie poprawione. Polecam każdemu 🙂

  • Przemysław
    Posted at 13:05h, 23 sierpnia Odpowiedz

    Trochę zmagałem się z ustawieniami i musiałem je nieco dopasować do swojej witryny, jednak ostatecznie udało się osiągnąć w GTmetrix 98 i 96 pkt. Wszystko działa bez zarzutu. Strona ładuje się wyraźnie szybciej 🙂 Jest naprawdę extra 🙂 😀

  • Maciej
    Posted at 12:31h, 26 sierpnia Odpowiedz

    Przyznaję, że jest to bardzo prosta i skuteczna metoda na przyspieszenie ładowania strony 🙂 Teraz moja witryna osiągnęła 97 i 99 pkt w teście GTmetrix. Czas ładowania poniżej 1 sekundy. Wrażenia użytkowników oraz pozycja w wyszukiwarce Google również poprawione 🙂 Dzięki wielkie i pozdrawiam 🙂

  • Jowita
    Posted at 10:56h, 01 września Odpowiedz

    Z pomocą tego poradnika osiągnęłam niesamowite rezultaty! Strona wczytuje się zauważalnie szybciej na każdym możliwym urządzeniu, wyniki w testach ładowania strony również o wiele lepsze. Rewelacja 🙂 🙂

  • Ela
    Posted at 14:24h, 13 września Odpowiedz

    Moja strona również niesamowicie przyspieszyła za sprawą tego poradnika 🙂 Na początku nie mogłam uwierzyć, że to zadziała, ale jednak – czas ładowania i pozostałe wyniki podobne jak u osób powyżej 🙂

  • Zbyszek
    Posted at 10:48h, 02 października Odpowiedz

    Jestem pod ogromnym wrażeniem! Wszystko, co zostało tu podane, rzeczywiście działa 😀

  • Marek
    Posted at 15:22h, 15 stycznia Odpowiedz

    Poprawa w ładowaniu i funkcjonowaniu witryny niesamowita! Trochę czasu mi to zajęło, ale było warto 🙂

  • Marcin
    Posted at 16:51h, 27 lutego Odpowiedz

    Działa wszystko zgodnie z instrukcją. Warto poświęcić czas dla takich efektów 🙂

Post A Comment