Performance Matters: Mobile Websites

Transcript

1. Front End Dev @ Sociomantic Labs Performance Matters: Mobile Websites - @burakson Burak Son
2. THE MOBILE WORLD +7.000 different devices Several software versions & browsers Low CPU/GPU Power Various connection speed Hybrid apps* are way slower than the browser * Apps built with Phonegap, Cordova, Titanium etc.
3. Dev / Designer / PM: User: ? ?
4. Dev / Designer / PM: User: ?
5. Dev / Designer / PM: User:
6. FACTS 74% of mobile users will abandon the website after waiting 5 seconds. 1 second delay in page response can result in a 7% reduction in conversions If the product is making $100.000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year source: e-commercefacts.com, kissmetrics.com
7. Page Load Time
8. REDUCE PAGE LOAD TIME Avoid too many HTTP requests - they are expensive! Minimize and gzip the assets, PLEASE! Redirection on client-side is bad Use image sprites as much as you can Clean and reusable markup
9. CSS Performance
10. CSS Browser reads selectors right-to-left Avoid more than three levels in your SASS/LESS files Universal selectors are the least efficient * { } *#maincontent { } input[type=”text”] { } span.icon.share.white { } // bad .icon-share-white { } // good .main-page #content .container .grid .span12 .left-col .btn { } Chaining is not über-cool either
11. CSS causes sluggishness Shadows, gradients, border-radius... are expensive too Use transform for transitions and animations position: fixed; left: 80%; transform: translateX( 80% ); // smoother
12. CSS SVG (Scalable Vector Graphics) Resolution Independence Inline or as a background image Can be animated Polyfill is needed for Android 2.x Minify with SVGO
13. What about javascript?
14. Do you really need that library/plugin? Maybe not? Load them at the very bottom Watch out for memory leaks Use for animations 300ms tapping delay Lazyload would help a lot JAVASCRIPT requestAnimationFrame()
15. Debugging
16. Safari Web Inspector - iOS Chrome Developer Tools - android Adobe Edge Inspect - iOS and android Webpagetest.org - page load time results DEBUGGING TOOLS
17. THANK YOU! @burakson TL; DL (too long didn’t listen) “If your application is slow, people won’t use it” Don’t Forget: Performance is a big part of the user experience!