48
Kyle Simpson [email protected] m http://getify.m e @getify no more <script> tag soup! 1 #scripts oup
| Date post: | 26-Jun-2015 |
| Category: |
Technology |
| Upload: | kyle-simpson |
| View: | 1,475 times |
| Download: | 0 times |
2
3
4
Firebug, YSlow!, PageSpeed
5
GoogleWebmaster Tools
6
how to fix?
1. profile2. load better3. build process4. smaller scripts5. smaller requests6. fewer requests
7
1. profile
8
Figure out what needs to load before the DOM is ready, and what can wait.
9
Doloto(download time optimizer)
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
Loading And Blocking JavaScript
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
1. 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 secondsvs.
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 SummitSteve
Souders46
Idleator
47
