Jak poprawić szybkość strony wordpress w pagespeed insights

Chcesz zwiększyć szybkość strony i uzyskać wyższy wynik w teście google pagespeed insights? W tym artykule pokażę Ci jak to zrobić bez konieczności grzebania w kodzie strony.

Szybkość strony – na co ma wpływ i dlaczego Twój blog ma być szybki

Zanim przejdziemy do konkretnych działań wyjaśnię Ci szybko o co chodzi z tą szybkością strony. Jak zapewne wiesz google indeksuje i pozycjonuje wszystkie witryny w sieci. 
Dla wyszukiwarki najważniejsza jest jakość, a jakość dzisiaj to między innymi strony które jak najszybciej zaspokoją potrzeby użytkownika.

Czyli w wielkim uproszczeniu dostarczą mu to czego szuka w jak najkrótszym czasie. 
Aby to miało miejsce taka strona musi bardzo szybko się ładować. Dlatego google stawia dość spory nacisk na to jak szybkie jest ich wczytywanie.

Jeżeli chcesz się dowiedzieć jaką szybkość według google ma Twoja strona musisz użyć ich narzędzia o którzym poniżej.

Co to jest Google Pagespeed Insights?

Jak już wspomniałem jest to jedno z narzędzi od Google dzięki któremu możesz sprawdzić jak szybko ładuje się Twój blog. Oprócz oceny punktowej którą otrzymasz, google wskaże Ci również szereg elementów, które należałby poprawić aby szybkość strony wzrosła.
 Całkiem fajnie co?

Przejdźmy zatem do tego co powinieneś zrobić jeżeli Twoja strona otrzymała niską ocenę.

Szybkość strony jak ją zwiększyć?

Możliwości zmian na blogu i optymalizacji pod kątem lepszego wyniku w pagespeed insights jest mnóstwo. W tym wpisie celowo skupię się tylko na tych zmianach, które możesz wykonać bez ingerencji w kod strony czy grzebanie na serwerze. Dlaczego?

Mojego bloga kieruję głównie do osób, które uczą się wordpressa staram się wprowadzić ich w ten świat jak najprostszymi metodami. I chociaż na blogu są poważniejsze tematy, które wymagają podstawowej znajomości HTML czy CSS, to tutaj chcę pokazać, że dobra konfiguracja wtyczki może znacznie zwiększyć szybkość Twojej strony. I nie musisz przy tym być programistą wymiataczem 😉

Popraw szybkość strony przy użyciu wtyczki – tylko!

Nie jestem fanem obładowywania wordpressa niezliczoną ilością pluginów, jednak od czasu do czasu do poważniejszych rzeczy mogą okazać się bardzo pomocne.

Pluginów do optymalizacji znajdziesz bardzo dużo, osobiście testowałem kilka różnych i najlepsze efekty uzyskałem z połączenia wtyczki Autoptimize oraz WP Super cache do pamięci podręcznej. Zacznijmy jednak od początku.

Wtyczka Autoptimize zmiany krok po kroku


Po przeprowadzeniu testu google wyświetli Ci szereg nieprawidłowości, to nimi będziemy się kierować przy dokonywaniu optymalizacji. Najpierw jednak zainstaluj wtyczkę Autoptimize i zerknij na jej możliwości.

Jak widzisz do dyspozycji jest kilka kart, te które będą Cię interesować to JS,CSS, HTML, Obrazki i opcje dodatkowe. Wróćmy jednak od komunikatów które wyświetli Ci google.

1. Minifikuj JavaScript i CSS

Zaczynamy od punktu wyjścia czyli skompresowania plików z skryptami oraz salami CSS.
W tym celu przejdź do zakładki JS, CSS i zaznacz Optymalizuj kod JavaScript (Screen3)

Zaznacz również opcję Do not aggregate but defer w kolejnym punkcie dowiesz się dlaczego.

Przejdźmy dalej, czas na CSSa
 Screen 4

Jak w przykładzie powyżej zaznaczasz opcję Optymalizuj kod CSS, dodatkowo Agregacje plików która łączy wszystko pliki css które masz na stronie w jeden duży oraz łączenie CSS w treści. (Screen 4)

W większości przypadków zabieg ten przyspiesza stronę, może jednak swoją wielkością powodować blokowanie renderowania o czym przeczytasz poniżej.

Kolejnym krokiem aby zwiększyć szybkość strony jest zaznaczenie optymalizacji kodu HTML. Pozostałem opcje które są zaznaczone domyślnie pozostawiasz w takim stanie.

2. Wyeliminuj zasoby blokujące renderowanie

Powracamy do punktu w którym zaznaczyłeś przy opcjach Java Script Do not aggregate dzięki tej opcji zapobiegasz blokowaniu renderowania. Chcąc zrobić to samo ze stylami CSS zaznacz opcję włączenia CSS w treść strony (Screen 4).

Zasoby blokujące renderowanie to najczęściej nieco większe pliki które muszą zostać załadowane. W moim przypadku okazało się, że skrypt google analytics jest takim plikiem, musiałem w tym przypadku zastosować ładowanie asynchroniczne dla tego pliku.

Zrobisz to podając ścieżkę (link) do blokującego pliku na karcie dodatkowe w Autoptimize.

3. Minimalizacja wykorzystania kodu zewnętrznego Kod spoza witryny zablokował główny


Jeżeli używasz na blogu różnego rodzaju dodatków takich jak formularze z serwisów newsletterowych, aplikacje śledzące ruch użytkownika jak hot jar lub inne wynalazki.

Po pierwsze musisz wiedzieć, że może to powodować blokowanie renderowania strony. W takim wypadku dobrze jest zrezygnować z ich funkcji dla samej strony głównej, pozostawiając je na podstronach.

Po drugie, prawda jest taka, że sama strona główna nie generuje aż takiego ruchu jak podstrony. Zazwyczaj trafiają na nią jedynie użytkownicy, którzy dobrze Cię znają. Nowy ruch to zasługa wpisów które dobrze pozycjonują się w google lub są promowane w social mediach.

Np. jeżeli stosujesz formularz do zapisu na newsletter znajdujący się w panelu bocznym. Warto rozważyć wyłączenie tego widgetu dla strony głównej.

4. Wyświetlaj obrazy w formatach nowej generacji i zmień rozmiar obrazów


Im więcej grafik tym strona ładuje się wolniej, musisz zadbać o to aby pliki nie były duże. 
Jeżeli prowadzisz bloga warto na stronie głównej ograniczyć ilość najnowszych wpisów, zapewne każdy z nich ma swoją grafikę.

Istniejące już obraz możesz poddać kompresji w Autoptimize wystarczy zaznaczyć Optymalizuj Obrazki i wybrać stopień kompresji (Screen 7)

5. Odłóż ładowanie obrazów poza ekranem

Zastosowanie opcji „Lazy-loading”, daje świetne rezultaty przy dużej ilości grafik. Jeżeli masz na stronie głównej swojego bloga dużo grafik to koniecznie zastosuj tą opcję. Dodatkowym jej atutem jest możliwość wykluczenia z lazy load pierwszych kilku zdjęć, które załadują się w pierwszej kolejności.

Do tego należy wykorzystać pole Lazy-load nth image podając liczbę zdjęć która nie ma być objęta powolnym ładowaniem. (Screen 8)

6. Stosuj efektywne zasady pamięci podręcznej dla zasobów statycznych

W tym miejscu swoje zadanie wykonuje druga z wspomnianych wyżej wtyczek które użyłem do optymalizacji, mowa o WP Super Cache.

Każda strona którą odwiedzasz zapisuje się w przeglądarce czy tego chcesz czy nie.
Wp Super Cache dokonuje ustawień w taki sposób, że czytelnik odwiedzając Twojego bloga po raz kolejny, zobaczy stronę którą ma zapisana w pamięci podręcznej.

Dzięki temu wczyta się bardzo szybko i tym samym zwiększy szybkość strony w page speed insights.

Po instalacji WP Super Cache nie musisz nic robić cache zostanie domyślnie włączony.

Szybkość strony a szablony WordPress

Optymalizacji każdej strony czy bloga jest inna, słowem klucz jest „to zależy od…”

• szablonu, jeżeli korzystasz z miarę nowoczesnego, nie skomplikowanego to osiągniesz świetne wyniki
• wtyczek jakie masz na blogu im więcej tym niestety ze szkodą dla szybkości.
• zewnętrznych skryptów działających na stronie
• grafik jakie mas zna stronie

Wszystkie kwestie które poruszyłem powyżej na pewno spowodują wzrost szybkości Twojego bloga. Nie obiecuję jednak cudów, jeżeli Twoja strona jest źle zoptymalizowana u podstaw to samymi wtyczkami nie wiele da się zrobić.

Na koniec wyniki jakie udało mi się osiągnąć na moim blogu stosując dokładnie wskazane metody i nie używając optymalizacji „ręcznej” poza wtyczkami.

Desktop

Mobile

Wersja Mobile, która jest bardzo niestabilna dlatego podaje 3 różne wyniki w kolejnych testach.

Zdjęcia

Tło plik wektorowy utworzone przez starline – pl.freepik.com