Jak przyspieszyć działanie strony na WordPress
Czas czytania:
office
Zalety szybkiego wczytywania strony. Jak prędkość ładowania wpływa na ruch organiczny i reakcje użytkowników?
Żyjemy w 2020 roku, gdzie średnio co kilka miesięcy producenci urządzeń prezentują nam coraz to wydajniejsze telefony, czy podzespoły do komputerów, a dostawcy internetu prześcigają się w dostarczaniu coraz to szybszych prędkości łączy.
Pęd za cyfryzacją i coraz szybszy tryb życia społeczeństwa wykształcił w nas pewne wzorce zachowań i przyzwyczajenia – również jeżeli chodzi o korzystanie z internetu. Coraz częściej zwracamy uwagę na responsywność stron, ale również na prędkość ich wczytywania. Statystyczny użytkownik unika stron internetowych, które każą mu czekać na załadowanie powyżej 3 sekund.
Zasada 3 sekund powinna być znana każdemu twórcy stron internetowych i powinien on dążyć do optymalizacji swojego kodu, tak aby nie przekraczać wyznaczonego czasu. Według Google wolna strona to taka, która wczytuje się dłużej niż 2,5 sekund przy łączu 4G (źródło: thinkwithgoogle.pl).
Poziom przeciętny uzyskują strony, który ładują się od 1 sekundy do 2,5 sekund, a szybkie strony wczytują się poniżej 1 sekundy.
Prędkość ładowania strony ma także istotny wpływ na jej pozycję w wyszukiwarkach. W 2010 roku firma Google oficjalnie ogłosiła, że jest to jeden z kluczowych czynników, który biorą pod uwagę przy pozycjonowaniu. Dlatego też, warto jest zadbać o optymalizację prędkości by móc osiągnąć jak najwyższe lokaty w wyszukiwarce.
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:
-
Pierwsze wyrenderowanie treści (First Contentful Paint – FCP):
Czas wyrenderowania pierwszego tekstu oraz obrazka
-
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
-
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.
-
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
-
CPU bezczynny po raz pierwszy (First CPU Idle):
Mierzy czas, po którym strona jest interaktywna, ale niekoniecznie w pełni.
-
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.