Lessons Learned In Live Search Moving To And Then Away From Ajax

Case Study: Live Search –Moving to and then away from AJAX

Eric SchurmanPerformance Development LeadLive 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!