Często zadajemy sobie to pytanie w momencie kiedy chcemy zabrać się za poprawę naszych wyników w wyszukiwarce. Wówczas przeglądając różnego rodzaju poradniki od czego zacząć często wpada nam w ręce skrypt od Google badający szybkość strony internetowej dla urządzeń mobilnych oraz komputerów: PageSpeed Google

Przyspieszanie strony internetowej na WordPressie

 

Finalne wyniki są fatalne chociaż poprawiałem poniżej 20 – stąd na chwilę obecną w pierwszej kolejności wykonam podstawowe czynności, które powinny podbić kilkanaście punktów:

1. Aktualizuję silnik WordPress do najnowszej wersji. Przed aktualizacją i każdą poważniejszą zmianą zachęcam do zrobienia aktualizacji wszystkich plików. Podobno są dwie grupy ludzi: jedna grupa robi kopie zapasowe, druga zaś będzie robić kopie zapasowe =)

2. Aktualizuję wszystkie wtyczki + wtyczki premium – w tym “Revolution Slider“, która jak się okazało sama w sobie przyspiesza w porównaniu z wersjami poniżej 5.x.x. Często wtyczki premium nie są aktualizowane, ponieważ developerzy uruchamiają je bez aktywacji kluczem zakupu. Przez co aktualizacja jest niemożliwa – no chyba, że właściciel ponownie zakupi licencję.

3. Usuwam niepotrzebne pluginy. Np. wtyczka, która odpowiada za przekierowaniu 301 (przekierowania zostały dopisane do pliku .htaccess), wtyczka All in one Seo została zastąpiona lepszym odpowiednikiem Yoast SEO. Dzięki tej nowszej mogliśmy pozbyć się pluginu: Google Analytics + Google Sitemap generator. Oprócz tych usunąłem jeszcze kilka, które nie były wykorzystywane ale były aktywne. Od razu zrobiło się bardziej przejrzyście.

4. Kolejnym krokiem było podniesienie wersji PHP do 5.6 (póki co do 7.1 dałem sobie spokój ze względu na problemy z motywem strony – być może poprawię to w późniejszym czasie). Wersję PHP można zmienić samodzielnie w większości cPaneli serwerów. W przypadku trudności zawsze możemy poprosić o to naszego administratora. Aby sprawdzić naszą wersję PHP należy utworzyć plik np. “wersja.php” a w nim zapisać pomiędzy < ?php … ?> polecenie phpinfo();

5. Idąc dalej uruchomiłem kompresję GZIP. Kompresja ta pozwala nam na bezstratne kompresowanie danych, które przesyłane są z serwera do komputera użytkownika. Finalnie przyspiesza nam czas ładowania strony i oto chodzi! 🙂
Taką kompresję możemy uruchomić za pomocą poniższego kodu, który należy dodać do pliku “.htaccess“:

# Gzip Compression
< IfModule mod_filter.c>
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
< /IfModule>
# END Gzip Compression

Ale ja wykorzystałem w tym przypadku opcję, którą dostarczał cPanel serwera. Wystarczyło wybrać opcję: Zoptymalizuj witrynę sieci Web.

 

 

6. Uruchamiam Cache’owanie strony za pomocą pliku “.htaccess. Czyli dodajemy kod do naszego pliku w np. takiej formie. Można to oczywiście zrobić wtyczką:


# Browser Caching
< IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/html "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType application/xhtml-xml "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
< /IfModule>
# END Caching

Skryptem o nazwie “Check GZIP compression” sprawdzam czy aby na pewno wszystko gra a wynik wygląda tak:

 

7. Na to wszystko dokładam jedną wtyczkę optymalizującą kod HTML+CSS+JAVA o nazwie “Autoptimize” i zaznaczam wszystkie 3 główne opcje:

8. Kolejnym ważnym krokiem, który daje najwięcej punktów SpeedTest jest zoptymalizowanie grafik. Do tego celu użyłem pluginu ReSmushIt. Wcześniej skrypt nie chciał działać poprawnie. Optymalizował grafikę co było widać na serwerze ale status optymalizacji w samej aplikacji pozostawał bez zmian. Z pomocą przyszła aktualizacja silnika WP + podniesienie wersji PHP (punkt 1 i 4) i całość przeszła bez problemu (optymalizuje pliki mniejsze niż 5MB). Wtyczka niestety nie usuwa oryginalnych plików kompresowanych a zachowuje je z dopiskiem “-unsmushed.*” na końcu pliku stąd żeby zaoszczędzić miejsca na serwerze możemy usunąć wszystkie pliki z końcówką “*unsmushed.*“. Jeżeli mamy dostęp po SSH do serwera wówczas możemy jedną komendą skasować wszystkie nieużywane pliki graficzne. W przeciwnym razie musimy usuwać je ręcznie:

find . -name "*unsmushed.jpg" -type f -delete lub find . -name "*unsmushed.png" -type f -delete

 

Zainstalowana wtyczka optymalizuje również nowo dodawane grafiki/zdjęcia na bieżąco. Oczywiście jeżeli rozmiar pliku jest poniżej 5MB. W innym przypadku możemy zobaczyć pełną ścieżkę do dużej grafiki i zoptymalizować ją ręcznie nie błądząc po serwerze.

 

8. Wyłączyłem slider dla urządzeń mobilnych. Bez sensu aby slajd, który zawiera drobne detale w grafice mrugał gdzieś nam na telefonie tym bardziej, że tutaj już nie robi nam takiego fajnego efektu jak na komputerze. Wczytywanie slidera odbywa się teraz grafika po grafice (opcja: Single) zamiast wczytywanie wszystkich grafik podczas startu strony i dzięki temu na starcie mamy zaoszczędzone w tym przypadku ok 100kb.

 

9. Na samym finiszu standardowo zainstalowałem i skonfigurowałem wtyczkę, która raczej nie poprawia prędkości strony ale poprawia zdecydowanie bezpieczeństwo stronyWP Shield. Wtyczka jest niezła pod kątem podstawowego bezpieczeństwa naszego WordPressa – mogłoby się wydawać, że jest używana w większości stron WP ale z doświadczenia jest całkowicie inaczej. Konfigurację i opis funkcji tego kombajnu opiszę już nie długo 🙂

Finalny efekt powyższych punktów podwoił nam wyniki szybkości strony:

 

Enjoy!
~Art.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

 

autoresponder system powered by FreshMail