WordPress  wydajność

Przyspiesz WordPressa: Najlepsze wskazówki dla większej wydajności

Twój WordPress działa wolno? Marnujesz wtedy duży potencjał. Nie dość, że twoi odwiedzający są zirytowani wolnym czasem ładowania, to jeszcze możesz stracić widoczność w Google. Pokażę ci krok po kroku, jak możesz przyspieszyć działanie WordPressa.

Jeśli sprzedajesz coś za pośrednictwem WordPressa, na przykład za pomocą WooCommerce to istnieje wystarczająco dużo badań, aby potwierdzić, że powolne witryny generują mniejszy przychód. Zwłaszcza użytkownicy mobilni porzucają stronę, jeśli jej ładowanie trwa dłużej niż trzy sekundy. Szybsze strony internetowe mają kluczowe znaczenie dla twojej firmy.

Zmierz prędkość

Jeśli chcesz przyspieszyć działanie strony internetowej, musisz najpierw zmierzyć, jak szybka/wolna jest przed optymalizacją. Sam czas ładowania jest ważny, ale niekoniecznie decydujący. Niektóre strony mają po prostu duże "zasoby" (np. zdjęcia i filmy), które odwiedzający chcą zobaczyć lub pobrać. Szybciej zawsze znaczy lepiej, ale zależy to też od oczekiwań odwiedzających. Na przykład apple.com ma notorycznie słabą wydajność:

Wydajność Strona internetowa Apple
Słaba wydajność witryny pod adresem apple.com

Nie jest to rozwiązanie optymalne. Okoliczność ta jest jednak uzasadniona. Firma Apple przywiązuje bardzo dużą wagę do tego, aby jej produkty były prezentowane w najwyższej możliwej jakości, dlatego stosuje bardzo duże obrazy bez ich optymalizacji, o czym świadczy ten przewodnik dla WordPressa. Osoby odwiedzające witrynę Apple znoszą to i chętnie czekają nieco dłużej na załadowanie się strony.

Ogólnie rzecz biorąc, strony Apple działają dość szybko. Zwłaszcza wyświetlanie pierwszych elementów jest zazwyczaj błyskawiczne. Są one mierzone w aspekcie "First Contentful Paint " (FCP). FCP określa w percepcji, jak szybko "czuje się" ładowanie strony. Dlatego FCP odgrywa szczególnie ważną rolę w optymalizacji. Nie należy przekraczać wartości od 2 do 3 sekund. Lepsze są wyniki poniżej 2 sekund lub szybsze.

Pierwsza farba Contentful
Dobre wartości na First Contentful Paint

Wskaźnik "Largest Contentful Paint" (LCP) odzwierciedla czas ładowania pozostałych elementów z głównej zawartości. Jeśli uda ci się tu zejść poniżej 3 sekund, jesteś już całkiem niezły. Jednak duże zdjęcia produktów i podobne zasoby mogą także znacznie podnieść tę wartość, co również jest jak najbardziej w porządku, w zależności od celu.

First Input Delay (FID) mierzy czas, jaki upływa, zanim odwiedzający mogą wejść w interakcję ze stroną. Na przykład zaznaczenie fragmentu tekstu, kliknięcie łącza lub przycisku itp. Na przykład na stronie może znajdować się pole wyszukiwania. Może ta strona potrzebuje 10 sekund, by załadować się w całości. Jak szybko ktoś może kliknąć na pole wyszukiwania i wpisać w nie tekst? Należy pamiętać, że "użytkownik" nie zawsze jest człowiekiem. Często to boty wchodzą w interakcję ze stronami. Na przykład bot Google'a, który mierzy wydajność strony i uwzględnia te wartości w obliczaniu rankingu.

Należy unikać "Cumulative Layout Shift " (CLS). Jeśli układ strony "przesuwa się" podczas ładowania, może to być bardzo irytujące dla odwiedzających. Skutkiem może być kliknięcie niewłaściwego przycisku. W większości przypadków takie przesunięcia są spowodowane brakiem specyfikacji szerokości i długości (szerokość/wysokość) obrazów. Wartość CLS powinna zawsze wynosić 0.

Te cztery wartości są więc kluczowe przy ocenie szybkości witryny WordPress. Są one zorientowane na użytkownika, tzn. nie są to surowe wartości wydajności, takie jak czas do pierwszego bajtu, które odgrywają główną rolę w ocenie wydajności serwera lub połączenia z serwerem. Oznacza to również, że wartości te są w mniejszym stopniu zależne od buforowania i wyboru hostingu WordPressa, nawet jeśli oczywiście również odgrywa dużą rolę w wydajności WordPressa. Są one raczej określane przez przemyślaną strukturę strony i poprawne użycie HTML, CSS i JavaScript.

Ograniczanie HTML, CSS i JavaScript

Minifikacja plików HTML, CSS i JavaScript to jedna z wielu małych dźwigni służących do optymalizacji szybkości ładowania witryny WordPress. W artykule Ograniczanie HTML, CSS i JavaScript w WordPressie wyjaśniamy, jak można zaoszczędzić czas ładowania, stosując uproszczony kod. 

Optymalizacja wydajności stała się w ostatnich latach dość skomplikowana. Zwłaszcza, że Google ogłosiło, że te zorientowane na użytkownika kryteria efektywności zostaną uwzględnione w obliczaniu rankingu. Najlepsze narzędzia do mierzenia wydajności WordPressa:

Osobiście lubię TREO, ponieważ jest szybki i przejrzysty. PageSpeed Insights i GTmetrix są bardzo szczegółowe.

Performance Treo Site Speed Report
Ocena szybkości działania witryny Treo

Posiadając tę wiedzę i narzędzia, jesteś dobrze przygotowany do mierzenia własnych wyników. Jeśli robisz to sam, proponuję następującą metodę:

  • Najpierw zmierz stan początkowy. Jak szybka jest Twoja witryna przed optymalizacją?
  • Aktywuj lub wprowadź optymalizację.
  • Wtedy możesz ponownie zmierzyć wydajność. Czy w sposób oczywisty coś się zmieniło? Jeśli nie, usuń optymalizację i spróbuj czegoś innego. Jeśli tak, to kontynuuj optymalizację. Sprawdź, czy wszystko nadal działa tak, jak wcześniej i dodaj kolejną optymalizację.

Wiele osób stara się osiągnąć wynik 100 w PageSpeed Insights. Na razie nie ma w tym nic złego, poza tym, że nie jest to konieczne do zdobycia pełnego wyniku. Inne narzędzia mierzą inaczej i to, co jest 100 dla PageSpeed Insights, może nie być tak dobre dla GTmetrix. Poza tym dojście z 30 do 90 jest zdecydowanie ważniejsze niż dojście z 90 do 100.

Zwiększ wydajność WordPressa

Szybszy hosting WordPress

Najszybszy hoster w każdej sytuacji i przez cały czas nie istnieje. Istnieje zbyt wiele czynników, które wpływają na czas realizacji i przetwarzania wniosków. Poniższe czynniki nie ułatwiają oceny:

  • Pora dnia
  • Wykorzystanie serwera
  • Geolokalizacja
  • Szybkość połączenia użytkownika.

Niemniej jednak każdy hostingodawca oferuje inne pakiety, które mogą mieć znaczący wpływ na wydajność strony WordPress. Pakiety podstawowe są zwykle tańsze i naturalnie nie tak szybkie. Dlatego jedną z pierwszych sensownych optymalizacji jest aktualizacja pakietu.

Na przykład w Raidboxes dostępne są pakiety startowe z Zarządanym Hostingiem WordPress, które przejmują prace administracyjne związane z WordPressem i już zawierają optymalizacje, takie jak buforowanie po stronie serwera. W ramach usługi High Traffic Hosting dostępne są jednak również pakiety o szczególnie wysokiej wydajności, przeznaczone na przykład dla projektów o bardzo dużej liczbie dostępów. Istnieją również specjalne stawki za Hosting WooCommerce. Nie trzeba dodawać, że większe pakiety zapewniają dodatkowy wzrost wydajności.

Jaki Hosting WordPress wybrać dla danego projektu?

Nie jesteś pewien, ile mocy lub jakiego pakietu potrzebujesz dla swojej strony internetowej z WordPressem lub WooCommerce? Albo jak bardzo może wzrosnąć szybkość twojej strony po przeniesieniu? Nasi eksperci WordPressa chętnie udzielą ci porad, także na temat wydajności WordPressa.

Jedno jest pewne: jeśli płacisz więcej, zazwyczaj otrzymujesz większą wydajność. Oczywiście, dotyczy to wszystkich hosterów. Prawie wszystkie zmiany wydajności są zwiększane przez aktualizacje taryf. Ale co można osiągnąć bez bezpośredniego przejścia na wyższą taryfę?

Użyj buforowania WordPressa

Oprócz najprostszych blogów, prawie każda witryna WordPressa korzysta z wielu innych wtyczek. Z reguły wtyczki opóźniają czas ładowania strony o ułamek sekundy za każdym razem, gdy jest ona wywoływana. Zwłaszcza jeśli wtyczka wstawia do kodu HTML elementy, które potem muszą być dodatkowo ładowane lub wykonywać kolejne zapytania do bazy danych.

Co by się stało, gdyby WordPress musiał wykonywać te dodatkowe "zadania" tylko raz na stronę i po prostu pobierał wynik tych "dodatkowych" operacji z pamięci podręcznej przy następnym wywołaniu? To znacznie przyspieszyłoby kolejny proces ładowania, ponieważ serwer musiałby dostarczyć tylko gotowy plik. W idealnej sytuacji nie są wykonywane żadne dodatkowe obliczenia, co drastycznie skraca czas ładowania. Na przykład strona, której załadowanie bez buforowania zajmuje 5 sekund, może zostać dostarczona w ciągu milisekund. Po włączeniu buforowania nierzadko uzyskuje się od 20 do 100 razy większą prędkość.

Rozwiązania buforujące są niezbędne do przyspieszenia działania stron WordPress. Najlepiej za pomocą rozwiązania opartego na serwerze, ale o tym za chwilę. W przeciwnym razie użyj jednej z wtyczek do buforowania, które są bardzo popularne w społeczności:

Płatne wtyczki mają zazwyczaj więcej funkcji. Jednak darmowe wtyczki pomagają w większości przypadków wyrwać 90% wszystkich możliwych zysków czasowych.

Jednak wtyczki buforujące są jak opatrunek. Ukrywają one problemy, które lepiej byłoby rozwiązać od samego początku. Niekoniecznie usuwają zbędny HTML, nie kompresują zbyt dużych plików graficznych, nie zmieniają kolejności dołączania plików JS i CSS itd. Nawet zbuforowane strony mogą więc być powolne.

Jeśli od początku pracujesz w sposób czysty, tak naprawdę nie potrzebujesz wtyczki do buforowania. Przynajmniej teoretycznie. Ponieważ buforowanie w ogóle w naturalny sposób odciąża serwer i dlatego jest zawsze zalecane. Bardziej chodzi mi tutaj o argument za dobrym planowaniem i czystym, przemyślanym kodem.

Ponadto witryna Raidboxes opiera się na szczególnie wydajnym buforowaniu po stronie serwera. Oznacza to, że nie jest potrzebna dodatkowa wtyczka ani płatne rozwiązanie.

Elastyczne kontenery zamiast kolumn i wierszy w kreatorze strony

Kreator stron lub kreator witryn stał się niezbędny dla wielu agencji i programistów, ponieważ w znacznym stopniu ułatwia projektowanie stron i artykułów.

Zalety i wady kreatorów stron

Kreatory stron są kontrowersyjne na scenie WordPressa. Podczas gdy jedni chwalą łatwość użycia, inni krytykują nieefektywny kod źródłowy lub rozbudowane strony internetowe. Zobacz nasze posty Kreator stron: Przekleństwo czy błogosławieństwo, Funkcje kreatorów stron oraz 16 popularnych kreatorów stron WordPress.

Przez ponad 10 lat standardową procedurą we wszystkich popularnych kreatorach stron było tworzenie układu za pomocą kolumn i rzędów. Często prowadzi to do powstania rozgałęzionych DIV:

Konstruktor strony div Kod źródłowy
Rozgałęziony kod źródłowy

Często zdarza się to na każdej stronie, co zwykle niepotrzebnie zawyża kod i może mieć negatywny wpływ na FCP. Zwykle można tego uniknąć dzięki mądremu planowaniu podczas tworzenia układu. Producenci narzędzi do budowania stron zaczynają uwzględniać standardy CSS Flexbox i Grid przy tworzeniu układów. To dobra wiadomość, bo zmniejsza ilość kodu.

Performance Elementor Flexbox Container
Włączanie kontenera Flexbox w Elementorze

Na przykład w obecnej wersji kreatora stron Elementor kontener flexbox można włączyć w ustawieniach. Pozwala to nie tylko na większą elastyczność w projektowaniu, ale także na zmniejszenie ilości kodu HTML i skrócenie czasu ładowania strony.

Kliknięcie przycisku Direction -> Row wyrównuje kontenery w rzędzie. Prosta struktura trzech kontenerów nie poprawi od razu znacząco wydajności. Ale jeśli wszystkie sekcje, rzędy i kolumny zostaną zaimplementowane za pomocą tej nowej techniki, zysk może być znaczący. Zwłaszcza na wielu stronach, a także podczas optymalizacji FCP i LCP.

Elementor Container Flexbox
Jeden kontener z trzema podkontenerami

Funkcja ta jest wciąż w fazie alfa w Elementorze. Inne kreatry stosują to nowe podejście już od jakiegoś czasu i wszystkie firmy budowlane będą je oferować w przyszłości. Dlatego warto jak najszybciej zaadaptować nowy sposób pracy do organizacji pracy.

Mniej ważne jest użycie CSS-Flexbox i/lub CSS-Grid, ale obycie się bez zagnieżdżania. Teoretycznie nawet układ oparty na tabelach z lat 2000 może zostać zoptymalizowany przez "usuwanie zagnieżdżeń".

Właściwy motyw WordPress

Istnieją tysiące motywów dla WordPressa. Jestem pewien, że wszystkie są już optymalnie przycięte pod kątem wydajności, prawda? Błąd. Większość motywów skupia się na tym, by ładnie wyglądać. To ma sens z punktu widzenia sprzedaży. Tematy są wybierane głównie ze względu na ich atrakcyjność. Bardzo niewiele motywów WordPressa naprawdę dba o to, aby lean code był priorytetem - lub w przypadku Page Buildera: tworzenie lean code.

Te motywy i kreatory są obecnie polecane z mojego punktu widzenia:

To są prawdziwe meta motywy, więc pozwalają na prawie każdą możliwą opcję układu strony, mają ogromny wybór wymyślnych układów i są od początku zoptymalizowane pod kątem wydajności. Większość z tych motywów WordPress można połączyć z innymi kreatorami stron, takimi jak Elementor. Niektóre mają swój własny kreator stron.

Optymalizacja obrazów i innych elementów

Zdecydowana większość stron internetowych używa obrazów. Większe obrazy często wyglądają lepiej, ale wydłużają też czas ładowania. Mniejsze jest lepsze, ale niezależnie od tego, jest wiele wskazówek, które warto wziąć pod uwagę:

  • Zalecane są maksymalne wymiary mniejsze niż 2000 pikseli. Większe obrazy lepiej otwierają się w nowym oknie.
  • Właściwy format jest kluczowy. JPEG dla obrazów fotograficznych z wieloma kolorami i odcieniami, PNG i GIF mogą być znacznie mniejsze dla obrazów z mniejszą liczbą kolorów. Najlepszą rzeczą jest wypróbowanie go.
  • Grafika wektorowa, taka jak loga i ilustracje, wygląda świetnie jako SVG, jest nieskończenie skalowalna i niewielka. SVG to także pliki tekstowe zawierające instrukcje, na podstawie których tworzona jest grafika. Jako pliki tekstowe korzystają one z kompresji GZIP, o której więcej za chwilę.
  • Format WebP firmy Google może zmniejszyć pliki JPG o kolejne 25 do 34 procent.
  • Format WebP jest dostępny od 2010 r., ale nowy format AVIF pozwala na zmniejszenie liczby plików WebP o kolejne 30 procent, a w porównaniu z JPEG często uzyskuje się 50-procentowe oszczędności. AVIF nie ma jeszcze pełnego wsparcia dla wszystkich przeglądarek, ale z miesiąca na miesiąc liczba ta rośnie.

Istnieją wtyczki, które konwertują obrazy na wszystkie formaty podczas ich przesyłania, a następnie po prostu osadzają najmniejszy plik. Oto najpopularniejsze wtyczki do WordPressa:

Program WP Compress ma bardzo przejrzysty interfejs i wykonuje zadania kompresji w tle. Przedłużenie nie jest tanie, ale bardzo wygodne. Jeśli wolisz zacząć od darmowej wtyczki, powinieneś przyjrzeć się bliżej Imsanity.

Wydajność WordPressa Wtyczka WP Compress
Raport na temat wtyczki WP Compress

Większość optymalizatorów posiada model premium, który ogranicza rozmiar obrazu lub liczbę obrazów. Wyjątkiem jest Robin. Czy warto w ogóle płacić za taką wtyczkę? Zależy to od tego, jak dużej kontroli potrzebujesz. Alternatywnie można optymalizować obrazy samodzielnie za pomocą narzędzi desktopowych lub z wiersza poleceń (optimizt, compress-images) albo online przed wysłaniem (TinyPNG, Shortpixel).

Większość wtyczek tworzy też obrazy w różnych, mniejszych rozmiarach. W zależności od rozdzielczości przeglądarki użytkownika, bezpośrednio integrowany jest znacznie mniejszy plik, co ponownie prowadzi do znacznego wzrostu wydajności.

Leniwe ładowanie oznacza, że obraz jest ładowany dopiero wtedy, gdy odwiedzający przewinie stronę do miejsca, w którym się na niej pojawi. Większość optymalizatorów obrazu obsługuje tę funkcję. Istnieją również darmowe wtyczki do tego celu, na przykład Lazy Load z WP Rocket i Lazy Loader. Filmy mogą lub powinny być ładowane tylko wtedy, gdy są "osiągane" - zobacz Leniwe ładowanie filmów.

Czcionki w pamięci podręcznej

Poza obrazkami wszystkie inne zasoby mogą być buforowane lokalnie (na serwerze). Nie tylko poprawia to zgodność z międzynarodowymi przepisami o ochronie danych, ale zwykle także wydajność. Zwłaszcza jeśli czcionki są buforowane. Wtedy przeglądarka pobiera je raz i wyświetla bezpośrednio następnym razem, bez konieczności ich wcześniejszego wczytywania. Działa to dobrze na przykład z wtyczką OMGF Host Google Fonts Locally.

Selektywne ładowanie zasobów na stronę

Szczególnie skuteczną metodą uzyskania większej szybkości jest selektywne ładowanie plików CSS i JS dla każdej strony lub postu. Istnieje kilka możliwości, które prowadzą do celu.

Przykład: witryna WordPress korzysta z menedżera formularzy, takiego jak WPForms. Ta wtyczka ładuje swoje funkcje formularzy natychmiast na każdej stronie. Potrzebna jest jednak tylko na stronie kontaktowej. Obsługuje to wtyczka Freesoul Deactivate Plugins:

Dezaktywuj wtyczki Wydajność WordPressa
Aktywacja lub dezaktywacja wtyczek dla każdej podstrony

Umożliwia ona aktywację lub dezaktywację wszystkich wtyczek na stronie za pomocą matrycy. W tym celu można również użyć wtyczek wydajnościowych, takich jak perfmatters, które zapobiegają również dostarczaniu plików CSS i JS. Jednak Freesoul wyłącza ładowanie całej wtyczki, dzięki czemu zmniejsza również ilość pracy, którą serwer musi wykonać w tle.

Poprawki przy użyciu perfmatters

Czy warto kupić taką wtyczkę jak perfmatters? Optymalizacje można też przeprowadzić ręcznie lub za pomocą innych wtyczek. Byłoby to jednak szalenie dużo pracy, zwłaszcza gdyby trzeba było ją wykonać dla kilku stron WordPressa.

W samych standardowych opcjach wtyczka taka jak perfmatters ma ponad dwa tuziny optymalizacji. Czy wszystkie są przydatne? To zależy od tego, jak bardzo użytkownicy WordPressa są zaznajomieni z jego funkcjami. Na przykład kanał RSS można wyłączyć, co pozwala zaoszczędzić kilka bajtów. Ale oznacza to także, że odwiedzający stronę nie mogą już po prostu subskrybować artykułów poprzez kanał RSS. Powinieneś więc dobrze się nad tym zastanowić.

Perfmatters WordPress Performance Plugin Options
Oto niektóre z opcji oferowanych przez perfmatters

To zadziwiające, jak wiele gier w WordPressie jest domyślnie włączonych (emojis, dashicons itp.); na razie można je bezpiecznie wyłączyć. Powinieneś być bardziej ostrożny, jeśli chodzi o ustawienia związane z bazą danych. Teoretycznie dezaktywowanie korekt może zmarnować dużo czasu pracy. Jeśli i tak używana jest pamięć podręczna, optymalizacja bazy danych nie ma zwykle większego znaczenia.

Z kolei użycie Map Google na stronie to zwykle katastrofa dla wydajności. Mapy te powinny być ładowane tylko w razie pilnej potrzeby. Wiele motywów zawiera na przykład mapę na stronie startowej, ale nie jest to absolutnie konieczne. W przypadku sklepów internetowych WooCommerce wywołanie funkcji wc-ajax=get_refreshed_fragments może spowodować poważne opóźnienia. Można je wyłączyć za pomocą opcji"Wyłącz fragmenty kart".

W każdym razie warto zajrzeć do dokumentacji perfmatters i WP Rocket. Jeśli naprawdę chcesz się zanurzyć, znajdziesz tam wiele punktów startowych. Oczywiście można też po prostu kupić jedną z tych wtyczek i zaoszczędzić sobie mnóstwo czasu. Mniej wiadomo jednak, co dzieje się w tle.

Minifikacja

Minifikacja usuwa niepotrzebne znaki, zwłaszcza spacje i tabulatory, z plików HTML, CSS i JS. Jest to raczej dobra praktyka niż rzeczywisty wzrost wydajności. Dzięki funkcji Autoptimize minifikację można bardzo łatwo włączyć lub wyłączyć.

Kompresja Gzip i Brotli

W porównaniu z minifikacją kompresja często zmniejsza rozmiar plików tekstowych o ponad 50 procent. Zdecydowanie warto to włączyć, na przykład w przypadku algorytmu kompresji Brotli. W większości przypadków taka kompresja jest już włączona przez hostingodawcę. Jeśli nie, istnieją dodatkowe narzędzia, które przechowują skompresowane pliki w systemie plików. Przede wszystkim dlatego, że kompresja plików tekstowych jest zwykle znacznie bardziej efektywna.

Raidboxes Brotli Gzip Compression
84,5 procent oszczędności robi wrażenie

Brotli to format kompresji opracowany przez Google, który jest jeszcze bardziej wydajny niż Gzip. Oczywiście, Brotli jest również wspierany przez stronę Raidboxes.

Znaczące optymalizacje dla JavaScript i CSS

Szczególnie jeśli chodzi o optymalizację dla FCP i LCP, obecnie istnieją sposoby na osiągnięcie drastycznego wzrostu wydajności za pomocą różnych wtyczek, a nawet bezpośrednio w motywach. Z moich testów wynika, że są to często najlepsze techniki, aby wprowadzić stronę w przedział od 90 do 100. Jest to opóźnione przeładowywanie plików CSS i JS.

W darmowym dodatku Autoptimize jest ustawienie "Aggregate JS-files". Ta opcja jest domyślnie włączona. Aby korzystać z rzeczywistego przyspieszenia, konieczne jest wprowadzenie następujących ustawień:

Autoptimize Javascript Options
Opcje JavaScript z Autoptimize

Opcja "Odroczenie" zapewnia, że JavaScript zostanie załadowany dopiero na późniejszym etapie procesu renderowania. Najpierw ładowane są HTML i zasoby, a dopiero potem JS. W praktyce oznacza to, że zwłaszcza elementy interaktywne nie są dostępne od razu w ciągu kilku pierwszych sekund. Ale sama strona jest wyświetlana szybko jak błyskawica.

Ponieważ JavaScript może programowo przeładować prawie wszystko, co chce, do tej techniki należy podchodzić z ostrożnością. Wiele rzeczy może pójść nie tak. Jest to także powód, dla którego opcja ta nie jest domyślnie aktywna. Przyrost wydajności może być gigantyczny, ale po aktywacji tej funkcji musisz sprawdzać każdą stronę, czy nadal działa poprawnie.

To samo dotyczy każdej aktualizacji oraz używania nowych wtyczek, które mogą wnieść do gry własne pliki JavaScript. Aktywowanie tej opcji jest więc wskazane tylko wtedy, gdy możesz poświęcić trochę czasu na jej późniejsze i regularne sprawdzanie.

Autoptimize CSS Options
Część opcji CSS narzędzia Autoptimize

Podobna sytuacja ma miejsce w przypadku plików CSS. W tym miejscu należy włączyć opcję „Eliminuj CSS blokujące renderowanie". W przypadku instrukcji CSS pojawia się dodatkowy problem, że niektóre strony lub nawet obszary witryny powinny wyglądać nieco inaczej. Jedna część strony wygląda tak samo (kolory, czcionki, położenie nagłówka), ale inna część wygląda inaczej (obrazek w nagłówku, dodatkowe informacje w stopce itd.).

"Autoptimize" odnosi się tutaj do zewnętrznej i płatnej usługi, która próbuje rozwiązać ten problem. "Krytyczny CSS" to CSS, który musi być załadowany na samym początku. Pozostałe elementy można załadować później.

Critical CSS Autoptimize
Odniesienie do krytycznej usługi CSS

Wtyczki takie jak WP Rocket i perfmatters również posiadają taką funkcję. To, jak dobrze to działa, zależy od tego, jakich wtyczek chcesz używać w swojej własnej witrynie WordPress. Działa to więc tylko w przypadku testu. Ale jeśli to się uda, impuls będzie naprawdę duży.

Uzyskanie tej funkcji za darmo jest obecnie prawie niemożliwe, ponieważ jest to trudny problem. Ponieważ każda strona jest inna. Nawet każda podstrona na stronie internetowej jest inna i ciągle się zmienia poprzez aktualizacje. Jedynym sposobem na uzyskanie stuprocentowej wydajności jest dogłębne zrozumienie, co tak naprawdę dzieje się podczas ładowania każdej strony. Tylko wtedy, gdy jesteś gotów podjąć tę czasochłonną drogę, możesz rzeczywiście osiągnąć 100 dla każdej strony.

Podsumowanie - Jak przyspieszyć działanie WordPressa

Istnieje wiele dźwigni do optymalizacji wydajności WordPressa. Szybki hosting WordPress jest ważny i stanowi podstawę wszystkiego. Jednak tylko szybki hosting nie gwarantuje najwyższych prędkości. W tym celu konieczne jest:

  • Aby zasoby na stronie były jak najmniejsze, tzn. skompresować je.
  • Odpowiedni format (np. WebP lub SVG). Ładuj tylko obrazy, które są tak duże, jak to konieczne dla danego celu (desktop vs. tablet vs. mobile).
  • Włączenie buforowania lub używania buforowania opartego na serwerze: Kiedy zasób jest już „zmontowany”, może być ładowany z pamięci podręcznej, dopóki coś się nie zmieni. Zasoby zewnętrzne, takie jak Google Fonts, również powinny być ładowane z twojego własnego serwera.
  • Optymalizacja sekwencji ładowania. Odraczanie CSS i JS za pomocą wtyczki lub usługi albo ładowanie najpierw tego, co jest naprawdę potrzebne, a dopiero potem reszty (słowo kluczowe: krytyczny CSS).
  • Pozbycie się zbędnego balastu: Czy naprawdę potrzebujemy emojis dla każdego procesu ładowania?

Najważniejsza rada, jaką mogę ci dać z praktycznego doświadczenia: Buforowanie i odraczanie zwykle zapewniają 90 procent wydajności. To właśnie na tym obszarze powinieneś skupić swoje własne optymalizacje. Życzę ci wielu sukcesów i szybkiej realizacji projektów z wykorzystaniem WordPressa i WooCommerce.

Twoje pytania dotyczące wydajności WordPressa

Masz pytania dotyczące przyspieszania działania WordPress? Zachęcamy do korzystania z funkcji komentarzy. Chcesz być informowany o nowych artykułach na temat WordPress i WooCommerce? Obserwuj nas na Twitterze i Facebooku, LinkedIn lub za pośrednictwem naszego Newslettera.

Spodobał Ci się ten artykuł?

Zostawiając opinię pomożesz nam udoskonalać publikowane przez nas treści.

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany.