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!

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
<mobile optimised>, but
it’s 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?

10. +500ms -1.2% revenue
icons by Rohan Gupta and Pham Thi Dieu Linh

11. +500ms -3% traffic
icons by Rohan Gupta and Maria Maldonado

12. +100ms -1% sales
icons by Rohan Gupta and Zach VanDeHey

13. Improving the boot time on the Macintosh
would save lives.

14. Gmail users see about
61 years
of loading bar
every day
— Google(2012)

15. 80-90%
of the end-user response time
is spent on the
front-end
— Steve Souders

16. Low effort
techniques

17. http://www.reddit.com/r/funny/comments/18gbep/queue_thai_level/

18. Thou shalt not redirect!
* m.yourwebsite.com
* Google search results penalty

20. Enable GZip compression
* on compressible formats
* htaccess HTML5 Boilerplate
* gzip locally if server compression unavailable
- use Zopfli(Google)

21. Minify CSS and JS and SVG

22. Cache aggressively
* htaccess HTML5 Boilerplate

23. Optimise images
* imageoptim

24. Medium effort
techniques

25. https://youtu.be/Oql972Jht5k

26. Choose the
right image format

27. Images
HTML
Other
Flash
Stylesheets
Scripts
65%
The guts of the web

28. JPEG
* photos, a lot of pixels
* 80-90% quality is sufficient*

29. WebP
* young format
* partial support

30. PNG-24
* high-quality needed
* alpha transparency

31. PNG-8
* low number of pixels
* limit number of colours

32. SVG
* fallback required for older browsers

33. Optimise images further
* jpegmini, imagealpha

34. original (PNG24)
2138 × 2138
179 KB

35. original
2138 × 2138
179 KB
resized
500 × 500
41 KB

36. original
2138 × 2138
179 KB
resized + imageoptim
500 × 500
28 KB

37. original
2138 × 2138
179 KB
resized + imagealpha + imageoptim (PNG8)
500 × 500
14 KB

38. original
2138 × 2138
179 KB
SVG
∞
29 KB

39. original
2138 × 2138
179 KB
SVG + SVGO
∞
16 KB

40. original
2138 × 2138
179 KB
SVG + SVGO + Gzip
∞
7 KB

41. +160KB +12% bounce rate

42. Use image sprites
* spritesmith

43. SVG stacks
* experimental

44. Icon fonts
* fontcustom, icomoon, fontastic

45. "Every HTTP request is a
gamble. A chance to fail."
— Scott Jehl

46. 6-8* connections
per hostname

47. http://cacm.acm.org/magazines/2012/12/157870-spdying-up-the-web/abstract

48. Use CDN

49. High effort
techniques

50. http://www.break.com/pictures/this-bartender-deserves-the-biggest-tip-ever-2015783

52. Responsive images
* <picture>…
* Picturefill

53. Prioritise visible content

54. Now
Later
http://drbl.in/ljct

56. Optimise CSS delivery
* small, critical inline CSS
* 1 external CSS loaded with JS

57. Prevent render-blocking JS
* small, critical inline JS
* use async for external JS

58. https://docs.google.com/presentation/d/1CeZtuz2Tn3EdxYtTRzPGCXMOs3flk__YuLr4g0SnsGw/edit?
pli=1#slide=id.g179ab8815_0182

59. dribbble.com
Filmstrip view
— webpagetest.org

60. Performance
perception

61. Instgram
https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design

62. Instgram
https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design

63. iPhone
The iPhone saves a screenshot of every app when it
closes. So when you relaunch the app it loads that
screenshot first.

64. Amazon
Early example of priority loading

65. Facebook
Facebook is slow iPhone is slow
http://mercury.io/the-psychology-of-waiting-loading-animations-and-facebook

66. Testing tools
* pagespeed
* webpagetest.org

67. 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

68. Tools
• HTML5 Boilerplate
• Zopfli
• SVGO
• grunt-svgmin
• ImageOptim
• ImageAlpha
• JPEGmini
• Compressor.io
• Spritesmith
• Font Custom
• IcoMoon
• Fontastic
• Picturefill
• Control.js
• yepnope