The document presents insights on creating high-speed HTML5 web applications using WebSocket technology. It encompasses topics such as performance optimization techniques, tools for analysis, and resource management for efficient web development. Additionally, it highlights the significance of perceived speed, web workers, and application caching to enhance user experience.

1. High-Speed HTML5@peterlubbersKaazingJune, 2011

2. Thanks to the SponsorsKaazing(prizes)

3. Enterprise-Ready HTML5 WebSocket Gateway thatallowsyou to buildmassivelyscalable, real-time web applications

4. HTML5 and WebSocket Training

5. We’rehiring!

6. Apress (venue, prizes)

7. Books for professionals by professionals

8. Pro HTML5 Programming: http://prohtml5.com

9. Yournamehere**Contact Frank Greco to belistedhere… About @peterlubbers

10. Not to Be Confused With…

11. AgendaHigh Speed HTML5 Web Apps

12. Tools Overview

13. Optimization Tips

14. JavaScript, CSS, Images

15. Image Data URIs

16. HTML5 Boilerplate

17. Server Configuration

18. HTML5 Web Workers

19. HTML5 AppCache

20. Q&A, Prizes#html5@peterlubbers#nychtml5

21. HTML5 Feature Areas

22. HTML5 StatusMay 24 2011: Working Draft Last Call

23. 2012: Candidate Recommendation

24. Widespread adoption is around the corner

25. Many HTML5 featurescan be used today:http://caniuse.com

26. News: Modernizr v2 Launched!http://www.modernizr.com/HTML5 AppsUse HTML5 features selectively

27. If you're not careful, you could end up with a slow app (not cool)High Speed Web Apps

28. Designing Fast Web AppsApps should be focused, rich, and gorgeous, but they still need to be fast (being rich and beautiful isn't always enough!)

29. Improve the performance of the web app, which in turn improves the user experience

30. With web apps, faster isalways better (no onewill complain that your app is too fast)Time is…Measured in milliseconds!

31. 100 ms of latency costs Amazon 1% of every saleSource: highscalability.com

32. 0.5 second delay in content delivery is correlated with a 20% drop in traffic at Google

33. 5 millisecond lag behind competing trading platforms could be as costly as $4 million in losses per millisecond —Marissa Mayer, GoogleHow Fast is Fast?No industry standard

34. Ideal web response times per W3C guidelines:

35. < 0.1 second = Ideal (user does not sense interruption)

36. 1 second = Highest acceptable (downloads over 1 second interrupt the user experience)

37. 10 seconds = Unacceptable (user is likely to leave the site)

38. Perceived speed matters most!Perceived SpeedAnalyze user behavior

39. Improve the perceived speed

40. Pre-load components

41. Example: ApplicationCache

42. Post-load components

43. Example: YUI Image Loader

44. Use Web WorkersOptimizing Web ApplicationsReduce HTTP overhead

45. Most users have Internet connections where upload to download ratios are between 1:4 and 1:20

46. Result: 500 byte HTTP header request could take the equivalent time to upload as 10 kB of HTTP response data takes to downloadHTTP RequestsHTTP Requests are expensive!

47. The majority of a page response time is consumed by downloadingresources

48. Consider:

49. Design (number of components on a page)

50. Location (vicinity to the web server or edge network)

51. Split components across domains (connection limits)Connection Limits

52. Performance Analysis Tools

53. Tools of the TradeAnalysis tools provide metrics that:

54. Show problems caused by JavaScript execution, loading of network resources, layout, CSS, etc.

55. Break down the problems in an easy-to-read format so you can target and resolve problems quickly

56. Built-in browser tools

57. Great (free) tools for performance analysisBuilt-In Developer Tools

58. Performance Testing ToolsGreat and free Tools:

59. Page Speed

60. Chrome Speed Tracer

61. Yslow (for Firebug)

62. WiresharkPage Speedhttp://pagespeed.googlelabs.com