Buforowanie i minifikacja – przyspieszenie wczytywania strony
Jesteś na to gotów?
Czy Twoja strona internetowa działa wolno? Masz wrażenie, że marnujesz swój potencjał? Nie dość, że Twoi odwiedzający są zirytowani długim czasem ładowania, to możesz jeszcze stracić widoczność w Google. Już wiem – chcesz ją przyspieszyć.
Dobrze się składa, bo w tym artykule pokażę Ci krok po kroku, jak możesz to zrobić. Jeśli sprzedzajesz coś za pośrednictwem WordPressa, na przykład za pomocą WooCommerce, 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.
Zacznijmy od pomiaru
Jeśli chcesz przyspieszyć działanie swojej strony internetowej, musisz najpierw zmierzyć, jak szybka – czy raczej 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 strona 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.
Mierzenie wydajności
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 linku 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 Googlea, który mierzy wydajność strony i uwzględnia te wartości w obliczaniu rankingu.
Należy również 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 Twojej 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 – uproszczenie kodu
Minifikacja plików HTML, CSS i JavaScript to jedna z wielu małych dźwigni służących do optymalizacji szybkości ładowania Twojej 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. 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ę: 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.
Hostingodawca ma znaczenie
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ść Twojej 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 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.
Buforowanie – klucz do szybkości
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.
Tworzenie stron internetowych z dbałością o wydajność
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.
W ciągu ostatnich 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.
Na szczęście 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.
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.
Funkcja ta jest wciąż w fazie alfa w Elementorze. Inne kreatory 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 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ń.
Optymalizacja obrazó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. Oto najpopularniejsze wtyczki do WordPressa:
- WP Compress – ma bardzo przejrzysty interfejs i wykonuje zadania kompresji w tle. Przedłużenie nie jest tanie, ale bardzo wygodne.
- Imsanity – jeśli wolisz zacząć od darmowej wtyczki.
Większość optymalizatorów posiada model premium, który ogranicza rozmiar obrazu lub liczbę obrazów. Wyjątkiem jest Robin. Zależy to od tego, jak dużej kontroli potrzebujesz. Alternatywnie można optymaliz
