Przyspiesz swoją stronę na WordPress

Czas czytania

9 min.

Jednym z istotnych czynników wpływających na pozycję naszej strony w wyszukiwarce jest szybkość wczytywania. Google faworyzuje strony, które używają technik optymalizacji wykorzystywanych zasobów.

Przeprowadza testy kompresji m.in. styli CSS, skryptów JavaScript, wielkości zdjęć na naszej stronie – co składa się na końcową ocenę wystawianą przez Google Page Speed.
Dlaczego? Z prostej przyczyny – ponieważ jeśli mamy wdrożone rozwiązania optymalizujące – strona wczytuje się odwiedzającemu szybciej i generowany jest mniejszy transfer – co ma niebagatelne znaczenie w przypadku urządzeń mobilnych.

Jak sprawdzić wynik Google Page Speed?

Pisaliśmy o tym w poradniku

Jak sprawdzić wydajność swojej strony wg. Google.

Jeśli mamy zamiar wykonywać optymalizację opisaną w tym poradniku – warto w tym miejscu wykonać sobie test – aby móc mieć z czym porównać ocenę, po wykonaniu optymalizacji.

Google w okolicach tego roku (2018) postanowiło indeksować w oparciu o tzw. 'mobile-first’ – czyli w oparciu o wynik Google Page Speed Insights dla urządzeń mobilnych (zamiast jak do tej pory – urządzeń Desktop). Dlatego o poprawę tego wyniku powinniśmy się postarać w pierwszej kolejności.

Optymalizacja WordPress

Oczywiście w przypadku strony na WordPress dochodzą nam różne dodatkowe czynniki, na które projektant strony – web-developer – nie ma wpływu w fazie projektowania, problemem są tu gotowe szablony WordPress i instalowane przez administratora WordPress wtyczki, które zwiększają ilość zapytań do serwera (z ang. tzw. requestów) w trakcie jej wczytywania.

Mówiąc krótko: Naszą misją jest zmniejszenie liczby żądań do serwera i rozmiarów tego, co serwer przesyła do przeglądarki – zachowując wygląd i funkcjonalność strony.

Kolejna wtyczka?

Niestety tak. Jeśli nie mamy zdolności web-developera – nie poradzimy sobie z gotowym szablonem (który niejako też trzeba aktualizować, jeśli zawiera zbyt dużo funkcji), a jeśli dokładamy wtyczki raz za razem – które też wymagają aktualizacji – nawet ręczne wprowadzenie optymalizacji na plikach tej czy innej wtyczki, po jej aktualizacji – spowoduje jej nadpisanie i przywrócenie do stanu sprzed optymalizacji. Na całe szczęście wtyczka taka działa z tyłu strony, w panelu administracyjnym (czyli mówiąc potocznie – na tzw. back-endzie), także z tego punktu widzenia nie zachodzi zwiększenie ilości żądań – ponieważ zainstalowaliśmy kolejną wtyczkę. Wtyczka optymalizacyjna nie posiada też swoich zasobów ładowanych na przedzie strony (tzw. front-endzie).

Istnieje wiele wtyczek WordPress, które przeprowadzają takie automatyczne optymalizacje zasobów strony internetowej na WordPress. Jedne mają więcej opcji, drugie funkcjonalności. Jedne prostsze w obsłudze, drugie prostsze w działaniu. Dlatego omówimy przykład takiej optymalizacji strony WordPress na przykładzie – naszym zdaniem – bardzo funkcjonalnej i prostej, choć niedostępnej w języku polskim wtyczki Fast Velocity Minify.

Aktualizacja: Od 2018r. wtyczka Fast Velocity Minify przeszła sporo zmian jednak w dalszym ciągu zdaje rezultat. Przygotowaliśmy też nowszy poradnik. Sprawdź też wtyczkę Autoptimize, jeszcze łatwiejszy sposób na optymalizację zasobów CSS i JS w WordPress. Przeczytaj artykuł: Jak szybko przyspieszyć stronę na WordPress.

Wróćmy jednak do wtyczki FVM.

Za jej pomocą wykorzystamy 3 główne metody optymalizacji strony WordPress:

łączenie i kompresja arkuszy styli CSS
łączenie i kompresja arkuszy styli JS (JavaScript)
kompresja kodu źródłowego naszej strony (kodu HTML)

Uwaga! Pomimo że wszelkie ustawienia optymalizacji można w razie problemów wyłączyć i wrócić do ustawień sprzed optymalizacji – Przed każdą operacją warto wykonać kopię zapasową naszego WordPress. Najlepiej wykonać to z poziomu hostingu np. DirectAdmin – Kopie użytkownika lub za pomocą wtyczki do kopii zapasowych, co opisywaliśmy w poradniku Kopie zapasowe WordPress

Ryzyko?

Wszystko zależy od szablonu strony, zasobów i od optymalizowanych wtyczek. Zdarzają się wyjątki w szablonie lub we wtyczkach iż nie do końca coś potrafi pracować – gdy jest wrzucone do jednego worka. Dlatego bardzo istotne jest sprawdzenie poprawności działania szablonu i wtyczek WordPress po włączeniu takich funkcji optymalizacji.

Uwaga: Używamy tylko jednej wtyczki optymalizującej w WordPress. Używanie kilku na raz, mówiąc krótko – nie zadziała. Musimy zdecydować się na jedno rozwiązanie.

Wtyczkę instalujemy z oficjalnego repozytorium WordPress.

Uwaga: po włączeniu wtyczki, domyślnie włączają się od razu jej metody optymalizujące naszą stronę WordPress.

UWAGA! Istnieje już nowsza wersja 3.0 wtyczki, która ma zmienioną logikę działania ale zasady te same. Więcej informacji w artykule Fast Velocity Minify 3.0 – nowa wersja wtyczki do optymalizacji frontu WordPress

Po aktywacji, opcje wtyczki są dostępne w menu Ustawienia -> Fast Velocity Minify

Jak widać na przykładzie, klikając w zakładkę 'Status’
Optymalizacja już działa. (Żeby to zaobserwować wchodzimy w tym momencie na stronę w trybie Incognito przeglądarki. Nie zauważymy tego będąc zalogowanym jako administrator)

– Łączone i kompresowane są style CSS
– Łączone i kompresowane są style JS

Teraz jest chwila aby przetestować naszą stronę jako odwiedzający. Najlepiej w nowej przeglądarce lub trybie Incognito, wpisując adres naszej strony internetowej.

Jeśli wszystko wygląda i działa tak samo jak przed optymalizacją. Zerkamy – jak zrobiłby to programista – w kod strony. Czyli klikamy prawym przyciskiem myszy (uważając by nie trafić kursorem na zdjęcie) i wybieramy 'Pokaż źródło’

Oczom ukaże się niezrozumiały kod strony. Ale jeśli w tym szaleńczym ciągu znaków – tak, nasz kod HTML strony jest już skompresowany – dojrzymy podobne rzeczy jak

<link rel='stylesheet' id='fvm-header-0-css'  href='//mojadomena.pl/wp-content/uploads/fvm/out/header-d9942452-0.min.css' type='text/css' media='all' />
<script type='text/javascript' src='//mojadomena.pl/wp-content/uploads/fvm/out/header-10a31ca3-0.min.js'></script>

oznacza to że wtyczka działa, a przeglądarka pobrała zasoby już skompresowane – i na ich podstawie funkcjonuje strona.

Możemy teraz zmierzyć ponownie nasz wynik Google Page Speed. Różnica powinna być odzwierciedlona w wyniku.

W tym miejscu możemy zakończyć podstawową konfigurację wtyczki do optymalizacji – mając w przyszłości na uwadze jedną rzecz.

Usuwanie Cache optymalizacji.

Jeśli w przyszłości dokonamy zmian w szablonie, dodamy nowe wtyczki – warto przebudować cache ręcznie. W zakładce 'Status’ ustawień wtyczki służy do tego przycisk 'Delete’.
Po jego naciśnięciu aktualnie zoptymalizowane zasoby szablonu i wtyczek zostaną usunięte – a przy pierwszym wejściu na naszą stronę WordPress – zostaną automatycznie utworzone na nowo.

Problemy optymalizacji?

Tak jak wspomnieliśmy na początku, z różnych powodów kompresja zasobów na naszym szablonie WordPress może przynieść także problemy w wyświetlaniu strony (style CSS) lub funkcjonowaniu skryptów (JavaScript). Jeśli mamy nieszczęście pracować na takich zasobach – w zakładce ’Settings’ wtyczki możemy wymusić WYŁĄCZENIE technik optymalizacji na stylach CSS lub/oraz plikach JavaScript i skorzystać tylko z niektórych optymalizacji, które nie sprawiają nam kłopotu. Temat jak z sobie z tym poradzić jest zbyt obszerny, generalnie przyjąć można zasadę iż możemy z dozą odpowiedzialności próbować sobie włączać/wyłączać różne dostępne ustawienia wtyczki – pamiętając o każdorazowym usunięciu cache w zakładce ’Status’ – przycisk ’Delete’ – i sprawdzać jak zachowa się nasz szablon lub czy wzrośnie ocena Google Page Speed.

Wtyczka pracuje tylko na plikach JS/CSS szablonu strony i wtyczek, żadne operacje nieodwracalne w naszych artykułach, tekstach, obrazkach nie są wykonywane. Wszystko jest odwracalne po wyłączeniu funkcji wtyczki, bądź odinstalowaniu wtyczki.

Udanych optymalizacji!

Informacja: Oprócz powyższych optymalizacji jedną z potencjalnie zaniedbanych przez nasz WordPress rzeczy są rozmiary plików obrazów – do tego polecamy użyć oddzielnej wtyczki jak np. WP SmushIt

Co jeszcze potrzebuje mój WordPress?

Jak bardzo byśmy nie zoptymalizowali naszej strony na WordPress – potrzebujemy i tak szybkich dostępów do zasobów serwera. Czyli chodzi tu o możliwości serwera i szybkości serwowania plików do przeglądarki odwiedzającego.