More Related Content Similar to Shifting Gears (20) More from Christian Heilmann (20) Shifting Gears1. Shifting your site into
the next gear
http://www.flickr.com/photos/fabiovenni/91780334/
Christian Heilmann | http://wait-till-i.com | http://twitter.com/codepo8
GeekMeet, Stockholm, Sweden, December 2008
9. But then I saw the Adwords
Robert seems to have bought
for GeekMeet.
13. And there are several small
tricks and ideas that can
increase the performance
significantly.
14. There is a lot of research
being done on the subject in
a lot of companies...
22. Which means that every time
they encounter a script node
they take a break.
<script> </script>
24. If there is code inside the tag,
this code is analyzed and
executed before the browser
goes back to rendering.
25. If there is a src attribute, the
file it points to gets loaded,
parsed and executed.
26. This can take time as the
browser (with third party
files) needs to get the right
domain information, contact
the other server, get the file
and then move on.
30. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quot;se-se(bork bork)quot;>
<head>
<meta http-equiv=quot;Content-Typequot; content=quot;text/
html; charset=utf-8quot; />
<title></title>
<script type=quot;text/javascriptquot;
src=quot;myscripts.jsquot;></script>
</head>
<body>
<!-- lots of HTML here -->
</body>
</html>
32. You can be sure your
JavaScript is loaded before
the document is displayed.
33. You make it easier for other
developers to debug – they
know where the scripts are.
35. You delay the display of the
page until all the scripts are
loaded and executed.
36. You need to delay the access
to any HTML to change or
enhance until it is available –
onload, onavailable,
oncontentloaded.
39. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quot;se-se(bork bork)quot;>
<head>
<meta http-equiv=quot;Content-Typequot; content=quot;text/
html; charset=utf-8quot; />
<title></title>
</head>
<body>
<!-- lots of HTML here -->
<script type=quot;text/javascriptquot;
src=quot;myscripts.jsquot;></script>
</body>
</html>
45. The HTML is already available
for people to interact with
before you can apply your
enhancement voodoo.
47. Of course you need testing on
your apps and sites to find
your perfect solution...
50. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quot;se-se(bork bork)quot;>
<head>
<meta http-equiv=quot;Content-Typequot; content=quot;text/html;
charset=utf-8quot; />
<title></title>
<script type=quot;text/javascriptquot; src=quot;main.jsquot;></
script>
</head>
<body>
<!-- lots of HTML here -->
<script type=quot;text/javascriptquot; src=quot;secondary.jsquot;></
script>
</body>
</html>
52. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot;
quot;http://www.w3.org/TR/html4/strict.dtdquot;>
<html lang=quot;se-se(bork bork)quot;>
<head>
<meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; />
<title></title>
<script type=quot;text/javascriptquot; src=quot;main.jsquot;></
script>
</head>
<body>
<!-- lots of HTML here -->
<script type=quot;text/javascriptquot;>doStuff()</script>
<script type=quot;text/javascriptquot; src=quot;secondary.jsquot;></
script>
</body>
</html>
54. Which allows you to define
two styles, one for the non-
scripting version and one for
the dynamic one.
55. In the dynamic one you hide
the problematic elements
that could be activated
prematurely.
57. .js #buttons{
position:absolute;
top:0;
left:-6000px;
}
.jsloaded #buttons{
position:relative;
top:0;
left:0;
}
60. Chunking your JavaScript into
several includes all doing one
job at a time is a great idea to
keep your solutions
maintainable.
61. <script type=quot;text/javascriptquot; src=quot;config.jsquot;>
</script>
<script type=quot;text/javascriptquot; src=quot;base.jsquot;>
</script>
<script type=quot;text/javascriptquot; src=quot;effects.jsquot;>
</script>
<script type=quot;text/javascriptquot; src=quot;validation.jsquot;>
</script>
<script type=quot;text/javascriptquot; src=quot;widgets.jsquot;>
</script>
62. This does not mean though
that you need to add all of
them as single includes.
68. Replace all strings with an
array lookup to stop IE from
creating a string object for
each string.
69. Instead of doing this every
time the page is loaded, you
can make it part of a build
process.
71. Get a script that does most of
that from Ed Eliot:
http://www.ejeliot.com/blog/73
73. Lazy loading is a concept to
load dependencies only when
and if they are needed.
75. ...and if they do, create script
nodes dynamically to load
the other, chunkier parts.
76. This is a pretty nice idea as it
only loads things when they
are needed...
80. You can work around that by
creating callbacks, as
explained on 24ways last
year:
http://24ways.org/2007/keeping-javascript-
dependencies-at-bay
81. There are a lot more issues,
for example that you might
block document.write() of
bad code ads in your page.
82. Steve Souders and Stoyan
Stefanof have the whole
scoop:
http://stevesouders.com/tests/
delayed-script-execution.php
http://yuiblog.com/blog/2008/07/22/
non-blocking-scripts/
87. But being able to get images
on demand and store them
was something that triggered
the “collector” in everyone.
90. The reasons are the same
delays you experience with
external scripts...
93. ...as the number of parallel
connections of browsers is
limited (with good reason)
96. And again, Ed Eliot and Stuart
Colville come to the rescue!
http://spritegen.website-
performance.org/
99. It is also open source in case
you want to host it yourself.
102. A lot of bytes can be
squeezed out of images...
105. And it doesn’t help that tools
put all kind of pointless data
into images (edited with xyz,
version abc...).
111. You can work around loading
all the images by – once
again – delaying the loading.
112. The easy way is to prepend
the images with a dummy
and then replace this.
113. <img src=”dummy.gif#kitten.jpg” alt=”a nice kitten”>
<img src=”dummy.gif#puppy.jpg” alt=”a nice puppy”>
<script type=quot;text/javascriptquot;>
window.onload = function(){
var imgs = document.getElementsByTagName(‘img’);
for(var i=0;imgs[i];i++){
var src = imgs[i].src;
imgs[i].src = src.replace(‘dummy.gif#’,’’);
}
}
</script>
114. The more complex but
cleverer way is to wait until
the images are in the
viewport.
http://developer.yahoo.com/yui/imageloader/
115. You can see this trick in
action at shine.yahoo.com
and YouTube.
116. It’d be cool if browsers did
that anyways – anyone
remember lowsrc?
120. You interfere with the
browsers’ normal rendering
and they wait until the
confusion is over.
121. The other issue of course is
that making embedding work
and validate is a pain.
124. As you embed with JavaScript
you can test for the correct
Flash support.
125. And you can delay the
embedding by for example
enhancing an image when
the user clicks on it.
129. The tips and tools:
★ http://developer.yahoo.com/performance/
★ http://www.stevesouders.com/
★ http://website-performance.org/
★ YSlow: http://developer.yahoo.com/yslow/
★ Hammerhead: http://stevesouders.com/hammerhead/
130. THANSK!
Svenska?
Christian Heilmann
http://scriptingenabled.org | http://wait-till-i.com
twitter/flickr: codepo8