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

No more script tag soup!

on

  • 2,027 views

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

Statistics

Views

Total Views
2,027
Views on SlideShare
1,995
Embed Views
32

Actions

Likes
1
Downloads
7
Comments
2

3 Embeds 32

http://lanyrd.com 15
http://www.linkedin.com 10
http://www.slideshare.net 7

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

No more script tag soup! No more script tag soup! Presentation Transcript

  • 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?
    • profile
    • load better
    • build process
    • smaller scripts
    • smaller requests
    • fewer requests
    7
  • 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 – does not apply to scripts that use the results of such detection. 24
  • 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
  • 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 ] AppendTo [‘ head ’/’body’] AllowDuplicates [true/ false ] BasePath [string] 32
  • 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