1. stevesouders.com/docs/sfjs-20120112.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

2. CuzillionSpriteMe YSlow Hammerhead

4. What’s the #1 cause of slow web pages?

5. JAVASCRIPT!

8. all requests containing “.js” are skipped

9. http://httparchive.org/trends.php?s=intersection

10. 1995: scripts in HEAD blocks other downloads (IE 6-7, images in IE, iframes) downloaded sequentially (IE 6-7) blocks rendering during download & parse-execute

11. 2007: move scripts to bottom... doesn’t block other downloads downloaded sequentially in IE 6-7 blocks rendering during download & parse-execute

12. 2009: load scripts async var se = document.createElement(‘script’) ; se.src = ‘a.js’; document.getElementsByTagName(‘he ad’)[0].appendChild(se); doesn’t block other downloads downloaded in parallel (all browsers) blocks rendering during parse-execute

13. 2010: async + on-demand exec var se = new Image(); // Object se.onload = registerScript; se.src = ‘a.js’; separate download from parse-execute doesn’t block other downloads downloaded in parallel (all browsers) doesn’t block rendering until demanded

14. 20??: markup

16. <script src=‘a.js’ [async|defer|noexecute] [deferdownload]> doesn’t block downloads downloaded in parallel doesn’t block rendering until demanded doesn’t contend for a connection easier

17. ControlJS a JavaScript module for making scripts load faster just change HTML inline & external scripts <script type=‘text/cjs’ data-cjssrc=‘main.js’> var name = getName(); http://controljs.org/

18. ControlJS a JavaScript module for making scripts load faster download without executing <script type=‘text/cjs’ data-cjssrc=‘main.js’ data-cjsexec=false> Later if/when needed: CJS.execScript(src);

19. GMail Mobile /* var... */ get script DOM element's text remove comments eval() when invoked awesome for prefetching JS that might (not) be needed http://goo.gl/l5ZLQ

21. yuiblog.com/blog/2007/01/04/performance-research-part-2/

22. blaze.io/mobile/understanding-mobile-cache-sizes/

23. Home screen apps on iPhone are slower because resources are re-requested even though they should be read from cache.

25. localStorage as cache

26. Google Analytics Async Snippet var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’; var s = document.getElementsByTagName(‘script’)[ 0]; s.parentNode.insertBefore(ga, s); code.google.com/apis/analytics/docs/tracking/asyncTracking.html

27. var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’; var s = document.getElementsByTagName(‘script’)[ 0]; s.parentNode.insertBefore(ga, s); stevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/ avoid mixed content warning protocol relative URLs have problems set src last

28. var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’; var s = document.getElementsByTagName(‘script’)[ 0]; s.parentNode.insertBefore(ga, s); stevesouders.com/blog/2010/05/11/appendchild-vs-insertbefore/ stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/ previously: getElementsByTagName(‘head’)[0]. appendChild(ga) HEAD might not exist Android 1.5, iPhone 3.0, Opera 8.50, Safari 3.2

29. var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’; var s = document.getElementsByTagName(‘script’)[ 0]; s.parentNode.insertBefore(ga, s); stevesouders.com/tests/jsorder.php some browsers preserve execution order Firefox 3.6, Opera, OmniWeb

30. stevesouders.com/tests/jsorder.php

32. var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’; var s = document.getElementsByTagName(‘script’)[ 0]; s.parentNode.insertBefore(ga, s); stevesouders.com/tests/jsorder.php some browsers preserve execution order Firefox 3.6, Opera, OmniWeb async=true fixes this (except Opera)

33. ... onload: C B A D

34. ... onload: A script loads sooner beacon fires sooner blocks other async (Opera) may block rendering

35. ... onload: B script loads later beacon fires later blocks fewer async (Opera) may block rendering

36. ... onload: C script loads last beacon fires late doesn’t block async doesn’t block rendering

37. ... onload: script loads after page beacon fires very late doesn’t block async doesn’t block rendering onload fires sooner D

40. stevesouders.com/blog/2011/12/01/silk-ipad-galaxy-comparison/

41. stevesouders.com/mobileperf/mobileperfbkm.php

46. Top 100 Top 1000

49. @souders http://stevesouders.com/docs/sfjs-20120112.pptx