Jak przyspieszyć blog WordPress o 336%

Masz już stronę lub blog postawiony na WordPress. Masz już nawet napisanych kilka wpisów. Gdy wchodzisz na swoją stronę musisz chwilę czekać zanim się zupełnie załaduje. Jest to trochę irytujące i zastanawiasz się jak przyspieszyć swój blog WordPress.

Spokojnie, nie jesteś sam! Wiele osób ma z tym problem i nie wie jak to poprawić. Ten blog również był dosyć powolny gdy go założyłem na początku tego roku. Na szczęście przyspieszyłem go kilkukrotnie i poniżej pokażę Tobie jak możesz zrobić samodzielnie dokładnie to samo co ja.

Dlaczego powinieneś przyspieszyć szybkość ładowania strony opartej o WordPress?

Szybsze wczytywanie strony internetowej to lepsze SEO. Google premiuje w wynikach wyszukiwania szybko wczytujące się strony. Ale co ważniejsze szybka strona to znacznie lepsze odczucia dla Twoich czytelników. Nie wiem czy wiesz, ale każda zaoszczędzona sekunda na wczytywaniu strony przekłada się na znaczny wzrost konwersji.

Dla przykładu Firefox po przyspieszeniu swojej strony o 2,2 sekundy może się pochwalić wzrostem pobrań swojej przeglądarki o 15,4%. To w ich przypadku aż 10 milionów więcej pobrań rocznie!

Jeśli Twoim celem jest większa sprzedaż, zapis na newsletter lub po prostu chcesz zatrzymać swojego czytelnika na dłużej na blogu to poniżej dowiesz się jak to zrobić krok po kroku.

Jak przyspieszyć blog lub stronę WordPress?

Poniżej opisałem na własnym przykładzie jak przyspieszyłem blog KierunekWolnosc.pl przy pomocy kilku prostych zabiegów. Jeśli wykonasz dokładnie te same czynności co ja, powinieneś znacznie przyspieszyć szybkość wczytywania swojego bloga WordPress. Mnie udało się przyspieszyć blog o 289%.

Wybierz sprawdzony i szybki hosting
Ustaw najnowszą wersję PHP
Wyłącz niepotrzebne wtyczki
Zoptymalizuj wielkość zdjęć i obrazków (WP Smush)
Zoptymalizuj bazę danych (Database Sweep)
Skasuj nadmiarowe szkice istniejących wpisów oraz usunięte wpisy
Wyłącz “hotlinking”
Ustaw DNS prefetch dla zewnętrznych skryptów
Wyłącz pingbacki i trackbacki
Zainstaluj dobrą wtyczkę do cache (W3 Total Cache)
Korzystaj z CDNa (CloudFlare)
Monitoruj prędkość swojej strony

Zanim wykonasz kroki wymienione w powyższym spisie treści zachęcam Cie do sprawdzenie szybkości ładowania Twojej strony w trzech narzędziach. Będziesz miał dobre porównanie przed i po wykonanej optymalizacji.

Sprawdź swoją stronę w trzech poniższych narzędziach:
Google PageSpeed
Pingdom website speed test
GTmetrix

Oto moje wyniki przed optymalizacją.

Google PageSpeed

Wersja na komórki

Wersja na komputery

Pingdom

Test wykonany z Dallas w USA

Test wykonany ze Stockholmu w Szwecji

GTmetrix

Test wykonany z Vancouver w Kanadzie

Test wykonany z Londynu w UK

A to mój ulubiony test gdzie widać porównanie szybkości wczytywania stron dla popularnych blogów Marcina Iwucia, Agnieszki Skupieńskiej oraz Michała Szafrańskiego

W przypadku bloga Marcina oraz Michała jest co poprawiać a w przypadku bloga Agnieszki jest już całkiem nieźle 🙂

Wybierz sprawdzony i szybki hosting

Szybki hosting to klucz do optymalizacji Twojej strony. Nieważne czy to WordPress czy inna technologia. Jeśli hosting jest szybki to Twoja strona też będzie się szybko wyczytywać.

Jeśli nie masz jeszcze hostingu to polecam Ci przetestować kilka różnych hostingów. Zazwyczaj oferują kilkunastodniowy, darmowy okres próby. To wystarczy, żebyś sprawdził czy wszystko szybko działa. Wystarcz, że zainstalujesz tam WordPressa i wykonasz test szybkości wczytywania strony przy pomocy narzędzia Pingdom website speed test, o którym wspomniałem wcześniej.

Wybierając hosting dla siebie chciałem, żeby był szybki, bezpieczny i niezawodny. Chciałem mieć szybkie i skuteczne wsparcie techniczne i dlatego wybrałem hosting ZenBox. W pierwszym artykule na tym blogu opisałem dokładnie dlaczego wybrałem właśnie ich.

Ustaw najnowszą wersję PHP

Drugą ważną sprawą, o której mało kto pamięta jest ustawienie na serwerze najnowszej wersji PHP. Obecnie jest to wersja PHP 7, która jest prawie dwa razy szybsza od PHP 5.5 oraz PHP 5.6.

Źródło: http://www.zend.com/en/resources/php7_infographic

Zatem jeśli masz stronę opartą na WordPressie lub inny CMS, który jest napisany w PHP to sprawdź jaką wersję masz ustawioną na serwerze i zmień ją na najnowszą.

Jeśli nie wiesz jak to zrobić to po prostu napisz do wsparcia technicznego tam gdzie masz hosting a na pewno zrobią to za Ciebie lub powiedzą gdzie to się konfiguruję.

Na moim koniec w ZenBox sam przestawiłem wersję PHP na najnowszą 7.1.

Wyłącz niepotrzebne wtyczki

Wtyczki WordPress dodają nowe funkcjonalności do naszego CMSa. Dzięki temu możemy zbudować na prawdę rozbudowane strony i dodać do nich bardzo wiele mniej lub bardziej potrzebnych funkcjonalności. To jest właśnie prawdziwa siła WordPressa!

Nie każdy zdaje sobie sprawę, że im więcej wtyczek zainstalujemy tym bardziej nasza strona będzie zwalniać. Rozszerzenia są pisane przez różnych programistów, którzy niekoniecznie będą je optymalizować pod kątem wydajności.

To co możesz zrobić to zainstalować wtyczkę o nazwie P3 (Plugin Performance Profiler), która pokaże wtyczki najbardziej obciążające stronę. W moim przypadku niechlubnym zwycięzcą okazała się wtyczka Jetpack. Wtyczka ma fajne funkcjonalności ale bardziej zależało mi na szybkości wczytywania strony więc ją wyłączyłem.

Przejrzyj u siebie, które wtyczki najbardziej obciążają Twoją stronę i rozważ ich usunięcie. Jeśli nie są niezbędne to warto je wyłączyć. Po wszystkim możesz również wyłączyć wtyczkę P3.

Zoptymalizuj wielkość zdjęć i obrazków (WP Smush)

Zdjęcia lub inne pliki graficzne potrafią zajmować dużo miejsca a tym samym spowalniać pełne wczytanie się naszej strony. Dlatego trzeba je kompresować do jak najmniejszych rozmiarów przy jednoczesnym zachowaniu ich jakości.

Polecam wtyczkę, której sam z powodzeniem używam. Mowa o WP Smush. Plugin ma darmową wersję, z której korzystam i uważam że jest w zupełności wystarczająca. Jeśli masz duży blog fotograficzny z setkami jeśli nie tysiącami zdjęć wtedy jest sens korzystać z wersji płatnej, która jeszcze bardziej optymalizuje zdjęcia i inne grafiki.

Wtyczka zmniejsza zdjęcia automatycznie gdy je wgrywam do siebie do biblioteki multimediów w WordPressie. W ten sposób zaoszczędziłem już 2,2 MB 🙂

WP Smush optymalizuje nasze pliki wysyłając je automatycznie na swój serwer i zwracając już zmniejszone grafiki. Różnicę w szybkości wczytywania Twoje strony odczują szczególnie użytkownicy często wolniejszy łącz komórkowych przeglądając stronę na smartphonie.

Zoptymalizuj bazę danych (Database Sweep)

Jeśli Twoja strona WordPress ma już bardzo dużo wpisów i za każdym razem gdy dodajesz nowy artykuł zapisujesz kilka jego wersji w trakcie jego pisania to warto zoptymalizować bazę danych. To właśnie w bazie danych trzymane są wszystkie Twoje wpisy, dane, ustawienia oraz dane dane wtyczek.

Z czasem zbiera się nadmiarowa ilość niepotrzebnych danych, które mogą generować nadmiarową ilość zapytań w bazie danych. To wpływa negatywnie na szybkość Twojej strony.

Możesz użyć wtyczki WP-Sweep, żeby pozbyć się tego problemu. Wtyczka automatycznie sprawdzi całą bazę danych i usunie nadmiarowe dane. Posprząta po wtyczkach, które już dawno odinstalowałeś a zostawiły niepotrzebne tabele w bazie.

Przed rozpoczęciem czyszczenia bazy danych pamiętaj, żeby zrobić jej backup. Do robienia backupów możesz użyć wtyczki UpdraftPlus.

Jeśli masz bardzo dużą stronę to możesz optymalizować bazę danych raz w miesiącu. Jeśli masz mały blog to możesz przeprowadzić czyszczenie raz na kwartał.

Skasuj nadmiarowe szkice istniejących wpisów oraz usunięte wpisy

Jeśli jesteś jedną z tych osób, która pisze artykuły na blogu bezpośrednio w edytorze WordPress to pewnie zauważyłeś, że CMS zapisuje automatycznie co jakiś czas ostatnią wersję Twojego roboczego wpisy.

Dzięki temu mechanizmowi nawet gdy przez przypadek zamkniesz okno przeglądarki, w której piszesz to nie stracisz swojego wpisu. Bardzo dobry mechanizm, który w moim przypadku już kilka razy uratował robocze wersje moich wpisów.

Wszystkie takie zapisane automatycznie wersje Twoich artykułów są trzymane w bazie danych. Jeśli dużo piszesz to możesz mieć nawet po kilkadziesiąt wersji dla jednego artykułu. Możesz w każdej chwili wrócić do dowolnej wersji jeśli chcesz. Tylko po co gdy artykuł jest już gotowy i od dawna jest już opublikowany?

Również skasowane artykuły są przechowywane w bazie danych na wypadek gdybyś jednak z jakiegoś powodu chciał do nich powrócić w przyszłości.

Jeśli jednak wiesz, że nie potrzebujesz skasowanych, starych artykułów oraz nieskończonej ilości różnych wersji tego samego artykułu to możesz je śmiało usunąć z bazy danych. Posłużysz się do tego celu wtyczką, o której pisałem w powyższym punkcie. Mowa o WP-Sweep.

Wybierz opcje Auto Drafts oraz Deleted Posts i kliknij w przycisk Sweep, żeby wyczyścić niepotrzebne dane.

Wyłącz “hotlinking”

Co to jest ten cały “hotlinking”? Tak się określa sytuację kiedy ktoś wyświetla zdjęcia z Twojego serwera bezpośrednio na swojej stronie. Zamiast zapisać zdjęcie i wgrać na swój serwer, ktoś po prostu wstawia link bezpośrednio do Twojego zdjęcia.

W ten sposób Twój serwer jest obciążony przesyłając zdjęcie za każdym razem gdy ktoś je ogląda na stronie gdzie jest umieszczony do niego link.

Możesz się przed tych uchronić dodając w pliku .htaccess poniższy wpis. Pamiętaj tylko, żeby zmienić w nim kierunekwolnosc.pl na adres Twojej strony.

/* Wyłącz "hotlinking" */
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?kierunekwolnosc.pl [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [F]

Ustaw DNS prefetch dla zewnętrznych skryptów

Jeśli Twoja strona korzysta z wtyczek lub skórek, które pobierają jakieś elementy z zewnętrznych źródeł to możesz dodać tag dns-prefetch na początku kodu swojej strony po <HEAD>. Dzięki temu przeglądarka podczas wczytywania strony od razu odpyta DNSy o adresy IP zewnętrznych źródeł, z których są pobierane elementy Twojej strony. Pozwoli to na szybsze wczytanie Twojej strony.

Jeśli nie wiesz jak edytować kod strony to skorzystaj z wtyczki Head & Footer Code. Przy jej pomocy dodasz dowolny kod po znaczniku <HEAD> korzystając z prostego edytora w panelu administracyjnym swojej strony.

Takie zewnętrze elementy to na przykład czcionki lub skrypty Google Analytics. Mogą to być przyciski sieci społecznościowych takich jak Facebook lub skrypty reklam, które osadzasz na stronie.

Jeśli chcesz sprawdzić z jakich zewnętrznych źródeł Twoja strona pobiera dane to możesz skorzystać z tego narzędzia WebPageTest. Gdy test się zakończy przejdź do zakładki Domains. Będziesz miał tam listę wszystkich domen, z których przeglądarka pobiera dane wczytując stronę.

Dla każdej z wymienionych domen dodaj taki wpis:

<link rel="dns-prefetch" href="//fonts.gstatic.com"/>

U mnie kod wygląda tak:

Wyłącz pingbacki i trackbacki

WordPress ma dwa wbudowane mechanizmy: Pingback oraz Trackback. Służą one do powiadamiania innych blogów o tym, że w opublikowanym artykule jest link do danego bloga.

Teraz te mechanizmy są już rzadko stosowane. W większości wypadków są wykorzystywane przez spamerów, którzy generują fałszywe powiadomienia w nadziei na to, że pojawią się one pod wpisami na atakowanych blogach.

Jeśli nie korzystasz z tych mechanizmów na swoim blogu to możesz je śmiało wyłączyć. Wejdź w Ustawienia > Dyskusja i odznacz poniższe opcje:

Spróbuj powiadomić wszystkie blogi, do których odnośniki zostały umieszczone w artykule
Zezwól innym blogom na powiadamianie o zamieszczeniu odnośnika (pingbacki i trackbacki) do nowo dodanych artykułów

Zainstaluj dobrą wtyczkę do cache (W3 Total Cache)

Wtyczka, która będzie zapisywała w cache przeglądarki twoją stronę opartą o WordPress to absolutne “must have” jeśli poważnie myślisz o przyspieszeniu swojego bloga. Ten krok w całym tym artykule jest najważniejszy i nie możesz go pominąć.

W3 Total Cache jeśli chodzi o optymalizację wydajności to prawdziwy kombajn. Możesz ją włączyć na domyślnych ustawieniach i od razu zauważysz odczuwalny skok wydajności Twojej strony. Ale to co czyni tą wtyczkę tak skuteczną to ogrom ustawień dodatkowych, dzięki którym Twoja strona będzie szybka jak rakieta 🙂

Spędziłem sporo czasu aż udało mi się poprawnie skonfigurować tę wtyczkę. Kilka razy przez niepoprawną konfigurację część strony nie działała, obrazki się nie wyświetlały a czasami na smartphone’ach strona była zupełnie pozbawiona całej grafiki. Teraz po wielu testach moja zaawansowana konfiguracja działa lepiej niż bardzo dobrze.

Całą konfigurację da się wyeksportować i zaimportować na innej stronie. Dlatego jeśli chcesz możesz skorzystać z mojego gotowego pliku konfiguracyjnego i zaimportować wszystkie moje ustawienia u siebie. Możesz to zrobić w sekcji General Settings wtyczki W3 Total Cache. Zjedź na sam dół strony gdzie będziesz miał opcje jak na poniższym screenie.

Pobierze plik:

PLIK Z USTAWIENIAMI W3 TOTAL CACHE dla Kierunekwolnosc.pl

i zaimportuj go u siebie.

W pliku cześć ustawień jest specyficznych dla mojej strony KierunekWolnosc.pl. Dlatego po zaimportowaniu wszystkich opcji, wprowadź u siebie kilka zmian.

Otwórz sekcję Page Cache > General

Jeśli Twoja strona nie korzysta z certyfikatu SSL, czyli nie łączysz się do niej po HTTPS to odznacz opcję: Cache SSL (https) requests

Otwórz sekcję Page Cache > Cache Preload

W Sitemap URL mam wpisaną swoją sitemapę https://kierunekwolnosc.pl/sitemap.xml. Zmień ją na własną.

Korzystaj z CDNa (CloudFlare)

CloudFlare to kolejne narzędzie, które musisz zastosować, żeby Twoja strona była mega szybka. Dla naszych potrzeb będziemy korzystać z darmowej wersji CloudFlare. Narzędzie służy do optymalizacji strony pod kątem szybkości. Innym zastosowaniem CloudFlare jest ochrona przed atakami typu DDoS.

Narzędzie świetnie działa razem z wtyczką W3 Total Cache zatem jego konfiguracje rozpocznij właśnie tam.

W opcjach W3 Total Cache przejdź do sekcji Extensions. Znajdź na liście CloudFlare i włącz tę opcję.
Załóż konto na stronie CloudFlare i dodaj swoją stronę.
Po dodaniu strony CloudFlare wygeneruje dla Ciebie dwa wpisy do podmiany w serwerach DNS dla Twojej domeny
W moim przypadku domenę kierunekwolnosc.pl kupiłem w nazwa.pl dlatego tam ją konfiguruję. Po edycji serwerów DNS dla mojej domeny teraz tak to wygląda:Wprowadź analogiczne zmiany w konfiguracji swojej domeny. Zmiany serwerów DNS propagują się do 72 godzin. Aby sprawdzić czy już na pewno konfiguracja jest aktywna możesz wejść na stronę Who.is i podać tam swoją domenę
Wróć teraz do CloudFlare. Przejdź do podstrony My Account i skopiuj swój “Global API Key”
Wróć do ustawień CloudFlare w W3 Total Cache, żeby wprowadzić klucz API.
Jeśli korzystasz z certyfikatu SSL na swojej stronie to w opcji CloudFlare: SSL wybierz Full (https everywhere)
Teraz wróć do ustawień na stronie CloudFlare i otwórz sekcję Speed gdzie znajdziesz dwie opcje, które przyspieszą Twoją stronę. Wprowadź u siebie takie same ustawienia jak na poniższych screenach.
Auto Minify

Rocket Loader

Otwórz teraz sekcję Page Rules i dodaj trzy następujące reguły reguły. Pamiętaj, żeby podmienić kierunekwolnosc.pl na adres swojej domeny
Reguła 1
Reguła 2
Reguła 3
Wróć teraz do ustawień W3 Total Cache i wyczyść cały cache. Możesz to zrobić klikając w przycisk empty all caches.

Dzięki skonfigurowaniu wtyczki W3 Total Cache oraz CloudFlare Twoja strona przyspieszy nawet kilkukrotnie. Na wszystkie zmiany będziesz musiał poczekać do 72 godzin, żeby konfiguracja serwerów DNS zaczęła działać (zazwyczaj trwa to dużo krócej).

Monitoruj prędkość swojej strony

Co jakiś czas monitoruj prędkość swojej strony przy pomocy narzędzi wymienionych w tym poradniku. Możliwe, że w przyszłości będą inne metody optymalizacji, które jeszcze skuteczniej przyspieszą Twoją witrynę.

Na początku tego wpisy przeprowadziłem test prędkości strony KierunekWolnosc.pl przed optymalizacją. Teraz czas pokazać wyniki po optymalizacji w narzędziach: Google PageSpeed, Pingdom website speed test, GTmetrix.