Jak niskie prędkości stron mobilnych rujnują Twoje współczynniki konwersji

Istnieje duża szansa, że ​​zły projekt strony docelowej po kliknięciu kosztuje co najmniej połowę budżetu PPC, sugerują najnowsze badania Google.

Dane giganta wyszukiwarek wskazują, że ponad co drugi internauta mobilny porzuca stronę, jeśli nie załaduje się w ciągu 3 sekund. Od lutego 2017 r. przeciętna mobilna strona docelowa po kliknięciu zajmuje żenujące 22 sekundy.

Jeśli przestałeś robić obliczenia, prawdopodobnie zdajesz sobie sprawę, jak szkodliwa może być wolno ładująca się strona.

Jeśli wygenerujesz 5000 użytkowników mobilnych stron docelowych po kliknięciu miesięcznie i dokonasz konwersji 5% z nich, stracisz 1500 konwersji w ciągu roku. Jeśli ładowanie trwa dłużej niż 3 sekundy, połowa użytkowników — w tym hipotetycznym przypadku 2500 miesięcznie — nie widzi nawet całej strony docelowej po kliknięciu, zanim się odrzuci. Co gorsza, twój budżet PPC zostaje wyczerpany za każdym razem, gdy to robią.

Ale może Twoja strona nie załaduje się w 3 sekundy. Może ładuje się w 5 sekund, 6 sekund lub 10 sekund. Jeśli tak jest, dane z Google pokazują, że tracisz jeszcze więcej.

Nowe testy porównawcze szybkości stron mobilnych

Jak Twoje strony prezentują się na tle innych w sieci? Aby ustalić nowe kryteria szybkości ładowania, na początku 2017 r. Google przeanalizował 900 000 mobilnych stron docelowych po kliknięciu w 126 krajach.

To, co znaleźli, było potwierdzeniem ich hipotezy: strony mobilne są „rozdęte” ze zbyt dużą liczbą elementów.

Wśród nich najdłużej ładują się strony z sektorów motoryzacyjnego, detalicznego i technologicznego. Jednak niezależnie od branży niektóre szokujące dane pokazują, że mobilne strony docelowe po kliknięciu pozostawiają wiele do życzenia.

Na przykład 70% przeanalizowanych stron zajęło 7 sekund, aby wczytać treść tuż nad zakładką. Na tych samych stronach załadowanie treści wizualnych powyżej i poniżej części ekranu zajęło łącznie ponad 10 sekund.

Z pomocą zaawansowanych algorytmów SOASTA, inne badanie Google powiązało szybkość ładowania strony z bardziej znaczącymi kluczowymi wskaźnikami wydajności, takimi jak konwersje i współczynnik odrzuceń. W poście na blogu badacze omawiają:

Zbudowaliśmy dwa modele uczenia maszynowego: jeden do przewidywania konwersji, a drugi do przewidywania współczynników odrzuceń. Każdy model wykorzystywał rzeczywiste dane z dużej próbki mobilnych witryn e-commerce, korelując wpływ 93 różnych metryk strony, od formatów graficznych do wielu skryptów. Mówiąc najprościej, te dwa modele szukały, które czynniki witryny mobilnej skłoniłyby kupujących do zakupu lub odrzucenia. Model konwersji miał dokładność przewidywania 93%, a model odrzuceń był jeszcze dokładniejszy, 96%.

Modele uczenia maszynowego z niemal precyzyjną dokładnością wykryły, że wraz ze wzrostem czasu ładowania strony z jednej do trzech sekund prawdopodobieństwo odbicia się użytkownika mobilnego wzrasta o 32%. Stamtąd, jak pokazuje grafika, sprawy się pogarszają:

Badanie wykazało, że obok współczynnika odrzuceń powolny czas wczytywania strony może również zmniejszyć liczbę konwersji. Więc jaki jest winowajca?

Badacze zidentyfikowali kilka poważnych wad projektu mobilnego.

Najwięksi mobilni zabójcy szybkości stron docelowych po kliknięciu

Szybkość jest nie tylko przeszkodą w konwersji i płatnym budżecie reklamowym; jest to również jeden z czynników rankingu wyszukiwarek Google. Jeśli Twoja strona nie ładuje się szybciej niż zalecane 3 sekundy, marnujesz pieniądze i nie można Cię znaleźć. Przyczyną może być dowolny z poniższych problemów.

1. Za dużo elementów strony

Dzisiaj przeciętna strona internetowa ma ten sam rozmiar, pod względem danych, co klasyczna gra wideo „Doom:”

Z 2,3 MB, rozrósł się do sterty niepotrzebnych elementów. A jego projektanci mają BSO — „syndrom jasnego błyszczącego obiektu” — sugeruje inżynier oprogramowania Ronan Cremin:

Gdy sieć przechodziła przez swoje niezręczne, nastoletnie lata, pozwoliliśmy, by pełzające funkcje przejęły kontrolę i ostatecznie bałagan po prostu nas przewyższył. Nowy moduł galerii JavaScript? Jasne, czemu nie? Och, ta nowa czcionka internetowa wyglądałaby ładnie tutaj, ale dlaczego nie dodać kolejnego narzędzia analitycznego, gdy już tam jesteśmy? Czy powinienem zawracać sobie głowę zmianą rozmiaru tego obrazu o rozdzielczości 6000 pikseli? Nie, niech przeglądarka to zrobi, działa dla mnie.

Google odkrył, że „funkcja”, jak nazywa ją Cremin, może mieć drastycznie negatywny wpływ na szybkość ładowania. Przeciętna strona zawiera teraz setki, a nawet tysiące elementów — nagłówki, obrazy, przyciski — przechowywane na dziesiątkach serwerów. Gdy te elementy nie zostaną zoptymalizowane, rezultatem może być „nieprzewidywalne” i „niestabilne” ładowanie.

Badacze posunęli się nawet do określenia liczby elementów na stronie jako najdokładniejszego predyktora konwersji. Twierdzą, że mniej znaczy więcej. Gdy elementy strony wzrosną z 400 do 6000, szanse na konwersję odwiedzającego spadają o 95%.

Z danych wynika, że ​​najlepsi projektanci internetu wiedzą o tym od 2014 r. Podczas gdy średni rozmiar strony stale rośnie w przypadku większości witryn, pierwsza dziesiątka poszła w róg:

Dla nich „waga” strony (rozmiar danych) spadała w ciągu ostatnich kilku lat. Wygląda na to, że wszyscy inni są ofiarami featuritus.

Według Google 70% testowanych stron miało ponad 1 MB, 36% to 2 MB, a 12% ponad 4 MB. W rezultacie istnieje niewielka szansa, że ​​odwiedzający zostaną na długo. Za pośrednictwem szybkiego połączenia 3G (szybkość większości połączeń komórkowych na całym świecie) ładowanie 1,49 MB zajmuje około 7 sekund.

Rozwiązanie problemu

W przypadku mocno obciążonej strony najlepszym rozwiązaniem jest zapobieganie. Na szczęście zapobieganie jest tak proste, jak ustawianie tego, co Google nazywa „budżetami wydajności”. Zanim zaczniesz budować swoją stronę, ustal, jak szybko ma się ładować („budżet”). Następnie zaprojektuj swoją stronę w granicach swojego budżetu.

„Dużo wydajniej jest dostarczać coś szybko, jeśli jest to częścią kryteriów projektowych”, mówi Hakan Nizam z L'Oreal. „Zwolniłoby to przepustowość programistów. Pozwoliłoby to programistom skupić się na innych czynnikach wpływających na współczynniki konwersji. Rozmowa o szybkości powinna zostać rozwiązana, aby przejść do innych wyróżników.”

W poście na blogu dla Google Jason Cohen porównuje budżet do innych ograniczeń twórczych:

Włączenie szybkości w proces projektowania nie różni się niczym od uwzględnienia ograniczeń innych kreatywnych mediów. Projektanci nie stworzyliby czterokolorowej reklamy dla czarno-białej publikacji drukowanej ani nie stworzyliby 30-sekundowego filmu na 15-sekundowy boks. Jeśli nie projektujemy w ramach ograniczeń medium, rezultatem są złe doświadczenia.

Pomimo tego, że urządzenia mobilne wyprzedzają ruch internetowy na komputerach stacjonarnych, kanał nadal pozostaje w tyle za komputerami stacjonarnymi pod względem większości wskaźników doświadczenia użytkownika. Projektanci muszą przestać traktować mobilność jako refleksję. To własne medium, a wrażenia użytkownika powinny to odzwierciedlać.

Oczywiście technika „budżetowania” zakłada, że ​​zaczynasz od zera. Jeśli próbujesz zoptymalizować i tak powolną stronę docelową po kliknięciu, badacze zalecają przeprowadzenie audytu Twoich elementów i monitorowanie skryptów innych firm, aby odkryć, które mają największy wpływ na jej wagę. Następnie zmniejsz skalę, aby odpowiednio zoptymalizować.

2. Za dużo obrazów

W ich badaniach uwagę testerów Google przykuł jeden konkretny obraz. Ważył aż 16 MB. Wciąż znajdowali obrazy, które ugrzęzły na stronach.

„Elementy graficzne, takie jak favikony, logo i obrazy produktów, mogą z łatwością stanowić nawet dwie trzecie (innymi słowy, setki kilobajtów) całkowitej wagi strony” — ostrzegają badacze.

Dzięki modułom uczenia maszynowego odkryli, że drugim najdokładniejszym predyktorem konwersji jest liczba obrazów na stronie. W porównaniu ze stronami, które nie mogły skutecznie skonwertować odwiedzających, strony, które zawierały o 38% mniej obrazów.

Rozwiązanie problemu

Jednym z najprostszych sposobów na zwiększenie szybkości strony jest szybka optymalizacja obrazu. Postaraj się…

• Ogranicz niepotrzebne obrazy

Czy naprawdę potrzebujesz zaprezentować swój produkt pod sześcioma różnymi kątami? Czy to zdjęcie stockowe naprawdę dodaje wartości do strony docelowej po kliknięciu? Czy musisz zakodować tekst w obrazie, czy zamiast tego możesz zintegrować wybraną czcionkę z Google Fonts lub Adobe Typekit? Jeśli odpowiedź brzmi „nie”, rozważ wycięcie kilku obrazów ze swojego projektu.

• Zmniejsz rozmiar niezbędnych obrazów

Jeśli potrzebujesz wszystkich tych obrazów, kilka różnych narzędzi i strategii może pomóc Ci zaoszczędzić przepustowość. Po pierwsze, poznaj swój format pliku obrazu. Zastąpienie PNG plikiem JPEG może zaoszczędzić dużo rozmiaru, a co za tym idzie, prędkości. Z drugiej strony obniży to również jakość obrazu. Więcej informacji o tym, jak zdecydować, którego formatu użyć, znajdziesz w tym poście.

Po drugie, pomyśl o użyciu narzędzia. Naukowcy twierdzą, że 30% stron może zaoszczędzić 250 KB danych za pomocą kompresora obrazu. Warto spróbować Guetzli i Zopfli firmy Google.

3. Użycie JavaScript, czas ładowania całej strony

Zanim elementy, takie jak obrazy i przyciski, będą mogły zostać wyświetlone użytkownikowi, kod HTML, z którego budowana jest strona, musi zostać odebrany i zinterpretowany przez przeglądarkę. Czas, jaki zajmuje, jest znany jako „czas gotowości DOM” – najdokładniejszy predyktor odbicia strony, jak odkryli naukowcy.

Dane Google pokazują, że sesje użytkowników, które zostały odrzucone, miały czasy gotowości DOM, które były o 55% wolniejsze niż sesje bez odsyłania. Spowolnienia o takim znaczeniu są często spowodowane przez JavaScript — rodzaj kodu, który zatrzymuje parsowanie kodu HTML — używany w wielu zewnętrznych narzędziach analitycznych, reklamach i widżetach społecznościowych.

Daniel An i Pat Meenan porównują spowolnienie do niezorganizowanej restauracji:

Wyobraź sobie, że jesteś w restauracji, a kelner jest gotowy do przyniesienia posiłku, ale najpierw musi poczekać na dostawę soli i pieprzu z innej restauracji.

Ale JavaScript nie jest jedynym rodzajem kodu spowalniającym strony mobilne. CSS, HTML i niezliczone żądania potrzebne do przetwarzania elementów, takich jak obrazy i czcionki, powodują opóźnienie w czasie ładowania całej strony — drugi najdokładniejszy wskaźnik współczynnika odrzuceń. Przeciętna strona internetowa, z której użytkownicy odbili się, była o 2,5 sekundy wolniejsza niż średnia strona, z której się nie oddalili.

Rozwiązanie problemu

Próbując ulepszyć przeglądanie na urządzeniach mobilnych, Google opracował AMP i AMP dla programów reklamowych. Obie platformy zapewniają programistom narzędzia, których potrzebują, aby dostarczać mobilne doświadczenia z szybkością błyskawicy. Zawierają:

• AMP HTML: jest to uproszczona, podstawowa wersja tego, co rozpoznajemy jako hipertekstowy język znaczników — system tagów, cyfr i liter służący do budowania podstaw większości stron internetowych.

• AMP JavaScript: wersja popularnego kodu Google w formacie AMP ogranicza korzystanie z kodu JavaScript napisanego przez osoby trzecie i autora.

• AMP CDN: umożliwia programistom przechowywanie w pamięci podręcznej wersji ich strony internetowej na serwerach Google. Ta wersja w pamięci podręcznej to cyfrowa migawka strony, która zawiera wszystkie jej dane w jednym miejscu. Dzięki temu może być szybciej serwowana użytkownikowi.

Razem elementy frameworka tworzą podstawę stron, które zużywają 10 razy mniej danych niż przeciętnie, a reklamy ładują się 6 razy szybciej.

Przejdź tutaj, aby dowiedzieć się więcej o rozpoczęciu korzystania z AMP.

Jaka jest szybkość Twojej strony mobilnej?

Czy Twoje strony docelowe po kliknięciu są zoptymalizowane pod kątem urządzeń mobilnych? Czy są wolne od bezużytecznych obrazów, niezgrabnych elementów i ciężkiego JavaScriptu?

Dowiedz się, korzystając z testu Google na przyjazność dla urządzeń mobilnych, a następnie zapoznaj się z naszym przewodnikiem po optymalizacji obsługi strony docelowej po kliknięciu przed utworzeniem kolejnej strony: