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 0002

Tak z kolei prezentują się wyniki testu Pingdom:

Kalifornia (przed przyspieszeniem):

alivebetter.pl - Pingdom test - Kalifornia - 01

Kalifornia (po zakończonym procesie):

alivebetter.pl - Cloudways - WP Rocket - CloudFront - Pingdom - San Jose

Szwecja (przed rozpoczęciem):

alivebetter.pl - Pingdom test - Szwecja - 01

Szwecja (po przyspieszeniu):

alivebetter.pl - Cloudways - WP Rocket - CloudFront - Pingdom - Stockholm

 

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. Przez ponad 2 lata istnienia tego bloga oraz jego wersji anglojęzycznej byłem niesamowicie zadowolonym klientem firmy SiteGround. W sierpniu 2018 roku przeniosłem, głównie ze względów finansowych, oba moje blogi do Cloudways.

Tutaj możesz osobiście, w dowolnym momencie, upewnić się, że obie moje strony znajdują się na serwerze firmy Cloudways (a tak dokładnie jest to DigitalOcean): wersja polskojęzyczna, wersja anglojęzyczna.

Czas na przedstawienie danych statystycznych dotyczących najlepszych obecnie 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 - hosting dzielony - cennik 2018

Najwięcej możliwości daje oczywiście wersja najdroższa – GoGeek. Z tej właśnie opcji korzystałem 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

Podczas korzystania z serwera SiteGround 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

 

Druga z polecanych firm hostingowych – Cloudways

 

Cloudways - strona glowna

Cloudways należy do nieco nowszych i mniej znanych firm hostingowych.

Oferowane przez nich usługi obejmują serwery cloud od pięciu dostawców: DigitalOcean, Linode, Vultr, Amazon Web Services oraz Google Cloud Platform.

Ceny serwerów zaczynają się od zaledwie 10 USD miesięcznie.

Można tworzyć dowolną liczbę serwerów i przechowywać na nich dowolną liczbę witryn.

Ponadto istnieje możliwość monitorowania obciążenia poszczególnych serwerów, dzięki czemu wiadomo, kiedy warto zacząć inwestować w wydajniejszy serwer.

Cloudways - server - idle CPU - 7 days

W kwestii wydajności warto wspomnieć, że po przeniesieniu moich witryn z SiteGround do Cloudways szybkość ładowania stron wzrosła w większości testów. Dodatkowo udało mi się obniżyć opłatę za serwer z około 30 EUR do zaledwie 10 USD miesięcznie!

 

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

 

W tym punkcie należy rozróżnić 4 możliwe przypadki.

 

SiteGround + Cloudflare (najłatwiejsza konfiguracja, najsłabsze wyniki)

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. Ustawienia te nie zależą w żaden sposób od języka witryny.

Ścieżka w punkcie 1 to ścieżka logowania do mojego bloga. 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

 

SiteGround + AWS CloudFront (trudniejsza konfiguracja, lepsze wyniki)

W celu skonfigurowania usługi CloudFront należy najpierw założyć konto w Amazon Web Services. Przechodzimy więc pod ten adres i klikamy „Try Amazon CloudFront For Free”.

Amazon CloudFront - rejestracja 01

W kolejnym kroku należy wypełnić formularz rejestracyjny.

Amazon CloudFront - rejestracja 02

W jednym z następnych etapów należy dokonać telefonicznej weryfikacji użytkownika. W tym celu wystarczy podać swój numer telefonu, odebrać połączenie z amerykańskiego numeru wykonane przez automat Amazona i w odpowiednim momencie wprowadzić 4-cyfrowy kod na klawiaturze numerycznej telefonu.

Dokładny opis procesu zakładania oraz weryfikacji konta AWS znajduje się na stronie Amazona.

Po zakończeniu procesu rejestracji otrzymasz 12 miesięcy darmowego dostępu do niektórych usług w ramach Amazon Web Services. CDN CloudFront przy transferze do 50 GB miesięcznie również jest dostępny za darmo przez pierwszy rok. Powyżej tego progu obowiązują standardowe stawki i wynoszą one średnio ok. 40 groszy za 1 GB przesłanych danych.

Po zalogowaniu się na konto zobaczysz listę usług dostępnych w AWS.

Amazon AWS CloudFront - uslugi

W polu w górnej części okna wpisz cloudfront i kliknij opcję dostępną na liście.

Amazon AWS CloudFront - uslugi 02

W kolejnym kroku pojawi się okienko zawierające tzw. dystrybucje CloudFront.

AWS - dystrybucje CloudFront 01

Każda dystrybucja zawiera ustawienia związane z osobną witryną, jaka ma być dostępna poprzez CDN CloudFront.

W celu utworzenia nowej dystrybucji należy kliknąć przycisk Create Distribution.

Pojawi się okienko takie jak na poniższym zrzucie.

AWS CloudFront - utworz dystrybucje 01

Do tworzenia dystrybucji dla stron internetowych służy górny przycisk Get Started.

Po jego kliknięciu pojawia się formularz, który należy wypełnić zgodnie z poniższym wzorem.

Amazon AWS Cloudfront Setup 01

W sekcji Origin Protocol Policy zaznaczona jest opcja HTTPS Only, gdyż zakładam, że w dzisiejszych czasach wszyscy twórcy witryn korzystają już z protokołu HTTPS. Jeśli nie, to najwyższy czas zacząć to robić. Google bierze bowiem pod uwagę szyfrowanie przesyłanych danych jako jeden z czynników rankingowych.

Ponadto, Google Chrome od pewnego czasu oznacza strony nieposiadające certyfikatów SSL jako niebezpieczne.

Amazon AWS Cloudfront Setup 02

Opcja Redirect HTTP to HTTPS związana jest z tym co napisałem powyżej. Jest ona również jednym z etapów rozwiązywania problemu mixed content.

Amazon AWS Cloudfront Setup 003

Z listy Price Class możesz wybrać lokalizacje, w których treści mają być dostarczane za pomocą AWS CloudFront. Wybór ten wpłynie zarówno na jakość jak i na koszt usługi.

Alternate Domain Names (CNAMEs) to alias domeny utworzonej przez Amazona w celu udostępniania plików należących do Twojej witryny. Alias ten może być dowolną nazwą jaką sobie wymyślisz. Zwykle ludzie stosują zapis w postaci cdn.nazwa_domeny.rozszerzenie. Ja natomiast stosuję format aws-cloudfront.nazwa_domeny.rozszerzenie.

SSL Certificate na razie pozostaje tak jak jest (druga opcja jest tymczasowo nieaktywna). Modyfikacji tej opcji dokonamy w jednym z kolejnych etapów.

Amazon AWS Cloudfront Setup 04
Po kliknięciu przycisku Create Distribution zostanie utworzona dystrybucja dla strony zdefiniowanej na początku formularza.

Proces tworzenia dystrybucji trwa zwykle kilkanaście minut. W trakcie tworzenia można zauważyć status dystrybucji In Progress.

AWS Distribution - In Progress

Po utworzeniu pojawia się natomiast Deployed.

AWS Distribution - Deployed
Kolejnym krokiem jest utworzenie certyfikatu SSL.

W przypadku korzystania z dowolnego CDN-a konieczne jest posiadanie dwóch takich certyfikatów. Jeden certyfikat zabezpiecza transmisję pomiędzy głównym serwerem a siecią CDN. Drugi natomiast służy jako zabezpieczenie pomiędzy siecią CDN a przeglądarką internauty.

Potrzebujesz w takim razie dwóch certyfikatów SSL – jednego od dostawcy hostingu, a drugiego od firmy obsługującej CDN.

Zarówno SiteGround jak i Cloudways oferują darmowe certyfikaty SSL. Wydawane one są przez Let’s Encrypt.

Cloudflare i AWS CloudFront również oferują darmowe certyfikaty SSL. Cloudflare instaluje taki certyfikat automatycznie na każdej podłączonej witrynie. Poniżej natomiast znajduje się opis konfiguracji certyfikatu SSL w AWS CloudFront.

W oknie głównym AWS wpisz w wyszukiwarce Certificate Manager i wybierz opcję dostępną na rozwijanej liście.

AWS - Certificate Manager 01

Pojawi się okno zawierające listę posiadanych certyfikatów SSL. Zanim jednak utworzysz swój pierwszy certyfikat od Amazona, ustaw lokalizację (prawy górny róg ekranu) na US East (N. Virginia). Domyślnie zaznaczona jest opcja US East (Ohio), lecz US East (N. Virginia) jest jedyną opcją pozwalającą na instalację danego certyfikatu na wybranej stronie internetowej.

AWS - Certificate Manager 02

Kliknij przycisk Request a certificate. Na ekranie pojawi się kreator złożony z 4 kroków.

W pierwszym kroku należy podać nazwę domeny, dla której ma zostać utworzony certyfikat. Warto również wprowadzić nazwę swojej domeny w formacie *.nazwa_domeny.rozszerzenie. Dzięki temu certyfikat zostanie zainstalowany nie tylko dla domeny głównej, lecz także dla subdomen powiązanych z daną domeną.

Amazon AWS SSL Certificate 01

W drugim kroku należy wybrać sposób potwierdzenia posiadania domeny. Dostępne są dwie metody – poprzez modyfikację wpisów DNS oraz poprzez email. Ja z reguły korzystam z tej pierwszej.

Amazon AWS SSL Certificate 02

W trzecim kroku znajduje się jedynie podsumowanie wprowadzonych wcześniej informacji.

Amazon AWS SSL Certificate 03

Czwarty krok zawiera informacje, które należy wprowadzić do strefy DNS swojego dostawcy hostingu.

Amazon AWS SSL Certificate 04

W tym celu należy zalogować się na siteground.com. W kolejnym kroku trzeba kliknąć My Accounts -> Information & Settings -> Access cPanel -> Simple DNS Zone Editor i wybrać z rozwijanej listy odpowiednią domenę.

Następnie należy skopiować wartości Name oraz Value z okienka AWS i wkleić je w odpowiednie pola w SiteGround (po skopiowaniu powyższych wartości oraz ich wklejeniu należy koniecznie usunąć kropki znajdujące się na końcu skopiowanego ciągu!).

SiteGround - DNS CNAME 01

Ostatni wiersz na powyższym screenie pokazuje jak wygląda dodany właśnie rekord.

W ten sam sposób należy dodać jeszcze jeden rekord związany z usługą CloudFront – jest to domena poprzez którą będą dostępne pliki oraz alias tej domeny.

W celu dodania drugiego wpisu przejdź do listy dystrybucji CloudFront i kliknij odpowiedni odnośnik na liście ID.

AWS Distribution - ustawienia 01

Następnie wystarczy skopiować CNAME i Domain Name

AWS Distribution - ustawienia 02

i wkleić obie wartości w odpowiednich polach w ustawieniach DNS.

SiteGround - DNS CNAME 02

Ostatnia linijka pokazuje wpis dodany do tablicy rekordów DNS.

Ostatni krok w tej sekcji artykułu to włączenie CDN-a oraz dodanie aliasu (CNAME) do ustawień wtyczki WP Rocket.

SiteGround - WP Rocket - ustawienia CDN

 

Cloudways + Cloudflare (dość łatwa konfiguracja, bardzo dobre wyniki)

Na wstępie dodam, że jest to opcja, z której sam obecnie korzystam. Wyniki w testach ładowania strony są bardzo dobre, przeglądanie przy użyciu usług VPN również odbywa się płynnie i bez zastrzeżeń. Dodatkowo, Cloudflare to bardzo dobry CDN, z którego można korzystać nie ponosząc przy tym żadnych kosztów!

Jeśli korzystasz z serwera zarządzanego przez Cloudways i chcesz korzystać dodatkowo z Cloudflare CDN, musisz najpierw zarejestrować się na cloudflare.com.

Po dokonaniu rejestracji i zalogowaniu się na stronie, należy dodać swoją witrynę do usługi Cloudflare.

W tym celu należy kliknąć przycisk Add site i postępować zgodnie z krokami pokazanymi na poniższych zrzutach.

Podaj adres swojej domeny.

Cloudflare - add site 01

Kliknij przycisk Next.

Cloudflare - add site 02

Wybierz subskrypcję darmową lub płatną.

Cloudflare - add site 03

Kliknij przycisk Confirm.

Cloudflare - add site 04

W kolumnie Status znajduje się jedna lub dwie (w zależności od dotychczasowych ustawień DNS) szare chmurki. Kliknij je w celu włączenia usługi Cloudflare na danej domenie. Kolor szary powinien się zmienić na pomarańczowy.

Cloudflare - add site 05

Następnie pojawia się okienko zawierające dotychczasowe oraz nowe wpisy NS (Nameservers). Te nowe należy wprowadzić w miejsce starych w swojej strefie DNS. Kilka przykładów takich modyfikacji znajduje się w artykule dotyczącym tworzenia stron www.

Cloudflare - add site 06

Po kliknięciu przycisku Continue pojawia się informacja o statusie modyfikacji wpisów DNS.

Cloudflare - add site 07

Po zakończeniu procesu propagacji ustawień DNS należy skonfigurować Cloudflare oraz WP Rocket zgodnie ze wzorem pokazanym w pierwszym kroku punktu 2.

 

Cloudways + AWS CloudFront (trudniejsza konfiguracja, najlepsze wyniki)

W tym przypadku cały proces konfiguracji przebiega identycznie jak w przypadku CloudFronta na serwerze SiteGround. Jedyna różnica to etap modyfikacji wpisów DNS. Zamiast modyfikacji w SiteGround należy tym razem dokonać modyfikacji w firmie, w której zarejestrowana jest domena.

 

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 wyników.

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ć 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. Cloudways to z kolei firma, która nie pobiera opłat z góry za dany miesiąc, rok lub kwartał. Z usług można zrezygnować w dowolnym czasie, a płatności naliczane są za każdą godzinę pracy utworzonych serwerów. Serwery te można w dowolnym czasie tymczasowo zatrzymać lub po prostu z nich zrezygnować.

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

 

6. Rozwiąż problem mixed content

 

Problem mixed content występuje wówczas, gdy część elementów zostaje załadowana przy użyciu protokołu HTTPS, a część z wykorzystaniem HTTP. Przeglądarka wyświetla wtedy informację dotyczącą niezabezpieczonych treści. Przykład takiej strony znajduje się tutaj.

Jak ogólnie wiadomo, w dzisiejszych czasach cała zawartość witryny powinna już korzystać z protokołu HTTPS.

Aby tak się działo, należy przede wszystkim skonfigurować w odpowiedni sposób adres witryny w ustawieniach WordPressa.

WordPress - ustawienia - ogólne

Jeżeli ścieżka została wprowadzona do ustawień oraz zostały wykonane kroki podane w tym artykule, a mixed content nadal występuje, należy skorzystać z darmowej wtyczki o nazwie Search & Replace. Wtyczka ta służy do modyfikacji danych w bazie powiązanej z witryną.

Po instalacji wtyczki należy kliknąć w menu WordPressa po lewej stronie opcję Narzędzia -> Search & Replace, a następnie przejść na zakładkę Search & Replace. Przedtem jednak warto jeszcze przejść na chwilę na zakładkę Backup Database i utworzyć na wszelki wypadek kopię bazy danych.

W zakładce Search & Replace należy wyszukiwać podstrony oraz pliki witryny korzystające z protokołu HTTP i zamieniać je na HTTPS.

Search & Replace

W tym celu należy w polu Search for: wpisywać np. http://alivebetter.pl, http://www.alivebetter.pl i zamieniać je na (Replace with:) https://www.alivebetter.pl.

Jeżeli w adresie Twojej strony zawarty jest fragment www, trzeba dodatkowo zamienić ciąg https://nazwa_domeny.rozszerzenie na https://www.nazwa_domeny.rozszerzenie.

Opcja Dry Run powoduje, że wtyczka najpierw przeprowadzi analizę potencjalnych modyfikacji. W celu ich wprowadzenia do bazy, należy odznaczyć opcję Dry Run i ponownie kliknąć przycisk Do Search & Replace.

Ostatnim ważnym krokiem jest wyczyszczenie pamięci cache na serwerze głównym oraz na serwerach CDN. Umożliwia to zarówno Cloudways jak i SiteGround. Cloudflare również oferuje taką opcję. Jedynie AWS CloudFront takiej opcji nie posiada. W przypadku trzech poprzednich firm opcja ta została już pokazana w innych miejscach na tym blogu. W niektórych przypadkach nazywa się ona Clear Cache, w innych Purge Cache.

Po przejściu wszystkich poprzednich etapów oraz po wyczyszczeniu pamięci cache strona powinna ładować się znacznie szybciej niż początkowo. Z pewnością nie natkniesz się już więcej na komunikaty związane z mixed content.

 

Jeśli uważasz ten artykuł za wartościowy i znasz kogoś, komu mógłby on pomóc, udostępnij link do tego posta lub wyślij go znajomemu w prywatnej wiadomości. Dobro często powraca – jeżeli nie od osoby obdarowanej, to od innych ludzi 🙂 Być może również wróci do Ciebie 🙂

 

14 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 🙂

  • Zachary
    Posted at 12:27h, 09 października Odpowiedz

    Doskonały poradnik. Dziwię się osobom, które nie korzystają z CDNów, a dodatkowo nie mają nawet certyfikatu SSL… Sporo się takich widzi. Ja wybieram w takim razie Cloudflare.
    A, w teście GTMetrix wyniki poprawiły mi się z 57/100 i 62/100 na 87/100 91/100. Czas ładowania skrócony o 70%. Dzięki wielkie! Jest rewelacja!

  • Milena
    Posted at 03:46h, 23 października Odpowiedz

    W moim przypadku zmiana dostawcy hostingu znacznie poprawiła czas ładowania strony. Pozostałe z podanych tu optymalizacji skróciły go dodatkowo o połowę.

Post A Comment