1 / 126

Progressive downloads and rendering

Progressive downloads and rendering. Stoyan Stefanov, Yahoo! HighLoad ++, Moscow, 2010 http://slideshare.net/stoyan/. About me. YSlow 2.0. Why progressive?. Importance of performance. Psychology, physiology Effects of waiting “Time is money” Make people happy. Perception.

luana
Download Presentation

Progressive downloads and rendering

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Progressive downloads and rendering Stoyan Stefanov, Yahoo! HighLoad++, Moscow, 2010 http://slideshare.net/stoyan/

  2. About me YSlow 2.0

  3. Why progressive?

  4. Importance of performance Psychology, physiology Effects of waiting “Time is money” Make people happy

  5. Perception

  6. Perception

  7. Perception

  8. Perception

  9. Time is relative Sometimes crawls Sometimes flies “it depends”

  10. Durations actual expected perceived rem’d time

  11. It feels slower when… Unpleasant Unknown Boring Too much to keep track

  12. First time experience Unfamiliar = slow Optimize empty cache or there will be no full cache

  13. So… go progressive!

  14. But before we begin…

  15. The basics Reducing the # HTTP Gzip Minification Image smushing Expires CDN

  16. The basics Yahoo!’s best practices + YSlow http://developer.yahoo.com/performance/ Google’s too + Page Speed http://code.google.com/speed/

  17. Progressive

  18. Progressive enhancement

  19. Progressive downloads

  20. Progressive rendering

  21. Agenda Prevent download blocks: scripts, styles, CC, favicon Ways to render sooner: flush, data URIs, lazy loading, lazy evaluation, preloading, animations

  22. Blocking JavaScript

  23. JavaScript blocks html js png png

  24. JavaScript blocks A no-no! <script src="jquery.js"></script> <script src="jquery.twitter.js"></script> <script src="jquery.cookie.js"></script> <script src="myapp.js"></script>

  25. This waterfall looks ridiculous html js js js js png png

  26. JavaScript at the bottom html png png js

  27. Non-blocking JavaScript deferand async Defer: IE innovation, ok to delay, but keep order Async: HTML5, whatever <script asyncsrc="my.js" onload="doIt()"></script> <script defer src="my.js" onload="doIt()"></script>

  28. defer and async timeline async defer DOMContentLoaded load

  29. Non-blocking JavaScript html js png Asynchronous loading varh, js= document.createElement('script'); js.src = 'myscript.js'; h= document.getElementsByTagName('head')[0]; h.appendChild(js); png

  30. Non-blocking JavaScript Others: - iframe - XHR - <object> - …

  31. CSS and rendering

  32. Worst enemy? CSS

  33. CSS blocks rendering The worst component type Place way at the top @media print, etc in the same external CSS http://www.phpied.com/delay-loading-your-print-css/ http://www.phpied.com/rendering-styles/

  34. CSS

  35. CSS

  36. CSS blockdownloads? But they do block: When followed by an inline script When in conditional comments

  37. Inline CSS Google search Bing.com: inline + postload

  38. Same domain If you split across domains and if you don’t use CDN Saves a DNS lookup e.g. Google and Bing’s CDN

  39. CC block

  40. Normal page

  41. With conditionally commented CSS file http://www.phpied.com/conditional-comments-block-downloads/

  42. What…?! Case #1 <link type="text/css" rel="stylesheet" href="1.css"> <!--[if IE 6]> <link type="text/css" rel="stylesheet" href="ie.css"> <![endif]-->

  43. What…?! Case #2 <!--[if IE 6]> <body class="ie6"> <![endif]--> <!--[if !IE]><!--> <body> <!--<![endif]-->

  44. Solution for case #1 <!DOCTYPE html> <!--[if IE 6]><![endif]--> <html> ...

  45. Solution for case #2 <!--[if IE 6]> <html class="ie6"> <![endif]--> <!--[if !IE]><!--> <html> <!--<![endif]-->

  46. Blocking favicon

More Related