Budowanie stron na Wordpress to temat rzeka. Można zrobić je bardzo profesjonalnie i skorzystać ze wsparcia Software House'ów, jednak na to trzeba mieć budżet. Na początku drogi każdego biznesu, często tego budżetu nie ma i wielu Growth Marketerów bierze to na swoje barki i pracują na tzw. builderach czy gotowych szablonach. Rozwiązanie to jest dobre w konteście wyglądu strony, jednak pojawia się problem z optymalizacją. "Gotowce" zwykle mają duży bałagan w kodzie, co powoduje wolne działanie stron. Nie inaczej było ze mną. Zdarzyło mi się już wiele stron postawić, dla siebie, czy moich klientów i znalazłem całkiem niezły patent na przyspieszenie strony.
Podam Ci przykład jednego z moich sklepów internetowych.
Sklep nazywa się kokonik.com. Zbudowałem go na Wordpressie, skorzystałem z tzw. buildera. Pierwsza wersja strony miała jedno zadanie - miała działać. Klikalne elementy, warianty produktów, proces płatności itd.
Po kilku iteracjach zabraliśmy się prędkość strony. Nie zrobiłęm niestety zdjęć, jednak najbardziej podstawowy tester prędkości stron od Google wskazywał ok 15 punktów na 100 dla wersji mobilnej oraz ok 50-60 na komputerach.
Padaka. Szczególnie na mobile
I tu pojawił się problem, ponieważ najbardziej optymalnym rozwiązaniem byłoby zbudowanie strony opartej o czysty kod, jednak to jeszcze nie jest mój próg finansowy, dlatego zacząłem szukać alternatyw. Głównym problemem były zdjęcia. Z racji, że to jest e-commerce, zdjęć jest spoko i pomimo tego, że korzystaliśmy z kompresji i formatu .jpg, nadal obciążały stronę. Dowiedziałem się, że powinienem skorzystać z formatu .webp, o którym wcześniej nie słyszałem, jest on rekomendowany m.in. przez Google.
Z wrodzonego lenistwa, nie chciało mi się podmieniać każdego zdjęcia pojedynczo, więc rozejrzałem się za wtyczkami i jak się okazało, jest. Nie dość że zrobiona przez kolegę z Polski, to jeszcze darmowa! Nazywa się Webp converter for media i wtyczka ta konwertuje wszystkie obrazy zarówno obecne (należy uruchomić ręczną kompresją) i każde nowe, które się załaduje. Po uruchomieniu trybu ręcznego kompresor pokazał oszczędność ok 700 MB na samych zdjęciach (!!!). Cudo.
Kolejna sprawą była odpowiednia unifikacja kodu HTML/CSS i JavaScript i tutaj testowałem wiele wtyczek, które to robiły, jednak to nieznacznie podnosiło prędkość mojej strony, aż w końcu wpadłem na nitropack.io, gdzie należy się zarejestrować, jednak można skorzystać z darmowego planu i wraz ze wzrostem liczby sesji, można przejść na plan płatny.
Po odpaleniu wtyczki, pojawił mi się bardzo prosty panel, który pokazuje jak mocno chcę zoptymalizować swoją stronę:
I rekomenduję testować wszystkie etapy idąc od "Standard" do "Ludicrous" i sprawdzać, jak zachowuje się strona, czy nic w kodzie strony się nie psuje. Testowałem to już na ok 10 stronach i w każdym przypadku, doszedłem do maksymalnego poziomu, który daje niesamowity efekt jeśli chodzi o prędkość strony. Oto wyniki dla wersji mobile:
I wersja na komputery:
Więc, jeśli potrzebujesz przyspieszyć swoją stronę na Wordpress, już nie musisz szukać. Skorzystaj z nitropack i webp converter for media.
Jeszcze podsumowując - PageSpeed tester, tak jak pisałem wcześniej jest bardzo podstawowym narzędziem do testowania prędkości strony i jest on nastawiony pod ocenę Google'a. Są bardziej zaawansowane narzędzia tego typu, jednak tam również zauważyłem wyraźne wzrosty w scoringu.