No more script tag soup!

  • 1,413 views
Uploaded 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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,413
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
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