Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Stevesouders.com/docs/sfjs-20120112.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer."— Presentation transcript:

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

2 CuzillionSpriteMe YSlow Hammerhead

3

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

5 JAVASCRIPT!

6

7

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

15

16

17 ControlJS a JavaScript module for making scripts load faster just change HTML inline & external scripts

18 ControlJS a JavaScript module for making scripts load faster download without executing

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

20

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.

24

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

31

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

38

39

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

41 stevesouders.com/mobileperf/mobileperfbkm.php

42

43

44

45

46 Top 100 Top 1000

47

48

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


Download ppt "Stevesouders.com/docs/sfjs-20120112.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer."

Similar presentations


Ads by Google