Jak przyspieszyć stronę internetową na WordPressie?

System CMS WordPress jest obecnie jednym z najpopularniejszych systemów zarządzania treścią, na których oparte są strony internetowe. Na pierwszy rzut oka, nie ma nic prostszego niż postawienie strony na WordPressie. Niestety jednak jest szereg operacji, które można zrobić źle. W konsekwencji te błędy mogą mieć ogromny wpływ na prędkość strony i negatywny odbiór przez algorytm Google’a. Jeśli WordPress jest wolny, to prawdopodobnie jest to efekt złych działań, wynikających z niewiedzy lub zaniedbań tworzącego stronę internetową. Zapraszam Cię zatem do artykułu gdzie wyjaśnię jak przyspieszyć stronę internetową.

Dlaczego prędkość strony ma znaczenie?

Codziennie miliony ludzi korzystają z wyszukiwarek internetowych takich jak Google. To jak wysoko wyświetli się twoja strona internetowa i czy przeciętny użytkownik ją w ogóle zobaczy, w dużej mierze zależy od tego czy spełniasz czynniki rankingowe Google’a. Jednym z najważniejszych czynników jest właśnie prędkość strony. Google bardzo zwraca uwagę na to, czy strona jest “przyjazna” dla osoby ją odwiedzającej. Dlatego do TOP10 w rankingu wyszukiwarki Google trafiają najszybciej działające strony.

Prędkość swojej strony internetowej możesz przetestować na PageSpeed Insights. Narzędzie to wyświetli sugestie, które aspekty na stronie wymagają poprawy/usprawnienia, oraz co może pośrednio wpłynąć na przyspieszenie strony. Wynik szybkości jest oparty na danych laboratoryjnych analizowanych przez narzędzie Lighthouse. Jest to googlowskie narzędzie, niezbędne dla każdego kto chce zbudować dobrze i szybko funkcjonującą stronę internetową.

Jak przyspieszyć stronę – wskazówki

Wybór odpowiedniego serwera

Optymalizacja strony zaczyna się już na samym początku, czyli od wyboru serwera. Jeżeli serwer będzie słaby to Twoja strona główna będzie się ładowała kilka sekund. Wtedy zawartość strony nie będzie miała kompletnie znaczenia, bo zanim strona się załaduje, sfrustrowany klient już dawno z niej ucieknie. Powinniśmy zwrócić uwagę z jakiej wersji protokołu HTTP korzysta serwer – najnowszym standardem jest HTTP/3.

Instalowanie mądrze wtyczek i aktualizowanie ich

Wtyczki na WordPressie często pozwalają uczynić stronę bardziej funkcjonalną. Należy jednak wybierać je mądrze gdyż wiele darmowych wtyczek jest źle napisanych. Bardzo często też nie są aktualizowane lub są aktualizowane bardzo rzadko lub “gryzą się” z innymi wtyczkami. Dlatego też każda zainstalowana wtyczka powinna mieć swoje mocne uzasadnienie. Nie ma co przesadzać z ilością wtyczek. Trzeba pamiętać, że instalacja kolejnej wtyczki to kolejne bajty zajmujące miejsce na serwerze. Z tego samego powodu należy usuwać z WordPress’a wszystkie nieużywane wtyczki (nie tylko je “wyłączać”). Konieczne jest także stałe monitorowanie, czy WordPress wyrzuca nam informacje o nowej wersji wtyczki. Warto zwrócić uwagę, że niezaktualizowane wtyczki (również te wyłączone, ale nieusunięte) to idealny punkt zaczepienia dla hakerów.

Korzystanie z pamięci Cache

Pamięć podręczna (ang. cache) odgrywa bardzo istotną rolę. Cache pozwala na przechowanie często wykorzystywanych danych i na ich ponowne wykorzystanie przez określony czas, aby dostęp do nich był możliwie szybki. Możemy wyróżnić cache po stronie serwera (ang. server side cache) oraz cache po stronie przeglądarki (ang. client side cache):

Cache po stronie serwera – umożliwia zapis plików pamięci podręcznej po stronie serwera, co w efekcie przyspiesza odpowiedź strony i jej załadowanie
Cache po stronie przeglądarki – umożliwia zapis pobranych przez użytkownika danych (np. grafiki, filmy itd.) w pamięci komputera lub telefonu użytkownika, czas zapisu danych zależy od konfiguracji na serwerze; pozwala to na niepobieranie całej zawartości strony za każdym jej wyświetleniem.

W przypadku, gdy chcemy skorzystać w wtyczki cache’ującej to warto dostosować ją do swojego serwera. Przykładowo wtyczka LiteSpeed Cache sprawdzi się tylko dla hostingu LiteSpeed. Jeśli nie chcesz korzystać z wtyczki cache’ującej – możesz zaimplementować działanie w pliku .htaccess.

Włączenie kompresji gzip

Gzip to metoda bezstratnej kompresji danych przesyłanych z serwera do komputera użytkownika. Włączenie kompresji gzip na serwerze może zmniejszyć rozmiar pobieranych plików nawet o 60-80%, co mocno skraca czas wczytywania się strony w przeglądarce klienta.

Włączenie kompresji gzip można zaimplementować w pliku .htaccess.

Zastosowanie minimalizacji plików kodu

Kolejnym krokiem do zwiększenia prędkości ładowania strony internetowej WordPressa jest minimalizacja plików kodu takich jak HTML, CSS i JavaScript. W przypadku jej braku, narzędzia do badania prędkości strony takie jak PageSpeed Insight, wyrzucą informację, że jest to zalecane. A czym dokładnie jest minimalizacja plików? Proces minimalizacji polega na zmniejszaniu plików tj. usuwane są wszelkie białe znaki oraz komentarze i w efekcie tworzony jest skrócony plik “jednolinijkowy”, przy zachowaniu jego funkcjonalności.

Zastosowanie łączenia plików kodu

Równie ważnym aspektem co minimalizacja jest łączenie plików w jeden plik. Kiedy plików jest dużo, niektóre pliki muszą “czekać w kolejce” na ich pobranie. Dlatego łączenie plików w jeden pozwala to na jednorazowe, a nie wielokrotne wysłanie zapytania HTTP do serwera. Tutaj należy jednak uważać, gdyż kolejność łączenia plików CSS i JS ma ogromne znaczenie.

Ustawienie stopniowego ładowania obrazu (lazy load)

Kolejnym aspektem wpływającym na prędkość WordPressa jest sposób w jaki ładowany jest obraz przy wyświetlaniu w przeglądarce. Zmieniając ustawienia, na tzw. lazy load wymuszamy, aby podczas otwierania strony ładowały się obrazy aktualnie widoczne na ekranie. Dopiero w momencie, gdy użytkownik przechodzi niżej strony, pobierane będą kolejne obrazy.

Teoretycznie już wersja 5.5 WordPressa zapewniła natywne leniwe ładowanie obrazów. Warto jednak zauważyć, że wbudowany lazy load w WordPressie działa nieco inaczej, niż we wtyczkach do tego służących. Wtyczki włączające lazy load działają przy wykorzystaniu JavaScript, w przeciwieństwie do WordPress’a, który dodaje do obrazów atrybut loading=”lazy” HTML. W efekcie, wymusza to opóźnione ładowanie obrazu, ale nie we wszystkich sytuacjach. WordPressowe opóźnione ładowanie obrazu nie zadziała w przypadku:

obrazów które nie są umieszczone w treściach, widgetach, awatarach,
ładowania obrazu za pomocą CSS,
elementów wideo,
w przeglądarkach, które nie obsługują parametru loading=”lazy”.

Dlatego pomimo natywnej funkcji WordPress’a, raczej zalecane jest skorzystanie z dowolnej wtyczki dodającej niewielki kod JavaScript. Jej funkcjonalność można przetestować zauważając różnicę (bądź nie) w PageSpeed Insight.

Optymalizacja zdjęć

Operacje na zdjęciach to jest jedna z tych rzeczy, na które szeregowy użytkownik WordPressa może mieć znaczący wpływ, a która jest niezmiernie istotna w kontekście prędkości strony. Niezoptymalizowane zdjęcia to wciąż najczęstszy błąd użytkowników. Na optymalizację zdjęć pod kątem prędkości strony składa się kilka aspektów:

dobór formatu zdjęcia
zmiana rozmiaru zdjęcia
kompresja zdjęcia
konwersja na typ .webp

Dobór formatu zdjęć

Nie wdając się w większe szczegóły, jeśli chcemy żeby zdjęcie zawierało bogatą ilość kolorów, detali, ale nie zależy nam na przezroczystości to dobrym formatem do zapisu jest .jpg. Kompresja tego formatu może i jest stratna, ale zdjęcie zapisane w .jpg ma bardzo niski rozmiar. Jeśli bardzo zależy na zachowaniu oryginalnej jakości zdjęcia, na przezroczystości bądź gdy nasza grafika zawiera tekst to dobry formatem zdjęcia jest bezstratny .png.

Coraz popularniejszym formatem stosowanym na stronach internetowych jest format svg, który odpowiada grafice wektorowej. Stworzenie obrazu na krzywych nie tylko nie obciąża naszej strony, ale i pozwala na całkowitą skalowalność obrazu. Możliwość skalowalności wybranych zdjęć na stronie może nam zaoszczędzić problemów, gdy w grę wchodzi responsywność strony.

Zmiana rozmiaru zdjęć

Im większe zdjęcie tym większą ma wagę, co przenosi się na dłuższe wczytywanie zdjęcia na stronie. Bardzo istotne jest, aby zastosować złoty środek pomiędzy ilością pikseli, ich zagęszczeniem względem wielkości a wagą obrazu. Trzeba jednocześnie pamiętać o systemie zarządzania mediami WordPressa. Po wczytaniu zdjęcia WordPress automatycznie wygeneruje nam kilka wersji rozmiarowych oryginalnego zdjęcia: rozmiar miniatury 150x150px, średni rozmiar 300x300px, duży rozmiar 1024x1024px. Jeśli zatem wczytamy zdjęcie o rozmiarze 300x300px, wygenerowane zostanie o jeden odpowiednik mniej.

Kompresja zdjęć

W celu odchudzenia zdjęcia, przy zachowaniu odpowiedniej jakości, można skorzystać z takich serwisów jak tinyjpg.com lub tinypng.com. Strony te zoptymalizują zdjęcie za nas, nie zmieniając rozmiarów wrzuconego zdjęcia, ale zmniejszając zagęszczenie pikseli przy zachowaniu jakości. Różnica jest na tyle minimalna, że nie jest widoczna gołym okiem człowieka.

Konwersja na typ .webp

WebP to najnowszy format o najlepszym stosunku jakości do wagi pliku. Format WebP jest rozwijany przez Google i pozwala na lepszą kompresję niż jpg czy png. Dlatego zalecane jest aby zdjęcia formatu .jpg i .png ostatecznie były konwertowane na stronie na .webp. Standardowe ustawienia WordPress’a nie konwertują zdjęcia na plik typu .webp, należy zatem skorzystać z odpowiedniej wtyczki.

Wyłączenie Emoji WordPressa

Biblioteka obsługująca emoji jest lekka, jednak są to dodatkowe KB, które muszą zostać załadowane, dlatego warto ją wyłączyć i zacząć korzystać z emoji przeglądarek. Wyłączenie emoji w WordPress zapewni kilka punktów w wyniku Page Speed Insight dlatego warto o tym pamiętać. Emoji możesz wyłączyć za pomocą wtyczki lub pisząc własną funkcję w pliku functions.php.

Aktualizowanie WordPressa

Aby przyspieszyć stronę internetową koniecznie należy aktualizować WordPressa po każdym pojawieniu się informacji o jego nowej wersji.

Korzystanie z zalecanej wersji PHP

Podobnie jak WordPress język PHP co pewien czas aktualizowany jest do nowszej wersji. Wprowadzenie poprawek i powstanie PHP 7 w 2014 roku wywarło ogromny wpływ na wydajność stron internetowych, w tym także tych opartych na WordPressie. Najnowszą wersją, która wyszła w 2020 roku, jest PHP 8. Jednak z aktualizacją należy być ostrożnym. WordPress wyświetla informację do jakiej wersji PHP aktualizacja jest zalecana. Obecnie jest to wersja PHP 7.4 dla wszystkich domen obsługujących WordPressa. Więcej na temat WordPress a PHP 8 można przeczytać na:
https://developer.yoast.com/blog/the-2020-wordpress-and-php-8-compatibility-report/

Unikanie wielokrotnych przekierowań

Bardzo dobrą praktyką jest unikanie łańcuchów przekierowań, które wydłużają czas dotarcia do docelowej strony ze względu na zwiększoną liczbę zapytań. Przekierowania można sprawdzić między innymi w narzędziu https://httpstatus.io/.

Uporządkowanie WordPressa i bazy danych

Zastanawiając się czemu nasza strona nie działa zbyt szybko, często zapominamy o najbardziej oczywistym. Mianowicie zostawiamy nieużywane szkice wpisów czy powielone zdjęcia, które zajmują zbędne miejsce na serwerze. Zdarza się również, że pomimo usunięcia nieużywanych wtyczek, pozostał po nich ślad w naszej bazie danych. Dlatego raz na jakiś czas powinno się skontrolować i uporządkować bazę danych, co pośrednio będzie miało wpływ na czas ładowania się strony.

Themify jako szybki i solidny framework dedykowany na WordPress

Themify jest szanowanym frameworkiem zapewniającym wiele pięknych motywów i potężne wtyczki na WordPress. Ten framework jest płatny, ale nic dziwnego, skoro jest tak niezwykle dopracowany. Themify swoimi ustawieniami uzupełnia wiele braków WordPressa opisanych powyżej, które wymagałyby instalacji wielu dodatkowych wtyczek. Stosowanie WordPressa w połączeniu z Themify i dobrymi praktykami pozwala na tworzenie szybkich stron internetowych wysoko ocenianych przez PageSpeed Insights. Dowodem na to jest konkursowe zestawienie z grudnia 2020 roku stron internetowych Themify, które przekroczyły 92 punktów prędkości w rankingu Google. Zobacz ranking szybko ładujących się stron na WordPressie. Z dumą możemy powiedzieć, że spośród wyróżnionych stron aż pięć projektów jest naszych, w tym nasza strona uKONTENTowani.

Jeśli Ty także chcesz aby Twoja strona była dobrze zoptymalizowana i szybka, skontaktuj się z nami i wypełnij formularz kontaktowy.