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.

Understand and overcome mobile web performance challenges

753 views

Published on

I presented together with Adrian Mendoza, Co-founder of Marlin Mobile to provide guidance on how to improve the performance of your mobile site.

People who watched the presentation:
* Learned about the performance pitfalls of mobile sites
* Found out how to gain insight into desktop and mobile site performance, including how to get details on particular devices, carriers and locations.
* Gained useful tips to improve page load times and multi-device user experiences.
* Plus, learned the value of performance measurement tools like Marlin Mobile, a solution built specifically for mobile sites, and Yottaa, a cloud platform that drives user engagement to increase conversions and revenue. By measuring performance on real devices in the wild, users get the details they need to diagnose a slow mobile site and to fix it.

  • Be the first to comment

  • Be the first to like this

Understand and overcome mobile web performance challenges

  1. 1. www.yottaa.com | www.marlinmobile.com Understand and Overcome! Mobile Web Performance
  2. 2. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 2 Your Presenters Ari Weil VP of Products, Yottaa @aweil Adrian Mendoza Co-founder, Marlin Mobile @marlinUX
  3. 3. Agenda #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 3 Mobile: much ado about...what exactly? Smaller is only the beginning Optimization best practices Overcome and win Q&A
  4. 4. 20% of electronics purchases using mobile 35% of mobile visitors prefer www to m.site 80% of mobile revenue from full site browsing #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 4 Why is everyone so focused on mobile?
  5. 5. Mobile traffic - it’s just the tip of the iceberg #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 5 0.7 Billion
  6. 6. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 6 Plus, it’s a part of virtually every transaction
  7. 7. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 7 So you see, this “small” problem can be BIG 51% say websites hard to navigate & use 46% say product images are too small 41% are concerned about security 26% feel that checkout is frustrating
  8. 8. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 8 And when you get it wrong, you lose…BIG 64% OF SMARTPHONE USERS EXPECT PAGES TO LOAD IN UNDER 4s $1Bn APPAREL & ACCESSORIES PURCHASES in Q113 71% Of all retail transactions SMARTPHONE USERS SHOP VIA MOBILE 48% Expect mobile to be faster than desktop 85% Will go to a competitor to transact 42% Will never return to your site 29%
  9. 9. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 9 Don’t be that business that if they arrive on a business site that isn't working well on mobile, they take it as an indication of the 48% of users say business simply does not care.
  10. 10. www.yottaa.com | www.marlinmobile.com Smaller is only the beginning.
  11. 11. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 11 Know the mobile ecosystem This is your mobile experience now… …its complicated
  12. 12. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 12 And what goes into loading a web page Images Javascript Via HTTPArchive, May ‘13-’14
  13. 13. Now consider the average eCommerce page #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 13 Trust Icons High-Res Images Long-scrolling pages Social Media Dynamic Content In Addition: • A/B Tests • Analytic tracking • Beacons • Chat • Personalization • Pixels • RWD w/out RESS Visitors expect fast, flawless experiences on any device Marketing needs social media and other tags to engage visitors IT needs control to ensure speed, scalability and security
  14. 14. Cannot impact 3rd party dynamic content like social media or ads CONTENT DELIVERY NETWORKS #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 14 Reality: ever-growing content and complexity PAGELOADTIME ITEFFORT&TIME SITE LAUNCH ONGOING MAINTENANCE AND USER ENGAGEMENT EFFORTS UPDATE CONTENT & IMAGES ADD SOCIAL MEDIA WIDGETS ADD REAL TIME PERSONALIZATION A/B TEST PAGE CONTENT Hiding components cannot keep pace with ongoing User & Marketing needs Cannot control page load behavior, content priority FRONTEND OPTIMIZATION Manual effort for every content change DO IT YOURSELF
  15. 15. www.yottaa.com | www.marlinmobile.com Optimization best practices.
  16. 16. Implement Responsive Web Design #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 16 Advantages Disadvantages Most consistent user experience possible Requires additional code re-working No duplicate content maintains rankings Difficult to differentiate mobile content Max link value. No risk of split link value Could affect usability/CRO No redirects = low latency & fewer errors New code may affect rankings
  17. 17. Responsive Web Design Dirty Little Secret #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 17 ALL websites are exactly the same in page size and requests!
  18. 18. Little r – presentation mostly – Fluid, flexible layout – Media queries – Responsive images Big R – Dynamic serving BOTH are better than #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 18 The difference between little r and big R
  19. 19. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 19 Fact: Reducing Page Weight/Requests Works increased performance by 68% by reducing HTTP requests small page-1.5s big page – 4.7s
  20. 20. Desktop: 78 requests, 5.1sec load time Mobile: 38 requests, 20.8sec load time #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 20 Reduce requests Still loading… So what went wrong?
  21. 21. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 21 Fact: Mobile behaves differently Example: parallelizing requests HURTS mobile experience
  22. 22. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 22 Myth #1: A CDN solves everything Example: Cloud storage being used for image assets
  23. 23. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 23 Myth #2: Design for First Paint is enough Time to First Paint: 5 seconds Your users radio stays on for an additional 12 seconds burning their battery.
  24. 24. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 24 Myth #3: Delay-loading 3rd party assets wins Example: analytics tag keeps the page from completely loading Time to First Paint: 5 seconds
  25. 25. www.yottaa.com | www.marlinmobile.com Overcome and win.
  26. 26. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 26 Optimizations that work (but…TNSTAAFL) Treats Middle mile geographic latency Good for Individual assets, streaming media Challenges Visitor context Related assets Versioning CDN Treats Content weight, round trips Good for Efficient asset delivery, rendering Challenges Visitor context Device capabilities Ongoing care & feeding FEO
  27. 27. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 27 Yottaa: holistic site optimization service See business results before you buy www.yottaa.com/prove-it 40% FASTER InstantON AppSequencing MORE CONTROL ContextIntelligence DEEP INSIGHT
  28. 28. #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 28 Marlin Mobile: Monitor your mobile web Get insights from REAL mobile devices See your REAL customer view on mobile Sign up for a free account – marlinmobile.com/free Get insight and data on your ENTIRE mobile ecosystem.
  29. 29. THANK YOU #mobileweb @yottaa @marlinmobile www.yottaa.com | www.marlinmobile.com 29

×