Jak przyspieszyć działanie strony na WordPress

Jak sprawdzić prędkość ładowania strony

Najpopularniejszym i najbardziej rzetelnym testem jaki możemy przeprowadzić jest test Google PageSpeed Insights. To narzędzie jest najczęściej wykorzystywane przez Web Developerów z racji tego, że pozwala sprawdzić jak boty wyszukiwarki Google widzą stronę pod kątem jej wydajności, zarówno na urządzeniach mobilnych jak i stacjonarnych.

Test składa się z 6 głównych czynników:

1. Pierwsze wyrenderowanie treści (First Contentful Paint – FCP):

   Czas wyrenderowania pierwszego tekstu oraz obrazka

2. Indeks szybkości (Speed Index):

   Bezpośrednio wpływa na scoring naszej strony. Określa jak szybko całość contentu jest wyświetlona użytkownikowi

3. Czas do pełnej interaktywności(Time to Interactive – TTI):

   Jest to czas, po którym użytkownik może swobodnie korzystać ze strony, wchodzić w interakcję z widocznymi elementami.

4. Pierwsze wyrenderowanie elementu znaczącego (First Meaningful Paint – FMP):

   Zazwyczaj określa to samo co pierwsze wyrenderowanie treści. Te obie wartości mogą się jednak czasami różnić. FCP bierze pod uwagę warstwę wizualną strony, więc np. jeżeli na stronie znajduje się iframe i jego treść zostanie wczytana z opóźnieniem, wtedy FCP opóźni się względem FMP

5. CPU bezczynny po raz pierwszy (First CPU Idle):

   Mierzy czas, po którym strona jest interaktywna, ale niekoniecznie w pełni.

6. Maks. potencjalne opóźnienie przy 1. działaniu (First Input Delay – FID):

   Określa ile czasu potrzebuje przeglądarka aby odpowiedzieć na interakcję użytkownika.

Poza samym testem prędkości, Google PageSpeed Insights przekazuje nam sugestie, które mogą pomóc nam przyśpieszyć wczytywanie strony. Dzięki tym sugestiom jesteśmy także w stanie stwierdzić ile czasu zajmuje wczytywanie obrazków, czy skryptów oraz jaki jest ich rozmiar. Daje nam to sporą wiedzę na temat tego, gdzie należy zastosować czynności optymalizacyjne.

Dodatkowym narzędziem, którym możemy sprawdzić szybkość ładowania strony jest nasza przeglądarka internetowa. Te oparte o silnik Chromium (Chrome, Opera, Nowy MS Edge) posiadają tzw. DevTools, dzięki któremu możemy debugować naszą stronę. Aby uruchomić DevTools wystarczy użyć prawego przycisku myszy gdziekolwiek na stronie i wybrać z listy element „Zbadaj”. W DevTools najbardziej interesuje nas zakładka Network. To w niej widzimy pliki wczytywane na stronie w sposób „waterfallowy” oraz ich czas wczytania i rozmiar.

Kiedy uruchomimy DevTools na załadowanej stronie, zakładka Network może okazać się pusta, ponieważ pliki zostały już załadowane i ten proces nie został zarejestrowany przez narzędzie. Wystarczy wtedy odświeżyć stronę aby otrzymać komplet informacji.

Dodatkowo, narzędzie DevTools daje nam możliwość wyłączenia pamięci podręcznej na czas testowania strony – zostanie wtedy mierzony czas ładowania plików bezpośrednio z serwera. Możemy także użyć tzw. „throttlingu”, czyli ograniczenia prędkości łącza i zasymulować np. połączenie z siecią 3G.

Optymalizacja zasobów graficznych na stronie

Każdy kto prowadzi witrynę internetową chce, aby była ona jak najbardziej zachęcająca wizualnie. Do tego celu wykorzystujemy różnego rodzaju zdjęcia oraz grafiki, ale niekiedy pomijane są przy tym kluczowe aspekty, które wpływają na prędkość wczytywania strony. Poniżej opiszę w skrócie na co należy zwracać uwagę przy korzystaniu z plików graficznych na stronie:

Format obrazków

Zwracaj uwagę na to w jakim formacie wrzucasz obrazki na swoją stroną. Istnieje kilka formatów, których różnicę warto znać.

1. JPEG/JPG

   Powszechny, skompresowany format pliku grafiki rastrowej. Jego zaletą jest możliwość dostosowanie poziomu kompresji, dzięki czemu możemy wyważyć poziom jakości zdjęcia względem rozmiaru pliku.

2. PNG

   Nieskompresowany format pliku grafiki rastrowej. Różni się od JPG tym, że może wyświetlać przezroczyste tło, zyskując przy tym zwiększony rozmiar pliku.

3. SVG

   Format skalowalnej grafiki wektorowej. SVG bazuje na XML, co oznacza, że treść obrazka może być widoczna w kodzie HTML oraz dla botów indeksujących witrynę. Pliki SVG możemy także stylować oraz animować przez Kaskadowe Arkusze Stylów (CSS). Format ten charakteryzuje się znikomym rozmiarem pliku oraz praktycznie nieskończoną skalowalnością – grafika nawet po kilkukrotnym powiększeniu będzie nadal ostra i wyraźna utrzymując ten sam czas na załadowanie. Grafiki SVG najczęściej wykorzystuje się do wyświetlania np. ikon lub animacji wektorowych w tle. Więcej na temat SVG.

4. WEBP

   Choć Google wprowadziło ten format w 2010 roku, w branży internetowej nie jest jeszcze powszechnie stosowany. WEBP może posiadać informacje na temat przezroczystości tła tak samo jako PNG ale różni się od PNG tym, że jest skompresowany, przez co jego rozmiar jest dużo mniejszy. Podczas testów narzędziem Google PageSpeed Insights zapewne zauważyłeś, że sugeruje ono korzystanie właśnie z tego formatu pliku na stronie. Dzięki temu formatowi możesz drastycznie podnieść Speed Index swojej strony ale warto wiedzieć, że nie wszystkie przeglądarki obsługują ten format plików. Z pomocą przychodzi nam tag <picture> który sprawia, że przeglądarki nieobsługujące WEBP wczytają obraz w innym formacie. Więcej na ten temat w tym artykule.

Rozdzielczość obrazu

Podczas tworzenia strony internetowej należy zwracać uwagę na to czy miejsce, w którym chcemy wykorzystać daną grafikę potrzebuje jej w pełnej rozdzielczości. Jeżeli zdjęcie ma służyć jedynie jako miniaturka danego wpisu i posiada ono określone wymiary, powinniśmy wyświetlić je właśnie w takiej rozdzielczości. Jeżeli budujemy swoją witryną na WordPressie, możemy skorzystać z wbudowanej funkcji:

add_image_size($name, $width, $height, $crop);

Funkcja ta dodaje do wszystkich zdjęć w Bibliotece mediów WordPressa nowy rozmiar, który możemy następnie wykorzystać w kodzie php, w miejscu gdzie chcemy wyświetlać jakiekolwiek zdjęcie pobierane z Biblioteki mediów. Na przykład:

W pliku functions.php dodajemy funkcję:

• thumbnail,
• medium,
• medium_large,
• large,
• full.

Więcej na temat rozmiarów zdjęć na WordPressie w dokumentacji.

Lazy loading

Kolejnym krokiem do optymalizacji zdjęć pod kątem wydajności witryny jest odkładanie ładowania obrazów poza ekranem, tzw. Lazy Loading. Dzięki temu witryna nie będzie wczytywać wszystkich obrazów jednocześnie. Będą one „doczytywane” w trakcie poruszania się użytkownika po witrynie. Istnieje kilka bibliotek JS, które umożliwiają wprowadzanie Lazy loadingu do naszej strony, np. lazyload.js.

Możemy także skorzystać z WordPressowych wtyczek, które oferują tę funkcję.

Kompresja zdjęć

Każdy obraz w formacie JPG możemy poddać kompresji. Stopień kompresji wpływa na rozmiar zdjęcia, ale również na jego jakość. Należy mieć to na uwadze i starać się znaleźć złoty środek podczas tego zabiegu. Każdy bardziej zaawansowany program graficzny posiada opcje kompresji zdjęć podczas eksportowania pliku do formatu JPG, natomiast warto jest też skorzystać z rozwiązań jakie oferuję nam niektóre wtyczki WordPressowe. Z czystym sumieniem mogę polecić plugin Imsanity, w którym możemy ustawić aby każdy uploadowany obrazek do biblioteki mediów był automatycznie kompresowany oraz skalowany do określonej rozdzielczości. Dzięki tej wtyczce nie musimy kompresować i skalować każdego zdjęcia pojedynczo.

Używanie ikon jako grafiki wektorowej

Grafika wektorowa w porównaniu do rastrowej posiada dużo mniejszy rozmiar pliku co znacznie wpływa na szybkość wczytywania stron. Dlatego też, jeżeli na stronie jest przeznaczone miejsce na ikony warto jest korzystać z grafiki wektorowej. Wszelkiego rodzaju ogólnodostępne w internecie biblioteki ikon posiadają zazwyczaj możliwość pobierania ich w formacie SVG, który z łatwością możemy zaimplementować w kodzie strony.

Optymalizacja kodu CSS/JS oraz fontu

Kaskadowe arkusze stylów (CSS) oraz JavaScript potrafią sprawić żeby strona wyglądała pięknie oraz żeby stała się interaktywna. Niestety, czasami zapomina się o założeniach UX oraz wpływie kodu na szybkość działania witryny. Zatem, na co najczęściej zwrócić uwagę podczas optymalizacji?

Komponentyzacja kodu

Zazwyczaj strona internetowa składa się z pewnych składników, które łącznie tworzą całość witryny. Tymi składnikami na ogół są poszczególne podstrony, które korzystają z konkretnego szablonu napisanego w HTML (lub w przypadku WordPressa w PHP). Dobrze zaprojektowana witryna posiada pewne elementy interfejsu, które są powtarzalne, jak np. przyciski, slidery, formularze, linki, headery, etc.

Komponentyzacja polega na tym by wyłapać takie elementy interfejsu, które są indywidualne dla poszczególnych sekcji strony i wczytywać pliki CSS oraz JS tylko tam gdzie występują nawiązania do nich. Bardzo przydatnym narzędziem do utrzymania komponentyzacji są task-runnery np. Grunt, Gulp lub Webpack.

Proces komponentyzacji jest z reguły łatwiejszy podczas tworzenia witryny, oraz kiedy jest ona uprzednio szczegółowo zaprojektowana przez UI designera. Dzięki temu Front-end Developer podczas wdrożenia wie jakie elementy będą wykorzystywane na stronie i może przewidzieć, które style CSS i funkcje JS będą potrzebne globalnie, a które tylko w niektórych miejscach.

Minifikacja kodu

Minifikacja kodu jest zazwyczaj pierwszym krokiem wykonywanym w celu optymalizacji strony, ponieważ jest najłatwiejsza, najszybsza i posiada znaczący wpływ na prędkość wczytywania strony.

Minifikacja polega zmniejszeniu wagi pliku poprzez usunięcie pustych znaków z kodu (spacje, tabulatory) oraz wyświetlenie go w pojedynczej linii. Dzięki temu waga pliku znacznie się pomniejsza.W jaki sposób zminifikować kod? Kolejny raz, z pomocą przychodzą nam task-runnery, które możemy skonfigurować tak, by pisany przez nas kod automatycznie generował zminifikowaną wersję oraz mapę źródłową (source map). Mapa zminifikowanego pliku jest odczytywana przez przeglądarki co ułatwia developerowi „debugowanie” zminifikowanego kodu. Kod JS lub CSS możemy także zminifikować ręcznie poprzez dodatki do IDE albo korzystając z różnego rodzaju generatorów dostępnych w internecie.

Jeżeli chodzi o WordPressa – w repozytorium wtyczek jest kilka godnych uwagi, które posiadają opcję natychmiastowej minifikacji CSS/JS, np. Hummingbird lub Autoptimize.

unCSS

Kolejnym bardzo przydatnym narzędziem do optymalizacji prędkości strony jest unCSS. W luźnym tłumaczeniu oznacza to pozbycie się nadmiernego, nieużywanego kodu w plikach CSS. W sieci dostępny jest program napisany w nodeJS, który możemy wykorzystać w task-runnerze.

Link do github

unCSS działa tylko ze statycznymi plikami HTML oraz tylko wtedy kiedy załadowany jest DOM. Oznacza to, że nie wykryje elementów, które są dynamicznie generowane w JS. Z pomocą przychodzi jednak parametr "ignore".

Critical CSS

Kaskadowe Arkusze Stylów blokują renderowanie treści. Dopóki przeglądarka internetowa nie pobierze styli i ich nie przetworzy, użytkownik będzie widział białą stronę. Aby przyśpieszyć ten proces należy pozbyć się zbędnego kodu CSS.

Usuwanie zbędnego kodu CSS ręcznie byłoby bardzo problematyczne, długotrwałe i narażone na błędy. Critical CSS to narzędzie, które automatyzuje ten proces i jest bardzo łatwy w obsłudze. Dodatkowo, minimalizuje błędy podczas usuwania zbędnego kodu CSS dając nam możliwość weryfikacja poprawności wyświetlanie witryny przed i po procesie.

CriticalCSS jest darmowy przez 30 dni i posiada automatyczną integrację z wtyczką Autoptimize.

Więcej o Critical CSS: https://psd2css.pl/baza-wiedzy/co-to-jest-critical-css

Konfiguracja serwera

Powyższe czynności optymalizujące szybkość wczytywania strony mogą znacznie poprawić odbiór witryny przez użytkowników, ale nawet najsprytniejsze sztuczki doświadczonych Web Developerów nie przyniosą zamierzonego efektu jeżeli serwer hostujący stronę jest przestarzały lub posiada ograniczenia. Jakie parametry serwera w widoczny sposób wpływają na działanie strony?

Wersja PHP

W grudniu 2015 roku została opublikowana wersja PHP o numerze 7.0, która poprawiła wydajność dwukrotnie względem swojego poprzednika – wersji 5.x.

Najnowsze wydanie PHP 7.4 zwiększa wydajność jeszcze bardziej. Warto jest więc zgłosić się do swojego usługodawcy hostingu aby włączył możliwie najnowszą wersję PHP dla naszego serwera. Korzystanie z najnowszych dystrybucji PHP wpływa również na bezpieczeństwo. Każda wersja PHP posiada okres wsparcia wynoszący 2 lata. W tym czasie eliminowane są wszelkie bugi oraz łatane luki bezpieczeństwa.Sprawdź aktualnie wspierane wersje PHP.

Przed aktualizacją wersji PHP należy sprawdzić należy przeprowadzić test, najlepiej poza serwerem produkcyjnym, aby sprawdzić czy funkcje na stronie są wspierane przez docelową wersję PHP.

Nie tylko software – Dyski SSD NVMe

Poza regularnymi aktualizacji oprogramowania oraz korzystaniem z wtyczek i programistycznych funkcji, warto jest zadbać o sprzęt, który musi te wszystkie dane przetworzyć.

Obecnie najbardziej wydajnymi dyskami są dyski SSD oparte o protokół NVMe. Ich prędkości są sporo wyższe od standardowych dysków SSD z interfejsem SATA, a klasyczne dyski talerzowe HDD pozostawiają daleko w tyle.

Hostowanie strony na dyskach SSD NVMe może kilkukrotnie zwiększyć wydajność witryny względem dysków HDD.

Kompresja gzip

Najpopularniejszymi serwerami internetowymi są Nginx oraz Apache. Niezależnie od tego z jakiego serwera korzysta nasza strona, możemy na nim uruchomić obsługę kompresji gzip.

Kompresja gzip pozwala na zmniejszenie rozmiaru całej strony podczas transferu z serwera do przeglądarki internetowej użytkownika. Dzięki temu przeglądarka otrzyma odpowiedź na wysłane żądanie szybciej co znacznie skróci czas oczekiwania na wyświetlenie strony.

Aby sprawdzić czy serwer, na którym jest hostowana strona obsługuje kompresję gzip i czy kompresja jest włączona na stronie można skorzystać z internetowych narzędzi, np. https://varvy.com/tools/gzip/ albo z wtyczek do optymalizacji, które jednocześnie sprawdzają status strony oraz serwera.

Polecane wtyczki

W repozytorium wtyczek WordPress można znaleźć kilka ciekawych pozycji, które w bardzo krótkim czasie i przy minimalnym wysiłku pozwolą nam przyśpieszyć wczytywanie strony. Korzystać z nich mogą również osoby „nietechnicznie” ponieważ większość czynności optymalizacyjnych jesteśmy w stanie wykonać przez panel administracyjny. Warto jest jednak mieć na uwadze, że niewiedza na temat niektórych zagadnień z dziedziny tworzenia stron internetowych, może negatywnie odbić się na procesie optymalizacji. Dlatego też zalecamy ostrożność i najlepiej przed instalacją jakiekolwiek wtyczki wykonanie pełnego backupu strony.

Dzięki poniższym wtyczkom można w łatwy sposób ustawić kompresję plików, minifikację JS oraz CSS, a także Caching. Ponadto, niektóre z nich pozwalają ustawić Lazy Loading. Korzystanie z tego typu wtyczek, poza przyśpieszeniem wczytywania witryny, poprawia wynik w Google PageSpeed Insights.

Wtyczki optymalizacyjne:

• Hummingbird

• Autoptimize

• W3 Total Cache

• WP Super Cache

Wtyczki do optymalizacji zdjęć

• Imsanity

• EWWW Image Optimizer

• Smush