5 critical-optimizations.v2


Published on

There are many ways to optimize your website, and it’s hard to know where to start. In this webinar we’ll show you five top performance optimizations and explain how each will impact your load time and order. We’ll also share tips and tricks on how to apply each, since the devil’s in the details. We’ll focus on the following five optimizations:

* Domain Sharding
* Consolidation
* Inlining
* Predict Head
* Asynchronous Javascript Loading

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

5 critical-optimizations.v2

  1. 1. 5 Critical WPO Techniques<br />Guy Podjarny, CTO<br />
  2. 2. Agenda<br />Introduction<br />Waterfalls charts<br />WPO & Front-End Optimization<br />5 Critical Optimizations<br />Domain Sharding<br />Consolidation<br />Inlining<br />Predict Head<br />Async JavaScript Execution<br />Summary<br />
  3. 3. Intro to Waterfall Charts – High Level<br />3<br />Timeline (Seconds)<br />Individual<br />Resource<br />Requests<br />
  4. 4. WebPageTest Waterfall - Legend<br />4<br />Detailed Breakdown of resource retrieval<br />Helps identify bottlenecks and problems<br />Page Load milestones<br />“Standardized” points in time to measure against<br />
  5. 5. Front-End vs. Back-End Performance<br />Back-End: Time to get the HTML<br />Front-End: Time after the HTML<br />WPO= Back-End + Front-End Performance<br />5<br />Back-end<br />Front-End<br />
  6. 6. 5 Critical Optimizations<br />Front-End Optimization is complicated<br />Many bottlenecks<br />Many browsers<br />Many techniques<br />Moving Target<br />We’ll discuss 5 key optimizations<br />Explain the optimization<br />Demonstrate its impact<br />Share Tips & Tricks<br />6<br />
  7. 7. Domain Sharding<br />Problem: Too Few Hosts <br />Browsers limit connections per host<br />Less requests are done in Parallel<br />Solution: “Shard” a domain into sub-domains<br />E.g. 1.blaze.io, 2.blaze.io, 3.blaze.io…<br />All domains will get to the same place<br />Browser sees different domains, opens more connections<br />7<br />
  8. 8. Single Domain, IE7<br />2 connections per domain<br />Total time ~8.5 seconds<br />8<br />
  9. 9. Sharded Domain, IE7<br />2 connections per domain, 8 total<br />Total time ~2.5 seconds<br />9<br />
  10. 10. Single Domain, IE8<br />Problem mitigated by newer browsers<br />Open more connections per domain<br />Not fully resolved<br />10<br />
  11. 11. Single Domain, iPhone 4.3<br />Problem repeats on iPhone/iPad<br />4 Connections per domain, 30 connections max<br />11<br />
  12. 12. Single Domain, Android 2.3<br />But on Android, Domain Sharding is moot<br />4 connections per host, 4 connections max<br />12<br />
  13. 13. Domain Sharding – Tips & Tricks<br />Too many domains = long DNS<br />Older axiom states 2 is best<br />Our measurements show 3-5 works best<br />Depends on number of resources on the site<br />Always serve resources from the same shard<br />Inconsistency will harm caching <br />Use different number of domains by browser<br />Older browsers would benefit from more<br />Android would benefit from no sharding<br />13<br />
  14. 14. Consolidation<br />Problem: Too many requests during page load<br />Each request is a costly round-trip to the server<br />Browsers limit number of concurrent requests<br />Even more expensive on Mobile (asymmetric communication)<br />Solution: Consolidate multiple files into one<br />Single round-trip for multiple files<br />Less round-trips, faster delivery<br />Improved compression ratios<br />14<br />
  15. 15. What can be consolidated?<br />Textual Resources<br />Stylesheets (CSS)<br />JavaScript<br />CSS Images<br />Spriting<br />Details: http://www.alistapart.com/articles/sprites<br />Images and… anything else<br />Data URIs<br />15<br />Google Sprite<br />
  16. 16. Data URIs<br />Textual Representation of data<br />data:image/gif;base64,AAAA<br />Supported in all latest browsers<br />Includes IE8+, Chrome, Safari, Opera, Firefox<br />Not supported in IE7<br />Supported in WebKit-based Mobile Browsers<br />iPhone, Android, Blackberry 6, WinPho 7<br />16<br />prefix<br />Encoding<br />Data<br />Content-type<br />
  17. 17. JS & CSS Consolidation - Waterfall<br />17<br />www.cnn.com<br />After:89 Requests<br />Before:160 Requests<br />
  18. 18. Consolidation – Tips & Tricks<br />Ensure browsers support the technology<br />Data URIs not supported on IE6 & IE7<br />Beware large blocking files<br />On some browsers, CSS & JS files may block<br />Making them larger may slow down the page<br />JavaScript Complications<br />Inline and external scripts may be co-dependent<br />Document.write() makes scripts hard to move<br />Some scripts are more “sensitive” than others…<br />18<br />
  19. 19. Inlining<br />Problems <br />Too many requests during page load<br />Same problem Consolidation relates to<br />Consolidated file take longer to fetch<br />Increases page speed, but can slow down specific script<br />Solution: Embed data into the parent <br />Embed scripts & images into web page<br />Embed images into CSS files<br />19<br />
  20. 20. Inlining & Consolidation - Comparison<br />20<br />www.cnn.com<br />Before:160 Requests<br />Both:57 Requests<br />Consolidation:89 Requests<br />
  21. 21. Inlining & Consolidation - Waterfall<br />21<br />Larger HTML<br />Large CSS<br />Dynamic Resources<br />Generated in the browser<br />Ads, Analytics, …<br />
  22. 22. Inlining – Tips & Tricks<br />Inlined resources are not cached<br />Inlining best suited for landing pages<br />Small resources can be inlined always<br />Inlining overhead minor for small scripts<br />Especially when compression is in use<br />Don’t inline client-sensitive requests<br />Analytics, beacons, ads…<br />22<br />
  23. 23. Flushing the Buffer Early<br />Problem<br />It takes time to generate a full HTML page<br />Inlining makes pages big and slow to download<br />Solution<br />Send back the document start earlier<br />Document “Head” is often static and easy to generate<br />Ensure CSS, JS and more are included in head<br />Note: Dubbed “Predict Head” in Blaze<br />After the feature that delivers it<br />23<br />
  24. 24. Predict Head - Waterfall<br />24<br />Before:TTFB is 1.4 seconds,Doc Complete at 3.8 Seconds<br />After:<br />TTFB is 0.3 seconds,Doc Complete at 2.8 Seconds<br />
  25. 25. Async JS<br />Problem<br />3rd Party resources still load slowly<br />Ads, Analytics, “Like” button, etc.<br />Dynamically generated content slows page down<br />Solution<br />De-couple script execution from page load<br />Most 3rd party tools are included as scripts<br />Many 3rd party tools are secondary in page functionality<br />25<br />
  26. 26. Async JS – Comparison<br />26<br />Before:Doc Complete at 2.8 Seconds<br />After:<br />Doc Complete at 1.5 Seconds<br />
  27. 27. Async JS – Waterfall<br />Similar Waterfall<br />Earlier Doc Complete<br />Ads loaded late<br />Metrics loaded late<br />Page functional faster<br />3rd party tools follow up quickly after<br />27<br />
  28. 28. Async JS - Implementation<br />Requires HTML & JavaScript Changes<br />HTML:<br />Modify script tags’ type to “text/myscript”<br />Will make the browser skip them<br />JavaScript:<br />Add script to bottom of page to invoke the scripts<br />Can use a 3rd party package, such as controljs(http://stevesouders.com/controljs/)<br />28<br />
  29. 29. Async JS – Tips & Tricks<br />Many pitfalls due to JavaScript flexibility<br />Event registration, document.write(), etc.<br />External scripts will be invoked serially<br />Will slow down total time to execute scripts<br />Can be improved with preloading scripts<br />Requires cacheable scripts & browser-specific code<br />Optionally only “Async” specific script<br />Whitelist: Leave key scripts “in sync” with page<br />Blacklist: Only “async” specific scripts<br />29<br />
  30. 30. Summary<br />30<br />FEO Can do A Lot<br />These 5 optimizations matter<br />But many others exist<br />Beware the pitfalls<br />Don’t try it all at once..<br />Focus on select browsers<br />Tackle key pages/sites<br />Stay up-to-date<br />Performance is a moving target<br />59 Requests<br />(9 by Onload)<br />1.5 Seconds<br />Measured using:4Mbps/500KbpsDownload/Upload<br />160 Requests<br />4.6 Seconds<br />
  31. 31. Blaze Automated Front-End Optimization<br />Blaze automates Front-End Optimization<br />No Software, Hardware or Code Changes needed<br />All the pitfalls and complexities taken care of<br />Blaze applied the optimizations in these slides<br />And can apply many other optimizations<br />Submit your URL onblaze.io for your ownoptimization report<br />31<br />
  32. 32. 32<br />Questions?<br />Contact us at<br />contact@blaze.io<br />Thank You!<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.