Maximizing your ROI on The Mobile Web
+Ido [email protected]
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
1. Time to First Render
2. Time to Visually Complete
3. Time to Load Complete
3 Critical Performance Criteria
Tools every developer needs to use
1. Web Fundamentals
2. Web Starter Kit
3. PageSpeed Insights
4. Web Page Test
Can we do better?
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?
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
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
● 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
● 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
SiteSearch
Commerceand
Conversions
OptimizingFormEntry
Site-wideDesign
Considerations
Homepage and
Navigation
developers.google.com/web/fundamentals
developers.google.com/web/fundamentals/principles/
PageSpeed Insights
developers.google.com/speed/pagespeed/insights/