Przyspiesz swoją stronę na WordPress

Poprawa szybkości wczytywania strony Wordpress za pomocą wtyczki Fast Velocity Minify


img

Dowiesz się: Jak poprawić wynik Google Page Speed dla swojej strony WWW opartej na Wordpress dzięki zastosowaniu technik łączenia i kompresji CSS i JS.

Dla systemu operacyjnego: Każdy

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.

 

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.

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.

– Łą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

 


Czytaj kolejne poradniki