W sieci aż roi się od porad i wskazówek, jak zoptymalizować działanie strony WordPress . Niestety, wyjaśnienia i oceny znaczenia poszczególnych śrub regulacyjnych szybko trafiają pod stół. Pokażemy Ci ważne punkty wyjścia i śruby regulacyjne - w sensownej kolejności i z kontekstem. W ten sposób można osiągnąć sukces szczególnie szybko.
W międzyczasie gościliśmy już około 15.000 projektów WordPress . W trakcie tego procesu zgromadzono wiele danych. Klienci wciąż pytają nas, jak mogą jeszcze bardziej skrócić czas ładowania strony w swoich projektach WordPress . Dlatego też systematycznie przetwarzaliśmy nasze wnioski z analizy stron naszych klientów z ostatnich lat. Rezultat: 10 działań, dzięki którym można szybko i łatwo zoptymalizować wydajność strony WordPress .
Jedna rzecz jest szczególnie ważna: niektórzy użytkownicy szybko zniechęcają się do sugestii optymalizacji, które pojawiają się w narzędziach takich jak Google PageSpeed Insights. Pozwól, że ci powiem: Nie uzyskasz największego czasu ładowania dzięki skomplikowanym zabiegom optymalizacyjnym, ale dzięki metodom, które są łatwe do wdrożenia.
Oczywiście, optymalizacja czasu ładowania nie jest celem samym w sobie. Poza lepszym doświadczeniem dla użytkowników, krótszy czas ładowania strony to również korzyści w widoczności Twojej oferty w Google. Dlatego też, aby stworzyć odpowiedni kontekst, krótko nakreślę, na czym właściwie polegają poszczególne kroki optymalizacji.
Teoretycznie możesz pracować od góry do dołu i poprawiać czas ładowania strony krok po kroku. Przy okazji, pierwsze siedem punktów odnosi się również do typowych sugestii poprawy z Google PageSpeed Insights, które omawiamy bardziej szczegółowo w tym artykule, na przykład.
#1 Buforowanie - najważniejszy czynnik wpływający na wydajność
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ące wtyczek do buforowania: Większość użytkowników korzysta z wtyczek do buforowania, takich jak W3 Total Cache lub WP Super Cache. Są one czasem łatwiejsze, czasem nieco bardziej skomplikowane do skonfigurowania. W każdym razie wymagana jest tutaj pewna ilość pracy ręcznej.
- O hostingu: Niektórzy hosterzy - w tym Raidboxes - oferują buforowanie po stronie serwera. Oznacza to, że prawie zawsze możesz obejść się bez wtyczek buforujących. Ponieważ Twój dostawca hostingu już zajął się konfiguracją pamięci podręcznej za Ciebie.
Jeśli skonfigurowałeś wydajne buforowanie, zrobiłeś już najważniejszy krok w kierunku zwiększenia wydajności WordPressa. Aby dowiedzieć się więcej, zajrzyj do naszego artykułu o podstawach cachowania.
#2 WordPress porządki - porządek musi być
Jedną z najczęstszych przyczyn długich czasów ładowania jest - z naszego doświadczenia - przeciążona instalacja WordPress . A ponieważ ten punkt poprawy nie jest wymieniany przez Google PageSpeed Insights , zajmuje on bezpośrednio drugie miejsce w moim top 10.
Przeciążona instalacja WordPress oznacza w większości przypadków: zbyt wiele Plugins jest zainstalowanych. Zasadniczo, im mniej Plugins, tym szybsza strona. Oczywiście Plugins jest ważne i nie można się bez niego obejść, ale zawsze należy sprawdzić, które Plugins są nam naprawdę potrzebne.
I: Powinieneś upewnić się, że nie tylko dezaktywujesz Plugins , ale także całkowicie go usuniesz.
To samo dotyczy Themes: Nie potrzebujesz więcej niż jednego.
Tło jest następujące: Każdy Plugin i każdy Theme dodaje kod PHP do Twojej strony. Dotyczy to również dezaktywowanej strony Plugins. W ten sposób Twoja strona staje się bardziej obszerna, a przez to wolniejsza (i bardziej podatna na ataki). Jest to spowodowane tym, że PHP jest bardzo powolnym językiem skryptowym. Im jest go mniej, tym lepiej.
Często niepotrzebne już Plugins i Themes są pozostałością po testach funkcjonalnych i projektowych. Dlatego dobrym pomysłem jest regularne czyszczenie stronWordPress i testowanie nowych funkcji i projektów w środowisku testowym, a nie na żywej stronie. W ten sposób można uniknąć zbyt wielu Plugin resztek.
#3 Obrazy: niedoceniany hamulec czasu ładowania
Jednym z najskuteczniejszych i najprostszych sposobów na skrócenie czasu ładowania strony jest zmniejszenie rozmiaru obrazów. Ponieważ tutaj można czasami zapisać duże ilości danych. Dzięki tak zwanej "bezstratnej kompresji obrazu", rozmiar pliku Twoich zdjęć jest zmniejszany bez widocznej utraty jakości. Dzięki temu Twoja strona prawie się nie zmienia, a jednocześnie możesz znacznie zmniejszyć jej rozmiar dzięki optymalizacji obrazu.
Archiwum HTTP szacuje, że obrazy stanowią regularnie największą część ruchu na stronie internetowej. Zmniejszenie rozmiaru zdjęć powinno być zatem jednym z pierwszych kroków optymalizacyjnych. Optymalizację obrazu można przeprowadzić ręcznie lub skorzystać z narzędzia do kompresji Plugin.
Korzystanie z Plugin jest z pewnością wygodniejszym rozwiązaniem. Dzieje się tak dlatego, że Plugins nie tylko pozwala na kompresję nowych obrazów i ich miniatur, ale także automatycznie zajmuje się wszystkimi istniejącymi obrazami na Twojej stronie. Usługa ta jest jednak często odpł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 tutaj wielu użytkowników boi się zaangażować. Ale nawet bez znajomości kodu można łatwo zrozumieć, na czym polega optymalizacja CSS i JavaScript. Ponieważ w zasadzie są tu trzy rzeczy do zrobienia:
- Podsumuj: CSS i JavaScript są ukryte w wielu małych, pojedynczych plikach. Zazwyczaj każdy z tych plików musi być indywidualnie żądany z serwera WWW przez przeglądarkę. Generuje to żądania HTTP, które mają tendencję do wydłużania czasu ładowania strony. Jeżeli jednak skrypty są połączone, to zmniejsza się liczba plików do wczytania, a tym samym liczba żądań. Na przykład z 53 pojedynczych wniosków zrobiło się kilkanaście. Oczywiście, Pluginsmoże to zrobić również za Ciebie.
- Zredukować: Pliki CSS i JavaScript to linie kodu, które umożliwiają określone funkcje i wygląd strony. Ten kod jest pisany przez ludzi. Jest on jednak odczytywany przez maszyny. Dlaczego jest to istotne? Wiele z tego, co człowiek potrzebuje do poprawnego zrozumienia kodu, komputer nie posiada. Tak więc spacje, komentarze itp. nie są potrzebne, aby Twoja strona została zbudowana poprawnie. Tu właśnie wkracza Plugins 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 transmisja szybsza.
- Kompresja: Po podsumowaniu i redukcji, ostatnim krokiem jest kompresja pakietów danych, które są wysyłane z serwera WWW 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ć taką kompresję GZIP na przykład przez caching-Plugins, poprzez ręczne ustawienia w .htaccess lub Twój hoster już aktywował kompresję po stronie serwera.
Nawet bez znajomości skryptów łatwo jest zrozumieć, co przynoszą poszczególne działania. A dla wszystkich trzech kroków istnieje Plugins, który pozwala nawet laikom optymalizować CSS i JavaScript. W naszym artykule na temat optymalizacji CSS i JavaScript, wyjaśniamy więcej szczegółów i prezentujemy różne Plugins .
Cztery zwycięstwa!
#5 Bez hostingu wszystko jest niczym
Pierwsze cztery obszary optymalizacji obiecują szczególnie dużą redukcję czasu ładowania, ale mogą spełznąć na niczym, jeśli Twój hosting będzie Cię spowalniał. Nie chodzi tu tyle o wymagania sprzętowe dla WordPressa, ale raczej o pewne technologie, które pokazują, że dany hostingodawca pozwala na odpowiednią optymalizację WordPressa.
Jako zasadę możesz zapamiętać, że wydajny hosting WordPressa powinien mieć te kluczowe dane:
- Dysk twardy SSD
- Limit pamięci PHP co najmniej 64MB, lepiej 128MB
- Centrum danych w Niemczech
- Aktualna wersja PHP (7.4)
- HTTP/2 i darmowy certyfikat SSL
Następnie jest różnica między hostingiem współdzielonym i posiadanie własnego (wirtualnego) serwera.
W przypadku hostingu współdzielonego, dzielisz serwer i jego moc obliczeniową z innymi stronami. Zwykle od kilkudziesięciu do kilkuset. Posiadając własny serwer nie musisz dzielić się z nikim mocą obliczeniową. Oferuje więc zaletę 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.
Szczegóły - mniej uderzeń, więcej wysiłku
Wszystkie obszary istotne z punktu widzenia wydajności, które wymieniłem do tej pory, mogą być zoptymalizowane przez praktycznie każdego użytkownika WordPress . Albo poprzez Plugins, proste próby i błędy lub zakup odpowiednich produktów. Sprawa się komplikuje, jeśli już zoptymalizowałeś te obszary. Ponieważ wtedy musisz wniknąć głębiej w strukturę boczną. A pojedyncze 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 obrazów i polecenia animacji, które obraca te obrazy. Jeśli polecenie JavaScript zostanie załadowane jako pierwsze, a obrazy jako ostatnie, to znaczy, że Twoja strona posiada już funkcję slidera, ale nie posiada obrazów, które mają być wyświetlane. Dlatego strona ładuje się dłużej. Warunkowi temu można zapobiec poprzez prawidłową kolejność załadunku.
Chociaż istnieją narzędzia do optymalizacji kolejności ładowania Plugins, nasze doświadczenie pokazuje, że nie zawsze są one w stanie w pełni zoptymalizować Twoją stronę. W rzeczywistości, najlepsze rezultaty w takim przypadku osiąga zazwyczaj 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 postrzegany czas ładowania. Jest to czas, który osoba odwiedzająca Twoją stronę postrzega jako czas ładowania. Ten postrzegany czas ładowania można skrócić za pomocą kilku sztuczek. W ten sposób użytkownik odnosi wrażenie, że strona jest już całkowicie zbudowana, choć w tle jest jeszcze obliczana.
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żna to osiągnąć np. poprzez optymalizację kolejności ładowania. Istnieją jednak również wtyczki, które zapewniają, że strona ładuje się sprawniej. I to tylko w widocznym obszarze. Lazy Load lub a3 Lazy Load są przykładami takich wtyczek. W ten sposób użytkownik zawsze otrzymuje całą potrzebną mu treść, ale czas ładowania strony też 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 również stać się zbyt duża. Istnieją również praktyczne narzędzia, które utrzymują Twoją bazę danych w dobrym stanie. Na przykład, Plugin WP-Optimize.
#9 Pingbacks i Trackbacks
Domyślnie, WordPress współdziała z innymi stronami, które zezwalają na pingbacki i trackbacki. Za każdym razem, gdy Twoja strona lub jeden z Twoich blogów zostanie wspomniany na takiej stronie, Twoja strona zostanie automatycznie powiadomiona - co dodatkowo obciąża bazę danych.
Jeśli nie potrzebujesz tej funkcji (wartość dodana jest znikoma w mojej opinii) powinieneś wyłączyć pingbacki i trackbacki. Ponownie pomaga tu Plugin WP-Optimize. Dla pełnego obrazu należy jednak w tym miejscu wspomnieć, że jest to raczej problem teoretyczny. Jak dotąd, żaden z naszych klientów nie miał poważnych spadków wydajności.
#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.)?deineseite.de [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 poniższe 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 wyglądałaby następująco:location ~ .(gif|png|jpeg|jpg|svg|webp|pdf)$
{valid_referers none blocked server_names*.deineseite.dedeineseite.de ~.google. ~.bing. ~.yahoo.;
Te linie są trochę obszerne, ale pomogą ci lepiej zrozumieć, co możesz zrobić z tą regułą. Te linie w zasadzie mówią Ci, które domeny są dozwolone do hotlinkowania Twoich plików. W tym przykładzie twojastrona.com z wszystkimi subdomenami, a także Google, Bing i Yahoo.
if ($invalid_referer) {return 403;}
Teraz, gdy żądanie przychodzi, a zasób NIE jest na szczycie twojej białej listy, serwer zwraca 403 (Forbidden).
Inne metody zapobiegania hotlinkowaniu
"A co z CDN?"
Jednym z najczęściej zadawanych pytań jest pytanie o Sieć dostarczania treści (CDN). Na przykład: "Czy CDN przyspiesza działanie mojej strony dla użytkowników 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 odpowiedź brzmiała: nie.
Krótko mówiąc, to długa historia: CDN ma największy sens, jeśli Twoi użytkownicy są 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 zapomnieć o CDN, aby zoptymalizować wydajność WordPress .
Przy okazji, WordPress developer Ernesto Ruge napisał bardzo fajny artykuł na temat tego problemu, który mogę tylko polecić.
Wniosek: Nie bój się skomplikowanych w wyglądzie kroków optymalizacyjnych
Często użytkownicy obawiają się obszarów, w których szczególnie łatwo jest zaoszczędzić czas ładowania. Albo zaniedbują te obszary. Inne jednak, takie jak CDN, pojawiają się wielokrotnie podczas konsultacji, choć zazwyczaj nie mają żadnego wpływu na czas ładowania strony.
Dlatego mogę tylko doradzić, abyś najpierw skupił się na "nisko wiszących owocach" optymalizacji. Ponieważ już teraz, przy stosunkowo niewielkim wysiłku, możesz poczynić ogromne postępy w skracaniu czasu ładowania - 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:
- Zmniejsz rozmiar swojej strony
- Zmniejszenie liczby żądań HTTP
- Kompresja poszczególnych pakietów danych
- Optymalizacja doświadczenia użytkownika
Jeśli to zrozumiesz, będziesz mógł wprowadzić rozsądne poprawki do 10 najważniejszych elementów wydajności WordPressa. A jeśli chodzi o bardziej skomplikowane kroki optymalizacyjne, są też eksperci, którzy mogą sprawić, że twoja strona nabierze kształtu.
U mnie włączenie listespeed skończyło się że strona zaczęła działać znacznie wolniej niż bez niego.