No more script tag soup!

Kyle Simpson [email_address] http://getify.me @getify no more <script> tag soup! 1 #scriptsoup

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

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

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

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

http://lanyrd.com	12
http://www.slideshare.net	7
http://www.linkedin.com	3

No more script tag soup!

by Kyle Simpson

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 22

Statistics

No more script tag soup! Presentation Transcript