Jak przyspieszyć stronę WordPress? Poradnik 2023

Jak przyspieszyć stronę WordPress? Istnieje wiele różnego rodzaju wtyczek i sposobów. W tym artykule omówimy sobie podstawowe, darmowe narzędzia, dzięki którym przyspieszysz swojego WordPressa. Poniżej udostępniam instrukcję krok po kroku jak przyspieszyć stronę WordPress za pomocą wtyczki W3 Total Cache. Do optymalizacji pozostałych kwestii wykorzystamy sobie funkcje dostępne w ramach darmowego planu na CloudFlare. Zapraszam zatem do lektury!

Wprowadzenie: Dlaczego warto i jak przyspieszyć stronę WordPress?

Nie ma się co okłamywać. Potrzebujesz szybko ładującej się strony internetowej. W jakimś stopniu wpływa to na SEO, dzięki czemu Twoja strona może być o wiele wyżej w organicznych wynikach wyszukiwania. Natomiast to co jest o wiele ważniejsze to wrażenia użytkownika.

Jeśli strona internetowa ładuje się zbyt długo to odwiedzający po prostu zrezygnują z dalszego przeglądania treści. Podejrzewam, że macie podobnie jak ja – jeśli nie mogę się doczekać, aż strona się wczyta to po prostu wychodzę i szukam dalej. Ponadto szybko ładujące się strony internetowe generują o wiele więcej konwersji. I myślę, że to ten argument przemówi do wszystkich właścicieli sklepów internetowych.

Zatem absolutnie każdy administrator strony musi zadbać o możliwie najkrótszy czas komunikacji między serwerem, a urządzeniem użytkownika.

Oczywiście, można to zrobić w prosty sposób, bez znajomości informatycznych tajników. I tutaj na całe szczęście dla użytkowników WordPressa przychodzą na ratunek wtyczki 🙂

Prędkość oraz jakość optymalizacji witryny możesz sprawdzić korzystając z narzędzi:

• web.dev
• gtmetrix.com
• https://developers.google.com/speed/pagespeed/insights/?hl=pl

Konfigurowanie W3 Total Cache

Jedną z najpopularniejszych wtyczek do optymalizacji kodu WordPressa jest W3 Total Cache. I tą wtyczką zajmiemy się w tym poradniku.

Do czego w ogóle służy ta wtyczka? Jak przyspieszyć stronę WordPress? 

W3 Total Cache wyłącza między innymi część pamięci podręcznej. Udostępnia pliki statyczne zamiast dynamicznego renderowania treści. Ponadto przyspiesza Twoją witrynę poprzez optymalizację kodu HTML, CSS i JavaScript. Wiem, że brzmi to dosyć skomplikowanie, generalnie chodzi o to, aby serwer WWW wykonywał mniej pracy i szybciej wyświetlał Twoje treści.

Pozostaje jeszcze kwestia CDN i chodzi tutaj o optymalizację dostarczania treści. Bez CDN każdy odwiedzający musi pobrać zawartość twojej strony z jednej lokalizacji, serwera.

Zatem bez względu na to czy jest się w Holandii czy Stanach Zjednoczonych. Jeśli lokalizacja twojego hostingu znajduje się w Polsce to odwiedzający za każdym razem pobierają dane z jednego serwera. Sieć CDN to zmienia i tworzy wiele globalnych centrów danych. Wówczas odwiedzający może pobierać pliki i dane z najbliższego centrum danych, a nie z odległego miejsca na ziemi. Ten krótki dystans fizyczny skraca czas pobierania, a więc przyspiesza działanie Twojej witryny.

We wtyczce W3 Total Cache za usługę CDN trzeba dodatkowo zapłacić. Zatem my sobie wykorzystamy w tym celu CloudFlare, który oferuje taką funkcję całkowicie bezpłatnie.

Ok, ale nie musisz znać zasady działania tych wszystkich procesów, żeby dowiedzieć się jak przyspieszyć stronę WordPress. Wystarczy, że skonfigurujesz wtyczkę zgodnie z poniższą instrukcją.

Zatem zaczynamy! Jak przyspieszyć stronę WordPress? 

Krok #1: Wyszukaj i zainstaluj wtyczkę W3 Total Cache (Wtyczki >> Dodaj Nową)

Krok #2: Przejdź do Ustawień Ogólnych (General Settings):

Jeśli po wejściu w ustawienia wtyczki włączy się auto konfigurator to po prostu go pomiń (Skip):

W kolejnych krokach zajmiemy się konfigurowaniem Ustawień Ogólnych (General Settings), następnie przejdziemy do poszczególnych zakładek i wszystkie opcje, które wybierzemy w Ustawieniach Ogólnych skonfigurujemy bardziej szczegółowo.

Jeśli pominę jakąś sekcję to znaczy, że zostawiamy tam ustawienia domyślne. Nie musimy wszystkiego zaznaczać.

Krok #3: Page Cache – WŁĄCZ

Page Cache, czyli pamięć podręczna strony jest jedną z najważniejszych funkcji, która poprawi wydajność Twojej witryny. Zatem zdecydowanie trzeba włączyć tą opcję. Następnie wybierz metodę Disk: Enhanced (Powinna być domyślnie ustawiona).

Krok #4: Minify

Jak przyspieszyć stronę WordPress lub sklep Woocommerce? Funkcja Minify w dużym stopniu wpływa na szybkość ładowania strony. Umożliwia zmniejszenie rozmiaru kodu HTML, CSS i JS. Automatycznie usuwa niepotrzebne linijki w kodzie itd. Dzięki temu strona szybciej się ładuje.

Ja w tej wtyczce z tego nie korzystam. Minify włączam w CloudFlare ponieważ o wiele lepiej działa w przypadku moich stron. Możesz przetestować tą opcję i sprawdzić jak to wpływa na: funkcjonalność strony oraz szybkość ładowania. Natomiast w dalszej części instrukcji pokażę jak włączyć tą funkcję w CloudFlare oraz inne dodatkowe opcje jak przyspieszyć stronę WordPress.

UWAGA!

Jeśli posiadasz sklep internetowy lub witrynę z funkcjonalnymi elementami to włączenie opcji Minify może spowodować nieprawidłowe działanie strony.

Przykładowo w moim sklepie internetowym Woocommerce: https://vod.lukaszpacholewski.pl.

Po włączeniu tej funkcji całkowicie 'wywala’ moduł do finalizowania zamówień. Zatem z tą funkcją musisz uważać i dokładnie przetestuj wpływ na Twoją stronę.

Jeśli coś nie będzie działać to wówczas należy znaleźć odpowiednie ustawienie. Wystarczy na przykład włączyć tą opcję tylko dla kodu CSS i HTML, a wyłączyć dla JS – lub jakaś inna konfiguracja.

Zatem jeśli chcesz postępować w całości z moim tutorialem to pomiń tą opcję – wrócimy do niej w części poświęconej CloudFlare.

Krok #5: Datebase Cache – WYŁĄCZ

Datebase, czyli baza danych to miejsce, gdzie przechowywane są wszystkie dane dotyczące strony internetowej. Włącznie pamięci podręcznej bazy danych może poprawić wydajność witryny i skrócić czas dostępu do danych, ale…

Jeśli korzystasz z hostingu współdzielonego to w rzeczywistości ta funkcja może spowolnić Twojego WordPressa przenosząc zbyt dużo pracy na procesor serwera. Zatem jeśli korzystasz z hostingu współdzielonego (a w większości przypadków tak jest) to zaleca się nie włączać tej funkcji. Ewentualnie możesz przetestować i porównać wpływ tej funkcji na szybkość witryny i sprawdzić przed i po w jednym z narzędzi podanych na początku artykułu.

Z kolei jeśli posiadasz serwer dedykowany lub VPS to śmiało możesz włączyć tą funkcję.

Krok #6: Object Cache, czyli pamięć podręczna obiektów – WŁĄCZ

Kolejna funkcja, która może, ale ni musi dobrze działać na współdzielonym hostingu. Oczywiście warto przetestować tą funkcję, możesz ją włączyć, natomiast jeśli zauważysz, że kokpit WordPress działa wolno to po prostu w późniejszym czasie wyłącz podręczną pamięć obiektów.

Na chwilę obecną włączamy i ustawiamy metodę: Disk

Krok #7: Browser Cache – Pamięć Podręczna Przeglądarki – WŁĄCZ

Pamięć podręczna przeglądarki, czyli jeden z lepszych sposobów jak przyspieszyć stronę WordPress!

Browser Cache buforuje statyczne zasoby w przeglądarkach osób odwiedzających, czyli eliminujemy w ten sposób potrzebę ciągłego łączenia z serwerem, aby pobierać statyczną zawartość.

ZDECYDOWANIE zalecam włączyć tą opcję:

I to wszystko jeśli chodzi o to jak przyspieszyć stronę WordPress w ustawieniach ogólnych wtyczki W3 Total Cache. Pozostałe opcje zostawiamy w ustawieniach domyślnych. Koniecznie zwróć uwagę, aby tutaj w tych ustawieniach wyłączone były opcje: CDN, reverse Proxy, Monitoring oraz Debug.

Następnie musimy szczegółowo skonfigurować każdą opcję włączoną w Ustawieniach Ogólnych. Dostęp do konkretnych funkcji znajdziesz w menu bocznym:

Krok #8: Wejdź w pierwszą zakładkę Page Cache i zaznacz dokładnie takie same pola jak poniżej na zdjęciu.

W sekcji General należy włączyć następujące opcje:

• Cache front page
• Cache feeds
• Cache SSL – CloudFlare oferuje bezpłatne certyfikaty SSL, więc możesz włączyć to pole, nawet jeśli obecnie nie używasz SSL. Pokażę również jak włączyć ten certyfikat w dalszej części instrukcji.
• Don’t cache pages for logged in users

I tak to wygląda w praktyce:

Kolejna sekcja w ustawieniach Page Cache to Cache Preload, zaznacz tutaj następujące opcje:

• Automatically prime the page cache: ZAZNACZONE
• Update interval: 900 seconds
• Pages per interval: 10
• Sitemap URL: (opcjonalnie) wklei link do mapy strony SEO (sitemap) – jeśli korzystasz z jakiejś wtyczki do optymalizacji treści SEO to zazwyczaj w ustawieniach będzie link do takiej mapy.
• Preload the post cache upon publish events: ZAZNACZONE

Krok #9: Konfiguracja Object Cache

Ponieważ opcje Minify oraz Database Cache zostały pominięte przechodzimy bezpośrednio do zakładki Object Cache.

I w tej zakładce dwie wartości liczbowe powinny być domyślnie ustawione na:

• Default lifetime of cache objects: 180 seconds
• Garbage collection interval: 3600 seconds

Krok #10: Konfiguracja Browser Cache

I ostatnia zakładka, którą musimy skonfigurować to pamięć przeglądarki. Tutaj zaznaczamy następujące opcje:

• Set Last-Modified header: ZAZNACZONE
• Set expires header: ZAZNACZONE
• Set cache control header: ZAZNACZONE
• Set entity tag (eTag):ZAZNACZONE
• Set W3 Total Cache header: ZAZNACZONE
• Enable HTTP (gzip) compression: ZAZNACZONE

Resztę opcji zostawiamy odznaczone.

Co to jest CloudFlare i jakie funkcje udostępnia za darmo?

CloudFlare jest usługą online, która zapewnia wiele funkcji m. in:

• serwery DNS
• CDN – Globalną sieć dostarczania treści
• SSL – certyfikat szyfrowania przekazywania danych (czyli po prostu możliwość korzystania z HTTPS)
• Minify kodu
• Firewall
• ochronę strony przeciwko atakom typu DDoS
• narzędzia analityczne i wspomagające przyspieszanie witryny
• i wiele innych…

Część z tych usług jest dostępna w darmowym planie, natomiast jeśli ktoś ma ochotę korzystać z konta PRO lub BUSINESS to wyższe plany zaczynają się już od $20 miesięcznie. Nie jest to jednak konieczne i raczej zależy od tego jaką masz stronę.

W ramach darmowego planu otrzymamy m.in:

• bezpłatny certyfikat SSL
• serwer DNS
• funkcję CDN
• funkcję Minify, czyli zmniejszanie kodu na stronie

I na tych funkcjach się skupię w tym poradniku.

Konfiguracja CloudFlare we wtyczce W3 Total Cache

Jak przyspieszyć stronę WordPress za pomocą CloudFlare?

Krok #11: Zakładanie konta na CloudFlare

• Wejdź na stronę: https://www.cloudflare.com
• Kliknij w Sign Up
• Podajemy adres e-mail oraz ustalamy hasło do konta, następnie kliknij CREATE ACCOUNT
• Koniecznie kliknij w link potwierdzający założenie konta, który otrzymasz w wiadomości e-mail na podany adres

Krok #12: Wpisz nazwę swojej domeny

…. czyli samą nazwę domeny bez żadnego „www” „http://” itd… w moim przypadku będzie to samo „kursebiznesu.com„

Następnie klikamy w „Add site„.

Wybierz plan (ja wybieram darmowy):

Strona CloudFlare przeskanuje nasze rekordy DNS i jeśli wszystko się zgadza klikamy Continue:

Na kolejnej stronie otrzymamy nowe serwery DNS, które należy zmienić u rejestratora domeny.

Po zmianie serwerów DNS kliknij Done, check nameservers. Propagacja serwerów DNS trwa zazwyczaj 24 godziny, ale w praktyce nastąpi to znacznie szybciej.

Jeśli pojawi się strona Quick Start Guide to spokojnie możesz pominąć klikając Finish Later:

Krok #13: Aktywacja i konfiguracja CloudFlare we wtyczce W3 Total Cache

• Wejdź w Menu wtyczki Performance >> Extensions
• Następnie aktywuj Cloudflare:

• Następnie wybieramy Ustawienia
• W ustawieniach dodatku w sekcji Credentials kliknij w Authorize
• Pojawi się okienko (jak niżej) i będziemy teraz potrzebować adresu e-mail, który był podany przy rejestracji w Cloudflare oraz API key

Gdzie znaleźć API Key?

• Zaloguj się na Cloudflare.com
• Wejdź w wybraną domenę, następnie w zakładkę Overview
• Zjedź na dół i po prawej stronie będzie sekcja API – wejdź w Get your API token

• Następnie wchodzimy w API Tokens
• Znajdziemy tam API Keys – kliknij View obok Global API Key
• Po podaniu hasła i autoryzacji wyświetli się API Key, który kopiujemy i wklejamy obok adresu e-mail w poprzednim okienku.
• Zaznaczamy ZONE i gotowe!

Krok #14: Włącz Minify, czyli jak przyspieszyć stronę WordPress w praktyce?

Jeśli już połączyliśmy konto Cloudflare z W3 Total Cache to teraz w ustawieniach dodatku CF (w tym samym okienku, gdzie dodawaliśmy e-mail oraz API Key) schodzimy na dół do sekcji „CloudFlare: Content Processing” i zaznacz opcje:

• Minify JS: Enable
• Minify CSS: Enable
• Minify HTML: Enable

I gotowe!

A co z CDN? Jak przyspieszyć stronę WordPress z funkcją CDN?

Po dodaniu strony do Cloudflare i zmianie serwerów DNS na te od CloudFlare funkcja CDN jest aktywowana automatycznie. Zatem nie musimy nic więcej robić.

Jak dostać darmowy certyfikat SSL?

Jak już wcześniej wspomniałem CloudFlare oferuje również bezpłatny certyfikat SSL, czyli szyfrowane połączenie w protokole HTTPS (zamiast niezabezpieczonego HTTP). Zamiast płacić za ten certyfikat możemy go uruchomić jednym kliknięciem myszki. Zatem poza rozwiązaniami jak przyspieszyć stronę WordPress sprawdź jak za darmo mieć certyfikat SSL!

W tym celu podążaj za poniższą instrukcją:

• Zaloguj się na konto w CloudFlare i wybierz domenę
• Przejdź do zakładki SSL/TLS
• Poniżej otworzą się dodatkowe zakładki, następnie Overview i wybierz Encryption Mode: FULL

• Przejdź do zakładki: Edge Certificates następnie zaznacz opcję Always Use HTTPS:

I to wszystko! Jeśli dopiero serwery DNS zostały zmienione to na certyfikat SSL będzie trzeba poczekać kilka godzin. Wówczas strona automatycznie się zaktualizuje. 

Warto jeszcze sprawdzić czy mamy zaznaczoną opcję Automatic HTTPS Rewrites (w tej samej zakładce, poniżej):

Jeśli pojawiłyby się błędy i pętle przekierowań adresu URL to warto od razu zainstalować sobie wtyczkę, która będzie zapobiegać tego typu błędom:

Instrukcja Online

Jeśli potrzebujesz instrukcji do skonfigurowania Cloudflare to możesz sprawdzić rozdział na filmiku youtube, gdzie buduję stronę internetową od A do Z. Sprawdź tutaj: Jak stworzyć stronę internetową za darmo? Będzie tam rozdział „Podpięcie Cloudflare”.

Jak przyspieszyć stronę WordPress? Inne rozwiązania

#1 Optymalizacja plików JPG, PNG, GIF z wtyczką Smush

Dzięki tej wtyczce możemy skompresować wszystkie zdjęcia na stronie, przez co zmniejszymy ich rozmiar, więc strona będzie ładować się szybciej.

Wtyczka umożliwia również włączenie funkcji Lazy Load Images. Chodzi o to, że w pierwszej kolejności będzie ładowana zawartość strony, dopiero później wszelkie zdjęcia. Zwiększy to wrażenie szybkości dla użytkownika.

I te dwie funkcje są dostępne w bezpłatnej wersji. Jeśli zdecydujemy się na płatną licencję to wówczas możemy korzystać z formatu WebP dla obrazków. Co zdecydowanie zwiększy czas ładowania strony.

#2 GA JavaScript w pamięci podręcznej

Jeśli korzystamy z Google Analytics to na naszej stronie będzie kod JavaScript odpowiedzialny za zbieranie wszystkich danych. Kod ten może opóźniać działanie naszej strony zatem możemy umieścić go w pamięci podręcznej.

Wystarczy zainstalować wtyczkę: Cache External Scripts

Wtyczka umożliwia buforowanie plików JavaScript Google Analytics przechowywanych w pamięci podręcznej przez ponad 2 godziny.

#3 Aktualizuj WordPress, Wtyczki i Motywy

Jest to oczywisty sposób jak przyspieszyć stronę WordPress. Po prostu co jakiś czas warto zaglądać do zakładki Aktualizacje w Kokpicie WordPress i na bieżąco instalować nowe wersje wtyczek, motywów czy samego silnika WordPress. Każda aktualizacja nie tylko eliminuje różnego rodzaju luki i dziury wykorzystywane przez hakerów. Często również nowe wersje są lepiej zoptymalizowane pod kątem SEO, mają bardziej zminimalizowany kod lub po prostu lepszą strukturę.

Przed każdą aktualizacją warto zrobić Back-Up. Nie raz mi się zdarzyło, że zaraz po aktualizacji jakiejś wtyczki cała strona przestała działać, ponieważ był błąd w kodzie. Takie sytuacje się zdarzają, zatem zawsze dobrze mieć kopię zapasową, aby przywrócić stronę w oczekiwaniu na kolejną wersję aktualizacji 😉

Czy uzyskam 100/100 w Google Insights?

Nadszedł ten czas, w którym możesz sprawdzić swój wynik po dokonaniu wszystkich działań!

U mnie jest to: 96/100 (na telefony) oraz 98/100 (w wersji na komputery)

Warto jednak od razu zaznaczyć, że nie posiadam na mojej stronie zbyt wielu wtyczek, które mogłby generować kod blokujący renderowanie strony.

Takiego wyniku raczej nie osiągniemy jeśli mamy zainstalowanego np. Woocommerce (wtyczka do sklepów internetowych).

Dlatego też u mnie sklep internetowy zainstalowany jest pod subdomeną: https://vod.lukaszpacholewski.pl/

Jeśli chcesz mieć szybką stronę, poprzez którą pozyskujesz nowych klientów to warto rozdzielić sobie moduł sklepu od bloga.

Jeśli zastanawiasz się jak przyspieszyć stronę WordPress i masz już sklep internetowy pod jedną domeną to może warto rozważyć np. dodać subdomenę blog.twojadomena.pl i tam blog dobrze zoptymalizować, aby osiągnąć 95+/100 w Google Insights.

Mimo wszystko warto wdrożyć te wtyczki również na stronie ze sklepem internetowym. Może nie osiągniemy wyniku 90+,ale i tak przyspieszymy działanie sklepu internetowego!

Posiadasz własne doświadczenia z WordPressem? Masz jakieś inne patenty Jak przyspieszyć stronę WordPress? 

PODZIEL SIĘ TYM W KOMENTARZACH PONIŻEJ!