Keep It Quick: Speed Up Your Mobile Site

Mobile Camp Chicago 2013. Speed is an important part of mobile design. Learn a bit about why this is so important for engagement and profit, and a few tricks to speed things up.

Transcript

1. KEEP IT QUICK Speed Up Your Mobile Site for Fun and Profit Jon Buda @jonbuda
2. SPEED IS DESIGN
3. SPEED IS UX
4. SPEED IS YOUR JOB
5. WHAT’S IT LIKE TODAY?
6. THE GENERAL TREND Size Speed
7. MORE. BIGGER. SLOWER. 1.4 MB avg size 91 avg reqs Content # of Requests Transfer Size HTML 9.6 56 KB Images 56 856 KB CSS 4.8 36 KB Javascript 15 212 KB Mobile Page Load Mean: ~10.2s Median: ~4.8s http://httparchive.org
8. NYTIMES.COM http://webpagetest.org
9. REAL USER METRICS http://www.slideshare.net/joshfraz/sept-2012rumtalk 2 second increase = ~10% bounce rate increase
10. MOBILE SPEEDS INCREASING, BUT... Page size up 24% from last year LTE not fully deployed for years - maybe a decade 3G will be around for a long time.
11. 0 - 100 ms Instant 100 - 300 ms A bit sluggish 300 - 1000 ms Machine is thinking... > 1 s Mental context switch > 10 s Must be broken, I’ll try later WHAT DOES IT FEEL LIKE? Under 250 ms feels ‘fast’ Under 1 second to keep users attention
12. 47% of consumers expect a page to load in under 2 seconds 40% of people abandon a sites that load in over than 3 seconds A 1 second delay results in 7% reduction in conversions. IN THE REAL WORLD
13. AMAZON.COM RESEARCH 100 ms 1% Sales
14. IN THE REAL WORLD To an e-commerce site making $100,000 per day, a 1 second page delay could potentially cost $2.5 million in lost sales every year.
15. WHAT’S IN A MOBILE REQUEST?
16. POWER STATE TRANSITIONS Antenna powers down to save power. Power up cycle takes time. Up to 260 ms for 4G/LTE Up to 2 seconds for 3G Idle to Active:
17. CONTROL PLANE LATENCY Ask the cell tower permission to transmit. Receive which tower, channel, power to use, THEN transmit. < 100 ms for 4G/LTE < 2.5 seconds for 3G Idle to Connected:
18. ROUND TRIP LATENCY You to your ISP/Mobile carrier and back 18 ms Fiber 25 ms Cable 43 ms DSL 400 ms 3G Mobile 150 ms 4G/LTE
19. ...THEN THE ACTUAL REQUEST Per request! DNS Socket HTTP Request SSL? Server Processing Content Transmission 400 ms - 1000 ms
20. SO, WHAT CAN WE DO?
21. OPTIMIZE IMAGES BASE64 when possible Use Sprites to combine images for icons and graphics ImageOptim & ImageAlpha for PNG compression Retina 2x size, 25% Quality, very high compression, same quality Image Placeholder Techniques <img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/ sABFEdWNreQABAAQAAAA7AAD4QMtaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZ XQgYmVnaW49Iu+7..."/>
22. OPTIMIZE MARKUP & CSS Reduce Specificity in CSS Reduce and re-use CSS rules Reduce slow CSS selectors and effects Reduce div-itis and unnecessary markup and nesting # BAD body.home section.main-content ul.media-list .item { } # BETTER .media-item { }
23. USE A CDN OR SUBDOMAIN Amazon S3, Cloudfront, Cloudflare, etc. Increase simultaneous connections Reduce server burden
24. ELIMINATE BLOCKING Javascript can modify the DOM and query CSS, halting page render and blocking DOM construction.
25. ELIMINATE BLOCKING <script src='https://platform.twitter.com/widgets.js'></script> Blocking Non-blocking, Asynchronous <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/ ^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/ widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
26. ONE INITIAL REQUEST WITH CRITICAL DATA Inline BASE64? Need all CSS? Need JS to render?
27. ONE INITIAL REQUEST WITH CRITICAL DATA Inline BASE64 image Defer loading remaining CSS and JS to the end Inline critical CSS
28. FAST SERVER PROCESSING Aim for < 100 ms server response (aggressive) Cache Everything Serve static content Optimize/reduce database queries Serve GZIP’d content Content flushing
29. TOOLS TO HELP TESTING SlowyApp (Mac) Net Limiter (Win) Google Pagespeed Yahoo! YSlow Chrome Dev Tools webpagetest.org
30. SPEED IS DESIGN
31. SPEED IS UX
32. SPEED IS YOUR JOB
33. THANKS! Any Questions? http://jonbuda.com @jonbuda http://bit.ly/ZAcHSD
34. SOURCES & LINKS http://alistapart.com/article/improving-ux-through-front-end-performance http://blog.chriszacharias.com/page-weight-matters http://www.stevesouders.com/blog/2013/04/05/page-weight-grows-24-year-over-year-not-44/ http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/ http://youtube.com/watch?v=Il4swGfTOSM https://developers.google.com/speed/pagespeed/insights http://blog.netvlies.nl/design-interactie/retina-revolution/ http://httparchive.org http://blog.kissmetrics.com/loading-time/ http://slowyapp.com http://www.netlimiter.com