![Page 1: Lessons Learned In Live Search Moving To And Then Away From Ajax](https://reader036.vdocument.in/reader036/viewer/2022070316/5558ea0ed8b42ab8168b5067/html5/thumbnails/1.jpg)
Case Study: Live Search –Moving to and then away from AJAX
Eric SchurmanPerformance Development LeadLive Search Microsoft
![Page 2: Lessons Learned In Live Search Moving To And Then Away From Ajax](https://reader036.vdocument.in/reader036/viewer/2022070316/5558ea0ed8b42ab8168b5067/html5/thumbnails/2.jpg)
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
![Page 3: Lessons Learned In Live Search Moving To And Then Away From Ajax](https://reader036.vdocument.in/reader036/viewer/2022070316/5558ea0ed8b42ab8168b5067/html5/thumbnails/3.jpg)
Pre-release Tests•Performance Release Criteria
•Changed to account for new architecture and caching assumptions
•Most tests looked fine
•Flighting•Initial flights looked OK
![Page 4: Lessons Learned In Live Search Moving To And Then Away From Ajax](https://reader036.vdocument.in/reader036/viewer/2022070316/5558ea0ed8b42ab8168b5067/html5/thumbnails/4.jpg)
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
![Page 5: Lessons Learned In Live Search Moving To And Then Away From Ajax](https://reader036.vdocument.in/reader036/viewer/2022070316/5558ea0ed8b42ab8168b5067/html5/thumbnails/5.jpg)
Contribution to Page Load Time by Region
~5-10%
~30%~35%
More page below
![Page 6: Lessons Learned In Live Search Moving To And Then Away From Ajax](https://reader036.vdocument.in/reader036/viewer/2022070316/5558ea0ed8b42ab8168b5067/html5/thumbnails/6.jpg)
•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
![Page 7: Lessons Learned In Live Search Moving To And Then Away From Ajax](https://reader036.vdocument.in/reader036/viewer/2022070316/5558ea0ed8b42ab8168b5067/html5/thumbnails/7.jpg)
•Too many small GETs
•Too much data
•Libraries very large
•Not expected cache rates
•Serialized actions
Problems
header
HTML
JS
CSS
JPG/GIF
PNG
![Page 8: Lessons Learned In Live Search Moving To And Then Away From Ajax](https://reader036.vdocument.in/reader036/viewer/2022070316/5558ea0ed8b42ab8168b5067/html5/thumbnails/8.jpg)
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
![Page 9: Lessons Learned In Live Search Moving To And Then Away From Ajax](https://reader036.vdocument.in/reader036/viewer/2022070316/5558ea0ed8b42ab8168b5067/html5/thumbnails/9.jpg)
Stage 2•Fewer GETs
•Fewer bytes
•Eliminated DNS lookup/TCP connect
•Redesign features
•Slower but richer than MSN Search
![Page 10: Lessons Learned In Live Search Moving To And Then Away From Ajax](https://reader036.vdocument.in/reader036/viewer/2022070316/5558ea0ed8b42ab8168b5067/html5/thumbnails/10.jpg)
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
![Page 11: Lessons Learned In Live Search Moving To And Then Away From Ajax](https://reader036.vdocument.in/reader036/viewer/2022070316/5558ea0ed8b42ab8168b5067/html5/thumbnails/11.jpg)
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!