Case Study: Live Search – Moving to and then away from AJAX Eric Schurman Performance Development Lead Live Search Microsoft

Rebranding from MSN to Live From simple standalone search results page To part of new Live.com network-would offer: Shared Components Script libraries CSS Graphics UI widgets AJAXy header and footer New look and feel New features

Pre-release Tests Performance Release Criteria Changed to account for new architecture and caching assumptions Most tests looked fine Flighting Initial flights looked OK

Live Search Releases All live site monitoring systems reflect problems Real end user page load times increased by 2 to 5 times Page load failures increased User complaints

Contribution to Page Load Time by Region ~5-10% ~30% ~35% More page below

X-axis is time Row is a connection Squares are requests Area corresponds to size Color coding is file type Green bar is page load Network View header HTML JS CSS JPG/GIF PNG

Too many small GETs Too much data Libraries very large Not expected cache rates Serialized actions Problems header HTML JS CSS JPG/GIF PNG

Stage 1 Use fewer GETs Use fewer bytes Fewer serialized actions Page loads in less than half the time Saw significant improvements in user engagement

Stage 2 Fewer GETs Fewer bytes Eliminated DNS lookup/TCP connect Redesign features Slower but richer than MSN Search

Today Much faster 2 GETs, in parallel HTML, inlined CSS and JS Single image (sprite) After page load, download external CSS and JS for upcoming page views Now faster than old MSN site, with more features

Key Takeaways 1.Fewer GETs! Fewer Bytes! 2.Fewer Serial Actions! 3.Measure the right things! Tests should reflect diversity of users No cache scenario is really important Use network emulators pre-release 4.Focus on what’s most important to the user!