Kyle Simpson [email_address] http://getify.me @getify no more <script> tag soup! 1 #scriptsoup
2
3
4
Firebug, YSlow!, PageSpeed 5
Google Webmaster Tools 6
how to fix? <ul><li>profile </li></ul><ul><li>load better </li></ul><ul><li>build process </li></ul><ul><li>smaller script...
1. profile 8
Figure out what needs to load before the DOM is ready, and what can wait. 9
Doloto ( do wn lo ad  t ime  o ptimizer) 10
the hard way 11
2. load better 12
FF3 with <script> & <img> tags FF3.5, 3.6 with <script> & <img> tags 13
preloading 14
Stoyan Stefanov 15
16
17
18
19
dynamic loading 20
RequireJS 21
Dominoes 22
LABjs L oading  A nd  B locking  J ava S cript 23
When  NOT  to use LABjs 1. If your script uses document.write 2. If your script  ITSELF  does unsafe DOM-ready detection  ...
When  TO  use LABjs <ul><li>Everywhere else </li></ul>(actually, wherever you load scripts over-the-wire, and you care abo...
FF3 with <script> & <img> tags FF3.5 with <script> & <img> tags LABjs in  every  browser 26
16.84 seconds vs. 6.24 seconds 2.7x speed increase in overall page load duh!?!? 27
28
29
30
31
UsePreloading [ true /false]  UseCachePreload [ true /false]  UseLocalXHR [ true /false]  AlwaysPreserveOrder [true/ false...
LABjs’ current default behavior 33
3. build process 34
dojo 35
combiner (Nicholas Zakas) 36
LABjs on the server! psssssssttt..... 37
4. smaller scripts 38
216 bytes 268 bytes 39
294 bytes 197 bytes 40
5. smaller requests 41
42
43
6. fewer requests (cache utilization) 44
CDNs 45
Mozilla Caching Summit Steve Souders 46
Idleator 47
Kyle Simpson [email_address] http://getify.me @getify questions ? 48
Upcoming SlideShare
Loading in...5
×

No more script tag soup!

1,497

Published on

Learn the coolest new tricks to minimizing script-loading impact on web performance

Published in: Technology
2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total Views
1,497
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "No more script tag soup!"

  1. 1. Kyle Simpson [email_address] http://getify.me @getify no more <script> tag soup! 1 #scriptsoup
  2. 2. 2
  3. 3. 3
  4. 4. 4
  5. 5. Firebug, YSlow!, PageSpeed 5
  6. 6. Google Webmaster Tools 6
  7. 7. how to fix? <ul><li>profile </li></ul><ul><li>load better </li></ul><ul><li>build process </li></ul><ul><li>smaller scripts </li></ul><ul><li>smaller requests </li></ul><ul><li>fewer requests </li></ul>7
  8. 8. 1. profile 8
  9. 9. Figure out what needs to load before the DOM is ready, and what can wait. 9
  10. 10. Doloto ( do wn lo ad t ime o ptimizer) 10
  11. 11. the hard way 11
  12. 12. 2. load better 12
  13. 13. FF3 with <script> & <img> tags FF3.5, 3.6 with <script> & <img> tags 13
  14. 14. preloading 14
  15. 15. Stoyan Stefanov 15
  16. 16. 16
  17. 17. 17
  18. 18. 18
  19. 19. 19
  20. 20. dynamic loading 20
  21. 21. RequireJS 21
  22. 22. Dominoes 22
  23. 23. LABjs L oading A nd B locking J ava S cript 23
  24. 24. When NOT to use LABjs 1. If your script uses document.write 2. If your script ITSELF does unsafe DOM-ready detection – does not apply to scripts that use the results of such detection. 24
  25. 25. When TO use LABjs <ul><li>Everywhere else </li></ul>(actually, wherever you load scripts over-the-wire, and you care about performance, and don’t have a suitable loader already) 25
  26. 26. FF3 with <script> & <img> tags FF3.5 with <script> & <img> tags LABjs in every browser 26
  27. 27. 16.84 seconds vs. 6.24 seconds 2.7x speed increase in overall page load duh!?!? 27
  28. 28. 28
  29. 29. 29
  30. 30. 30
  31. 31. 31
  32. 32. UsePreloading [ true /false] UseCachePreload [ true /false] UseLocalXHR [ true /false] AlwaysPreserveOrder [true/ false ] AppendTo [‘ head ’/’body’] AllowDuplicates [true/ false ] BasePath [string] 32
  33. 33. LABjs’ current default behavior 33
  34. 34. 3. build process 34
  35. 35. dojo 35
  36. 36. combiner (Nicholas Zakas) 36
  37. 37. LABjs on the server! psssssssttt..... 37
  38. 38. 4. smaller scripts 38
  39. 39. 216 bytes 268 bytes 39
  40. 40. 294 bytes 197 bytes 40
  41. 41. 5. smaller requests 41
  42. 42. 42
  43. 43. 43
  44. 44. 6. fewer requests (cache utilization) 44
  45. 45. CDNs 45
  46. 46. Mozilla Caching Summit Steve Souders 46
  47. 47. Idleator 47
  48. 48. Kyle Simpson [email_address] http://getify.me @getify questions ? 48
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×