Jedna sekunda decyduje o sukcesie lub porażce, czyli wgląd w Web Performance Optimization.

Możemy śmiało założyć, że w dzisiejszym świecie liczy się tempo. Jesteśmy w ciągłym pośpiechu i stajemy się coraz bardziej niecierpliwi. Chcemy szybko opłacić rachunki, wyrobić się ze spóźnionym prezentem urodzinowym czy sprawnie znaleźć dobrą ofertę wakacyjną last minute. Większość z nas szuka szybkich i bezpiecznych stron internetowych, które oferują żądaną zawartość błyskawicznie. Prędkość to nie ekstrawagancka potrzeba, ale konieczność i oczekiwanie użytkownika. Aby ją uzyskać, trzeba dobrze wykonać Web Performance Optimization.

“Z badania przeprowadzonego przez Aberdeen Group wynika, że 1 sekunda opóźnienia oznacza spadek wyświetleń strony o 11%, obniżenie satysfakcji odbiorcy o 16% i utratę konwersji na poziomie 7%.”

Mnogość analiz i testów które można znaleźć w sieci udowadnia, że optymalizacja stron WWW ma duży wpływ na użytkowników i firmy, które są ich właścicielami. Szybka i niezawodna strona działa jak dobra wizytówka biznesowa, a powolna i źle zoptymalizowana prawie na pewno zniechęci potencjalnych odbiorców i negatywnie odbije się na wynikach finansowych. Nie ma drugiej szansy, jeśli chodzi o marne wrażenia i doświadczenia użytkownika. Korzyści płynące z posiadania dobrze zoptymalizowanej strony są niezaprzeczalne – lepsza konwersja oraz widoczność, niższy współczynnik odrzuceń, lepsze wrażenia dla użytkownika, większe zaangażowanie w dostarczaną treść i niższe wskaźniki porzuceń. Co więcej, ocena wydajności witryny będzie miała wpływ na pozycję w rankingu wyszukiwarek takich jak Google. Prędkość jest główną przewagą jaką można łatwo uzyskać nad konkurencją! Nie pozwól, aby Twoi potencjalni klienci rozglądali się za alternatywnym rozwiązaniem.

Jaka szybkość jest wystarczająca?

W 2018 roku, Google udostępniło analizę średniej prędkości ładowania stron (4G) na urządzeniach mobilnych w kilku sektorach przemysłu.

Branża	USA	Wielka Brytania	Niemcy	Japonia
Motoryzacja	6,3 s	6  s	6,3 s	4,8 s
Handel	6,6 s	6,1 s	5,6 s	5,7 s
Finanse	5,9 s	5,1 s	5,2 s	5,1 s
Opieka zdrowotna	5,4 s	5,6 s	4,6 s	4,9 s
Media i rozrywka	5,5 s	5,5 s	4,5 s	4,8 s
Sklepy	6,3 s	6 s	5,6 s	5,2 s
Technologia	6,7 s	6,8 s	5,5 s	5,4 s
Podróże	6 s	6,7 s	4,8 s	5,6 s

 

Średnia powyższych wynosi więc 5,63 s. Większość źródeł sugeruje, że optymalny czas to maksymalnie 3 sekundy, a niektóre nawet mniej. Czy to dostatecznie szybko? W 2009 roku, Google odkryło, że nawet 400 ms opóźnienia ma wpływ na ilość wyszukiwań przypadających na użytkownika. Takie opóźnienie jest prawie niezauważalne, więc czy strony naprawdę muszą ładować się z taką prędkością?

Aby móc odpowiedzieć na to pytanie musisz przeanalizować szybkość twojej strony i porównać ją z twoją bezpośrednią konkurencją. Dysponując taką wiedzą możesz oszacować budżet i zacząć planować działania. Teraz już wiesz, że prędkość jest indywidualnym aspektem, który zależy od wielkości twojej firmy i tego z kim musisz rywalizować. Optymalizacja oczywiście kosztuje, ale to jeden z wydatków, które najpewniej i najlepiej przełożą się na zwrot z inwestycji.

Czy Web Performance Optimization naprawdę jest takie ważne?

Google właśnie ogłosiło, że:

“Mobile-First Indexing oznacza, że Google będzie domyślnie używać mobilnej wersji strony do indeksowania i rankingowania. Do tej pory podczas oceny trafności treści strony w kontekście zapytania użytkownika, indeksowane były głównie desktopowe wersje stron. Ponieważ większość użytkowników korzysta obecnie z mobilnej wersji Google, priorytetyzujemy właśnie ten typ przekierowań.”

Kierowane obsesją na punkcie szybkości, Google nie pozostawia wątpliwości – wydajność strony jest bardzo istotna. Z tej sytuacji są dwa wyjścia – Twoje dalsze działania skutkują pojawieniem się witryny w Search Engine Results Page lub jej kompletnym zniknięciem.

Skąd mam wiedzieć, co jest nie tak z moją stroną?

Aby to zrozumieć, należy zastosować pięć kroków do uzyskania trwałego sukcesu:

 

Zmierz. Porównaj. Monitoruj. Optymalizuj. Powtórz.

 

Mierzenie i porównywanie:

Google Speed Scorecard może być w tym bardzo pomocny. Pozwoli Ci sprawdzić jak szybko twoja strona ładuje się w prędkościach 3G i 4G. Ponadto będziesz mógł sprawdzić jak na tym polu wypada konkurencja i porównać jej wyniki z Twoimi.

Monitorowanie:

Musisz stale sprawdzać jak aktualizacje zawartości i funkcji strony wpływają na jej wydajność. Zastanów się nad syntetycznym monitoringiem (aktywna analiza z wykorzystaniem emulatora i skryptów)  lub RUM (Real User Monitoring, śledzenie akcji prawdziwego użytkownika), a dla uzyskania najlepszego efektu korzystaj z obu.

Synthetic measurement: symulacja badająca stan twojej strony. Najpopularniejsze narzędzia, których możesz użyć to np. GTMetrix lub Sitespeed.io.

 

Screen: Panel monitorowania na sitespeed.io

 

Real User Monitoring (RUM): forma pasywnego monitoringu polegająca na stałej obserwacji ruchu na stronie. Zbiera duże ilości danych, do późniejszej analizy. mPulse i SpeedCurve to przykładowe narzędzia, które mogą pomóc Ci w tej kwestii.

Optymalizacja:

Zanim zaczniesz optymalizować istniejące strony pamiętaj, że jeśli możesz wpłynąć na etap projektowania, zaproponuj zespołowi projektowemu skupienie się na Mobile First i tzw. płaskim designie. Takie podejście zapewni dużą prędkość strony już na starcie. W innym wypadku będziesz musiał znaleźć wąskie gardła, które ją spowalniają. Możesz przy tym korzystać z różnych narzędzi, takich jak  GTMetrix czy Pingdom, które przeanalizują strukturę Twojej strony i dadzą Ci punkt wyjścia. Ponieważ ten aspekt jest bardzo indywidualny, poniżej zostaną opisane najczęstsze problemy i ich rozwiązania.

• Zoptymalizuj zasoby blokujące renderowanie i ładuj je asynchronicznie –Wstrzymaj mniej ważne i obciążające stronę elementy blokujące te dane, które muszą zostać wyświetlone natychmiast
• Obciążona strona – Zoptymalizuj elementy składowe twojej strony (obrazy, skrypty, fonty, HTML i CSS)
• Wykorzystaj Content Delivery Network – Dostarczaj użytkownikowi zawartość twojej strony dzięki lokalnym serwerom
• Hosting – Wybieraj mądrze, jeśli chodzi o rozwiązanie hostingowe Twojej witryny
• Zredukuj ilość zapytań HTTP – Łącz pliki, skrypty i arkusze stylów kiedy to możliwe
• Wstawiaj CSS i JavaScript – Jeśli możesz, osadzaj CSS i JavaScript w kodzie HTML
• Popraw błędne zapytania – Zidentyfikuj i napraw niedziałające linki i obrazy
• Włącz kompresję Gzip – Może to znacząco zredukować rozmiar twojej strony
• Używaj pamięci podręcznej przeglądarki – Upewnij się, że umożliwiasz korzystanie z pamięci podręcznej po stronie serwera i po stronie klienta
• Uporządkuj CSS, JavaScript i HTML – Pozbądź się zbędnej zawartości aby uniknąć niewłaściwego korzystania z pewnych reguł
• Wstrzymaj ładowanie obrazów poza ekranem – Załaduj tylko te obrazy, które są widoczne dla użytkownika podczas przewijania strony. Użyj techniki “lazy loading”
• Zredukuj przekierowania – Przekierowania tworzą niepotrzebna zapytania HTTP, co źle wpływa na szybkość. Utrzymaj tylko niezbędne minimum albo pozbądź się ich całkowicie
• Dostosuj nagłówki Time To Live  – Cała statyczna zawartość strony (obrazy, CSS czy JavaScript) powinne mieć dopasowany TTL, aby uzytkownicy powracający na stronię nie musieli ich znowu pobierać

 

Wreszcie ostatni krok – Powtórz.

 

Idź w ślady najlepszych

Skieruj kulturę firmy w stronę inwestowania w Web Performance Optimization aby stać się liderem w branży. Wiele firm podjęło już taką decyzję i wyszło na tym znakomicie. Oto kilka przykładów:

Netflix zanotował olbrzymi (43%) spadek kosztów utrzymania przepustowości łącza po jednej prostej optymalizacji. Włączył kompresję GZip, co poskutkowało natychmiastową redukcją wychodzącego ruchu internetowego.

Wikipedia zwiększyła wydajność stron o 66% i znacząco oszczędziła na kosztach utrzymania serwerów. Skutkiem wprowadzonych zmian był spadek czasu ładowania z 7.5 sekundy do  2.5 sekundy.

Platforma fundraisingowa prezydenta Obamy została zoptymalizowana i jej szybkość zwiększyła się o 60%. Ten ruch pozwolił na zdobycie dodatkowych 34 milionów dolarów. Robi wrażenie prawda? A wystarczyło ulepszyć dostarczanie treści przy użyciu CDN (Content Delivery Network)

Mozilla przyśpieszyła czas ładowania swoich stron o  2.2 sekundy. Dzięki temu konwersja pobrań wzrosła o 15.4%. Ich strategia opierała się o połączenie plików JavaScript i włączeniu CSS do kodu  HTML

Pinterest przebudował swoje strony z nastawieniem na wydajność. Redukcja czasu oczekiwania o 40% pozwoliła na zwiększenie konwersji zakładania kont o 15%

Zalando zredukowało czas oczekiwania o ledwie 100ms i zanotowało wzrost obrotów o 0.7%

AliExpress obniżyło czas oczekiwania o 36% dzięki czemu ilość zamówień wzrosła o 10.5%, a konwersja nowych użytkowników wzrosła aż o 27%

Wnioski płynące z lekcji

W tym momencie powinieneś być zmotywowany do rozpoczęcia zmian w swojej firmie. Wykorzystaj istniejące analizy przypadków, badania i inne dostępne środki, aby zaplanować swoje działania i uświadamiać swoje otoczenie biznesowe o znaczeniu Web Performance Optimization. Udowodnij słuszność tego podejścia osobom decyzyjnym w twojej firmie i zainicjuj rewolucję. Ci, którzy nie będą podążać za nowymi wzorcami mogą skończyć z niczym.

TestArmy zapewnia kompleksowe usługi optymalizacji stron internetowych. Chętnie odpowiemy na Twoje pytania i wycenimy Twój projekt. Aby dowiedzieć się więcej wejdź na TestArmy – testy wydajnościowe.

Nie czekaj, optymalizuj już teraz!