WZMACNIAMY
W INTERNECIE

84

9 minut

Szybka strona internetowa WordPress - jak skrócić czas ładowania strony www do minimum?

Autor: Bartosz Błachnio

Aktualizacja: 12/07/2020

Powszechna opinia o stronach internetowych opartych o WordPress jest taka, że są to strony wolne i ich czas ładowania pozostawia wiele do życzenia. Czy WordPress naprawdę musi być wolny? Odpowiedź zamieszczam w poniższym artykule.

Dlaczego prędkość wczytywania się strony jest ważna?

Czas ładowania się strony ma bardzo duże znaczenie z prostego powodu: prawdopodobieństwo, że odbiorca przejrzy naszą stronę internetową drastycznie spada, jeśli strona ładuje się wolno. Internet jest "szybkim" medium, jego użytkownicy nie grzeszą cierpliwością. Oczekując natychmiastowej reakcji zrezygnują i wejdą na stronę konkurencji jeśli nasza strona ładuje się zbyt długo.

Co oznacza słowo "długo" w wypadku czasu ładowania się strony? Wg badań prędkość ładowania powyżej 2 sekund zmniejsza szanse przejrzenia strony nawet o 30%. To oznacza, że możemy stracić 1/3, a w przypadku dłuższych czasów ładowania nawet połowę potencjalnych klientów!

Z jednej strony mamy szybki internet oparty o światłowody czy wkraczającą sieć 5G, z drugiej - cały czas szybkość internetu mobilnego pozostawia wiele do życzenia. A to właśnie smartfony przejmują obecnie większość ruchu w internecie.

Doskonale wie o tym Google, który cały czas monitoruje zachowania użytkowników, w tym także wpływ czasu ładowania się stron na konwersje (realizowane na stronie cele). Dlatego Google premiuje szybkie strony internetowe w swoich wynikach wyszukiwania (serp) i obniża pozycje stron, które ładują się dłużej.

Użytkownicy nie traktują wszystkich stron równo. W przypadku znanych marek lub braku konkurencji skłonni są poczekać dłużej na pojawienie się strony. Natomiast im mniej znana marka i im większa oferta konkurencji tym bardziej trzeba postarać się o to, aby jej strona ładowała się tak szybko jak to możliwe.

Podsumowując - posiadając stronę o długim czasie ładowania tracimy część odbiorców i pogarszamy nasze szanse w Google na wyższą pozycję w wyszukiwarce - przez co tracimy następną część klientów. Łączne straty są na tyle duże, że nie wolno ich bagatelizować.

Dlaczego trudno jest mieć dzisiaj szybko ładującą się stronę?

Nowe technologie

Głównym powodem jest to, że obecnie strony bazują na innych technologiach. Te technologie bardzo ułatwiają zarządzanie treścią, mają bardzo duże możliwości funkcjonalne, ale z drugiej strony ważą wielokrotnie więcej (ilość przesyłanych danych jest większa). Współczesne strony są też ze względu na swoją budowę bardziej wymagające jeśli chodzi o obciążenie urządzeń (komputera, smartfonu) i serwera internetowego.


Obecnie najpopularniejszą technologią dla stron internetowych w przypadku małych i średnich firm jest aplikacja WordPress, która oprócz wielu fantastycznych zalet ma wadę - strony oparte o WordPress są bardzo często ciężkie i wolne. Na szczęście się zrobić bardzo szybką, ładną i funkcjonalną stronę na WordPress, ale wymaga to dużej wiedzy - napiszę o tym w dalszej części artykułu.

Ewolucja marketingu internetowego

Drugim powodem jest ilość i sposób przedstawiania treści, która znajduje się na stronie internetowej oraz funkcjonalność samej strony. Czasy, kiedy strona była budowana na podstawie kilku obrazków i tekstu dawno się skończyły. Strona to ważne narzędzie marketingowe, chcemy przekazać za jej pomocą dużo wartościowej, atrakcyjnie podanej treści. Dodatkowo chcemy zapewnić interakcję z użytkownikiem, śledzić jego zachowania i preferencje, personalizować przekaz itp.

Nie jest sztuką zrobienie strony szybkiej, ale ubogiej w treść, nieatrakcyjnej i nie realizującej celów biznesowych. Sama szybkość strony nie przemieni naszych odbiorców w klientów. Od tego jest całe bogactwo marketingu internetowego, aby z niego korzystać, chociażby przy tworzeniu lejków sprzedażowych. Czy da się zbudować funkcjonalną, nowoczesną i atrakcyjną stronę opartą o cms typu WordPress? Zaraz spróbuję odpowiedzieć na to pytanie, ale przedtem poruszę jeszcze temat sprawdzania szybkości stron.

Jak sprawdzić szybkość strony www?

Czasu ładowania się strony nie da się sprawdzić obiektywnie na swoim urządzeniu. To, że u nas strona załaduje się szybko nie oznacza, że tak będzie u kogoś innego, kto dysponuje innym urządzeniem i innym łączem.

Do sprawdzania prędkości ładowania służą specjalne serwisy. Najbardziej znane to GT Metrix, Pingdom, PageSpeed Insights firmowany przez Google.

Do interpretacji wyników potrzeba jednak sporego doświadczenia i wiedzy. Czasami możemy mieć gorszy wynik, który tak naprawdę jest spowodowany nie mającymi u nas znaczenia czynnikami. Dopiero dokładna analiza kiludziesięciu czynników pozwala na postawienie właściwej diagnozy.

Przykładowo serwis GT Metrix obniża rating strony z powodu braku wykorzystania sieci CDN. Ale mając stronę, która ma odbiorców wyłącznie w Polsce taka usługa nie jest nam w ogóle potrzebna. Nie skróci ona czasu ładowania, choć obniży nam rating prędkości o kilka punktów.

Jeżeli mamy strony wykorzystujące zaawansowane mechanizmy wykrywania urządzeń i dopasowujące treści w zależności od urządzenia, to również nie zmierzymy obiektywnie prędkości korzystając z darmowej wersji serwisu GT Metrix.

Szeroko omawiany w branży SEO parametr TTFB (Time to first byte) również może być mylący. Znana sieć CDN Cloudflare opublikowała raport, gdzie skompresowana strona miała 8 razy wyższą wartość TTFB (źle), ale cała strona pobrała się 5 razy szybciej..

Takich przykładów można by przytoczyć jeszcze wiele...

Ostatecznie liczy się jednak nie wynik a realny czas ładowania strony. Przykładowo możemy mieć świetnie zoptymalizowaną, która będzie osiągała dobre wyniki w testach z czasem ładowania 2,5 sekundy. I możemy mieć słabo zoptymalizowaną stronę, która będzie osiągała gorsze wyniki w testach, ale realny czas ładowania będzie wynosił 1,5 sekundy.

Nic nie zmieni faktu, że więcej osób obejrzy tę drugą stronę ze względu na wyższą prędkość ładowania. Czy ta strona zamieni przeglądających w klientów - to już inna sprawa...

Serwisy sprawdzające prędkość ładowania są jednak niezwykle przydatne, kiedy chcemy popracować nad zwiększeniem prędkości ładowania naszej strony - dają nam mnóstwo danych, z których możemy wywnioskować czym trzeba się zająć, gdzie tracimy najwięcej, co jest "wąskim gardłem" w przypadku naszej strony.

Tak zupełnie przy okazji - stroną, którą przeglądasz osiąga wyniki 100/100 w Google Page Insights i wczytuje się w 186 milisekund wg Pingdom...

Jeżeli już wiemy, gdzie analizować prędkość wczytywania, możemy przystąpić do działań praktycznych czyli optymalizacji szybkości ładowania stron www opartych o oprogramowanie WordPress.

Co możemy zrobić, aby przyspieszyć stronę opartą o WordPress?

Optymalizacja obrazków

Jest to jeden z najczęstszych i najprostszych do rozwiązania problemów z szybkością strony internetowej. W serwisach sprawdzających szybkość możemy z łatwością wyodrębnić obrazki czy zdjęcia, które ze względu na swoją wagę znacząco opóźniają nam prędkość wczytywania.

Na wagę obrazów wpływają:

  • wymiary - szerokość i wysokość (określamy ją w pikselach). Nie warto stosować obrazów o wymiarach większych niż wyświetlanych na monitorze. Jeśli chcemy zachować dobrą jakość na dużych monitorach - wymiary obrazków są duże, a dopasowywanie ich do wielu typów mniejszych monitorów jest w praktyce utrudnione. Warto użyć programów automatyzujących ten proces.
  • format. Obrazy mogą być zapisane w różnych formatach - jpg, png, gif i nowych formatach takich jak WebP czy SVG. Nie ma jednej dobrej recepty na to, jakiego formatu użyć, zależy to od konkretnego obrazka i efektu, jaki chcemy osiągnąć.
  • rodzaj i stopień kompresji - w przypadku formatów stratnych stopień kompresji w znaczący sposób decyduje o rozmiarze obrazów. W uproszczeniu - im większa kompresja tym mniejszy rozmiar, ale gorsza jakość obrazka. Tutaj trzeba po prostu doświadczenia i wyczucia - tak, aby wybrać optymalny wariant.

Obrazy możemy skompresować w programie graficznym lub online - obecnie jest już dostępnych bardzo wiele serwisów, które automatycznie kompresują obrazy umieszczone na stronach www. Jeżeli mamy stronę opartą o wordpress - możemy wybierać pośród wielu wtyczek automatycznie zmniejszających wagę obrazów.

W przypadku obrazków poza widocznym obszarem ekranu możemy pomyśleć o opóźnionym ładowaniu (lazy load) Obrazki ładują się dopiero w momencie, kiedy pojawią się w polu ekranu na skutek przewijania (scrollowania) strony.

Serwer internetowy

Jakość przydzielonych zasobów, oprogramowanie i obciążenie serwera w sposób bezpośredni wpływają na szybkość ładowania się stron. WordPress z zasady jest dosyć wymagający jeśli chodzi o użycie podzespołów serwera (cpu, ram) Ten temat jest szeroki i wymaga oddzielnego artykułu.

Napiszę tylko , że oprócz najważniejszej sprawy czyli wydajności sprzętowej serwera, ważna jest też konfiguracja i oprogramowanie (najnowsza wersja php, protokół http/2, nginx lub litespeed (+ls cache) zamiast apache, kompresja gzip itp).

WordPress działa w oparciu o oprogramowanie PHP. Najnowsze wersje (7.x) są o wiele bardziej wydajne, także bezwględnie trzeba je uaktualnić jeśli cały czas mamy uruchomioną starszą wersję PHP (5.x)

Zawsze jednak wolałbym serwer ze słabszym oprogramowaniem ale większą dostępnością zasobów niż odwrotnie, dlatego właśnie na dostępne zasoby patrzmy w pierwszej kolejności.

Funkcje wbudowane WordPress

Nie wszystkie wbudowane funkcje w WordPressie są nam w każdym wypadku potrzebne. Warto je wyłączyć, aby niepotrzebnie nie pochłaniały nam dostępnych zasobów. Przykładowo, w większości wypadków możemy wyłączyć Emojis, Gravatars, Pingbacks, Trackbacks, HeartBeat.

Pluginy i tematy

Minimalizujemy ilość i ostrożnie dobieramy wtyczki (pluginy). Niektóre są bardzo zasobożerne i mogą nam znacznie wydłużyć czas ładowania strony oraz zwiększyć zużycie mocy procesora/pamięci naszego serwera.

Przykładowa lista zasobożernych, nie polecanych pluginów: https://onlinemediamasters.com/slow-wordpress-plugins/

To samo dotyczy gotowych tematów. Najlepiej z nich w ogóle nie korzystać, a jeśli już musimy - wybierzmy te, które są lekkie i szybkie.

Minimalizacja ilości przesyłanych danych i zapytań przeglądarki

Pamięć podręczna (cache)

Stosujemy systemy pamięci podręcznej (cache) - za pomocą specjalnego oprogramowania przechowujemy w pamięci serwera i/lub przeglądarki zapisaną wersję całej strony internetowej, która będzie się ładować znacznie szybciej od pobieranej od nowa z internetu. Może to dotyczyć całej strony www lub niektórych jej elementów. Dla różnego typu elementów wyznaczamy optymalny czas przechowywania w pamięci (expire headers)

Usunięcie zbędnych skryptów

Czasami mamy skrypty, które są potrzebne, ale tylko na niektórych podstronach. Nie ma wtedy potrzeby każdorazowego ładowania go na wszystkich podstronach witryny.

Blokada ładowania nie wyświetlanych sekcji na urządzeniach mobilnych

Najczęściej w przypadku stron responsywnych sekcje nie wyświetlane na smartfonach są niewidoczne dzięki zastosowaniu znaczników css (display: hidden). Nie zapobiega to niepotrzebnemu ładowaniu się tych elementów w przeglądarce smartfona. Żeby to osiągnąć trzeba zainstalować odpowiedni program wykrywający typ urządzenia i blokujący warunkowo wyświetlanie się zbędnych treści.

Opóźnienie ładowania nie krytycznych części kodu.

Przenosimy arkusze styli, skrypty js, odwołania do czcionek do odpowiednich sekcji, tak aby ich ładowanie nie opóźniało czasu ładowania kluczowych elementów wizualnych.

Lazy Load

O stosowaniu opóźnionego ładowania (lazy load) obrazków już pisałem, natomiast dla ścisłości dodam, że ten sam mechanizm stosujemy do filmów video czy treści w ramce (iframe). Ładujemy je dopiero w momencie, kiedy na skutek przewijania pojawią się w polu ekranu.

CDN

Wykorzystujemy CDN w przypadku stron, które mają odbiorców rozproszonych w różnych częściach świata. Treści są wtedy pobierane z serwera będącego najbliżej odbiorcy.

Minifikacja kodu źródłowego.

Minifikacja to zminimalizowanie kodu polegająca na usunięciu niekoniecznych znaków (komentarzy, spacji itp) W największej części dotyczy to skryptów i arkuszy styli, które staramy się dodatkowo łączyć ze sobą aby zminimalizować ilość zapytań. Trzeba tutaj jednak uważać, bo czasami może to przynieść odwrotny skutek - łączenie skryptów zawsze poprawi wskaźniki prędkości ładowania (przez zmniejszenie ilości zapytań), ale nie zawsze poprawi realny czas wczytywania się strony. Dlatego trzeba zawsze testować i porównywać poszczególne warianty.

Eliminacja ładowanie się zasobów z zewnętrznych serwerów.

Jeśli jesteśmy pewni jakości naszego serwera to dobrym pomysłem może być ładowanie wszystkich zasobów tylko z tej lokalizacji. W szczególności dotyczy to skryptów .js, czcionek (Google fonts). Ze względu na walory użytkowe raczej zostawiamy najważniejsze zewnętrze kody monitorujące (google tag manager, google analytics, facebook pixel itp), choć także i tutaj są możliwości przejścia na ładowanie lokalne.

Czyszczenie bazy danych

Uruchamiamy regularne czyszczenie bazy danych. WordPress ma tendencję do zapychania bazy wieloma różnymi wpisami, co bezpośrednio wpływa na spadek wydajności serwera.

Sposób ekstremalny - zamiana na wersję statyczną.

W niektórych przypadkach możemy rozważyć zamianę strony WordPress na wersję statyczną (nie procesowaną przez oprogramowanie php i nie połączoną z bazą danych). Takie rozwiązanie, choć bardzo skuteczne, jest jednak rzadko stosowane ze względu na szereg niedogodności (np. niemożliwa jest łatwa, samodzielna aktualizacja treści)

Podsumowanie. Szybki WordPress? Tak!

Optymalizacja prędkości stron opartych o WordPress wymaga trochę pracy, ale w nagrodę mamy cały czas w pełni funkcjonalną, atrakcyjną, przyjazną dla wyszukiwarek stronę, która ładuje się szybko dostarczając użytkownikowi treści w czasie, który zadowoli najbardziej niecierpliwych.

Czy ta praca jest tego warta? Na to pytanie każdy musi odpowiedzieć już sobie sam.

Jeśli chciałbyś abyśmy zbudowali dla Ciebie szybką, atrakcyjną, przemyślaną biznesowo stronę internetową - odezwij się do nas!

Podobał Ci się ten wpis? Podziel się nim z innymi!