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.

Maximizing your ROI on the mobile web

1,337 views

Published on

1. The world is mobile.
2. You should make sure your site are built to 'mobile first'.
3. Performance: Get content to the user as quickly.
4. User Experience: Optimize for the mobile device
More inside...

Published in: Technology
  • Be the first to comment

Maximizing your ROI on the mobile web

  1. 1. Maximizing your ROI on The Mobile Web +Ido Green @greenido ido-green.appspot.com
  2. 2. Pretty sure everyone in the room knows this
  3. 3. Mobile Vs Desktop - Global Trends
  4. 4. Google Confidential and Proprietary
  5. 5. India in terms of mobile usage
  6. 6. A unique country in terms of mobile usage What is missing?
  7. 7. A unique country in terms of mobile usage
  8. 8. How do you make the most of this opportunity?
  9. 9. Google Confidential and Proprietary
  10. 10. Key Principles 1. Performance Get content to the user as quickly. Expected Vs Actual. 2. User Experience Optimize for the mobile device (!) Pssst… there are more, but we are only covering two.
  11. 11. Most sites fail at most of these!
  12. 12. Performance Principles
  13. 13. 30 second page load is normal in India
  14. 14. This is bad
  15. 15. 3 Critical Performance Criteria 1. Time to First Render 2. Time to Visually Complete 3. Time to Load Complete
  16. 16. First render in under 1 second
  17. 17. Visually complete in under 3 seconds
  18. 18. Fully loaded in under 3 seconds
  19. 19. How can you help me? - - Every Developer Ever
  20. 20. Tools every developer needs to use 1. Web Fundamentals 2. Web Starter Kit 3. PageSpeed Insights 4. Web Page Test
  21. 21. Can we do better?
  22. 22. PSI >= 80 GOOD PSI >= 65 < 80 OK PSI < 65 POOR
  23. 23. SpeedIndex <= 1000 GOOD >= 1000 < 3000 OK >= 3000 POOR
  24. 24. Aim for < 1 second
  25. 25. Aim for < 3 second
  26. 26. Aim for < 5 seconds
  27. 27. What is Critical Render Path? 1. The minimal amount of information to display something on the screen 2. Any CSS or JS in the head blocks rendering until it has been downloaded
  28. 28. What is Render Blocking CSS + JS Rendering is blocked until all the CSS and JS is downloaded
  29. 29. How do I fix this? - Every Developer Ever
  30. 30. Don’t overuse domain sharding - CDNs Each request to new domain requires: ● DNS Lookup + TCP Connection ● HTTP or HTTPS Connection new TCP Connection Mobile 3g can add 300ms to each request. 6 domains on CDN = up to 2.4 extra seconds to load the page
  31. 31. Reduce the number of request Mobile 3g can add 300ms to each request RTT
  32. 32. Liberal use of Caching
  33. 33. Compress all your images If your image size is larger than the screen size you are slowing down your site for no user benefit.
  34. 34. Minify and Compress everything Reduce the download time ● CSS ● JS ● HTML Can save up to 50% of the bandwidth
  35. 35. Stop using widgets If you want a really fast site Make sure all widgets use the ‘async’ keyword
  36. 36. Don’t do www. -> m. Adopt responsive principles ● Requires a DNS lookup and TCP connect ­At a minimum 300ms on 3g ● Cross platform sharing is problematic ● Content management is challenging
  37. 37. User Experience Principles
  38. 38. India is in a good place for mobileness
  39. 39. PageSpeed Insights
  40. 40. PSI >= 80 GOOD PSI >= 65 < 80 OK PSI < 65 POOR
  41. 41. 5 Key Criteria ● Build for Mobile (Viewport tag) ● Fit content to screen - RWD ● Make buttons clickable ● Make fonts readable ● Don’t use Plugins (i.e Flash)
  42. 42. 25 principles
  43. 43. Site Search Commerce and Conversions Optimizing Form Entry Site-wide Design Considerations Homepage and Navigation
  44. 44. Resources
  45. 45. developers.google.com/web/fundamentals
  46. 46. developers.google.com/web/fundamentals/principles/
  47. 47. https://developers.google.com/web/starter-kit
  48. 48. HTML5Rocks www.html5rocks.com/
  49. 49. PageSpeed Insights developers.google.com/speed/pagespeed/insights/
  50. 50. www.webpagetest.org/
  51. 51. Thank you! +Ido Green @greenido ido-green.appspot.com

×