Your SlideShare is downloading. ×
No more script tag soup!
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

No more script tag soup!

1,433
views

Published on

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

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,433
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
2
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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