×
QA trends 2019 PL miniatura

Pobierz nasz raport i bądź na bieżąco z najnowszymi trendami QA, Cyberbezpieczeństwa, IoT czy DevOps!

POBIERZ

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

Wydajność

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żaUSAWielka BrytaniaNiemcyJaponia
Motoryzacja6,3 s6  s6,3 s4,8 s
Handel6,6 s6,1 s5,6 s5,7 s
Finanse5,9 s5,1 s5,2 s5,1 s
Opieka zdrowotna5,4 s5,6 s4,6 s4,9 s
Media i rozrywka5,5 s5,5 s4,5 s4,8 s
Sklepy6,3 s6 s5,6 s5,2 s
Technologia6,7 s6,8 s5,5 s5,4 s
Podróże6 s6,7 s4,8 s5,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.

 

TestArmy Web Performance Optimization screen

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!

Jakub Wąsikowski

Jakub Wąsikowski 08.02.2019

Tester z ponad 3 letnim doświadczeniem w dostarczaniu oprogramowania najwyższej jakości. Fascynat IT oraz nowych technologii. Propagator świadomości dot. optymalizacji wydajności stron internetowych.

Comments are closed.
Wyszukaj
Kategorie