1 / 126

Enhancing Web Performance: Progressive Downloads and Rendering Techniques

In this presentation from Yahoo! HighLoad++ Moscow 2010, Stoyan Stefanov explores the significance of progressive downloads and rendering for optimizing web performance. The discussion covers the psychological impacts of perceived wait times and practical solutions for reducing HTTP requests. Key strategies include leveraging Gzip, image minification, CDN usage, and optimizing JavaScript and CSS loading. By adopting progressive enhancement techniques, developers can ensure faster content delivery, improve user experience, and ultimately "make people happy." Learn essential best practices to enhance performance effectively.

luana
Télécharger la présentation

Enhancing Web Performance: Progressive Downloads and Rendering Techniques

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