[email protected]
stevesouders.com/docs/accel-hpws-20130913.pptx Disclaimer: This
content does not necessarily reflect the opinions of my
employer.
Slide 2
CuzillionSpriteMe YSlow Hammerhead
Slide 3
part 1: Fast is Good
Slide 4
#1. Speed: First and foremost, we believe that speed is more
than a feature. Speed is the most important feature. #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/
shaved 2.2 seconds off the average page load time and increased
download conversions by 15.4%!
blog.mozilla.com/metrics/category/website-optimization/
Slide 9
We made the new platform 60% faster and this resulted in a 14%
increase in donation conversions.
Slide 10
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
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
Slide 14
Slide 15
part 2: define performance
Slide 16
backendfrontend
Slide 17
Top 10
Slide 18
Top 1000
Slide 19
Top 100,000
Slide 20
Slide 21
metrics time-to-first-byte above-the-fold time page load time
start render
Slide 22
tail vs. dog A B 2 secs4 secs6 secs8 secs Which is better?
Slide 23
tail vs. dog A B 2 secs4 secs6 secs8 secs Which is better?
Slide 24
tail vs. dog A B 2 secs4 secs6 secs8 secs Which is better?
Slide 25
tail vs. dog A B 2 secs4 secs6 secs6.2 secs Which is
better?
Slide 26
synthetic & RUM synthetic: NOT real users QA, lab,
automated ex: Keynote, WebPagetest, Selenium pro: fewer vars,
easier isolation, more metrics (rendering, memory, CPU) RUM (Real
User Monitoring): JavaScript in real users browser ex: GA,
Boomerang, mPulse, Episodes pro: reflects real vars browser, hw,
network, page flow, geo, etc.
Slide 27
Slide 28
Slide 29
part 3: best practices
Slide 30
Slide 31
Make Fewer HTTP Requests avg website: 94 HTTP requests, 1551 kB
* each HTTP request has overhead even with persistent connections
is it possible to reduce HTTP requests without reducing richness?
Yes! * Sep 1 2013: http://httparchive.org/trends.php
Slide 32
Slide 33 good for small images, scripts, & stylesheets if
embedded in HTML document, probably not cached => embed in
stylesheet instead base64 encoding increases total size works in
IE8 (not IE7 and earlier)">
inline resources (data: URLs) embed the content of an HTTP
response in place of a URL good for small images, scripts, &
stylesheets if embedded in HTML document, probably not cached =>
embed in stylesheet instead base64 encoding increases total size
works in IE8 (not IE7 and earlier)
shard dominant domains most browsers do 6-connections-per-
hostname IE 6-7 do 2-connections-per-hostname
Slide 41
Slide 42
Slide 43
Whats the #1 cause of slow web pages?
Slide 44
JAVASCRIPT!
Slide 45
scripts block blocks parallel downloads and rendering 7 secs:
IE 8, FF 3.5, Chr 3, Saf 4 9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10,
Saf 3
Slide 46
all requests containing .js are skipped
Slide 47
http://httparchive.org/trends.php
Slide 48
JavaScript Functions Executed before onload www.aol.com324 K30%
www.ebay.com234 K34% www.facebook.com553 K 7%
www.google.com/search21 K??% www.bing.com/search10 K35%
www.msn.com152 K55% www.myspace.com248 K29% en.wikipedia.org/wiki99
K19% www.yahoo.com381 K33% www.youtube.com274 K16% 29% avg 229 K
avg initial payload and execution
Slide 49
Slide 50
1995: scripts in HEAD blocks other downloads (IE 6-7, images in
IE, iframes) downloaded sequentially (IE 6-7) blocks rendering
during download & parse-execute
Slide 51
2007: move scripts to bottom... doesnt block other downloads
downloaded sequentially in IE 6-7 blocks rendering during download
& parse-execute
Slide 52
2009: load scripts async var se =
document.createElement(script); se.src = a.js;
document.getElementsByTagName(hea d)[0].appendChild(se); doesnt
block other downloads downloaded in parallel (all browsers) blocks
rendering during parse-execute
Slide 53
GMail Mobile /* var... */ get script DOM element's text remove
comments eval() when invoked awesome for prefetching JS that might
(not) be needed http://goo.gl/l5ZLQ
Slide 54
ControlJS a JavaScript module for making scripts load faster
just change HTML inline & external scripts var name =
getName(); http://controljs.org/
Slide 55
ControlJS a JavaScript module for making scripts load faster
download without executing Later if/when needed:
CJS.execScript(src);
Slide 56
Slide 57
Slide 58
Steve Souders [email protected]
stevesouders.com/docs/accel-hpws-20130913.pptx
IronPlanet / http://www.webpagetest.org/result/130912_VG_2CY 92
requests, 479K xfer, onload 4.4s blank page for 1.9s domain
sharding stair step concat scripts, concat stylesheets CSS sprites
save 19 requests cache-control: max-age dont close connections
Slide 65
educreations /browse/mathematics/
http://www.webpagetest.org/result/130912_XK_2D2/ 37 requests, 812K
xfer, onload 2.8s blank page for 1.2s gzip save 199K optimize
images save 55K domain sharding stair step
Slide 66
Sunrun / http://www.webpagetest.org/result/130912_9T_2D5/ 69
requests, 3.6M xfer, onload 8s blank page for 1.9s backend is slow
document flush domain sharding stair step concat scripts so many
carousels?! preloader delays sunrun-home-solar.jpg by promoting
scripts CSS sprites save 4 requests & 100K cache-control:
max-age dont close connections
Download "[email protected]
stevesouders.com/docs/accel-hpws-20130913.pptx Disclaimer: This
content does not necessarily reflect the opinions of my employer."
Similar presentations
Stevesouders.com/docs/velocity-efws-20101208.pptx Disclaimer: This
content does not necessarily reflect the opinions of my employer.
flickr.com/photos/ddfic/722634166/
Stevesouders.com/docs/thinkvitamin-20101216.pptx Disclaimer: This
content does not necessarily reflect the opinions of my employer.
flickr.com/photos/ddfic/722634166/
Stevesouders.com/docs/sfjs-20120112.pptx Disclaimer: This content
does not necessarily reflect the opinions of my employer.
Http://stevesouders.com/docs/fronteers-20091105.pptx Disclaimer:
This content does not necessarily reflect the opinions of my
employer. Http://stevesouders.com/docs/amazon-20091030.pptx
Disclaimer: This content does not necessarily reflect the opinions
of my employer. Http://stevesouders.com/docs/jsconfeu-20091108.pptx
Disclaimer: This content does not necessarily reflect the opinions
of my employer. CS193H: High Performance Web Sites Lecture 5: Make
Fewer HTTP Requests Steve Souders Google [email protected].
Best Practices for Speeding Up Your Web Site
http://developer.yahoo.com 1. 17% 83% iGoogle, primed cache the
importance of frontend performance 9%91% iGoogle, empty cache.
Learning & Development Team http://academy.telerik.com Telerik
Software Academy. Presented By: Zulqarnain Abdul Jabbar Date: 25 th
March 2013. Steve Souders [email protected]
http://stevesouders.com/docs/widget-summit-2008.ppt High
Performance Widgets Disclaimer: This content does not necessarily.
Stevesouders.com/docs/velocity-wpo-20101207.pptx Disclaimer: This
content does not necessarily reflect the opinions of my employer.
Steve Souders [email protected]
http://stevesouders.com/docs/facebook-20081030.ppt Life's too
short, write fast code part 1 Disclaimer: This content does. Steve
Souders [email protected]
http://stevesouders.com/docs/wordcamp-20080816.ppt Even Faster Web
Sites (inside ma.tt) best practices for faster pages. Steve Souders
[email protected] http://stevesouders.com/docs/cbs-20090209.ppt
Even Faster Websites Disclaimer: This content does not necessarily
reflect. Steve Souders [email protected]
http://stevesouders.com/docs/wordcamp-20090530.ppt Even Faster
Themes Disclaimer: This content does not necessarily reflect. Steve
Souders [email protected]
http://stevesouders.com/docs/myspace-20081024.ppt Life's too short,
write fast code part 1 Disclaimer: This content does. Steve Souders
[email protected]
http://stevesouders.com/docs/theajaxexperience-20081001.ppt Even
Faster Web Sites best practices for faster pages Disclaimer: Mark
Phillip markphillip.com 200s, 304s, Expires Headers, HTTP
Compression, And You. Steve Souders [email protected]
http://stevesouders.com/docs/twitter-20080821.ppt Even Faster Web
Sites best practices for faster pages Disclaimer: This. Steve
Souders [email protected] http://stevesouders.com/ Even Faster Web
Sites best practices for faster pages Disclaimer: This content does
not necessarily. High Performance Websites (Based on Steve Souders
lecture) By Bhoomi Patel. @SEAN_P_MORRISON BAKING IN THE SEO. PAGE
SPEED HOSTING SOLUTIONS CONTENT DELIVERY NETWORKS. Steve Souders
[email protected] http://stevesouders.com/docs/google-20090305.ppt
Even Faster Web Sites Disclaimer: This content does not necessarily
reflect. Steve Souders [email protected] http://stevesouders.com/
Even Faster Web Sites best practices for faster pages Disclaimer:
This content does not necessarily. Social Web Design 1 Darby Chang
Social Web Design. Social Web Design 1 Darby Chang Social Web
Design & Research.
Http://stevesouders.com/docs/speedgeeks-20091026.pptx &.zip
Disclaimer: This content does not necessarily reflect the opinions
of my employer. Steve Souders [email protected]
http://stevesouders.com/docs/shopping-com-20090520.ppt Even Faster
Web Sites Disclaimer: This content does not necessarily.
document.write(between.get_banner_code('728x90')); var
embed_template = ' [email protected]
stevesouders.com/docs/accel-hpws-20130913.pptx Disclaimer: This
content does not necessarily reflect the opinions of my
employer.View more presentations from
'+$('.h-author-name').text()+' '; var force_remove_ads = false; var
is_adblock_detect = function() { var g_frames=[];
$('iframe').each(function(){ var src = $(this).attr('onload'); if
(!src || !src.match(/google_iframe_oncopy/)) return;
g_frames.push(src) }); return !g_frames.length; };var checked_ads =
function() { if (force_remove_ads) { return; } if
(adsense.is_allowed_domain() && is_adblock_detect()) {
set_adblock_warning(); } };var set_adblock_warning = function(){
$('#frameplayer iframe').attr('src', '/static/adblock/'); };var
is_window_load = false; $(window).load(function(){ is_window_load =
true; if (adsense.is_allowed_domain()) { setTimeout(function() {
checked_ads(); }, 5000); } }); if (! adsense.is_allowed_domain()) {
$('#left_upper').css('width', '70px'); } else {
move_block('to_left', 'left_upper');
//move_block('to_under_player', 'under_player_ad');
//move_block('to_728x15', '728x15'); //var correct_set = function()
{ //move_block('to_200x90', '200x90');
//move_block('to_down_between', 'down_between'); //if
(is_window_load) { //return; //} //setTimeout(correct_set, 500);
//}; //correct_set(); }
