Witam w kontynuacji mojego ostatniego wpisu dotyczącego optymalizacji WordPressa, a właściwie strony opartej o ten właśnie CMS. Postaram się opowiedzieć więcej o tym jak podnieść wynik SpeedRank strony, oraz jak pozbyć się typowych problemów utrudniających te zadanie.

Nie od dzisiaj wiadomo, że prędkość wczytywania strony ma znaczenie. Po pierwsze użytkownicy – tak na prawdę każdy z nas jest użytkownikiem i wie jak irytujące jest czekanie na wczytanie się strony. Po drugie, jako dosyć nowy trend brany pod uwagę przy wyświetlaniu wyników wyszukiwania w Google.

Czy przyspieszenie strony ogranicza się jedynie do kupna droższego serwera? Zdecydowanie nie. Nawet na najtańszych serwerach współdzielonych na stronach możemy podnieść SpeedRank, a nawet wskoczyć na całkiem przyzwoity poziom. Chwaliłem się tym już ostatnio, ale wynik cieszy – dla tego bloga, dla najczęściej odwiedzanego artykułu udało mi się wskoczyć z poziomu 59 na 90 dla urządzeń mobilnych i z 73 na 96 dla pecetów. 😀

Wtyczki do optymalizacji WordPressa

WordPress to wyjątkowe narzędzie. Ze względu na swoją wszechstronność, prostotę i elastyczność skupia wokół siebie bardzo dużą społeczność, tworzącą do niego masę dodatków rozszerzających jego funkcjonalność. Dzięki wtyczkom w kilka chwil stronę opartą na tym CMS-ie można łatwo i szybko zoptymalizować pod kątem SpeedRank-u, bez konieczności na przykład pisania własnych reguł w .htaccess, ręcznego przenoszenia skryptów z sekcji head na koniec strony, czy minimalizowania objętości kodu strony – tym zajmą się wtyczki.

Patrząc na wtyczki z drugiej strony, to również one mogą bardzo obniżać prędkość wczytywania strony dołączając wiele dodatkowych skryptów, grafik i plików CSS, dlatego najpierw należy pozbyć się tych zbędnych i unikać ich instalowania w zbyt dużej ilości.

Optymalizacja WordPressa dla PageSpeed Insights

Po przeanalizowaniu strony/podstrony portalu w PageSpeed Insights dostajemy listę problemów z którymi musimy się uporać, aby poprawić nasz PageSpeed. Najczęstszymi problemami są błędy związane ze skryptami javascript, oraz plikami css blokującymi renderowanie strony i spowalniającymi jej wczytywanie (jest ich wiele, i/lub znajdują się na różnych serwerach), brak przechowywania stałych zasobów witryny w pamięci podręcznej, albo zbyt krótki czas ich przechowywania, a także wiele plików CSS, zbyt duże pliki itp. Poniżej lista błędów z którymi prawdopodobnie będziemy musieli się zmierzyć:

Eliminate render-blocking JavaScript and CSS in above-the-fold content
Optimize CSS Delivery of the following
Use Asynchronous Scripts
Leverage browser caching (expiration not specified)
Minify Resources
Optimize CSS Delivery

A teraz rozwiązanie…

W3 Total Cache

Tak na prawdę przetestowałem już kilka podobnych wtyczek, próbowałem także instalować wiele wtyczek do różnych zadań i zawsze nie do końca to wychodziło. Muszę przyznać, że mnie osobiście bardzo do siebie przekonał kombajn jakim jest W3 Total Cache. Nie od razu i nie bez problemów, ale obecnie nie ma chyba nic lepszego do WordPressa i to za darmo. Aktualnie korzystam tylko z tego pluginu i jednego do optymalizacji obrazków w kwestii optymalizacji bloga.

W3 Total Cache posiada bardzo rozbudowaną stronę administracyjną, która na początku może przerażać, ale uważam że warto zapoznać się z podstawami.

Bardziej szczegółowy opis konfiguracji już w następnym wpisie, bo jest także kilka innych godnych polecenia wtyczek.

Pozostałe problemy z optymalizacją

W tej części artykułu chciałbym wspomnieć o wtyczkach z których kiedyś korzystałem. Trochę dla siebie, aby o nich pamiętać, trochę dlatego, że może ktoś ma pojedynczy problem i nie potrzebuje instalować dwóch wtyczek pokrywających się funkcjonalnością.

Eliminowanie skryptów JavaScript i CSS blokujących renderowanie strony

Aby naprawić problem należy zminimalizować ilość wczytywanych zewnętrznych plików JavaScript jak i CSS. Możemy tego dokonać łącząc je w pojedyncze pliki, o ile jest to możliwe, albo „wrzucając” ich zawartość bezpośrednio do kodu  HTML. Dla plików JavaScript można przenieść ich wczytywanie z sekcji <head> gdzieś pod koniec strony, albo wczytywać je asynchronicznie.

Wtyczki, które nam w tym pomogą to kolejno:

• Head Cleaner – plugin „czyści” nagłówek i stopkę, aby przyspieszyć wczytywanie strony. Potrafi minimalizować i łączyć pliki JS i CSS, a także łączy zwielokrotnione tagi meta, oraz usuwa zbędne białe znaki z kodu strony.
• WP Minify – usuwa białe znaki z kodu JS, CSS, HTML, pozwala na zdefiniowanie plików które chcemy połączyć i usuwać białe znaki. Możliwe jest dołączenie skryptów w dowolnym miejscu. Umożliwia minimalizowanie zewnętrznych skryptów poprzez ich cachowanie na serwerze. Usuwa deklaracje wczytujące wielokrotnie ten sam skrypt. Umożliwia ustawienie czas wygaśnięcia zminimalizowanych plików w cache.

• JavaScript to Footer – plugin nie aktualizowany już od ponad dwóch lat, ale ostatnio jak sprawdzałem jeszcze działał. Plugin przenosi wszystkie wczytywane przez pluginy pliki JavaScript do stopki.
• WP Fast Cache – bardzo dobry, lekki i prosty plugin do cachowania strony.