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...

1. Maximizing your ROI on
The Mobile Web
+Ido Green
@greenido
ido-green.appspot.com

2. Pretty sure everyone in the room
knows this

3. Mobile Vs Desktop - Global Trends

4. Google Confidential and Proprietary

5. India in terms of mobile usage

6. A unique country in terms of mobile usage
What is missing?

7. A unique country in terms of mobile usage

8. How do you make the most of
this opportunity?

9. Google Confidential and Proprietary

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. Most sites fail at most of these!

12. Performance Principles

13. 30 second page load
is normal in India

14. This is bad

15. 3 Critical Performance Criteria
1. Time to First Render
2. Time to Visually Complete
3. Time to Load Complete

16. First render in
under 1 second

17. Visually complete in
under 3 seconds

18. Fully loaded in
under 3 seconds

19. How can you help me?
- - Every Developer Ever

20. Tools every developer needs to use
1. Web Fundamentals
2. Web Starter Kit
3. PageSpeed Insights
4. Web Page Test

22. Can we do better?

23. PSI >= 80 GOOD
PSI >= 65 < 80 OK
PSI < 65 POOR

26. SpeedIndex
<= 1000 GOOD
>= 1000 < 3000 OK
>= 3000 POOR

27. Aim for < 1 second

28. Aim for < 3 second

29. Aim for < 5 seconds

31. 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

32. What is Render Blocking CSS + JS
Rendering is blocked until all the
CSS and JS is downloaded

33. How do I fix this?
- Every Developer Ever

34. 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

35. Reduce the number of request
Mobile 3g can add 300ms to each request RTT

36. Liberal use of Caching

37. Compress all your images
If your image size is larger than the screen size
you are slowing down your site for no user
benefit.

38. Minify and Compress everything
Reduce the download time
● CSS
● JS
● HTML
Can save up to 50% of
the bandwidth

39. Stop using widgets
If you want a really fast site
Make sure all
widgets use the
‘async’ keyword

40. 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

41. User Experience Principles

42. India is in a good place
for mobileness

43. PageSpeed Insights

44. PSI >= 80 GOOD
PSI >= 65 < 80 OK
PSI < 65 POOR

45. 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)

46. 25 principles

47. Site
Search
Commerce
and
Conversions
Optimizing
Form
Entry
Site-wide
Design
Considerations
Homepage
and
Navigation

48. Resources

49. developers.google.com/web/fundamentals

50. developers.google.com/web/fundamentals/principles/

51. https://developers.google.com/web/starter-kit

52. HTML5Rocks
www.html5rocks.com/

53. PageSpeed Insights
developers.google.com/speed/pagespeed/insights/

54. www.webpagetest.org/

55. Thank you!
+Ido Green
@greenido
ido-green.appspot.com