Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Proprietary + ConfidentialProprietary + Confidential
Proprietary + Confidential
Optymalizacja doświadczenia użytkownika na...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Ścieżka użyt...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Raport Akama...
49% -26% 8.2
Proprietary + Confidential
Wpływ opóźnienia 1s
na współczynnik
odrzuceń (Mobile)
Wpływ opóźnienia 2s
na współ...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Nie możemy z...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Kalkulator k...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Sprawdź szyb...
Confidential + Proprietary
Co myślisz, że
zbudowałeś
Confidential + Proprietary
Co faktycznie
zbudowałeś
Source: “Pushing the Pear County Chopper uphill” by Todd Lappin | http...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Co to jest A...
Poufne i zastrzeżone
Strona dostosowywana
ręcznie
Przeciętna strona
mobilna
Wszystkie strony
AMP
Zdjęcie: Nascarking, lice...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Greenweez.co...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Źródło: http...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Źródło: http...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
AMP case stu...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
AMP case stu...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Marki, które...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Analiza Forr...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Dlaczego str...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Interakcja w...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
80% zespołów...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Nad czym są ...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Ścieżka użyt...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Dylemat mark...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Zaangażowani...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Zaangażowani...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Zaciera się ...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Co potrafi T...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Szybkość Nie...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Co to jest P...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Service Work...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Treść może b...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Wysyłanie no...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Alibaba.com ...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Nowość - PWA...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Rozszerzenie...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Jak ugryźć S...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
AMP i PWA uz...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
AMP i PWA ra...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Ścieżka użyt...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Długi proces...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Pay with Goo...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Pay with Goo...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Tap. Pay. Do...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Pay with Goo...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Ścieżka użyt...
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
CaniUse.com
Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Proprietary + Confidential
Podsumowanie...
Upcoming SlideShare
Loading in …5
×

#MTC2018: Optymalizacja doświadczenia użytkownika na stronach mobilnych w celu poprawy efektywności biznesowej. Jak podejść do tego strategicznie i operacyjnie? - Mariusz Gąsiewski

44 views

Published on

Optymalizacja doświadczenia użytkownika na stronach mobilnych poprzez zastosowanie nowych technologii typu AMP, PWA. Jak podejść do tego strategicznie, priorytetyzować działania? Prezentacja oparta na przykładach i case studies. Prelekcja wygłoszona podczas Mobile Trends Conference, 1-2 marca 2018 r. w Krakowie.

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

#MTC2018: Optymalizacja doświadczenia użytkownika na stronach mobilnych w celu poprawy efektywności biznesowej. Jak podejść do tego strategicznie i operacyjnie? - Mariusz Gąsiewski

  1. 1. Proprietary + ConfidentialProprietary + Confidential Proprietary + Confidential Optymalizacja doświadczenia użytkownika na stronach mobilnych w celu poprawy efektywności biznesowej. Jak podejść do tego strategicznie i operacyjnie? Mariusz Gąsiewski, Kraków, 1.3.2018
  2. 2. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Ścieżka użytkownika na Mobile Konwersja PowracalnośćOdkrywalność Zaangażowanie
  3. 3. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Raport Akamai Źródło: Raport Akamai, 2017 ● miesięczne dane z największych witryn Ecommerce ● 10 miliardów wizyt
  4. 4. 49% -26% 8.2 Proprietary + Confidential Wpływ opóźnienia 1s na współczynnik odrzuceń (Mobile) Wpływ opóźnienia 2s na współczynnik konwersji (Mobile) Średni czas ładowania strony w Polsce (Mobile 3G)
  5. 5. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Nie możemy zakładać, że użytkownicy w Polsce zawsze będą mieli dobre połączenie mobilne... Śr.szybkość(megabitna sekunda) 51 miejsce Źródło: OpenSignal, Global State of Mobile Networks
  6. 6. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Kalkulator korzyści z optymalizacji strony mobilnej Źródło: Raport Akamai, 2017
  7. 7. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Sprawdź szybkość swojej strony na Webpagetest.org
  8. 8. Confidential + Proprietary Co myślisz, że zbudowałeś
  9. 9. Confidential + Proprietary Co faktycznie zbudowałeś Source: “Pushing the Pear County Chopper uphill” by Todd Lappin | https://www.flickr.com/photos/telstar/58219209/
  10. 10. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Co to jest AMP? ● 4x szybciej ● 10x mniej danych ● <1 sekundy
  11. 11. Poufne i zastrzeżone Strona dostosowywana ręcznie Przeciętna strona mobilna Wszystkie strony AMP Zdjęcie: Nascarking, licencja: CC-BY-SA-4.0 https://goo.gl/jx30OB
  12. 12. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Greenweez.com case study Źródło: http://apac.thinkwithgoogle.com/case-studies/japanese-retailer-belluna-mobile-experience-leads-impressive-sales-lift.html greenweez.com Niska efektywność Mobile w stosunku do desktopu Średni czas ładowania strony wynosi 10s
  13. 13. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Źródło: http://apac.thinkwithgoogle.com/case-studies/japanese-retailer-belluna-mobile-experience-leads-impressive-sales-lift.html 5x 80% speed mCVR -66% mCPA “AMP has solved our mobile performance issue. Results are amazing, our mobile conversion rate have doubled and our Adwords mobile ROI is now in line with our expectations” Simon Le Fur, General Manager Greenweez
  14. 14. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Źródło: http://apac.thinkwithgoogle.com/case-studies/japanese-retailer-belluna-mobile-experience-leads-impressive-sales-lift.html “We were able to migrate our mobile pages to AMP in under two months”. Simon Le Fur, General Manager Greenweez
  15. 15. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential AMP case study Źródło: http://apac.thinkwithgoogle.com/case-studies/japanese-retailer-belluna-mobile-experience-leads-impressive-sales-lift.html 28% wzrostu zamówień z Mobile 8Xśredni czas ładowania skrócony do 0.62 sekund—8X szybciej
  16. 16. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential AMP case study Źródło: https://ampbyexample.com/amp-ads/introduction/amp_ads_vs_non-amp_ads/ Rezultaty po wdrożeniu AMP: ● Czas ładowania strony krótszy o 84% ● Wzrost konwersji o 19%
  17. 17. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Marki, które poprawiły szybkość i skuteczność stron dzięki AMP
  18. 18. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Analiza Forrester Źródło: Total Impact of AMP
  19. 19. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Dlaczego strony AMP są szybkie? Uproszczone strony ● Mniej kodu JavaScript Zoptymalizowana przepustowość ● Treść zoptymalizowana pod kątem urządzenia (rozdzielczość obrazu itp.) ● Asynchroniczne wczytywanie 1. 2. 3. Strony przechowywane w pamięci podręcznej ● Serwery CDN przechowują i wyświetlają lokalne kopie stron
  20. 20. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Interakcja w AMP
  21. 21. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential 80% zespołów buduje strony docelowe AMP w ciągu 1 tygodnia
  22. 22. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Nad czym są prace? ampproject.org/roadmap
  23. 23. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Ścieżka użytkownika na Mobile Konwersja PowracalnośćOdkrywalność Zaangażowanie
  24. 24. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Dylemat marketera... Powinienem się skupić na stronie mobilnej? Powinienem zbudować aplikację?
  25. 25. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Zaangażowanie vs. odkrywalność treści Zaangażowanie Odkrywalność
  26. 26. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Zaangażowanie vs. odkrywalność treści Zaangażowanie Odkrywalność Strony mobilneAplikacje
  27. 27. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Zaciera się granica OS / przeglądarka... Nowoczesne przeglądarki mogą korzystać z tzw. WebAPI aby komunikować się: ● z systemem operacyjnym ● z hardware telefonu ● z zewnętrznymi usługami Google
  28. 28. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Co potrafi Twoja przeglądarka? Zajrzyj koniecznie: whatwebcando.today
  29. 29. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Szybkość Niezawodność Zaangażowanie Nowe możliwości
  30. 30. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Co to jest PWA? ● Zestaw technologii webowych ● HTML + CSS + JavaScript ● Wykorzystuje intensywnie API przeglądarki oraz nowe funkcje JavaScript (Service Worker)
  31. 31. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Service Worker - technologia stojąca za PWA Klasycznie Service Worker Serwer proxy w JavaScript po stronie klienta Instalowany na urządzeniu Z PWA... Serwer WWW SW Cache Lokalna pamięć podręczna (“cache”)
  32. 32. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Treść może być pokazywana nawet bez połączenia z siecią
  33. 33. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Wysyłanie notyfikacji ● Możliwość wysyłania powiadomień systemowych ● Zwiększa zaangażowanie userów ● Powiadomienia mogą być wysyłane nawet wtedy gdy główna strona PWA jest zamknięta ● Zastosowanie - informowanie o porzuconym koszyku, promocjach, wysyłce produktu itp.
  34. 34. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Alibaba.com - największa platforma B2B, Chiny konwersji na wszystkich przeglądarkach 4X więcej interakcji po uruchomieniu z ekranu głównego 76% więcej 30% więcej miesięcznie aktywnych użytkowników (Android)
  35. 35. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Nowość - PWA będą też działać na iOS! ● Od wersji 11.3 iOS będzie wspierać Service Worker ● Zgodność z mobilnym Safari ● Na razie mamy etap Beta 2 ● Część funkcji jeszcze nie działa (np. praca offline)
  36. 36. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Rozszerzenie Lighthouse
  37. 37. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Jak ugryźć Service Workera? ● Oferujemy Workbox JS - zestaw narzędzi, które pomagają w wygenerowaniu podstawowego skryptu Service Workera ● Tutorial krok po kroku - pod poniższym adresem: ● https://codelabs.developers.google.com/codelabs/workbox-lab/
  38. 38. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential AMP i PWA uzupełniają się AMP PWA Natychmiastowe ładowanie Łatwe do osadzenia Minimum Javascriptu Treść statyczna Najnowsze API dla JavaScript Treść dynamiczna Pierwsze ładowanie wolniejsze Trudne do osadzenia
  39. 39. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential AMP i PWA razem ● Strona AMP ładuje się błyskawicznie. ● W tle instalowany jest Service Worker który “przygotowuje grunt” dla PWA Kiedy użytkownik przejdzie do dalszej części strony, kontrolę przejmuje aplikacja PWA <amp-install-serviceworker>
  40. 40. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Ścieżka użytkownika na Mobile Konwersja PowracalnośćOdkrywalność Zaangażowanie
  41. 41. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Długi proces zakupu Discovery Jeden z głównych czynników niskich wskaźników konwersji
  42. 42. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Pay with Google Discovery Android PayKarty kredytowe
  43. 43. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Pay with Google Discovery Payments.google.com Użytkownicy Google Transakcja w obrębie usług Google Karta zachowana w koncie użytkownika Wykorzystanie karty do zakupach na innych witrynach
  44. 44. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Tap. Pay. Done Bez dodatkowych opłat Wystarczy “tap” Prosta implementacja (<1 tydzień) Pozwala na wykorzystanie kart użytkownika
  45. 45. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Pay with Google Przykładowa integracja w Dice
  46. 46. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Ścieżka użytkownika na Mobile Konwersja PowracalnośćOdkrywalność Zaangażowanie
  47. 47. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential CaniUse.com
  48. 48. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem Proprietary + Confidential Podsumowanie ● Tradycyjny podział strona mobilna/aplikacja odchodzi w przeszłość ● Optymalizuj całą ścieżkę użytkownika ● Testuj nowe rozwiązania

×