Buforowanie i minifikacja – przyspieszenie działania strony
Marnujesz potencjał swojej strony internetowej
Ach, twój WordPress… Czasami sprawia, że mam ochotę rzucić to wszystko i zacząć od nowa. Wiesz, o co mi chodzi? Kiedy marnujesz ogromny potencjał tej wspaniałej platformy, ponieważ twoja strona internetowa po prostu działa zbyt wolno.
Nie dość, że twoi odwiedzający są zirytowani powolnym czasem ładowania, to jeszcze możesz stracić widoczność w Google. Ale spokojnie, 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.
Ten post jest również dostępny jako e-book, jeśli chcesz go przeczytać w pakiecie lub podzielić się nim z innymi. Możesz go pobrać tutaj.
Zmierz wydajność swojej strony internetowej
Jeśli chcesz przyspieszyć działanie strony internetowej, musisz najpierw zmierzyć, jak szybka/wolna jest ona 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ść. 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. 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.
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. 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 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ż odgrywają dużą rolę w wydajności WordPressa. Są one raczej określane przez przemyślaną strukturę strony i poprawne użycie HTML, CSS i JavaScript.
Minifikacja – jeszcze jedna mała dźwignia
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 o ograniczaniu HTML, CSS i JavaScript w WordPressie wyjaśniam, 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 to TREO, PageSpeed Insights i GTmetrix. Posiadając tę wiedzę i narzędzia, jesteś dobrze przygotowany do mierzenia własnych wyników.
Wielu ludzi 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.
Szybki hosting to podstawa
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. 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ądzanym 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.
Wtyczki do buforowania – tak, ale mało
Zazwyczaj obowiązuje zasada: im mniej wtyczek, tym lepiej działa twoja witryna WordPress. Istnieją jednak wtyczki, które przyspieszają działanie witryny i mogą być rozwiązaniem problemu z czasem ładowania.
W idealnym przypadku nie potrzebujesz wtyczek, aby przyspieszyć działanie swojej strony. Na przykład, jeśli używasz smukłego i szybkiego motywu WordPress lub jeśli rozwiązania, takie jak buforowanie WordPress, są już zintegrowane po stronie serwera, jak w przypadku Raidboxes.
Zbyt wiele wtyczek spowalnia system lub prowadzi do konfliktów między nimi. Jednak wtyczki buforujące są jak opatrunek. Ukrywają one problemy, które lepiej byłoby rozwiązać od samego początku. Nawet zbuforowane strony mogą 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.
Kreatory stron – dobre i złe
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. 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.
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. 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. 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.
Teoretycznie nawet układ oparty na tabelach z lat 2000 może zostać zoptymalizowany przez usuwanie zagnieżdżeń. Istnieją tysiące motywów dla WordPressa. Jestem pewien, że wszystkie są już optymalnie przycięte pod kątem wydajności… Błąd!
Większość motywów skupia się na tym, by ładnie wyglądać. To ma sens z punktu widzenia sprzedaży. 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.
Optymalizacja obrazów i zasobów
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ę.
Istnieją wtyczki, które konwertują obrazy na wszystkie formaty podczas ich przesyłania, a następnie po prostu osadzają najmniejszy plik. Popularne wtyczki to WP Compress i Imsanity. Większość optymalizatorów posiada też model premium, który ogranicza rozmiar obrazu lub liczbę obrazów.
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ść. Wtyczka OMGF Host Google Fonts Locally zajmuje się tym zagadnieniem.
Selektywne ładowanie zasobów
Szczególnie skuteczną metodą uzyskania większej szybkości jest selektywne ładowanie plików CSS i JS dla każdej strony lub posta. Istnieje kilka możliwości, które prowadzą do celu.
Przykładowo, 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, która umożliwia 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.
Minifikacja i kompresja
Minifikacja usuwa niepotrzebne znaki, zwłaszcza spacje i tabulatory, z plików HTML, CSS i JS
