Design for loading

0fe2973fa8d27d96547e43322341183a?s=47 Swwweet
June 20, 2014

Design for loading

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

0fe2973fa8d27d96547e43322341183a?s=128

Swwweet

June 20, 2014
Tweet

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 · javier@swwweet.com