Kolejny śmiałek odważył się opublikować artykuł na łamach mojego bloga. Tym razem Sebastian Wilgosz (@wilgoszpl), właściciel firmy wilgosz.pl, zdecydował się podzielić swoimi doświadczeniami w przyspieszaniu bloga opartego o silnik WordPress.
Cieszę się, że Sebastian zdecydował się akurat na ten temat (chociaż miał kilka innych w zanadrzu i być może jeszcze czymś się z nami podzieli) bo jest on z kategorii, którą bardzo chciałbym rozwinąć, ale na razie, ze względu na małą ilość czasu ma u mnie niższy priorytet.
Nie przedłużając oddaję klawiaturę naszemu gościowi 🙂
Piszesz na blogu wspaniałe treści, umieszczasz cudne zdjęcia, jesteś aktywny w mediach, a z ruchu na blogu nadal nic? Być może pora spojrzeć na to jak przyśpieszyć bloga. Jakiś czas temu napisałem serię artykułów na temat przyśpieszenia aplikacji w Ruby on Rails. Nigdy jednak nie podzieliłem się z Wami wiedzą o tym, jak przyśpieszyć bloga postawionego na Wordpressie.
Wydajność? Kogo to obchodzi?
Powody dla których warto się interesować tym jak szybko ładuje się Twój blog poruszyłem już wcześniej, lecz nie będę odsyłał do tamtych artykułów, bo dla użytkownika WordPressa mogą być nieprzystępne. Dlatego poniżej kilka krótkich powodów, dla których warto zainteresować się tematem.
Szybkość ładowania aplikacji internetowej to jeden z najważniejszych czynników generowania ruchu na stronie.
Steve Souders
W 2013 roku Steve Souders – specjalista Google do spraw wydajności, opublikował ciekawe informacje. Według jego danych, opóźnienie odpowiedzi serwerów o 400 ms zmniejszyło całkowity ruch na stronie yahoo.com aż o 9%! W przypadku Yahoo są to miliony zapytań dziennie.
Jeśli chodzi o WordPressa… cóż, nie zgadzam się ze specjalistą od Google.
Steve Souders skupia się w swoich badaniach na ekstremalnie dużych serwisach, jak Amazon, Google czy Yahoo. W przypadku blogów zwyczajnie inne rzeczy mają znacznie większe znaczenie. A jest to przede wszystkim świetna treść i odpowiednia grupa docelowa.
Niemniej czasami, mimo dobrej treści nasze blogi nie generują ruchu albo generują taki sobie ruch i chcemy go zwiększyć. Zaczynamy wtedy interesować się pozycjonowaniem.
Kłopot w tym, że (oprócz linków i treści) jednym z głównych czynników branych pod uwagę przy pozycjonowaniu jest szybkość ładowania się strony, o czym pisze Google na swoim oficjalnym blogu! Samo liczenie pozycji przez algorytmy Google oznacza rozpatrywanie mnóstwa czynników i gdybym miał wydać tysiące złotych na przyśpieszenie mojego bloga, to zacząłbym dopiero przy ruchu większym niż 100 000 miesięcznie.
Ale w WordPressie jest to klika kliknięć. Kilka wtyczek do zainstalowania i już większość pracy zrobiona. Natomiast, korzyści z takiego podejścia do sprawy są ogromne.
- Szybsza strona to wyższe pozycje.
- Wyższe pozycje to więcej odwiedzin.
- Więcej odwiedzin przy szybkiej stronie to lepszy odbiór przez użytkowników.
- Lepszy odbiór to więcej powracających czytelników.
Jak przyśpieszyć bloga?
W przypadku WordPressa jest kilka kategorii, na których warto się skupić aby osiągnąć zadowalające wyniki. W tym artykule będę starał się unikać linkowania do całych setek narzędzi by artykuł był bardziej ponadczasowy. Popularność wtyczek się zmienia w czasie, jedne wychodzą z użytku, pojawiają się nowe i lepsze. Te, których używam w chwili pisania tego artykułu, wymienię tylko z nazwy.
Zacznę od tego, co najważniejsze.
Zwiększenie ruchu na urządzeniach mobilnych
Urządzenia mobilne odpowiadają za większość ruchu w internecie. I to nie moja opinia, lecz dane raportowane na całym świecie.
W przypadku blogów, różnica jest jeszcze większa. A skoro tak, to zastanawiam się, dlaczego ludzie nadal skupiają się na projektowaniu i przyśpieszaniu bloga na komputery, zapominając totalnie o komórkach?
Smartfony są wolniejsze niż komputery stacjonarne i laptopy. Jeśli większość z ruchu na stronie jest z urządzeń mobilnych, należy się upewnić, że strona działa płynnie na komórkach!
Otwórz swojego bloga na smartfonie, przewiń do komentarzy, kliknij w powiązane artykuły, przejdź do następnej strony. Czy wszystko jest OK? Często strony pod WordPressa mają te same problemy. I bardzo proste sposoby na ich rozwiązanie. Aby zbadać swoją wydajność na komputerach i urządzeniach mobilnych, polecam narzędzie Google PageSpeed Insights. Nie przywiązujcie dużej wagi do samych liczb, gdyż to narzędzie generuje za każdym razem inne wyniki, ale dostarcza to, co najważniejsze: informacje co jest nie tak i jak to poprawić.
Zoptymalizuj obrazki
Jeżeli zastanawiasz się jak przyśpieszyć bloga, to zacznij od obrazków. Gdy dbasz o to, by grafiki i zdjęcia na Twoim blogu były naprawdę dobre, prawdopodobnie kupujesz je, robisz dobrym aparatem, albo wyszukujesz na darmowych portalach ze zdjęciami. W każdym z tych przypadków zdjęcia są bardzo dobrej jakości i… dużych rozmiarów.
Problem w tym, że zdjęcia zazwyczaj są zbyt dobre
Ładowanie zdjęć bardzo obciąża i spowalnia Twojego bloga. WordPress domyślnie pozwala Ci na wybranie, jaki rozmiar zdjęcia chcesz umieścić we wpisie, ale:
- na dużych ekranach potrzebujesz dużego zdjęcia,
- a na komórkach o wiele mniejszego.
Niestety domyślnie na wszystkich urządzeniach wczytywane jest to samo zdjęcie, ładujące się na komórkach o wiele wolniej. Ponadto WordPress ma tylko kilka wbudowanych rozmiarów miniatur, aby uzyskać więcej, trzeba pokombinować.
WordPress wrzuca obrazy bez kompresji
Obrazy można kompresować zmniejszając ich rozmiar i dzięki temu przyśpieszając ładowanie. Kompresja może być stratna lub bezstratna (obrazek cierpi na jakości albo nie). Teraz uwaga: jeśli ściągasz wysokiej jakości zdjęcia, to zazwyczaj są one przygotowane do druku.
Wyświetlanie obrazu na ekranie monitora jest ograniczone do rozstawu pikseli i nie jest w stanie wyświetlić takiego obrazu, jaki jest widoczny na kartce papieru! Często zmniejszenie jakości zdjęcia do 75% nie powoduje wizualnych zmian na ekranie komputera (a tym bardziej komórki). Zmiana ta byłaby widoczna dopiero po wydrukowaniu.
Podsumowując, możesz poprawić swoje obrazki na dwa sposoby:
- przygotować mniejsze miniatury i dostarczać obrazy o odpowiednich rozmiarach przystosowane do ekranu urządzenia czytelnika,
- nałożyć kompresję na wszystkie obrazy na stronie (prawdopodobnie nie zaszkodzi nawet lekka redukcja jakości).
Kłopot w tym, że WordPress nie kompresuje zdjęć w żaden sposób a zrobienie tego pojedynczo zajęłoby wieczność.
Świetną wiadomością natomiast jest to, że WordPress dostarcza wtyczki, które zrobią to wszystko za ciebie po paru kliknięciach! Do tego celu ja używam „WP Smush” oraz „Adaptive Images for WordPress”.
Zminimalizuj skrypty i style
Gotowe szablony w WordPressie mają bezsprzecznie wiele korzyści, ale także kilka wad. Jedną z nich jest wydajność. W 90% przypadków do Twojego bloga dołączane jest tysiące linii kodu, których nigdy nie wykorzystasz. Ponadto pliki styli i skryptów są w wersji przygotowanej do edycji – którą można skompresować, usuwając niepotrzebne spacje i znaki nowych linii, często znacząco redukując ich rozmiar.
Możesz oczywiście zobaczyć kod źródłowy swojego szablonu i wyciąć wszystko, czego nie potrzebujesz, ale sama kompresja może bardzo pomóc w ładowaniu Twojej witryny.
Podobnie jak w przypadku poprawy zdjęć, i tu WordPress dostarcza szereg wtyczek pozwalających Ci na poprawę plików JavaScript i CSS za pomocą kilku kliknięć. Ja używam „Better WordPress Minify”.
Wykorzystaj cache serwera
Cache to temat rzeka. Wiele zagadnień z zakresu cache stron już poruszyłem, lecz odnosiło się to do tworzenia aplikacji, a nie korzystania z gotowych rozwiązań.
W skrócie chodzi o to, że gdy piszesz artykuł, jego treść trafia do bazy danych. WordPress jak i szablony, z których korzystasz, napisane są w języku PHP, ale do przeglądarki czytelnika dostarczony jest kod HTML.
Oznacza to, że gdy użytkownik chce coś przeczytać, serwer musi wyciągnąć artykuł z bazy, wrzucić w szablon, przerobić z PHP na HTML i dostarczyć do użytkownika. Ale jak często zmienia się artykuł? Czy nie byłoby lepiej, gdyby serwer zrobił całe to liczenie i przetwarzanie raz, a potem ewentualnie całość powtarzał gdy pojawi się nowy komentarz, albo zaktualizujemy treść artykułu?
Tu właśnie pojawia się rozwiązanie w postaci takich wtyczek jak: „WP Super Cache”. Dzięki ich wykorzystaniu nasz serwer zostaje odciążony, gdyż nie musi już tak dużo liczyć. Możemy więc:
- przy takim samym koszcie utrzymania obsłużyć większy ruch oraz
- dostarczyć treść dla czytelnika szybciej, co zwiększa szansę na jego powrót.
Wtyczka, której nazwę wymieniłem dobrze się mi sprawia, lecz wymaga konfiguracji, gdyż wiele rzeczy jest wyłączonych domyślnie. Zdaję sobie sprawę, że istnieje wiele innych podobnych wtyczek, dlatego zachęcam do dzielenia się propozycjami w komentarzach.
Podsumowanie
Jeśli możesz poprawić swojego bloga niskim (zerowym?) kosztem i dzięki temu poprawić ruch na stronie, czemu tego nie zrobić? Potęgą WordPressa jest to, że jest tak łatwy w obsłudze i ogromne usprawnienia wykonuje się za pomocą kilku kliknięć. Wskazówki na do widzenia:
- Polecam metryki narzędzia Google w celu pozyskania wskazówek, co poprawić na stronie. Zerkaj do nich co jakiś czas.
- Zawsze pamiętaj, że prawdopodobnie więcej osób czyta Twój blog na komórkach. Zadbaj o to, by był do nich przystosowany – nawet bardziej niż na komputery.
Być może pominąłem niektóre ważne aspekty przyśpieszenia WordPressa? Zapraszam do dyskusji w komentarzach!
Sebastian Wilgosz
Jak podobał Ci się artykuł Sebastiana? Muszę przyznać, że sam poznałem kilka ciekawych rozwiązań, o których wcześniej nie wiedziałem. Mam gorącą prośbę. Jeśli masz jakiekolwiek uwagi lub wątpliwości odnośnie powyższej treści, chciał(a)byś podzielić się jakimiś dodatkowymi materiałami na ten temat, albo po prostu podziękować Sebastianowi za dzisiejszy wpis, to śmiało zrób to w komentarzu poniżej.
Jeśli materiał Sebastiana zainspirował Cię do podzielenia się swoją wiedzą i również chciał(a)byś opublikować gościnny wpis na moim blogu, to zachęcam do kontaktu ze mną. Jestem otwarty na propozycje 🙂
Bądź na bieżąco!
Podobają Ci się treści publikowane na moim blogu? Nie chcesz niczego pominąć? Zachęcam Cię do subskrybowania kanału RSS, polubienia fanpage na Facebooku, zapisania się na listę mailingową:
lub śledzenia mnie na Twitterze. Generalnie polecam wykonanie wszystkich tych czynności, bo często zdarza się tak, że daną treść wrzucam tylko w jedno miejsce. Zawsze możesz zrobić to na próbę, a jeśli Ci się nie spodoba – zrezygnować 
Dołącz do grup na Facebooku
Chcesz więcej? W takim razie zapraszam Cię do dołączenia do powiązanych grup na Facebooku, gdzie znajdziesz dodatkowe informacje na poruszane tutaj tematy, możesz podzielić się własnymi doświadczeniami i przemyśleniami, a przede wszystkim poznasz ludzi interesujących się tą samą tematyką co Ty.
W grupie Programista Na Swoim znajdziesz wiele doświadczonych osób chętnych do porozmawiania na tematy krążące wokół samozatrudnienia i prowadzenia programistycznej działalności gospodarczej. Vademecum Juniora przeznaczone jest zaś do wymiany wiedzy i doświadczeń na temat życia, kariery i problemów (niekoniecznie młodego) programisty.
Wesprzyj mnie
Jeżeli znalezione tutaj treści sprawiły, że masz ochotę wesprzeć moją działalność online, to zobacz na ile różnych sposobów możesz to zrobić. Niezależnie od tego co wybierzesz, będę Ci za to ogromnie wdzięczny.
Na wsparciu możesz także samemu zyskać. Wystarczy, że rzucisz okiem na listę różnych narzędzi, które używam i polecam. Decydując się na skorzystanie z któregokolwiek linku referencyjnego otrzymasz bonus również dla siebie.
Picture Credits
20 października 2017 at 12:04
Niestety, ale chyba cały akapit o obrazkach nadaje się do usunięcia:
* To zależy od layoutu, ale zwykle komórki potrzebują większych zdjęć. Raz że telefony mają praktycznie zawsze większą gęstość pikseli niż desktopy i zwykłe obrazki często wyglądają jak rozmyte, a dwa że często wymusza to układ, np obrazek który na desktopie był jako miniatura wpisu po lewej stronie, na komórce jest wrzucony nad wpisem na całą szerokość ekranu, przez co de facto jest większy niż na desktopie.
* WordPress kompresuje obrazki, ale robi to tylko dla tych które sam wygeneruje – kompresowane są miniatury, ale źródło pozostaje niezmienione (i polecam to tak zostawić).
* Automatyczna kompresja wszystkiego jak leci to średni pomysł. Nawet domyślna kompresja WP potrafi czasami tak zmasakrować niektóre grafiki, że przestaje to być akceptowalne. Czasami jedynym sensownym rozwiązaniem jest wyłączenie kompresji WP i kompresowanie grafik ręcznie.
Tak naprawdę problemy z obrazkami wynikają w 90% z problemów w samym motywie. To on powinien definiować odpowiednie rozmiary miniatur i je wykorzystywać tam gdzie trzeba. Próba naprawienia tego ręcznie wtyczkami za pomocą „kilku kliknięć” często widocznie pogarsza jakość grafik na stronie, a pozytywne efekty są zauważalne tylko przez algorytmy typu PageSpeed.
21 października 2017 at 12:55
Nie zgodzę się (częściowo).
Masz rację odnośnie gęstości pixeli w komórkach, korzystam z retiny także na desktopie i nie przyszło mi to do głowy. Ale:
Wtyczki które poleciłem także nie zmieniają źródła, tylko miniatury.
Co do automaycznej kompresji WP – WordPress kompresował obrazy do wersji 4.5 do 90% – obecnie do 82% ze względu na użytkowników mobilnych. To tylko pokazuje, jak bardzo ważna jest kompresja obrazów i redukcja ich rozmiarów.
Blogi fotograficzne pewnie będa zainteresowane większą kompresją ze względu na ilość grafik na stronie, blogi w których grafika jest dodatkiem mogą zadowolić się kompresją mniejszą.
W WP domyślnie nie mamy nad tym żadnej kontroli, a wtyczki o których mówie to umożliwiają.
Algorytmy kompresji stratnej i bezstratnej są różne, warto by porównać algorytm który wykorzystuje WordPress, niemniej nie mogłem znaleźć żadnej informacji na ten temat.
Kompresja bezstratna nie powoduje utraty jakości obrazu, a redukuje rozmiar przyśpieszając stronę. Wyłączenie kompresji wordpressa nie jest rozwiązaniem, jeśli jakość grafik musi być naprawdę dobra na naszych witrynach należało by włączyć przynajmniej kompresję bezstratną, albo rzeczywiście należy przygotować każdą z nich odzielnie i wrzucić na serwer już zoptymalizowaną.
Co do narzędzi typu pagespeed: Dane które opublikowałem pochodzą od google. Jeśli ich narzędzia rozpoznają różnicę w szybkości, a ich blog i eksperci mówią że ma to wpływ na SEO, to należy przyjąć że ma.
W moim przypadku powyższe kroki znacząco przyśpieszyły ładowanie mojego bloga na urządzeniach mobilnych i dzięki czemu o wiele przyjemniej się go czyta na telefonie.
Ponadto artykuł ten jest skierowany także do bloggerów, którzy nie są programistami – jeden z moich klientów posiada bloga na którym opublikował już ponad 3000 artykułów oraz prawie 8 tys zdjęć. Ręczna optymalizacja każdego zdjęcia z osobna zwyczajnie nie wchodzi w grę.
PS: Pagespeed insights nadal krzyczy mi, żebym zoptymalizował obrazki – ale jak wspomniałem wyżej, należy tego typu narzędzia traktować jako pomoc, a nie wyrocznię 😉
22 października 2017 at 10:57
> Co do automaycznej kompresji WP – WordPress kompresował obrazy do wersji
4.5 do 90% – obecnie do 82% ze względu na użytkowników mobilnych. To
tylko pokazuje, jak bardzo ważna jest kompresja obrazów i redukcja ich
rozmiarów.
To tylko pokazuje co twórcom WordPressa się wydaje. Ale oni nie są żadną wyrocznią a ich decyzje nie są prawda objawioną. Sam po zmianie kompresji w 4.5 musiałem na prośbę klienta przywrócić poprzednią wartość, bo jakość grafik przestała być akceptowalna. Nie był to zresztą pierwszy raz, gdy musiałem obchodzić zmiany WP i po upgradzie samodzielnie przywracać poprzednie rozwiązania. Daleki byłbym od traktowania WP jako jakiś autorytet w tym jak powinien działać web.
Przykład z blogiem fotograficznym uważam za wybitnie nietrafiony. Ogólnie ciężko jest znaleźć osobę, która stwierdziłaby „Hej, mój blog ma za mało odwiedzin. Muszę zwiększyć kompresję obrazków, aby strona wyglądała gorzej!”. W przypadku grafików i fotografów to graniczy wręcz z cudem – tu nawet na usuwanie EXIF patrzy się krzywo. Nie ma zresztą się co dziwić – jeśli ktoś pokazuje portfolio, chce je zaprezentować z jak najlepszej strony i podpisać się pod nim. Kompresja obrazków zaczyna się liczyć gdy:
a) mam naprawdę duży ruch i koszty hostingu zaczynają być problemem. Klasyczny dylemat jakość vs taniość.
b) mam naprawdę duży ruch i stali użytkownicy zaczynają narzekać na to, że strona zużywa im ograniczony pakiet transferu mobilnego. Tu tak naprawdę wyższa kompresja jest jedynie półśrodkiem, który lekko poprawia sytuację niszy, a pogarsza wygląd serwisu wszystkim.
BTW: Polecam zobaczyć co PageSpeed zwraca np na YouTuba albo Google+. Pozwoli jeszcze bardziej nabrać dystansu do rezultatów tego narzędzia. Zwłaszcza jak doczytasz jeszcze niektóre zalecenia Google, które sprowadzają się do „Strona wczytuje się byt wolno? Potrzebujesz więcej JS!”. 🙂
22 października 2017 at 13:25
Podlinkuj proszę do źródeł gdy powołujesz się na zalecenia Google, zawsze chętnie pogłębiam swoją wiedzę.
Ale zarówno Youtube jak i Google+ to narzędzia google… spełnianie własnych zaleceń nie musi być dla nich priorytetem. I jak wspomniałem wyżej – nigdy nie było moim celem doprowadzić do sytuacji, gdy pagespeed zwróci mi wynik 100/100. Tym bardziej, że akurat to narzędzie zwraca za każdym razem inne wyniki. Powtarzam jeszcze raz, chodziło mi o wykorzystanie go jako pogląd by sprawdzić, co na blogu można poprawić.
I ponownie powtarzam, artykuł kierowany jest nie tylko do programistów, lecz także do osób, które korzystają z WordPressa nie mając pojęcia o programowaniu.
22 października 2017 at 13:51
Piję do wynalazków typu AMP, które wprowadzają niestandardowe tagi i atrybuty oraz dodatkowy JS żeby to obsłużyć. https://www.ampproject.org/learn/overview/
21 października 2017 at 13:06
„Kłopot w tym, że WordPress nie kompresuje zdjęć w żaden sposób a zrobienie tego pojedynczo zajęłoby wieczność.”
Ten fragment rzeczywiście jest jednak nieprawidłowy i należałoby go poprawić
21 października 2017 at 15:00
Znasz mojego maila – jak podeślesz poprawkę, to zmienię 🙂