Design for loading

Presentation by @htmlboy and at WebVisions Barcelona, on June 2014.

1. DESIGN FOR LOADING Javier Usobiaga @htmlboy
3. @HTMLBOY Swwweet.com
4. How much time does a website 
 need to be loaded?
5. How much does it weigh?
6. THE PROBLEM
7. “We've remade the Internet in 
 our image… Obese.” – Jason Grigsby –
8. The average webpage was 
 1.46MB in June 2013. 
 Mostly images. Source: httparchive.org
9. The average webpage in 
 June 2014 is 1.78MB. 
 Mostly images. Source: httparchive.org
11. milwaukeepolicenews.com 7MB
12. grolsch.com 25MB
13. moto.oakley.com 85MB
14. Just because we can, it doesn’t mean we should.
17. 74% of mobile users won’t wait
 longer than 5 seconds 
 for a page to load. Source: bit.ly/5secondsmobile
18. 20€/month for 1GB
19. 85MB = 1.70€ 20€/month for 1GB
20. US roaming: 10€/MB
21. 85MB = 850€ US roaming: 10€/MB
24. Consider performance as 
 a design principle.
25. Set a performance budget.
26. “Don't make more than 
 20 http requests.”
27. “Make the page weigh 
 less than 300KB.”
28. “1. Optimize an existing feature or asset.
 2. Remove an existing feature or asset.
 3. Don’t add the new feature or asset.” – Steve Souders –
29. How much time does a website 
 need to be loaded?
31. How much time does a van 
 need to hit the water when 
 falling from a bridge?
33. INCEPTION TIME
34. INCEPTION TIME when milliseconds become hours
 (or never)
35. How much time does a website 
 need to be loaded?
36. How much time does a website 
 need to look loaded?
37. Perceived performance
38. DESIGN FOR LOADING: JS & NAVIGATION
39. Performance 101:
 JS belongs at the end of the HTML
40. “We don't have any 
 non-JavaScript users…
 No, all your users are non-JS 
 while they're downloading your JS.” – Jake Archibald –
41. No JS 
 = 
 No navigation
42. JS folding
 = 
 visual glitch
45. <div class=container> <header> <!- -Logo and headings- -> </header> <nav> <!- -Navigation links- -> </nav> <section class=content> <!- -Err… content- -> </section> </div>
46. .container{display: table;} ! nav{display: table-footer-group;}
49. css-tricks.com/snippets/css/a-guide-to-flexbox
50. DESIGN FOR LOADING: WEB FONTS
51. FOUT 
 Flash Of Unstyled Text
55. Consider not using web fonts for body copy.
56. Choose a fallback with a 
 similar x height.
59. Use JS to control the 
 inbetween stages.
60. github.com/typekit/webfontloader
61. .wf-loading .wf-active .wf-inactive .wf-<familyname>-<fvd>-loading .wf-<familyname>-<fvd>-active .wf-<familyname>-<fvd>-inactive
62. Add a timeout to trigger rendering
 of at least one font.
63. WebFontConfig = { google: { families: ['Droid Sans'] }, timeout: 2000 };
64. Consider a lazy load on the 
 first visit, and display only 
 cached webfonts.
65. DESIGN FOR LOADING: IMAGES
66. The average webpage in 
 June 2014 is 1.78MB. 
 Mostly images.
67. Optimize images:
 ImageOptim
 JpegMini
 SVGO
68. addyosmani.com/blog/image-optimization-tools
69. Regular JPEG
70. Progressive JPEG
71. But… what happens before the image is downloaded?
72. FOLOI 
 Flash Of Lack Of Images
 (duh)
73. No image 
 = 
 visual glitch
74. span.main-image{ display: block; min-height: 500px; background: #EEE; }
75. Min-height 
 = 
 no glitch
76. DESIGN FOR LOADING: GOING FURTHER
77. Conditionally load, or avoid: secondary assets
 third-party content
 iframes
 social plugins
78. Consider plain links instead 
 of social plugins/iframes.
79. https://twitter.com/intent/tweet? url=http://bit.ly/ ancientMistery&text=What+is+your+sound? &via=htmlboy Twitter:
80. http://www.facebook.com/sharer.php? u=http://bit.ly/ancientMistery&t=What+is +your+sound? Facebook: https://plus.google.com/share? url=http://bit.ly/ancientMistery Google+:
81. Maybe inline critical CSS/JS?
84. WRAPPING UP
85.  loading
86. Browsers won’t wait for every 
 file to be loaded.
87. Accept that, and design also
 for loading.
88. THANKS! @htmlboy · javier@swwweet.com