Optymalizacja wordpress

Optymalizacja WordPress czyli jak przyspieszyć stronę

Optymalizacja WordPress pomoże przyspieszyć Twoją stronę. Szybko ładujące się strony poprawiają wrażenia użytkownika, zwiększają liczbę odsłon i pomagają w SEO. W tym artykule podzielimy się najbardziej przydatnymi wskazówkami dotyczącymi optymalizacji WordPressa, aby zwiększyć wydajność WordPressa i przyspieszyć wczytywanie strony.

Zasubskrybuj kanał estartupy na YouTube by nie przegapić kolejnych darmowych poradników na temat WordPressa

Dlaczego strona ładuje się wolno?

W zasadzie to możemy to sprowadzić do dwóch ogólnych przyczyn. Wolne strony wczytują się długo ponieważ są albo „ciężkie”, albo „skomplikowane”, albo i to i to.

dlaczego strona internetowa wczytuje się długo

Ciężka strona – oczywiście chodzi tutaj o jej rozmiar w KB. Im większy rozmiar strony internetowej, tym dłużej przeglądarka internetowa musi ją pobierać z naszego serwera (hostingu) na komputer, lub telefon naszego klienta. Dodatkowo strona to nie tylko pliki, ale też baza danych, o którą trzeba dbać, żeby nie była zbyt duża i zaśmiecona.

Skomplikowana strona – chodzi tutaj o jej strukturę (DOM) i ilość różnych plików, które serwer musi przetworzyć, albo przeglądarka internetowa pobrać (requests) z różnych miejsc w Internecie (np. arkusze stylów CSS, skrypty JS, Google Fonts, skrypty Google Analytics, itp.)

Co to jest DOM w html i projektowaniu stron internetowych. Obrazek pokazuje strukturę DOM
HTML DOM (Document Object Model).

Co wpływa na prędkość strony?

Na prędkość strony internetowej wpływa mnóstwo różnych czynników, ale każdy z nich charakteryzuje się innym poziomem trudności i efektywności pod względem optymalizacji.

Źródło: HTTP Archive, październik 2019.

Video – nie wrzucaj na własny serwer, tylko serwuj z wyspecjalizowanych w tym platform (YouTube, Vimeo, Bunny.net, Wistia, itp.)

Zdjęcia – najłatwiejszy sposób na przyspieszenie strony. Zawsze sprawdzaj rozmiar zdjęcia, zanim wrzucisz je na serwer i zastanów się czy nie warto najpierw zoptymalizować.

ShortPixel – optymalizacja zdjęć na ich stronie, oraz wtyczka do WordPressa

Zobacz jak optymalizować zdjęcia krok po kroku

Pozostałe – używaj wtyczki do kompresji i minifikacji (optymalizacji) kodu oraz sieci CDN.

Jak długo powinna ładować się strona?

Według Google najważniejszy pod kątem użytkownika jest Largest Contentful Paint (LCP):

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) jest ważną z punktu widzenia użytkownika metryką, ponieważ wyznacza „odczuwalną” szybkość ładowania się strony. LCP wyznacza punkt na osi czasu, w którym najprawdopodobniej główna treść strony została już załadowana – mały LCP pomaga zapewnić użytkownika, że strona jest użyteczna.

LCP jest częścią Core Web Vitals – metryki, które skupiają się na trzech aspektach doświadczeń użytkownika – ładowaniu, interaktywności i stabilności wizualnej.

Trzy najważniejsze składniki Core Web Vitals czyli LCP, FID i CLS
Podstawowe Wskaźniki Internetowe

Dlaczego warto optymalizować strony?

Google i inni regularnie przeprowadzają różnego rodzaju badania związane z wpływem prędkości strony na różne metryki, takie jak bounce rate, konwersje, itp.

Źródło: https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/
Wpływ poprawy prędkości strony na współczynniki konwersji
Źródło: https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-data/

Prędkość strony ma wpływ na:

  • Współczynnik odrzuceń (bounce rate)
  • Pozycjonowanie (SEO)
  • Koszt reklam
  • Ilość pieniędzy wyrzucanych w błoto na reklamy
  • Dochód ze sprzedaży (konwersje)

Jak zmierzyć prędkość strony?

Wydajność strony internetowej możemy mierzyć na wiele sposobów i istnieje wiele różnych narzędzi do tego, ale skupimy się tutaj na dwóch najpopularniejszych i darmowych.

PageSpeed Insights

PageSpeed Insights to narzędzie od Googla, które pokaże Ci jak Twoją stronę i jej wydajność widzi sam Google. Wydajność ta ma wpływ na widoczność w wynikach wyszukiwania, więc warto od czasu do czasu skontrolować wydajność strony za pomocą tego narzędzia.

Na obrazku widać drugą część wyników testu PageSpeed Insights
Druga część raportu PageSpeed Insights.

GTmetrix

GTmetrix to narzędzie, którym bardziej dokładnie zmierzysz wydajność strony z konkretnej lokalizacji oraz możesz bardziej szczegółowo sprawdzić, z którymi elementami jest problem.

Na zdjęciu widać wynik testu strony estartupy.pl w GTMetrix
Wynik testu w GTmetrix.

Jak zapobiegać spowalnianiu strony?

Zawsze! Dobrze się zastanów zanim cokolwiek zainstalujesz na swojej stronie!

Dzięki ogromnej ilości darmowych wtyczek i motywów, WordPress ułatwia tworzenie niesamowitych stron internetowych z dużą ilością różnych ciekawych funkcji…

Ja wiem jakie to ekscytujące… Klik… i WOW! Mam sklep, blog, forum, platformę kursową, chat na żywo, portal… zaraz zakładasz drugiego facebooka, zaczynasz ostrzyć zęby na Allego…

Ale uwaga! Jako początkujący WordPress’owicz bardzo łatwo popaść we „wtyczkoholizm”!

photo-excited-girl-sit-table-laptop-win-raise-fists-scream-wear-green-shirt-isolated-pastel-color-background-w900px

Wtyczkoholizm – choroba polegająca na utracie kontroli nad ilością instalowanych wtyczek. Instalowanie zazwyczaj dużych ilości wtyczek przez wtyczkoholika jest spowodowane przymusem posiadania fajniejszej strony i nie podlega jego woli, jednak jest możliwy do powstrzymania i utrzymania wysokiej wydajności WordPressa.

Wtyczki są fajne, ale często pozostawiają różnego rodzaju śmieci w naszej bazie danych!

  • nie instaluj wtyczek, jeżeli nie są Ci naprawdę potrzebne
  • nie testuj wtyczek na stronie produkcyjnej
  • nie instaluj wtyczek z podejrzanych źródeł, chyba że to strona testowa
  • nie instaluj przestarzałych i od dawna nieaktualizowanych wtyczek
  • nie serwuj video z własnego serwera, tylko korzystaj z osadzania
  • optymalizuj zdjęcia przed wrzuceniem ich na serwer
  • dobieraj odpowiednie rozmiary miniatur do ramki

Jak zoptymalizować stronę WordPress?

Poniżej opisuję kilka najważniejszych kroków w procesie optymalizacji strony WordPress, które pomogą Ci poprawić jej wydajność.

1. Zmierz wydajność strony

Zacznij od zmierzenia prędkości strony przed przystąpieniem do optymalizacji, żeby mieć porównanie i dowód na pozytywne efekty swojej pracy. Najlepiej zrób screenshot (zdjęcie), żeby móc się podzielić wynikami przed i po 🙂

2. Zrób kopię zapasową strony

Kopia zapasowa co prawda nie poprawi wydajności, ale pomoże zabezpieczyć naszą stronę na wypadek nieprzewidzianych skutków ubocznych optymalizacji. Przy podstawowej optymalizacji opisanej poniżej raczej żadne niepożądane efekty nie powinny wystąpić, ale zawsze warto przypominać o kopiach, bo jest to ważne, szczególnie na początku przygody z WordPressem.

Ja do kopii zapasowych polecam Ci wtyczkę WPvivid

karta wtyczki WPvivid w repozytorium WordPressa
Wtyczka WPvivid

Po zainstalowaniu wtyczki, możemy wykonać kopię zapasową strony jednym kliknięciem przycisku „Backup Now” (3).

zrob kopie zapasowa strony wtyczka wpvivid
Jak zrobić kopię zapasową wtyczką WPvivid.

3. Usuń niepotrzebne i nieużywane wtyczki

To normalne, że w trakcie korzystania z witryny WordPress instalujemy różne wtyczki. Niektóre wtyczki zapewniają krytyczne funkcje, inne mogą być używane tylko przez krótki okres, a kilka może się pojawić przypadkiem i nawet nie pamiętasz po co! (Zdarza się to najlepszym z nas).

Dlatego tak ważne jest, aby od czasu do czasu przeprowadzić audyt wtyczek – przejrzyj wtyczki w swojej witrynie i usuń te, które nie są już potrzebne lub używane.

  • Hello Dolly – niepotrzebna
  • LocoTranslate – wtyczka do tłumaczenia, którą można usunąć na koniec
  • Starter Templates – wtyczki do importu stron demo można usunąć po imporcie
zakladka wtyczki w wordpress pokazująca wyłączone i niepotrzebne wtyczki

Dezaktywacja wtyczek zmniejsza ilość żądań (requests) stron i całkowity rozmiar strony, dlatego jest często jednym z najlepszych sposobów na poprawę wydajności witryny WordPress.
Należy jednak pamiętać, że w niektórych przypadkach sama dezaktywacja wtyczki nie wystarczy. Nawet jeśli dezaktywowana wtyczka nie ładuje już żądań, może nadal powodować rozdęcie bazy danych i może wprowadzać zagrożenia bezpieczeństwa.

Stąd zalecaną praktyką jest całkowite usunięcie niechcianych wtyczek, jeśli już ich nie potrzebujesz.

Zaleca się również aktualizację wszystkich wtyczek na bieżąco, ponieważ mogą one zawierać ulepszenia wydajności i / lub poprawki bezpieczeństwa.

4. Zoptymalizuj zdjęcia

Optymalizacja zdjęć jest bardzo ważnym (jak nie najważniejszym) punktem procesu przyspieszania strony, ponieważ nie jest on skomplikowany, ale zazwyczaj ma największy wpływ na wydajność strony.

Więcej na temat optymalizacji zdjęć znajdziesz w tym artykule Optymalizacja zdjęć na stronę internetową

Optymalizację obrazów można przeprowadzać ręcznie, lub za pomocą wtycze.

Ja polecam Ci wtyczkę ShortPixel.

ShortPixel jest darmowa do 100 zdjęć miesięcznie. Jeżeli potrzebujesz zoptymalizować więcej zdęć, to możesz dokupić sobie jednorazowy pakiet, lub subskrypcję miesięczną.

karta wtyczki shortpixel w katalogu wtyczek wordpress
Wtyczka ShortPixel

Po zainstalowaniu wtyczki, musisz zarejestrować konto, aby otrzymać klucz API. Wystarczy tylko podać adres email i kliknąć „Request Key”. Klucz zostanie natychmiast automatycznie uzupełniony.

rejestracja konta shortpixel

Poniżej pokazuję ustawienia wtyczki w zakładkach General i Advanced.

ustawienia wtyczki shortpixel zakładka general
Ustawienia w zakładce General
ustawienia wtyczki shortpixel zakładka advanced
Zakładka Advanced.

Po zapisaniu zmian możesz uruchomić hurtową optymalizację wszystkich zdjęć, przechodząc do zakładki Media Bulk ShortPixel i tutaj klikamy Start optimizing.

shortpixel jak uruchomić optymalizacje zdjęć
Jak uruchomić optymalizację hurtowa zdjęć.

Jeżeli masz więcej zdjęć niż darmowych kredytów, to możesz zacząć optymalizację od tych najważniejszych zdjęć (np. ze strony głównej).

Wystarczy przejść do zakładki Media Biblioteka (1) i tutaj odszukać interesujące nas zdjęcie. Następnie klikamy Optimize Now (2), aby uruchomić optymalizację tylko dla tego konkretnego zdjęcia.

shortpixel optymalizacja pojedynczych zdjęć
Optymalizacja tylko wybranych zdjęć za pomocą ShortPixel

5. Wykorzystaj kompresję i pamięć podręczną

Istnieje wiele darmowych wtyczek do buforowania (cache) strony WordPress w pamięci podręcznej, ale jeśli chodzi o łatwość obsługi i wyniki pod względem poprawy wydajności, to polecam tutaj wykorzystać wtyczkę WP Fastest Cache.

darmowa wtyczka do buforowania cache dla wordpress wp fastest cache
WP Fastest Cache

Postępuj zgodnie z poniższymi instrukcjami, aby skonfigurować WP Fastest Cache i dodać funkcję buforowania stron do swojej witryny:

  • Zainstaluj i aktywuj wtyczkę WP Fastest Cache
  • W panelu bocznym po lewej pojawi Ci się nowa zakładka o nazwie WP Fastest Cache. Przejdź do niej, aby włączyć i skonfigurować buforowanie strony.
  • Skonfiguruj wtyczkę zgodnie z obrazkiem poniżej:
konfiguracja wtyczki wp fastest cache
Konfiguracja wtyczki WP Fastest Cache
Konfiguracja funkcji Preload wtyczki WP Fastest Cache
Konfiguracja funkcji Preload wtyczki WP Fastest Cache

Integracja z siecią CDN

Wtyczka WP Fastest Cache bardzo ułatwia też integrację z sieciami CDN. Wystarczy przejść do zakładki CDN i tam wybieramy CDN by Cloudflare jeśli korzystamy z Cloudflare, albo Other CDN Provider, jeśli na przykład korzystamy z sieci CDN Bunny.net

Integracja WP Fastest Cache z siecią CDN
Integracja WP Fastest Cache z siecią CDN

6. Przechowuj Google Fonts lokalnie

Niektóre motywy pozwalają na przechowywanie czcionek Google Fonts lokalnie na dysku serwera. Dzięki temu, możemy zredukować całkowity czas oczekiwania (Total Blocking Time).

Jeżeli Twój motyw posiada taką funkcję, to sprawdź w konfiguratorze motywu (Dostosuj).

W przypadku motywu Astra, po przejściu do konfiguratora, otwieramy zakładkę Performance i tutaj możemy włączyć opcję Load Google Fonts Locally oraz Preload Local Fonts.

astra theme jak przechowywać czcionki google fonts lokalnie
Motyw Astra – jak przechowywać Google Fonts lokalnie.

7. Wykorzystaj najnowszą dostępną wersję PHP

Poniższy wykres przedstawia wyniki pomiarów ilości zrealizowanych zapytań do serwera w ciągu jednej sekundy, dla różnych wersji PHP. Widać na nim wyraźnie, że im nowsza wersja PHP, tym więcej zapytań nasz serwer może obsłużyć, czyli nasza stroną będzie działać szybciej.

PHP benchmark test od Kinsta
PHP Benchmark Test (źródło: Kinsta)

Swoją obecną wersję PHP sprawdzisz w panelu WordPressa, w zakładce Narzędzia Stan witryny. Tutaj w zakładce Informacje rozwiń sekcję Serwer i poszukaj wiersza Wersja PHP.

Dane o serwerze w panelu administracyjnym wordpress
Informacja o wersji PHP w panelu administracyjnym WordPress.

8. Wykorzystaj sieć CDN

Content Delivery Network (CDN) – globalna sieć serwerów przechowująca kopie naszej strony w różnych miejscach na świecie. Dzięki CDN nasza strona jest serwowana klientom globalnym z serwerów znajdujących się znacznie bliżej ich lokalizacji (pliki dostarczane znacznie szybciej).

Przykład sieci CDN
Przykład sieci CDN (źródło: gtmetrix.com)

Polecane sieci CDN:

Cloudflare CDN

Po zarejestrowaniu konta w Cloudflare, trzeba dodać tam naszą domenę, klikając Add Site i wpisując nazwę domeny (bez https).

jak dodać domenę do cloudflare
Jak dodać domenę do Cloudflate.

Następnie wybieramy darmowy plan Cloudflare i klikamy Continue.

darmowy cdn od cloudflare
Darmowy CDN od Cloudflare.

Teraz Cloudflare spróbuje automatycznie wyszukać wszystkie obecne wpisy DNS naszej domeny i skonfiguruje je odpowiednio za nas.

automatyczna konfiguracja strefy DNS w Cloudflare
Automatyczna konfiguracja DNS w Cloudflare.

Po chwili powinniśmy otrzymać wynik, wyglądający podobnie do tego poniżej

wynik automatycznej konfiguracji DNS w Cloudflare
Wyniki automatycznej konfiguracji DNS w Cloudflare.

Na tym etapie możemy też od razu dodać jakieś dodatkowe wpisy DNS, których brakuje na liście. Na koniec klikamy Continue, żeby przejść do kolejnego kroku.

Na kolejnej stronie otrzymasz dwa adresy serwerów DNS (nameserver), na które musimy przekierować naszą domenę.

przekierowanie domeny na serwery dns cloudflare
Serwery DNS Cloudflare

Przekierowanie na nowe serwery DNS robi się u rejestratora domeny. Ja swoją domenę zarejestrowałem w firmie LH.pl więc przechodzę do panelu klienta firmy LH i tam zmieniam adresy serwerów DNS dla konfigurowanej domeny.

Gdzie w panelu LH.pl znaleźć strefę DNS domeny
Gdzie w panelu LH.pl znaleźć strefę DNS domeny

Po zalogowaniu do panelu LH.pl, przechodzimy do zakładki Domeny (1), klikamy OPCJE (2) dla interesującej nas domeny i dalej Konfiguruj (3).

Wyskoczy Ci okienko jak poniżej

LH.pl przekierowanie domeny na nowe serwery DNS
Przekierowanie domeny na nowe serwery DNS w LH.pl

Tutaj z rozwijanej listy wybieramy sposób zarządzania domeną – Zewnętrzne serwery DNS (1), a poniżej w polach DNS 1 i DNS 2 wpisujemy adresy serwerów DNS otrzymane w panelu Cloudflare. Na koniec klikamy ZMIEN (3) i czekamy…

Zmiana serwerów DNS może potrwać nawet do 24 godzin, ale możesz sprawdzać już po 2-3 godzinach. Sprawdzamy to w panelu Cloudflare, w zakładce Overview.

cloudflare jak sprawdzić czy serwery DNS się zaktualizowały
Jak sprawdzić czy serwery DNS się zaktualizowały.

Cloudflare nie znalazł automatycznie ustawień DNS domeny?

Jeżeli Cloudflare nie znajdzie żadnych ustawień DNS dla Twojej domeny, możesz spróbować jeszcze raz. Wystarczy usunąć domenę z Cloudflare i dodać ją jeszcze raz.

W zakładce Overview dla danej domeny, na samym dole paska bocznego po prawej znajdziesz link Remove Site from Cloudflare, który pozwala usunąć domenę z Cloudflare.

Quick Start Guide

Po kliknięciu Done, check nameservers na stronie z adresami serwerów DNS Cloudflare przekieruje Cie na stronę Quick Start Guide.

Konfiguracja domeny na stronie Quick Start Guide w Cloudflare
Konfiguracja dla Quick Start Guide w Cloudflare.
  • Automatic HTTPS Rewrites: ON
  • Always use HTTPS: ON
  • Auto minify: JS, CSS, HTML
  • Brotli: ON

Bunny.net CDN

Bunny.net to jedna z lepszych, a przy tym najtańsza sieć CDN na rynku. Za grosze dosłownie możesz korzystać z bardzo rozbudowanej sieci serwerów na całym świecie (więcej serwerów niż w darmowym pakiecie Cloudflare).

Bunny.net CDN
Bunny.net CDN

Dodatkowo Bunny.net to również dużo tańszy odpowiednik Vimeo, Wistia, itp.

Rejestracja konta jest szybka i darmowa, a przez pierwsze 14 dni można korzystać z usług Bunny.net za darmo. Dopiero po upływie darmowych 14 dni trzeba podać numer karty i doładować konto Prepaid.

Na stronie głównej klikasz Try FREE for 14 days, albo Get Started w prawym górnym rogu i podać adres email i hasło na kolejnej stronie.

tworzenie konta na bunny.net
Tworzenie konta Bunny.net

Po dosłownie kilkunastu sekundach jesteśmy gotowi do konfigurowania naszej sieci CDN.

Przechodzimy do zakładki Pull Zone na pasku po lewej i klikamy Add Pull Zone.

Tworzenie Pull Zone na Bunny.net CDN
Tworzenie Pull Zone na Bunny.net CDN

Teraz musimy skonfigurować nowy Pull Zone.

Nazwa pull zone bunny.net CDN
Nazwa Pull Zone.

W sekcji Name wpisujemy dowolną nazwę. Tylko pamiętaj, że nazwa ta będzie widoczna w adresie URL plików zaciąganych z serwerów sieci CDN.

Origin URL dla Pull Zone
Origin URL dla Pull Zone

W sekcji Origin Type zostawiamy zaznaczoną opcję URL, a w sekcji Origin URL wpisujemy dokładny adres naszej strony internetowej (tak jak w przykładach).

Tier i pricing zones dla pull zone

Na koniec wybieramy Standard Tier (trochę droższy, bo szybszy transfer danych) oraz możemy wybrać strefy (Pricing zones) dla których chcemy aktywować usługę CDN. Czyli na przykład, jeśli wiemy na pewno, że nasi klienci nie znajdują się w Południowej Ameryce, to możemy odznaczyć opcję South America w sekcji Pricing zones.

Klikamy ADD PULL ZONE i mamy działającą sieć CDN.

Teraz wszystkie pliki statyczne naszej strony będą dostępne również poprzez sieć CDN. Czyli na przykład każde zdjęcie będzie dostępne pod oryginalnym adresem URL oraz pod adresem URL sieci CDN, zawierającym wybraną przez nas nazwą Pull Zone w adresie.

Przykład działania CDN bunny.net
Przykład działania CDN bunny.net
Przykład działania CDN bunny.net numer dwa

Warto też wiedzieć

Inne ciekawe informacje na temat optymalizacji stron.

WordPress kompresuje zdjęcia automatycznie

Od wersji 4.5 WordPress automatycznie kompresuje do poziomu 82% wszystkie zdjęcia wrzucane do biblioteki mediów.

WordPress skaluje zdjęcia automatycznie

Od wersji 5.3 WordPress automatycznie skaluje wszystkie zdjęcia wrzucane do biblioteki mediów, jeśli ich długość lub szerokość przekracza 2560 pikseli. Zdjęcia są skalowane tak, żeby dłuższa krawędź miała 2560 pikseli, natomiast krótsza krawędź jest skalowana proporcjonalnie.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *