2. Adaptive Static Resource Optimization AJAXian Conference 2009 Sep 15, 2009 Boston, MA David Wei and ChanghaoJiang

3. Agenda

4. Optimization has to be adaptive!

6. Viral Adoption

8. Why we need adaptive packaging? Day 2: Some smart engineers run YSlow and thinks… <Print css tag for feature A> <Print css tag for feature B> <Print css tag for feature C> <print HTML of feature A> <print HTML of feature B> <print HTML of feature C> … “A & B & C are always used; let’s package them together!”

9. Why we need adaptive packaging? Day 2: Awesome! <Print css tag for feature A&B&C> <print HTML of feature A> <print HTML of feature B> <print HTML of feature C> …

10. Why we need adaptive packaging? Day 3: feature C evolves… <Print css tag for feature A & B & C> <print HTML of feature A> <print HTML of feature B> If (users_signup_for_C()) { <print HTML of feature C>} …

11. Why we need adaptive packaging? Day 3: <Print css tag for feature A & B & C> <print HTML of feature A> <print HTML of feature B> If (users_signup_for_C()) { <print HTML of feature C>} … A&B are always used, while C is not. ..

12. Why we need adaptive packaging? Day 4: feature C is deprecated <Print css tag for feature A & B & C> <print HTML of feature A> <print HTML of feature B> // no one uses C { <print HTML of feature C>} …

13. Why we need adaptive packaging? Day 4: we start to send unused bits <Print css tag for feature A & B & C> <print HTML of feature A> <print HTML of feature B> // no one uses C { <print HTML of feature C>} … It is hard to remember we should remove C here.

14. Why we need adaptive packaging? One months later… <Print css tag for feature A & B & C & D & E & F & G…> if (F is used) <print HTML of feature F> <print HTML of feature G> if (F is not used) { <print HTML of feature E>} … Thousands of dead CSS rules in the package.

16. Viral Adoption

18. Requirement declaration: lives with HTML generation

20. Static Resource Management Separate Declaration from actual Delivery Back to Day 1: require_static(A_css); <render HTML of feature A> require_static(B_css); <render HTML of feature B> require_static(C_css);<render HTML of feature C> <deliver all required CSS> <print all rendered HTML> Requirement Declaration lives with HTML Global Optimization on Delivery

21. Offline analysis Packager: Global JS/CSS Optimization Online process require_static(A_css); <render HTML of feature A> require_static(B_css); <render HTML of feature B> require_static(C_css); <render HTML of feature C> <deliver all required CSS> <print all rendered HTML> Usage Pattern logs Packaging algorithm “Optimal” packages

22. Packager: models Cost/Benefit tradeoff model: To package two CSS/JS files A & B: Cost: for page requests that only uses A, we waste the bytes of B (bandwidth) Benefit: for page requests that uses both A and B: we save one round trip (latency ) Maximize “Profit” (Benefit – Cost) Future: Users with different network connections have different packaging solutions Usage Pattern logs Packaging algorithm “Optimal” packages

23. Packager: models Potential extensions (and trade-offs): Consider all resources used in user browsing sessions, instead of user page loads first page slower, subsequent pages faster Consider cache probability: new files change more New user slower, old users faster Consider other costs: CSS rules JS executions HTTP header overheads Usage Pattern logs Packaging algorithm “Optimal” packages

24. Packager: algorithm A classic optimization problem: Algorithms: Greedy algorithm Simulated Annealing Clustering algorithms Trade-off between offline computation cost and accuracy: Greedy is good enough for us Usage Pattern logs Packaging algorithm “Optimal” packages

26. Progressive rendering for common JS/CSS/Images

29. Javascript and CSS packaging only (image soon)

32. 'js/lib/ui/timeeditor.js’,

33. 'resume/js/resumepro.js’,

36. Human errors are unavoidable Automatic analysis is preferable: require_static(A_css); //forgot to remove the require_static require_static(B_css); <render HTML of feature B> require_static(C_css); <render HTML of feature C> <deliver all required CSS> <print all rendered HTML>

39. Thank you!