W sieci roi się od porad i wskazówek, jak zoptymalizować wydajność Twojego WordPressa. Niestety, wyjaśnienia i oceny znaczenia różnych śrub regulacyjnych szybko schodzą na dalszy plan. Pokażemy Ci ważne punkty wyjścia i śruby regulacyjne - w rozsądnej kolejności i z kontekstem. W ten sposób możesz osiągnąć sukces szczególnie szybko.

W międzyczasie hostowaliśmy wiele projektów WordPress. W trakcie tego procesu zgromadziło się wiele danych. Wciąż jesteśmy pytani o to, w jaki sposób można jeszcze bardziej skrócić czas ładowania strony WordPress. Dlatego systematycznie przetwarzaliśmy nasze wnioski z ostatnich lat. Rezultat: 10 środków, dzięki którym możesz szybko i łatwo zoptymalizować szybkość strony WordPress.

Szczególnie jedna rzecz jest ważna: niektórych szybko odstraszają sugestie dotyczące optymalizacji zawarte w takich narzędziach, jak Google PageSpeed Insights. Uwierz mi: Nie osiągniesz najlepszych wyników w zakresie czasu ładowania dzięki skomplikowanym środkom optymalizacji, ale dzięki metodom, które są bardzo łatwe do wdrożenia.

Oczywiście optymalizacja czasu ładowania nie jest celem samym w sobie. Poza lepszym doświadczeniem użytkownika, krótszy czas ładowania przynosi również korzyści dla widoczności Twojej oferty w Google. Z tego powodu przedstawię też pokrótce, na czym polegają poszczególne kroki optymalizacji, aby stworzyć odpowiedni kontekst.

Teoretycznie możesz pracować od góry do dołu i w ten sposób krok po kroku poprawiać czas ładowania strony. Przy okazji, pierwsze siedem punktów odnosi się również do typowych sugestii poprawy Google PageSpeed Insights, które omawiamy bardziej szczegółowo na przykład w tym artykule.

#1 Buforowanie - najważniejszy czynnik wydajności zapewniający szybki czas ładowania

Buforowanie oznacza, że Twoja strona nie musi być żądana przez przeglądarkę z serwera internetowego, a następnie budowana krok po kroku. Zamiast tego, Twoja strona jest ładowana - gotowa do renderowania - z pamięci podręcznej.

Korzyść z tego buforowania jest oczywista: WordPress nie musi przeliczać strony przy każdym jej załadowaniu. Ponieważ WordPress bazuje na bardzo wolnym PHP, cache jest elementarny. Ponieważ zapobiega to między innymi temu, że PHP musi być odczytywane.

W zasadzie istnieją dwa warianty implementacji pamięci podręcznej:

• Dotyczący wtyczek buforujących: Większość użytkowników używa wtyczek buforujących, takich jak W3 Total Cache lub WP Super Cache. Ich konfiguracja jest czasem łatwiejsza, czasem nieco bardziej skomplikowana. W każdym razie wymagana jest tu pewna ilość pracy manualnej.
• Dotyczący hostingu: Niektórzy hostingodawcy - w tym Raidboxes - oferują buforowanie po stronie serwera. Oznacza to, że prawie zawsze możesz obejść się bez wtyczek buforujących. Dzieje się tak dlatego, że Twój hostingodawca już skonfigurował dla Ciebie pamięć podręczną.

Jeśli skonfigurowałeś wydajny system buforowania, zrobiłeś już najważniejszy krok w kierunku optymalizacji WordPressa. Aby uzyskać więcej szczegółów, zajrzyj do naszego artykułu na temat podstaw buforowania.

#2 Uporządkuj WordPressa - porządek to podstawa

Z naszego doświadczenia wynika, że jedną z najczęstszych przyczyn długich czasów ładowania jest przeciążona instalacja WordPressa. A ponieważ ten punkt poprawy nie jest wymieniany przez Google PageSpeed Insights, zajmuje on drugie miejsce w moim Top 10.

Zapchana instalacja WordPressa oznacza w większości przypadków: Zainstalowano zbyt wiele wtyczek. Zasadniczo im mniej wtyczek, tym szybciej działa strona. Oczywiście wtyczki są ważne i nie możesz się bez nich obejść, ale zawsze powinieneś sprawdzić, które z nich są naprawdę potrzebne.

Oraz: Powinieneś upewnić się, że nie tylko dezaktywujesz wtyczki, ale także całkowicie je usuniesz.

To samo dotyczy motywów: nie potrzebujesz więcej niż jednego.

Sprawa wygląda następująco: każda wtyczka i każdy motyw dodaje do twojej strony kod PHP. Dotyczy to także nieaktywnych wtyczek. To sprawia, że Twoja strona staje się bardziej obszerna, a przez to wolniejsza (i bardziej podatna na ataki). Dzieje się tak dlatego, że PHP jest bardzo powolnym językiem skryptowym. Im mniej go jest, tym lepiej.

Wtyczki i motywy, które nie są już potrzebne, są często pozostałością po testach funkcjonalnych i projektowych. Dlatego dobrze jest oczyścić swoje strony WordPress z jednej strony, a z drugiej strony testować nowe funkcje i projekty w środowisku testowym a nie na samej stronie. W ten sposób unikniesz nagromadzenia zbyt wielu pozostałości po wtyczkach.

#3 Obrazy: niedoceniany hamulec czasu ładowania

Jednym z najskuteczniejszych i najprostszych sposobów na skrócenie czasu ładowania jest zmniejszenie rozmiaru obrazów. W ten sposób możesz zaoszczędzić duże ilości danych. Bezstratna kompresja obrazu" zmniejsza rozmiar plików twoich obrazów bez widocznej utraty jakości. Oznacza to, że twoja strona prawie w ogóle się nie zmienia, a jednocześnie możesz znacznie zmniejszyć jej rozmiar dzięki optymalizacji obrazu.

Obrazy często stanowią największą część objętości danych na stronie internetowej. Zmniejszenie rozmiaru obrazów powinno być zatem jednym z pierwszych kroków optymalizacji. Możesz zoptymalizować obrazy ręcznie lub użyć wtyczki do kompresji.

Użycie wtyczki jest z pewnością wygodniejszym rozwiązaniem. Wtyczki nie tylko umożliwiają kompresję nowych obrazów i ich miniatur, ale także automatycznie zajmują się wszystkimi istniejącymi obrazami na Twojej stronie. Usługa ta jest jednak często płatna.

#4 CSS i JavaScript - brzmi nieporęcznie, ale jest łatwe do zoptymalizowania

Drugą największą ilością danych na Twojej stronie są zazwyczaj pliki JavaScript i CSS. To właśnie w tym miejscu zaczyna pojawiać się strach przed kontaktem. Ale nawet bez znajomości kodu możesz łatwo zrozumieć, na czym polega optymalizacja CSS i JavaScript. W zasadzie są tu trzy rzeczy do zrobienia:

• Podsumowanie: CSS i JavaScript ukrywają się w wielu małych, pojedynczych plikach. Zazwyczaj każdy z tych plików musi zostać indywidualnie zażądany przez przeglądarkę z serwera WWW. Generuje to żądania HTTP, które zwykle wydłużają czas ładowania strony. Jeśli jednak skrypty są połączone, zmniejsza się liczba plików do załadowania, a tym samym liczba żądań. Na przykład 53 pojedyncze żądania stają się tylko kilkunastoma. Oczywiście, odpowiednie wtyczki również mogą to zrobić za Ciebie.
• Redukcja: Pliki CSS i JavaScript to linie kodu, które umożliwiają określone funkcje i wygląd Twojej strony internetowej. Ten kod jest pisany przez ludzi. Jest jednak odczytywany przez maszyny. Dlaczego jest to istotne? Wiele z tego, czego potrzebuje człowiek, aby poprawnie zrozumieć kod, nie jest potrzebne komputerowi. Spacje, komentarze i tym podobne elementy nie są więc potrzebne, aby Twoja strona mogła być poprawnie zbudowana. W tym miejscu pojawiają się wtyczki takie jak Autoptimize. Konwertują one CSS i JavaScript z kodu czytelnego dla człowieka na kod czytelny dla maszyny. Dzięki temu poszczególne pakiety danych są mniejsze, a ich przesyłanie szybsze.
• Kompresja: Po scaleniu i zmniejszeniu ostatnim krokiem jest skompresowanie pakietów danych wysyłanych z serwera do przeglądarki. Oznacza to, że serwer minimalizuje rozmiar plików poszczególnych żądań, a przeglądarka je rozpakowuje i oblicza. Jest to szybsze niż wysyłanie nieskompresowanych pakietów danych. Możesz ustawić kompresję GZIP za pomocą wtyczek do buforowania, ręcznych ustawień w .htaccess lub jeśli Twój hostingodawca aktywował już kompresję po stronie serwera.

Nawet bez znajomości skryptów łatwo jest zrozumieć, co przynoszą poszczególne działania. Istnieją wtyczki do wszystkich trzech kroków, które umożliwiają nawet nieprofesjonalistom optymalizację CSS i JavaScript. W naszym artykule o optymalizacji CSS i JavaScript wyjaśniamy dalsze szczegóły i przedstawiamy różne wtyczki.

#5 Hosting ma duży wpływ na czasy ładowania

Pierwsze cztery pola optymalizacji obiecują szczególnie dużą redukcję czasu ładowania, ale mogą spełznąć na niczym, jeśli Twój hosting Cię spowolni. Nie chodzi tu tyle o wymagania sprzętowe dla WordPressa, ale raczej o pewne technologie, które pokażą Ci, że dany hostingodawca pozwala na odpowiednią optymalizację WordPressa.

Jako zasadę można przyjąć, że wydajny hosting WordPressa powinien mieć te kluczowe dane:

• Dysk twardy SSD
• Limit pamięci PHP co najmniej 64 MB, lepiej 128 MB
• Centrum danych w geograficznym sąsiedztwie twojej grupy docelowej
• Aktualna wersja PHP
• HTTP/2 i bezpłatny certyfikat SSL

Jest też różnica między hostingiem współdzielonym a posiadaniem własnego (wirtualnego) serwera.

W przypadku hostingu współdzielonego dzielisz serwer i jego moc obliczeniową z innymi stronami internetowymi. Zazwyczaj jest ich od kilkudziesięciu do kilkuset. W przypadku własnego serwera nie musisz dzielić się z nikim mocą obliczeniową. Oferuje więc przewagę w postaci bezpieczeństwa wydajności.

Chociaż posiadanie własnego serwera nie jest równoznaczne z lepszą wydajnością, doświadczenie pokazuje, że zwłaszcza tanie plany hostingowe, które kosztują tylko kilka euro miesięcznie, nie mogą nadążyć za serwerami wirtualnymi pod względem wydajności.

Drobiazgi - mniej wysiłku, więcej starań

Wszystkie obszary związane z wydajnością, które wymieniłem do tej pory, mogą być zoptymalizowane przez prawie każdego. Albo za pomocą wtyczek, prostych prób i błędów, albo poprzez zakup odpowiednich produktów. Sprawa staje się bardziej skomplikowana, jeśli już zoptymalizowałeś te obszary. Ponieważ wtedy musisz zagłębić się w strukturę strony. A indywidualne działania optymalizacyjne nie mają już takiego samego wpływu.

#6 Renderblocking - niewłaściwa kolejność ładowania

Jednym z problemów, na który zawsze narzekają narzędzia takie jak Google PageSpeed Insights jest kolejność ładowania, która blokuje renderowanie.

Problem staje się jasny na przykładzie: suwak składa się z obrazków i polecenia animacji, które obraca te obrazki. Jeśli polecenie JavaScript jest ładowane jako pierwsze, a obrazki jako ostatnie, to strona ma już funkcję suwaka, ale nie ma obrazów, które mają być wyświetlane. W związku z tym ładowanie strony będzie trwało dłużej. Temu stanowi można zapobiec, stosując odpowiednią kolejność ładowania.

Chociaż istnieją wtyczki do optymalizacji kolejności ładowania, nasze doświadczenie pokazuje, że nie zawsze są one w stanie w pełni zoptymalizować stronę internetową. W rzeczywistości najlepsze rezultaty w takim przypadku osiąga zwykle projektant stron internetowych, który dobrze zna stronę i jej funkcje.

#7 Above the Fold - optymalizacja widocznego obszaru strony

Oprócz całkowitego czasu ładowania strony, kluczowy jest odczuwalny czas ładowania. Jest to czas, który jest wizualnie postrzegany jako czas ładowania. Ten postrzegany czas ładowania można skrócić za pomocą kilku sztuczek. Na przykład, można odnieść wrażenie, że strona jest już całkowicie zbudowana, mimo że w tle nadal trwają obliczenia.

Szczególnie ważna dla optymalizacji tego obszaru, znanego jako Above the Fold, jest optymalizacja kolejności ładowania. Oznacza to nadanie priorytetu treściom i funkcjom, które chcesz, aby odwiedzający widzieli na pierwszym rozmiarze ekranu.

Możesz to osiągnąć na przykład poprzez optymalizację sekwencji ładowania. Istnieją jednak także wtyczki, które dbają o to, by strona ładowała się sprawniej. I to tylko w widocznym obszarze. Przykładem takiej wtyczki jest a3 Lazy Load. W ten sposób nadal wyświetlana jest cała treść, ale czas ładowania strony może na tym skorzystać, zwłaszcza jeśli jest to strona z dużą ilością obrazów.

#8 Czyszczenie bazy danych

Oprócz obrazów i skryptów Twoja baza danych może stać się zbyt duża. Istnieją praktyczne narzędzia, które pozwolą Ci utrzymać bazę danych w dobrym stanie, na przykład wtyczka WP-Optimize.

#9 Pingbacks i Trackbacks

Domyślnie WordPress współpracuje z innymi stronami internetowymi, które pozwalają na wysyłanie pingbacków i trackbacków. Za każdym razem, gdy twoja strona lub jeden z twoich wpisów na blogu zostanie wspomniany na takiej stronie, twoja strona jest automatycznie powiadamiana - co dodatkowo obciąża bazę danych.

Jeśli nie potrzebujesz tej funkcji (moim zdaniem jej przydatność jest znikoma), powinieneś wyłączyć pingbacki i trackbacki. Ponownie pomaga w tym wtyczka WP-Optimize. Dla pełnego obrazu sytuacji należy jednak wspomnieć, że jest to raczej problem teoretyczny. Nie doświadczyliśmy jeszcze żadnych poważnych spadków wydajności z tego powodu.

#10 Zapobieganie hotlinkowaniu

Hotlinking oznacza, że ktoś linkuje bezpośrednio do obrazu na Twoim serwerze - efektywnie "kradnąc" Twoją przepustowość. Na serwerze Apache, możesz zapobiec hotlinkowaniu dodając następujący kod do pliku .htaccess:

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?yourwebsite.com [NC]

RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.de [NC]

RewriteCond %{HTTP_REFERER} !^http(s)?://(www.)?google.com [NC]

RewriteRule .(jpg|jpeg|png|gif)$ – [NC,F,L]

Aby zapobiec hotlinkowaniu na serwerze NGINX, dodaj te linie kodu do pliku konfiguracyjnego NGINX:

location ~ .(gif|png|jpeg|jpg|svg|webp)$ {
     valid_referers none blocked server_names
	 *.example.com example.* www.example.org/galleries/ ~\.google\.;
     if ($invalid_referer) {
        return 403;
    }
}

Podział kodu:
location ~ .(gif|png|jpeg|jpg|svg|webp)$ {
określa rozszerzenia plików, które chcesz chronić przed hotlinkowaniem, na przykład jeśli chcesz chronić pliki PDF, linia kodu będzie wyglądać następująco:
location ~ .(gif|png|jpeg|jpg|svg|webp|pdf)$

{valid_referers none blocked server_names
*.yourwebsite.com ~.google. ~.bing. ~.yahoo.;
Te linie są nieco rozbudowane, ale pomagają lepiej zrozumieć, co można zrobić z tą regułą. Te linijki wskazują, które domeny mogą zamieszczać gorące linki do twoich plików. W tym przykładzie - twoja-strona.com - ze wszystkimi subdomenami, a także Google, Bing i Yahoo.

if ($invalid_referer) {
return 403;
}
Teraz, jeśli przyjdzie żądanie, a zasób, którego dotyczy prośba nie znajduje się na twojej białej liście, serwer zwróci błąd 403 (" Forbidden").

"A co z CDN?".

Jednym z najczęściej zadawanych pytań jest pytanie o Sieć dostarczania treści (CDN). Na przykład: "Czy dzięki CDN moja strona będzie szybsza dla odwiedzających w Niemczech?", "Dlaczego właściwie potrzebuję CDN?", "Czy poleciłbyś mi użycie CDN dla mojego bloga lub sklepu?". W większości przypadków jednak odpowiedź brzmiała: nie.

Mówiąc krótko: CDN ma największy sens, jeśli Twoi użytkownicy są szeroko rozproszeni geograficznie. Na przykład, jeśli masz klientów w Europie Środkowej, Ameryce Południowej i Australii. Jeśli twoja główna grupa docelowa jest ograniczona do jednego kraju, możesz od razu odrzucić CDN do optymalizacji WordPressa.

Przy okazji, twórca WordPress Ernesto Ruge napisał bardzo ciekawy artykuł na ten temat, co pozostaje mi tylko polecić.

Wniosek: Nie bój się skomplikowanych w wyglądzie kroków optymalizacyjnych

Często obawiamy się kontaktu z tymi obszarami, w których szczególnie łatwo można zaoszczędzić czas ładowania strony, lub są one zaniedbywane. Inne, takie jak CDN, pojawiają się ciągle podczas konsultacji, mimo że zazwyczaj nie mają żadnego wpływu na czas ładowania strony.

Dlatego mogę tylko doradzić, abyś najpierw skoncentrował się na "nisko wiszących owocach" optymalizacji wydajności WordPress. Przy stosunkowo niewielkim wysiłku możesz już teraz poczynić znaczne postępy w skracaniu czasu ładowania. I to nawet jeśli jesteś laikiem.

Nie daj się więc zniechęcić poradom udzielanym przez narzędzia takie jak Google PageSpeed Insights.

Ponieważ optymalizacja czasu ładowania dotyczy w istocie tylko kilku obszarów:

• Zmniejszenia rozmiaru swojej strony internetowej
• Zmniejszenia liczby żądań HTTP
• Kompresji poszczególnych pakietów danych
• Optymalizacja czasu ładowania

Jeśli to zrozumiesz, możesz też rozsądnie ustawić 10 najważniejszych elementów optymalizacji WordPress. A jeśli chodzi o bardziej skomplikowane kroki optymalizacyjne, są też eksperci, którzy mogą nadać Twojej witrynie odpowiedni kształt.

Czas ładowania będzie Ci wdzięczny!