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
Pamiętaj o wykonaniu kopii zapasowej bazy danych WordPressa i plików znajdujących się na serwerze zanim zaczniesz bawić się wtyczkami do cache-owania i optymalizacji bloga.

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.
Pamiętaj, aby nie instalować więcej niż jednej wtyczki do cachowania, albo minimalizowania plików. Pamiętaj także, że niektóre zminimalizowane pliki ze skryptami JavaScript (z usuniętymi białymi znakami), mogą przestać działać po takiej operacji. Dokładnie sprawdzaj czy Twoja strona działa prawidłowo, po zastosowaniu zmian.
  • 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.

 

Wpis otagowano:

Pomogłem? Dodaj coś od siebie! Skomentuj ten wpis:

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