Web Directions South - Even Faster Web Sites
-
Upload
steve-souders -
Category
Documents
-
view
6.935 -
download
4
Transcript of Web Directions South - Even Faster Web Sites
![Page 1: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/1.jpg)
stevesouders.com/docs/wdx-20101014.pptx
Disclaimer: This content does not necessarily reflect the
opinions of my employer.
Even
Faster
Web Sites
flickr.com/photos/ddfic/722634166/
![Page 2: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/2.jpg)
flickr.com/photos/joshme17/1557627176/
how exciting is web dev?
![Page 3: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/3.jpg)
flickr.com/photos/dougbrown47/4468708942//
darn exciting!
![Page 4: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/4.jpg)
flickr.com/photos/halans/5079721630/
![Page 5: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/5.jpg)
flickr.com/photos/bekahstargazing/318930460/
![Page 6: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/6.jpg)
#1. Speed: “First and foremost, we believe that
speed is more than a feature. Speed is the most
important feature.”
carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/
![Page 7: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/7.jpg)
en.oreilly.com/velocity2009/public/schedule/detail/8523
![Page 8: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/8.jpg)
Yahoo!
0.4 sec slower
traffic 5-9%
slideshare.net/stoyan/yslow-20-presentationslideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications
![Page 9: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/9.jpg)
…shaved 2.2 seconds off the average page load
time and increased download conversions by
15.4%!
blog.mozilla.com/metrics/category/website-optimization/
![Page 10: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/10.jpg)
blog.mozilla.com/metrics/category/website-optimization/
…shaved 2.2 seconds off the average page load
time and increased download conversions by
15.4%!
en.oreilly.com/velocity2009/public/schedule/detail/7709
![Page 11: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/11.jpg)
en.oreilly.com/velocity2008/public/schedule/detail/3632
![Page 12: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/12.jpg)
Site speed in search rank
Screen shot of blog post…we've decided to take site speed into account in
our search rankings.
googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
![Page 13: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/13.jpg)
![Page 14: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/14.jpg)
Bothcombine scripts
combine stylesheets
add an Expires header
gzip responses
put stylesheets at the top
put scripts at the bottom
avoid CSS expressions
make JS and CSS external
reduce DNS lookups
minify JS and CSS
avoid redirects
remove duplicate scripts
make Ajax cacheable
reduce cookie size
use cookie-free domains
don't scale images
YSlowuse CSS sprites
use a CDN
configure ETags
use GET for Ajax requests
reduce # of DOM elements
no 404s
avoid image filters
optimize faviconPage Speeddefer loading JS
remove unused CSS
use efficient CSS selectors
optimize images
optimize order of CSS & JS
shard domains
leverage proxy caching
![Page 15: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/15.jpg)
![Page 16: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/16.jpg)
![Page 17: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/17.jpg)
drives traffic
improves UX
increases revenue
reduces costs flickr.com/photos/pedromourapinheiro/3123885534/
Web
Performance
OptimizationWPO
![Page 18: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/18.jpg)
What makes sites feel slow?
flickr.com/photos/kevincollins/234678305/
![Page 19: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/19.jpg)
[next page being loaded]
(lack of)
Progressive Rendering
flickr.com/photos/kevincollins/234678305/
![Page 20: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/20.jpg)
![Page 21: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/21.jpg)
![Page 22: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/22.jpg)
![Page 23: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/23.jpg)
Progressive
Enhancementdeliver HTML
defer JS
avoid DOM
decorate later
![Page 24: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/24.jpg)
Progressive
Enhancement
Progressive Rendering
![Page 25: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/25.jpg)
<script src="A.js"> blocks parallel downloads and rendering
7 secs: IE 8-9, FF 3.6, Chr 6, Saf 4
9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3
Why focus on JavaScript?
![Page 26: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/26.jpg)
JavaScript
Functions Executed before onload
www.aol.com 324 K 30%
www.ebay.com 234 K 34%
www.facebook.com 553 K 7%
www.google.com/search
21 K ??%
www.bing.com/search 10 K 35%
www.msn.com 152 K 55%
www.myspace.com 248 K 29%
en.wikipedia.org/wiki 99 K 19%
www.yahoo.com 381 K 33%
www.youtube.com 274 K 16% 29% avg229 K avg
initial payload and execution
![Page 27: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/27.jpg)
split the initial payload
split your JavaScript between what's needed to render
the page and everything else
defer "everything else"
split manually (Page Speed), automatically (Microsoft
Doloto)
load scripts without blocking
http://www.flickr.com/photos/devcentre/108032900/
![Page 28: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/28.jpg)
Loading Scripts Without Blocking
XHR Eval
XHR Injection
Script in Iframe
Script DOM Element
Script Defer
document.write Script Tag
![Page 29: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/29.jpg)
XHR Eval
script & page must be same domain
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');
![Page 30: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/30.jpg)
Script DOM Elementvar se = document.createElement('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);
script & page domains can differ
may not preserve execution order
![Page 31: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/31.jpg)
Meebo Iframed JSvar iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="insertJS()">');
doc.close();
loads asynchronously
delays parent’s load event: FF, Chr, Saf
great for 3rd
party scripts
better for sandboxing & security
avoids iframe src roundtrip
![Page 32: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/32.jpg)
GMail Mobile<script type="text/javascript">
/*
var ...
*/
</script>
get script DOM element's text
remove comments
eval() when invoked
inline or iframe
awesome for prefetching JS that might (not) be needed
![Page 33: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/33.jpg)
![Page 34: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/34.jpg)
window.setTimeout(function(){ var a=document.createElement("script"); a.src="/extern_js/f/CgJlbhz8US8_w.js"; (document.getElementById("xjsd")|| document.body).appendChild(a);},0);
Google Search
![Page 35: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/35.jpg)
Bootloader.setResourceMap({"CDYbm": {"name":"js\/32kskxvl4c8w0848.pkg.js", "type":"js", "src":"http:\/\/...\/1fakc64i.js"}, ...});
var c=a ? document.body : document.getElementsByTagName('head')[0];
var d=document.createElement('script');d.type='text/javascript';d.src=f;c.appendChild(d);
![Page 36: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/36.jpg)
YUI.presentation.lazyScriptList = ["http://l.yimg.com/a/combo?arc/yui/substitute_0.1.9.js&arc/yui/oop_0.1.10.js&[...58 more!...]"];
d = w.document; h = d.getElementsByTagName("head")[0];n = d.createElement("script"),n.src = url;h.appendChild(n);
Yahoo! FP
![Page 37: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/37.jpg)
<head>...<script src="http://s.ytimg.com/yt/jsbin/www-core-vfl1I8mph.jsA"></script>...</head>
YouTube
![Page 38: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/38.jpg)
<body><div><table>[~40%]<script src="http://z-ecx.images-amazon.com/images/G/01/browser-scripts/us-site-wide-1.2.6/site-wide-4183309070.js._V198471533_.js"></script>
Amazon
![Page 39: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/39.jpg)
<script src="/js/jquery-1.4.2.js"></script></body></html>
subsequent page:<script src="/js/jquery-1.4.2.js"></script><script src="/js/toChecklist.js"></script><script src="/js/tocs.js"></script></body></html>
Craigslist
prefetching?
![Page 40: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/40.jpg)
<body><script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311309442_1_en_US.js"></script><script src="http://include.ebaystatic.com/v4js/en_US/e673/GH-RA_ReskinEbay_e67311309442_1_en_US.js"></script>...<script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311252543_opta_en_US.js"><script src="http://include.ebaystatic.com/v4js/en_US/e673/CCHP_HomepageV4_SLDR_e67311252543_6_en_US.js"></script></body>
eBay
![Page 41: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/41.jpg)
$LAB .wait(function() { $LAB .script("http://a1.twimg.com/a/1286563368/javascripts/phoenix.bundle.js") .wait(function() { ... }); $LAB .script("http://a1.twimg.com/a/1286563368/javascripts/api.bundle.js") .wait(function() { ... }); });
(new)Twitter
http://labjs.com/
![Page 42: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/42.jpg)
var a=_d.createElement("script");a.type="text/javascript";a.src=b;_d.getElementsByTagName("head")[0].appendChild(a);
Bing
onload
![Page 43: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/43.jpg)
<script src="http://bits.wikimedia.org/skins-1.5/common/wikibits.js?281c" type="text/javascript"></script><script src="http://bits.wikimedia.org/skins-1.5/common/jquery.min.js?281c" type="text/javascript"></script><script src="http://bits.wikimedia.org/skins-1.5/common/ajax.js?281c" type="text/javascript"></script><script src="http://bits.wikimedia.org/skins-1.5/common/mwsuggest.js?281c" type="text/javascript"></script><script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/js/plugins.combined.min.js?281c" type="text/javascript"></script><script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/Vector/Vector.combined.min.js?281c" type="text/javascript"></script><script src="http://upload.wikimedia.org/centralnotice/wikipedia/en/centralnotice.js?281c" type="text/javascript"></script><script src="/w/index.php?title=-&action=raw&gen=js&useskin=vector&281c" type="text/javascript"></script></head>
Wikipedia
![Page 44: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/44.jpg)
frontend SPOF
http://en.wikipedia.org/wiki/Flowers (from NZ)
8.2 secs
![Page 45: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/45.jpg)
![Page 46: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/46.jpg)
flickr.com/photos/waltzaround/4041024134/
Ray Morgan
Zappos.com
Makinde Adeagbo
Jenn Lukas
Happy Cog
![Page 47: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/47.jpg)
new stuff
![Page 48: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/48.jpg)
mobile waterfalls (!)
![Page 49: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/49.jpg)
![Page 50: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/50.jpg)
mobile waterfalls (!)
![Page 51: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/51.jpg)
carrier transcoding
?!
wifi
OPTUS
![Page 52: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/52.jpg)
http://2.2.2.2/irscripts/imgreload.js
function FN_ImageReload(){ var FN_IR_TIMEOUT=2000; var FN_IR_SUFFIX="_hyuncompressed"; var FN_IR_ALT="please wait 2 seconds for an uncompressed image, or press Ctrl+F5 for original quality page";
var FN_IR_register=function() { ... var docAll=document.getElementsByTagName("*"); for(i=0;i<docAll.length;i++) { var currEl=docAll[i];}
![Page 53: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/53.jpg)
WebP image format
googlecode.blogspot.com/2010/09/webp-new-image-format-for-web.html
39% size reduction
based on VP8 codec
loss of quality?http://englishhard.com/2010/10/01/real-
world-analysis-of-googles-webp-versus-jpg/
![Page 54: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/54.jpg)
W3C Web Timing Specwindow.[webkit|moz|ms]Performance
test.w3.org/webperf/specs/NavigationTiming/
![Page 55: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/55.jpg)
speed matters
focus on the frontend
run Page Speed and YSlow
progressive enhancement progressive rendering
be excited!
takeaways
flickr.com/photos/34771728@N00/361526991/
![Page 56: Web Directions South - Even Faster Web Sites](https://reader035.fdocuments.net/reader035/viewer/2022062418/554a1dd4b4c9055c598b5693/html5/thumbnails/56.jpg)
Steve Souders
@souders, [email protected]
stevesouders.com/docs/wdx-20101014.pptx
flickr.com/photos/nj_dodge/187190601/