Optymalizacja szybkości strony WP - PageSpeed Insights

Spis treści:

1. Wpływ szybkości ładowania się strony na pozycję w wyszukiwarce

2. Wybór zoptymalizowanego szablonu i rola wtyczek w szybkości strony

3. Konfiguracja wtyczki "Autoptimize"

4. Konfiguracja wtyczki "EWWW Image Optimizer"

5. Konfiguracja wtyczki "Enable Gzip Compression"

6. Ustawienie pamięci podręcznej przeglądarki

1. Wpływ szybkości ładowania się strony na pozycję w wyszukiwarce

Szybkość działania strony sama w sobie nie ma kluczowego wpływu na jej wyniki SEO. Jest czynnikiem rankingowym, ale nie kluczowym. Wokół tego zagadnienia narosło wiele mitów, głównie rozpowszechnianych przez firmy zajmujące się poprawianiem wyników odpłatnie.

Doświadczone osoby pewnie nie raz spotkały się ze stronami które zajmowały wysokie wyniki w wyszukiwarce pomimo tego, że były fatalnie zoptymalizowane pod względem szybkości. Przykładem takiej strony może być najpopularniejszy w Polsce blog finansowy: jakoszczedzacpieniadze.pl, który przez kilka lat miał te wskaźniki na poziomie 0-10, a jednak zajmował topowe pozycje w Google.

Musimy pamiętać, że Google korzysta z algorytmu rankingowego, który wykorzystuje wiele różnych czynników po to, aby odpowiednio ocenić miejsce jakie dana witryna powinna zajmować w wynikach wyszukiwania. Nie oznacza to jednak, że każdy z tych czynników ma dla algorytmu taką samą wartość. ,,Świętą trójcę’’ od lat stanowi: content (oraz wynikający z niego czas spędzany na stronie), backlinki oraz autorytet danej domeny.

Jeżeli mielibyśmy nadać tej trójcy jakąś wartość procentową, to stanowiłaby ona minimum 70 % naszego sukcesu rankingowego. Kolejne czynniki, takie jak właśnie szybkość ładowania się strony, certyfikat ssl, czy atrybuty alt przy obrazach - składałyby się już tylko na pojedyńcze procenty. Oczywiście te wartości procentowe które podałem są teoretyczne. W końcu nawet nikt kto nie pracuje w Google nie jest w stanie ich dokładnie określić.

Pewne jest jednak, że czas ładowania się strony jest przereklamowany i nie powinno się za wszelką cenę dążyć do wyników 100/100 w teście "PageSpeed Insights". Ten wskaźnik może mieć większe znaczenie dla dwóch jednakowych stron, ale w praktyce ciężko o taką sytuację.

Z drugiej strony, mimo wszystko, nie można też tego wskaźnika zaniedbywać całkowicie. Przyzwoity wynik to wynik pomiędzy 91-100. Sama ocena szybkości działania naszej witryny nie znaczy tyle co tzw. wskaźnik "user experience". Jeśli twoja strona ładuje się 5 sekund, a obrazy na niej ledwo się wczytują bo są za duże - może dojść do przedwczesnych opuszczeń strony co przełoży się na niższą pozycję w wynikach wyszukiwania. Ludzie żyjący dziś coraz szybciej nie są zbyt cierpliwi, zwłaszcza w krajach rozwiniętych.

No i na koniec warto sobie wbić do głowy, że nie wiadomo co w przyszłości postanowią ludzie pracujący nad algorytmem wyszukiwarki Google. Pewnego dnia może się okazać, że zmienią oni algorytm tak, aby kładł większy nacisk na szybkość działania stron internetowych  i chociażby z tego powodu warto jest taką optymalizację przeprowadzić. Lepiej się ubezpieczyć zawczasu, niż później płakać że się to zaniedbało.  

2. Wybór zoptymalizowanego szablonu i rola wtyczek w szybkości strony

SZABLON: Działania optymalizacyjne mogą nie przynieść odpowiedniego efektu, jeżeli serce strony internetowej - tj. jej szablon, który jest jej graficzną reprezentacją, nie będzie odpowiednio dobrany. Należy unikać skórek wypełnionych "bajerami" i zbędnymi funkcjami, które tylko zwiększają czas ładowania się stron.

Przeglądając szablony, warto analizować ich dema. W znacznej większości przypadków jest dostępne demo szablonu, na podstawie którego jesteśmy w stanie ocenić jego potencjał optymalizacyjny. Bardziej dociekliwi mogą prześwietlić go (szablon) za pomocą PageSpeed Insights od Google w celu zorientowania się w wynikach szybkości i podstawowej optymalizacji.

Moim ulubionym szablonem jest zdecydowanie "Schema Fastest SEO WordPress Theme". Polecam go zarówno do stron multi-niszowych, jak i do stron jedno-niszowych typu one-page.

Teraz sprawdźmy jednak jak ocenić potencjał szablonu na podstawie jego dema. Do testów wybrałem szablon "Hiero od aThemes". Aby sprawdzić jak wygląda podstawowa optymalizacja szablonu, którym jesteśmy wstępnie zainteresowani, kopiujemy link do dema szablonu:

- następnie przechodzimy do PageSpeed Insights, gdzie wklejamy wcześniej skopiowany link i klikamy przycisk "analizuj":

- czekamy chwilę aż parser sprawdzi naszą stronę, następnie powinny wyświetlić się dwa wyniki

na komórki:    /    na komputery:

Jeżeli szablon posiada minimum 40 punktów dla każdego z nich - można go zastosować. Jeżeli wynik jest niższy, łatwiej i wygodniej wybrać inny szablon. Wyniki po instalacji na własnym serwerze mogą się różnić ze względu na: treść, szybkość serwera, używane grafiki i inne zmienne. Niemniej jednak wynik dema jest dość miarodajny i na jego podstawie można ocenić czy szablon ma potencjał 

WTYCZKI: Aby strona internetowa oparta o CMS jakim jest Wordpress mogła działać sprawnie i szybko, należy położyć szczególny nacisk na dobór odpowiednich wtyczek. Repozytorium Wordpressa zawiera mnóstwo różnego rodzaju rozszerzeń, z których niestety znaczna część napisana jest "na kolanie" i może powodować znaczne opóźnienia w ładowaniu się stron. Wtyczki bardzo często posiadają w swoim kodzie m.in. niezoptymalizowane obrazy, zbyt obszerny kod javascript, czy nieprzemyślane zapytania do bazy danych. To wszystko generuje dodatkowy czas ładowania się strony i jest zbędne.

Zanim zaczniemy optymalizować naszą stronę dodatkowymi wtyczkami, w pierwszej kolejności należy zrobić porządek z tymi, które już zainstalowaliśmy. Ograniczamy wtyczki do minimum. Bezużyteczne powinny zostać odinstalowane z WP oraz usunięte z serwera, aby nie zużywały dodatkowej pamięci.

Jeżeli chodzi o odpowiedni dobór wtyczek - warto sugerować się ilością pozytywnych głosów w repozytorium Wordpress oraz ilością użytkowników. Im więcej tym lepiej. Sytuacja wygląda natomiast zupełnie odwrotnie w przypadku instalacji wtyczek - tutaj im mniej, tym lepiej. Każda kolejna wtyczka to dodatkowa pamięć do wczytania podczas ładowania strony. Jeśli czegoś nie potrzebujemy, nie instalujemy wtyczki.

3. Konfiguracja wtyczki wordpress - "Autoptimize"

Pierwsza wtyczka optymalizująca którą zastosujemy to Autoptimize. Szablony WP składają się z wielu różnych arkuszy stylów i skryptów JS zapisanych w osobnych plikach. "Autoptimize" służy do optymalizacji szybkości wczytywania się strony poprzez złączenie tych plików w jeden plik skryptów JavaScript oraz jeden arkusz stylów CSS, a także kompresji samego dokumentu HTML.

Dodatkowo, ta wtyczka zawiera funkcjonalność "Lazy Load Images", która pozwala na wczytywanie obrazów tylko w momencie, kiedy użytkownik je widzi, co pozwala na przyśpieszenie ładowania się strony oraz jej działania (użytkowania). Analogicznie, ale w stosunku do filmów działa wtyczka "Lazy Load for Videos" - którą również można dodatkowo zainstalować.

Instalujemy wtyczkę, a następnie przechodzimy do jej ustawień. Odwzorowujemy wszystkie opcje widoczne na poniższych screenach.

- Zakładka JS, CSS & HTML

Klikamy w przycisk "Zapisz Zmiany i Opróżnij Pamięć Podręczną", a następnie przechodzimy do następnej zakładki.
 

- Zakładka IMAGES

Nie zaznaczamy opcji optymalizacji obrazów za pomocą ShortPixel, ponieważ wykorzystamy do tego inną, znacznie wydajniejszą wtyczkę.

Klikamy w przycisk "Zapisz Zmiany".
 

- Zakładka DODATKOWE

W polu tekstowym nazwanym Wstępne łącza z domenami stron trzecich wklejamy następującą treść:

https://fonts.googleapis.com, https://fonts.gstatic.com, https://www.google-analytics.com, https://ajax.googleapis.com, https://connect.facebook.net, https://www.googletagmanager.com, https://maps.google.com

Klikamy w przycisk "Zapisz Zmiany".

4. Jak skonfigurować wtyczkę "EWWW Image Optimizer"

Kolejnym elementem, który wpływa na szybkość ładowania się stron są umieszczane na nich grafiki. W celu ich optymalizacji (zmniejszenie "wagi" - co przełoży się na szybkość ładowania się strony) polecam zainstalować wtyczkę "EWWW Image Optimizer". Wtyczka nie ma limitów co do masowej kompresji, wobec czego WSZYSTKIE już opublikowane grafiki możemy skompresować za jednym razem.

Instalujemy wtyczkę, a następnie przechodzimy do jej ustawień. Odwzorowujemy wszystkie opcje widoczne na poniższych screenach. Przy każdej zakładce zapisujemy zmiany po zaznaczeniu odpowiednich opcji.

- Zakładka BASIC

- Zakładka EASY MODE

- Zakładka ADVANCED

- Zakładka RESIZE

- Zakładka CONVERT

- Zakładka WEBP

5. Konfiguracja wtyczki "Enable Gzip Compression"

Ostatnia wtyczka, którą wykorzystamy to "Enable Gzip Compression". Wtyczka powoduje przyśpieszenie witryny poprzez kompresję określonych zasobów statycznych.

Każde wejście na naszą stronę powoduje, że WordPress pobiera wszystkie potrzebne informacje z bazy danych, a następnie na ich podstawie generuje dokument HTML, który wyświetla się jako nasza strona. Dzięki wtyczkom cache'ującym możemy pominąć proces pobierania i generowania dokumentu - czyli zapisać już wygenerowane dokumenty HTML na dysku serwera i właśnie je wyświetlać użytkownikom. W ten sposób przyśpieszymy ładowanie się strony i zmniejszymy obciążenie serwera.

Tutaj uwaga - używamy tylko JEDNEJ wtyczki tego typu. Alternatywne wtyczki, które często instaluje się nie wiedząc po co to m.in.: PageSpeed Ninja, W3 Total Cache, WP Rocket, WP Super Cache - ale ja polecam jednak dużo łatwiejszą opcję, czyli "Enable Gzip Compression".

Po udanej instalacji, przechodzimy do zakładki "Ustawienia", a następnie wybieramy "Gzip Compression:

Klikamy w przycisk "Enable Gzip compression", czekamy aż pojawi się powiadomienie odnośnie sukcesu i wyłączamy stronę ustawień. Koniec - wszystko działa 

Alternatywa bez używania wtyczki (zadziała także na stronach pisanych w czystym HTML'u) to modyfikacja pliku .htaccess. Dokładniej należy dodać do niego poniższy kod:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

6. Ustawienie pamięci podręcznej przeglądarki

Ostatnim krokiem w optymalizacji strony WP, jest konfiguracja pamięci podręcznej przeglądarki. W tym celu logujemy się do FTP naszego serwera, przechodzimy do pliku .htaccess (zlokalizowany w katalogu głównym public_html) i otwieramy go za pomocą dowolnego edytora tekstu (polecam notepad++).

W pliku .htaccess znajdujemy linijkę zawierającą # END WordPress. Następnie bezpośrednio pod tą linijką wklejamy poniższy kod pod:

# Enable Browser Cache
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>

W razie czego, miejsce wklejenia kodu obrazuje poniższy screen:

Zapisujemy zmiany, zamykamy plik, wygrywamy go na serwer (w zależności czy go pobieraliśmy w celu edycji) i wylogowujemy się z FTP serwera. Skończyliśmy 

.

Mam pytanie. Czemu jak zmieniam stronę logowania to i tak boty na nią trafiają? Skąd znają adres? Codziennie ktoś próbuje się logować mimo że już kilka razy adres zmieniałem  To lepiej chyba tą wtyczkę wyłączyć jak może spowalniać stronę bo i tak nie działa za dobrze?

@Kornus Wordpress ma wiele luk i boty sobie poprawny adres wyciągają w ten czy inny sposób. Wtyczki do zmiany nie usuwają strony logowania, tylko ją maskują. Boty go szukają w jakiś redirectach, API wp albo XML-RPC. Często adres wycieka też z samego kodu motywu strony, jakiś wtyczek. Dlatego boty i tak trafiają, bo dla nich to żadne zabezpieczenie, tylko kosmetyka. To chroni przede wszystkim przed ludźmi którzy np. mają twoje dane logowania z jakiś wycieków, albo je pozyskali przez socjotechnikę.

Jak ci te boty przeszkadzają bardzo, możesz zablokować link logowania w cloudflare i zostawić tylko whitelistę IP ze swoim ip - wtedy boty nie będą wchodzić  Zerknij sobie tutaj: https://make-cash.pl/poradnik jak-zabezpieczyc-strone-na-wordpress-przed-wirusami-t55522/

Godzinę temu, Kornus napisał(a):

Mam pytanie. Czemu jak zmieniam stronę logowania to i tak boty na nią trafiają?

Podaj adres na PW, postaram się złapać problem i pomóc go naprawić. Taka sytuacja nie powinna mieć miejsca gdy dobrze skonfigurowane