Design for loading

Transcript

1. DESIGN FOR LOADING Javier Usobiaga @htmlboy

2. None

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
10. None

11. milwaukeepolicenews.com 7MB

12. grolsch.com 25MB

13. moto.oakley.com 85MB

14. Just because we can, it doesn’t mean we should.

15. None
16. None

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

22. None
23. None

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?
30. None

31. How much time does a van 
 need to hit

    the water when 
 falling from a bridge?
32. None

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

43. None
44. None

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;}

47. None
48. None

49. css-tricks.com/snippets/css/a-guide-to-flexbox

50. DESIGN FOR LOADING: WEB FONTS

51. FOUT 
 Flash Of Unstyled Text

52. None
53. None
54. None

55. Consider not using web fonts for body copy.

56. Choose a fallback with a 
 similar x height.

57. None
58. None

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?

82. None
83. None

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 · [email protected]