Shifting Gears

1. 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

2. Hello there...

3. I’m Chris.

4. It is great to be in Sweden...

6. ...especially when you live in England...

8. Ok, I originally meant not to make any naughty jokes.

9. But then I saw the Adwords Robert seems to have bought for GeekMeet.

11. ... enough of this, let’s get serious ...

12. The performance of your web product is immensely important

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...

15. ...and this information is available for free for you.

16. I’ll provide the links and names later...

17. ...but for now let’s see what is slowing our sites down.

18. http://www.ﬂickr.com/photos/pikerslanefarm/2428232674/ Things that slow you down

19. <script>

20. JavaScript is awesome.

21. Browsers think so, too.

22. Which means that every time they encounter a script node they take a break. <script> </script>

23. Rendering stops and the JavaScript parser takes over.

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.

27. This gets worse the more script nodes you use.

28. The first question is then where to put scripts?

29. The gospel according to Heilmann, 2006:

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>  </body> </html>

31. This has some benefits:

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.

34. On the other hand...

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.

37. This is hacky!

38. The gospel according to performance specialists 2007/2008:

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>  <script type=quot;text/javascriptquot; src=quot;myscripts.jsquot;></script> </body> </html>

40. The benefits are:

41. Your scripts don’t delay the rendering of the HTML.

42. HTML is available for enhancing.

43. The problems:

44. You don’t put scripts where people normally expect them.

45. The HTML is already available for people to interact with before you can apply your enhancement voodoo.

46. The recipe for performance and usability success?

47. Of course you need testing on your apps and sites to find your perfect solution...

48. But here are some ideas:

49. How about a mix of both?

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>  <script type=quot;text/javascriptquot; src=quot;secondary.jsquot;></ script> </body> </html>

51. You can even execute delayed without hacks.

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>  <script type=quot;text/javascriptquot;>doStuff()</script> <script type=quot;text/javascriptquot; src=quot;secondary.jsquot;></ script> </body> </html>

53. The first script can set a class called js on the body of the document.

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.

56. Once the functionality has been added, add another class that undoes this.

57. .js #buttons{ position:absolute; top:0; left:-6000px; } .jsloaded #buttons{ position:relative; top:0; left:0; }

58. CSS parsers are very fast!

59. What about the multiple scripts issue?

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.

63. You can easily write a backend script that does that for you:

64. <script type=quot;text/javascriptquot; src=quot;/pack/config/base/ effects/validation/widgetsquot;> </script>

65. Fun things to do in this script:

66. Run through JSLint.

67. Minify.

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.

70. And don’t forget to cache the result!

71. Get a script that does most of that from Ed Eliot: http://www.ejeliot.com/blog/73

72. The other option is to be lazy.

73. Lazy loading is a concept to load dependencies only when and if they are needed.

74. Your base.js could test for all the things that should work...

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...

77. ...thus saving server traffic and diminishing loading time.

78. However, there are problems.

79. Asynchronous loading means you never know in which order the loaded components come back to you...

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/

83. What other things slow you down?

84. <img>

85. Images are what made the web what it is now.

86. Sure, linking text was a revolution.

87. But being able to get images on demand and store them was something that triggered the “collector” in everyone.

88. Yeah, Pr0n.

89. Anyways, too many images slow down your site immensely.

90. The reasons are the same delays you experience with external scripts...

91. ...except images don’t stop the rendering.

92. However only a few get loaded at a time...

93. ...as the number of parallel connections of browsers is limited (with good reason)

94. Which means you should cut down on the amount of images.

95. The best trick there is to use CSS sprites.

96. And again, Ed Eliot and Stuart Colville come to the rescue! http://spritegen.website- performance.org/

97. You use Spritegen by uploading a zip of images...

98. ...and it generates the CSS and the sprite image for you!

99. It is also open source in case you want to host it yourself.

100. How good are you in optimizing images?

101. Probably not as good as you think you are.

102. A lot of bytes can be squeezed out of images...

103. ...without changing their visual outcome.

104. Choosing the right format in the right version can be quite a drag.

105. And it doesn’t help that tools put all kind of pointless data into images (edited with xyz, version abc...).

106. The easy way out?

107. http://smushit.com

109. What else could be a problem?

110. How about the amount of images on the page?

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?

117. What else is slowing us down?

118. <object>, err <embed> err...

119. Flash and other plugins have the same issues as <script> has.

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.

122. The solution for this is progressively enhancing Flash embedding.

123. http://swfobject.googlecode.com

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.

126. SUMMARY TIME!

127. In general there are two things to do:

128. Collate and Delay :)

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

Shifting Gears

Shifting Gears

Recommended

More Related Content

What's hot

What's hot(20)

Similar to Shifting Gears

Similar to Shifting Gears(20)

More from Christian Heilmann

More from Christian Heilmann(20)

Recently uploaded

Recently uploaded(20)

Shifting Gears