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

CuzillionSpriteMe YSlow Hammerhead

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

JAVASCRIPT!

all requests containing “.js” are skipped

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

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

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

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

20??: markup

<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

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();

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);

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

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

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

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

localStorage as cache

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

var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; ga.src = (‘ == document.location.protocol ? ‘ : ‘ 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

var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; ga.src = (‘ == document.location.protocol ? ‘ : ‘ 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

var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; ga.src = (‘ == document.location.protocol ? ‘ : ‘ 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

stevesouders.com/tests/jsorder.php

var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true; ga.src = (‘ == document.location.protocol ? ‘ : ‘ 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)

... onload: C B A D

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

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

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

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

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

stevesouders.com/mobileperf/mobileperfbkm.php

Top 100 Top 1000

@souders