Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web optimisation in the age of mobile

5,038 views

Published on

This is the presentation I gave in Amsterdam at the Dutch Mobile Conference 2014.

Make sure you also look at the last two slides. There is a lot of quality material there you can read, plus a list of tools that will help your website become a speed champion. And remember: friends don't let friends have slow mobile websites!

Published in: Mobile, Technology, Art & Photos
  • Awesome presentation. Thanks for sharing!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Web optimisation in the age of mobile

  1. 1. Web optimisation in the age of mobile
  2. 2. @stelian * designer * front-end dev * web optimisator? http://stelian.firez.be
  3. 3. "A site may look <mobile optimised>, but it’s not if it takes 14 seconds to download." — Jason Grigsby
  4. 4. How big is mobile?
  5. 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. 6. What do people expect?
  7. 7. 85%expect sites to load at least as fast on their mobile device as they do on their home computer — IBM Tealeaf
  8. 8. How much does it cost to not optimize for web performance?
  9. 9. +500ms -1.2% revenue icons by Rohan Gupta and Pham Thi Dieu Linh
  10. 10. +500ms -3% traffic icons by Rohan Gupta and Maria Maldonado
  11. 11. +100ms -1% sales icons by Rohan Gupta and Zach VanDeHey
  12. 12. Improving the boot time on the Macintosh would save lives.
  13. 13. Gmail users see about 61 years of loading bar every day — Google(2012)
  14. 14. 80-90% of the end-user response time is spent on the front-end — Steve Souders
  15. 15. Low effort techniques
  16. 16. http://www.reddit.com/r/funny/comments/18gbep/queue_thai_level/
  17. 17. Thou shalt not redirect! * m.yourwebsite.com * Google search results penalty
  18. 18. Enable GZip compression * on compressible formats * htaccess HTML5 Boilerplate * gzip locally if server compression unavailable - use Zopfli(Google)
  19. 19. Minify CSS and JS and SVG
  20. 20. Cache aggressively * htaccess HTML5 Boilerplate
  21. 21. Optimise images * imageoptim
  22. 22. Medium effort techniques
  23. 23. https://youtu.be/Oql972Jht5k
  24. 24. Choose the right image format
  25. 25. Images HTML Other Flash Stylesheets Scripts 65% The guts of the web
  26. 26. JPEG * photos, a lot of pixels * 80-90% quality is sufficient*
  27. 27. WebP * young format * partial support
  28. 28. PNG-24 * high-quality needed * alpha transparency
  29. 29. PNG-8 * low number of pixels * limit number of colours
  30. 30. SVG * fallback required for older browsers
  31. 31. Optimise images further * jpegmini, imagealpha
  32. 32. original (PNG24) 2138 × 2138 179 KB
  33. 33. original 2138 × 2138 179 KB resized 500 × 500 41 KB
  34. 34. original 2138 × 2138 179 KB resized + imageoptim 500 × 500 28 KB
  35. 35. original 2138 × 2138 179 KB resized + imagealpha + imageoptim (PNG8) 500 × 500 14 KB
  36. 36. original 2138 × 2138 179 KB SVG ∞ 29 KB
  37. 37. original 2138 × 2138 179 KB SVG + SVGO ∞ 16 KB
  38. 38. original 2138 × 2138 179 KB SVG + SVGO + Gzip ∞ 7 KB
  39. 39. +160KB +12% bounce rate
  40. 40. Use image sprites * spritesmith
  41. 41. SVG stacks * experimental
  42. 42. Icon fonts * fontcustom, icomoon, fontastic
  43. 43. "Every HTTP request is a gamble. A chance to fail." — Scott Jehl
  44. 44. 6-8* connections per hostname
  45. 45. http://cacm.acm.org/magazines/2012/12/157870-spdying-up-the-web/abstract
  46. 46. Use CDN
  47. 47. High effort techniques
  48. 48. http://www.break.com/pictures/this-bartender-deserves-the-biggest-tip-ever-2015783
  49. 49. Responsive images * <picture>… * Picturefill
  50. 50. Prioritise visible content
  51. 51. Now Later http://drbl.in/ljct
  52. 52. Optimise CSS delivery * small, critical inline CSS * 1 external CSS loaded with JS
  53. 53. Prevent render-blocking JS * small, critical inline JS * use async for external JS
  54. 54. https://docs.google.com/presentation/d/1CeZtuz2Tn3EdxYtTRzPGCXMOs3flk__YuLr4g0SnsGw/edit? pli=1#slide=id.g179ab8815_0182
  55. 55. dribbble.com Filmstrip view — webpagetest.org
  56. 56. Performance perception
  57. 57. Instgram https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
  58. 58. Instgram https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
  59. 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. 60. Amazon Early example of priority loading
  61. 61. Facebook Facebook is slow iPhone is slow http://mercury.io/the-psychology-of-waiting-loading-animations-and-facebook
  62. 62. Testing tools * pagespeed * webpagetest.org
  63. 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. 64. Tools • HTML5 Boilerplate • Zopfli • SVGO • grunt-svgmin • ImageOptim • ImageAlpha • JPEGmini • Compressor.io • Spritesmith • Font Custom • IcoMoon • Fontastic • Picturefill • Control.js • yepnope

×