55
Maximizing your ROI on The Mobile Web +Ido Green @greenido ido-green.appspot.com
| Date post: | 12-Jul-2015 |
| Category: |
Technology |
| Upload: | ido-green |
| View: | 599 times |
| Download: | 0 times |
Pretty sure everyone in the room knows this
Mobile Vs Desktop - Global Trends
Google Confidential and Proprietary
India in terms of mobile usage
A unique country in terms of mobile usage
What is missing?
A unique country in terms of mobile usage
How do you make the most of this opportunity?
Google Confidential and Proprietary
1. PerformanceGet 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.
Key Principles
Most sites fail at most of these!
Performance Principles
30 second page loadis normal in India
This is bad
1. Time to First Render
2. Time to Visually Complete
3. Time to Load Complete
3 Critical Performance Criteria
First render in under 1 second
Visually complete in under 3 seconds
Fully loaded in under 3 seconds
How can you help me?
- - Every Developer Ever
Tools every developer needs to use
1. Web Fundamentals
2. Web Starter Kit
3. PageSpeed Insights
4. Web Page Test
Can we do better?
PSI >= 80 GOODPSI >= 65 < 80 OKPSI < 65 POOR
SpeedIndex <= 1000 GOOD>= 1000 < 3000 OK>= 3000 POOR
Aim for < 1 second
Aim for < 3 second
Aim for < 5 seconds
1. The minimal amount of information to display something on the screen
2. Any CSS or JS in the head blocksrendering until it has been downloaded
What is Critical Render Path?
Rendering is blocked until all the CSS and JS is downloaded
What is Render Blocking CSS + JS
How do I fix this?
- Every Developer Ever
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
Don’t overuse domain sharding - CDNs
Mobile 3g can add 300ms to each request RTT
Reduce the number of request
Liberal use of Caching
If your image size is larger than the screen size you are slowing down your site for no user benefit.
Compress all your images
●CSS
● JS
●HTML
Minify and Compress everythingReduce the download time
Can save up to 50% of the bandwidth
Make sure all widgets use the ‘async’ keyword
Stop using widgetsIf you want a really fast site
● Requires a DNS lookup and TCP connect
At a minimum 300ms on 3g
● Cross platform sharing is problematic
● Content management is challenging
Don’t do www. -> m.Adopt responsive principles
User Experience Principles
India is in a good placefor mobileness
PageSpeed Insights
PSI >= 80 GOODPSI >= 65 < 80 OKPSI < 65 POOR
● Build for Mobile (Viewport tag)
● Fit content to screen - RWD
● Make buttons clickable
● Make fonts readable
● Don’t use Plugins (i.e Flash)
5 Key Criteria
25 principles
SiteSearch
Commerceand
Conversions
OptimizingFormEntry
Site-wideDesign
Considerations
Homepage and
Navigation
Resources
developers.google.com/web/fundamentals
developers.google.com/web/fundamentals/principles/
https://developers.google.com/web/starter-kit
PageSpeed Insights
developers.google.com/speed/pagespeed/insights/
