Lessons Learned In Live Search Moving To And Then Away From Ajax
-
Upload
technical-dude -
Category
Business
-
view
677 -
download
2
Transcript of 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!