“Ale po co?” – spytasz zapewne, jeśli dopiero zaczynasz swoją przygodę z WordPressem. “Jak to zrobić?” – kołacze się po głowie tym, którzy znają już wyniki prędkości ładowania się ich strony w przeglądarkach. “Co mogę zrobić, by tego nie spieprzyć by strona nie wybuchła?” – z tym pytaniem przychodzą do mnie Ci, którzy już próbowali, a później szybko uczyli się przywracać stronę z kopii zapasowej. Tak, bo wbrew pozorom, działaniami “przyspieszającymi działanie strony na WordPressie” można sobie zaszkodzić. Na szczęście tylko w sytuacji, gdy robi się ten proces na oślep. I dziś krótka w tym temacie instrukcja.
Spis treści:
Zacznijmy od rozmiarów obrazków
Tak na dobry początek, bo to jeden z najprostszych kroków do wdrożenia i jednocześnie potrzebny każdemu WordPressowi etap. O obrazkach (zdjęciach, grafikach) w WP dobrze jest wiedzieć dwie rzeczy.
Pierwsza – kiedy dodajemy obraz do biblioteki mediów to jest to moment, gdy WordPress tworzy kilka obrazków kolejnych w rozmiarach, jakie są mu potrzebne do poprawnego ich wyświetlania w różnych miejscach i na różnych urządzeniach. I to jest ok, bo dzięki temu obrazek wyróżniający w innym rozmiarze wyświetla się w widoku wpisu, w innym na liście wpisów, a w jeszcze innym na tablecie, czy smartfonie.
I druga – każdy obrazek ma trzy cechy, których warto być świadomym. Są to: rozmiar, czyli ilość miejsca, jakie obrazek zajmuje na dysku lub serwerze, wyrażona w MB (megabajtach), szerokość i wysokość, najczęściej wyrażone w pixelach (px) i rozdzielczość – liczbę punktów obrazu przypadającą na cal, czyli jakby “nasycenie” obrazka, wyrażoną w dpi.
I tak. Na ilość kopii obrazków, które tworzy WordPress nie mamy praktycznie wpływu – to zależy od używanego motywu i wtyczek. Jednak prędkość wczytywania się ich na stronie internetowej zależy w zasadniczej mierze od ich rozmiarów. Wysokość i szerokość są nie do ruszenia – WP potrzebuje konkretnej minimalnej wielkości (nie chcesz mieć niewyraźnych obrazków na stronie), ale ich “odchudzanie” już jest w zasięgu Twoich możliwości. Możesz oczywiście zrobić to w programie graficznym (Photoshop, GIMP), ale jeśli ich nie znasz – z pomocą przychodzi nam Robin image optimizer.
Wtyczka, która posiada dwie bardzo ułatwiające życie z obrazkami funkcje. Z nią zarówno zmniejszysz rozmiary wszystkich obrazków bez utraty ich jakości na swojej stronie oraz spowodujesz automatyczne “odchudzanie” przyszłych, już podczas dodawania do biblioteki mediów.
Wykorzystajmy tzw. “lazy load”
Mechanizm, który powoduje “wolne wczytywanie” obrazków na Twojej stronie. Co to oznacza w praktyce? To takie “pozwolenie” przeglądarce, by wyświetliła już treść danej strony, nie wczytując od razu wszystkich umieszczonych na niej obrazków. Pewnie nie raz widziałaś/łeś ten efekt na innych stronach, np. we wpisach blogowych. Na tych, które stosują “lazy load”, podczas czytania wpisu, obrazki wczytują jakby z opóźnieniem, podczas scrollowania, dopiero w momencie, gdy “docierasz” do nich w treści.
Taki zabieg pozwala przeglądarce wczytać w pierwszej kolejności treść, która sama w sobie jest lżejsza, a dopiero po chwili (liczonej oczywiście w milisekundach) jej cięższe elementy. To sprawia, że na wczytanie przynajmniej części (tej ważniejszej części) Użytkownik/Czytelnik czeka zdecydowanie krócej.
Jak wdrożyć to w WordPressie? Niektóre motywy mają tę funkcję wbudowaną (jeśli widzisz ją gdzieś w ustawieniach motywu – włącz bez wahania). Jeśli Twój jej nie posiada – skorzystaj z najbardziej popularnej wtyczki w tym zakresie – Smush – Lazy Load Images, Optimize & Compress Images.
UWAGA! Jeśli na stronie będziesz wdrażać również dalsze kroki, nie instaluj na tym etapie żadnej dodatkowej wtyczki.
Przejdźmy do cache
Brzmi dziwnie? Wiem, to w ogóle dziwne słowo. Ale na potrzeby tego wpisu zapamiętaj, że cache to taka jakby pamięć. Dokładniej pamięć podręczna. Jeszcze dokładniej – to pamięć przeglądarki, z której korzysta, by wyświetlić stronę. Zaoszczędza to czas potrzebny jej do łączenia się “odpytywania” bazy danych, gdy cały ten cache na stronie nie jest wdrożony.
I tak. ten punkt będzie dłuższy, ale serio warto do niego przysiąść. Bo w nim, praktycznie jedną wtyczką, wdrożymy sporo przyspieszających usprawnień w WordPressie. Do dzieła!
Wtyczek do cache w WordPressie jest kilka, a wśród nich trzy najbardziej popularne. Ja skupię się na jednej – tej, której zastosowanie jeszcze nigdy nie wywaliło mi żadnej strony w kosmos. Z pozostałymi bywało różnie (nie pytajcie! 😉 ).
Po jej instalacji i włączeniu czeka nas mnóstwo funkcji, które usprawnią i przyspieszą wczytywanie strony. Ja skupię się na dwóch “pewniakach”.
Przejdź do General Settings na dobry początek i cache na swojej stronie po prostu włącz, po czym kliknij: Zapisz ustawienia.
Również w General setting, trochę niżej, znajdziesz opcję Lazy load dla obrazków. Włącz ją, a unikniesz instalowania dodatkowej wtyczki (patrz wyżej).
Pozostałe ustawienia zostaw domyślnie – wtyczka dość dobrze działa sama z siebie. Chyba, że masz czas i chcesz się dokształcić. Wtedy zajrzyj do jej Setup guide, tam znajdziesz przewodnik po pozostałych ustawieniach.
Minifikacja CSS?
Czy w ogóle wdrażać? I tak i nie, ale zacznijmy od tego, o co w ogóle chodzi. Zaczęło się od Google, które w swoich zaleceniach dla developerów stron wpisało, że najlepiej, by każda strona internetowa korzystała z jednego pliku CSS. Korzystając z WordPressa niestety natywnie nie jesteśmy w stanie tego punktu spełnić. Zarówno bowiem sam WP, jak i motyw i wtyczki posiadają własne pliki CSS, a to sytuacja, której Google zdecydowanie “nie lubi”.
Rozwiązaniem w tej sytuacji jest tzw. minifikacja kodu CSS. W skrócie to proces zmniejszania rozmiaru plików stylów CSS poprzez usunięcie zbędnych znaków, spacji, nowych linii oraz komentarzy. Celem minifikacji jest zredukowanie objętości pliku CSS, co przekłada się na szybsze ładowanie strony internetowej i lepszą wydajność.
UWAGA! Teoretycznie minifikację możesz po prostu włączyć we wtyczce W3 Total Cache. W praktyce jednak, zanim to zrobisz, upewnij się, że posiadasz i potrafisz przywrócić kopię zapasową strony. Po włączeniu może się okazać, ze nie wszystko poszło gładko i pięknie i Twoja strona się “rozjechała”. Wtedy czem prędzej przywracasz backup!
Podnieśmy wersję PHP
W tym kroku przechodzimy na hosting i wcale nie będzie to trudne – obiecuję. A pewna tego jestem, ponieważ każdy szanujący się hosting możliwość zmiany wersji PHP na serwerze umożliwia i – co więcej – przyjaźnie tłumaczy, jak ją przeprowadzić. To więc jest ten moment, w którym do swego hostingu piszesz i o to pytasz: gdzie i jak możesz zmienić wersję PHP dla swojego WordPressa. Po otrzymaniu instrukcji – wypełniasz ją i logujesz się, gdzie trzeba. sprawdzasz, jaką wersję PHP masz obecnie, zapamiętujesz ją (zapisz sobie!) i podnosisz na minimum 8.1 (lub wyższą, jeśli dostępna). Tak, jakąkolwiek masz obecnie bazową – podnosisz.
Następnie odświeżasz swoją stronę. Jeśli pozostała bez zmian – zostawiasz z podniesionym PHP, a Twoja strona dzięki tej akcji znów trochę przyspiesza. Jeśli się rozjechała lub znikła – wracasz do panelu hostingu i przywracasz wersję, która była poprzednio. Dobra wiadomość jest taka, że wszystko wraca do normy i strona znów działa. Gorsza niestety jest taka, że warto się dowiedzieć, dlaczego nie zadziałało i to naprawić. Niskie PHP nie jest wskazane również ze względu bezpieczeństwa (trochę jak korzystanie z Windows XP, jeśli potrzebujesz obrazowego porównania…).
Zmieńmy format zdjęć
I to również krok zalecany dyktowany przez Google, a obecnie jedynym słusznym jest format WebP. Oferuje on bardziej efektywną kompresję niż tradycyjne formaty obrazków, takie jak JPEG czy PNG i dlatego ma wpływ na prędkość ładowania stron www. Ma to znaczenie przede wszystkim na mobile, więc i dla nas nie jest obojętne. Szczęśliwie się składa, że nie musisz przerabiać obrazków w programach graficznych. Wystarczy, że w swoim WordPressie skorzystasz z wtyczki Support WebP.
HTTP2 i Redis na serwerze
Nie wnikając za bardzo w szczegóły przyjmijmy, że HTTP2 to protokół, a Redis to pamięć podręczna serwera. Nie trudno się domyśleć, że korzystanie z nich obu przyspiesza ładowanie się strony w przeglądarkach. Aby z nich korzystać, polecam skontaktować się z hostingiem. Od niego dowiesz się, czy w ogóle masz taką możliwość oraz otrzymasz instrukcje potrzebne do wdrożenia tych rozwiązań. Pomocnym będzie fakt, że oba znajdziesz we wspomnianym wyżej W3 Total Cache.
To już jest koniec?
Bynajmniej! To dobry, ale zawsze zaledwie początek. Optymalizacja strony pod kątem prędkości to w pewnym sensie never ending story. Warto o niej czytać. Warto się dokształcać. I warto trzymać rękę na pulsie, bo technologie mają to do siebie, że wciąż się rozwijają.
