1. Web optimisation in the age of mobile

2. @stelian * designer * front-end dev * web optimisator? http://stelian.firez.be 3. "A site may look , but its not if it takes 14 seconds to download." Jason Grigsby 4. How big is mobile? 5. Mobile vs. Desktop 2013 0 25 50 75 100 Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec Desktop Mobile Google 6. What do people expect? 7. 85%expect sites to load at least as fast on their mobile device as they do on their home computer IBM Tealeaf 8. How much does it cost to not optimize for web performance? 9. +500ms -1.2% revenue icons by Rohan Gupta and Pham Thi Dieu Linh 10. +500ms -3% traffic icons by Rohan Gupta and Maria Maldonado 11. +100ms -1% sales icons by Rohan Gupta and Zach VanDeHey 12. Improving the boot time on the Macintosh would save lives. 13. Gmail users see about 61 years of loading bar every day Google(2012) 14. 80-90% of the end-user response time is spent on the front-end Steve Souders 15. Low effort techniques 16. http://www.reddit.com/r/funny/comments/18gbep/queue_thai_level/ 17. Thou shalt not redirect! * m.yourwebsite.com * Google search results penalty 18. Enable GZip compression * on compressible formats * htaccess HTML5Boilerplate * gzip locally if server compression unavailable - use Zopfli(Google) 19. Minify CSS and JS and SVG 20. Cache aggressively * htaccess HTML5Boilerplate 21. Optimise images * imageoptim 22. Medium effort techniques 23. https://youtu.be/Oql972Jht5k 24. Choose the right image format 25. Images HTML Other Flash Stylesheets Scripts 65% The guts of the web 26. JPEG * photos, a lot of pixels * 80-90% quality is sufficient* 27. WebP * young format * partial support 28. PNG-24 * high-quality needed * alpha transparency 29. PNG-8 * low number of pixels * limit number of colours 30. SVG * fallback required for older browsers 31. Optimise images further * jpegmini, imagealpha 32. original (PNG24) 2138 2138 179KB 33. original 2138 2138 179KB resized 500 500 41KB 34. original 2138 2138 179KB resized + imageoptim 500 500 28KB 35. original 2138 2138 179KB resized + imagealpha + imageoptim (PNG8) 500 500 14KB 36. original 2138 2138 179KB SVG 29KB 37. original 2138 2138 179KB SVG + SVGO 16KB 38. original 2138 2138 179KB SVG + SVGO + Gzip 7KB 39. +160KB +12% bounce rate 40. Use image sprites * spritesmith 41. SVG stacks * experimental 42. Icon fonts * fontcustom, icomoon, fontastic 43. "Every HTTP request is a gamble. A chance to fail." Scott Jehl 44. 6-8* connections per hostname 45. http://cacm.acm.org/magazines/2012/12/157870-spdying-up-the-web/abstract 46. Use CDN 47. High effort techniques 48. http://www.break.com/pictures/this-bartender-deserves-the-biggest-tip-ever-2015783 49. Responsive images * * Picturefill 50. Prioritise visible content 51. Now Later http://drbl.in/ljct 52. Optimise CSS delivery * small, critical inline CSS * 1 external CSS loaded with JS 53. Prevent render-blocking JS * small, critical inline JS * use async for external JS 54. https://docs.google.com/presentation/d/1CeZtuz2Tn3EdxYtTRzPGCXMOs3flk__YuLr4g0SnsGw/edit? pli=1#slide=id.g179ab8815_0182 55. dribbble.com Filmstrip view webpagetest.org 56. Performance perception 57. Instgram https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design 58. Instgram https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design 59. iPhone The iPhone saves a screenshot of every app when it closes. So when you relaunch the app it loads that screenshot first. 60. Amazon Early example of priority loading 61. Facebook Facebook is slow iPhone is slow http://mercury.io/the-psychology-of-waiting-loading-animations-and-facebook 62. Testing tools * pagespeed * webpagetest.org 63. More stuff to read A report on the Mobile Customer Experience(PDF) How Loading Time Affects Your Bottom Line Facebook pages that are 500ms slower result in a 3% drop-off in traffic (PDF) If Google increased page load by 500ms it would cost them 1.2% of their revenue Every 100ms of latency costs Amazon 1% of profit For Etsy, adding 160KB of images to a page increased bounce rate by 12% on mobile devices Steve Jobs: Improving the boot time on the Macintosh would save lives. Users spend a combined total of 61 years every single day watching the Gmail loading bar The Performance Golden Rule Google Warns Smartphone Searchers About Homepage Redirects GZIP is not enough!(video) What the web is made of(and many more stats) Clever JPEG Optimization Techniques Clever PNG Optimization Techniques Facebook tries Google's WebP image format; users squawk Animated WebP - how to convert animated GIF to WebP and save up to 90% bandwidth SVG Stacks Evaluating the Performance of SPDY-enabled Web Servers Better Responsive Images With the picture Element How to prioritize visible content Tailoring CSS for performance 64. Tools HTML5 Boilerplate Zopfli SVGO grunt-svgmin ImageOptim ImageAlpha JPEGmini Compressor.io Spritesmith Font Custom IcoMoon Fontastic Picturefill Control.js yepnope