- Slide 1
- souders@google.com
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/
- Slide 5
- en.oreilly.com/velocity2009/public/schedule/detail/8523
- Slide 6
- Slide 7
- slideshare.net/stoyan/yslow-20-presentation
slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications
- Slide 8
- 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
- Slide 11
- en.oreilly.com/velocity2008/public/schedule/detail/3632
- Slide 12
-
slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377
- Slide 13
- 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)
- Slide 34 overall size reduced"> one image
- CSS sprites multiple CSS background images => one image
overall size reduced
- Slide 35
- Slide 36
- Add an Expires Header expiration date determines freshness use
Expires and Cache-Control: max-age must rev filenames GET
/scripts/107652916-common.js HTTP/1.1 Host: www.yourdomain.com
HTTP/1.1 200 OK Content-Type: application/x-javascript
Last-Modified: Mon, 22 Sep 2011 21:14:35 GMT Content-Length: 10874
Expires: Sat, 13 Sep 2014 14:57:34 GMT Cache-Control:
max-age=31536000 function init() {
- Slide 37
- Add an Expires Header Apache: ExpiresActive On ExpiresDefault
"access plus 10 years" Header set ETag ""
- Slide 38
- gzip components GET /scripts/107652916-common.js HTTP/1.1 Host:
www.yourdomain.com Accept-Encoding: gzip,deflate HTTP/1.1 200 OK
Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep
2011 21:14:35 GMT Content-Length: 3066 Expires: Sat, 13 Sep 2014
14:57:34 GMT Cache-Control: max-age=31536000 Content-Encoding: gzip
Vary: Accept-Encoding XmoH\Fv*woq... reduces response size ~70% use
Vary: or Cache-Control: private
- Slide 39
- gzip components Apache: AddOutputFilterByType DEFLATE text/html
text/plain text/xml text/css application/x-javascript
application/javascript font/ttf application/octet-stream
image/x-icon
- Slide 40
- 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 souders@google.com
stevesouders.com/docs/accel-hpws-20130913.pptx
- Slide 59
- WebPagetest Results Chrome: http://www.webpagetest.org/result/1
30912_7N_2CG/ IE9: http://www.webpagetest.org/result/1
30912_JQ_2DJ/
- Slide 60
- Hootsuite 161 requests, 1.7M xfer, onload 5.06s gzip save 576K
1M of JS parsed during page load!
- Slide 61
- Atlassian /software/jira
http://www.webpagetest.org/result/130912_T7_2CM/ 92 requests, 3.3M
xfer, onload 30.7s blank page for 22s strange delays on all pages
too many blocking scripts preloader moves bottom scripts higher
domain sharding optimize images save 226K CSS sprite save 20
requests
- Slide 62
- Bitbucket /pypy/pypy/commits/all
http://www.webpagetest.org/result/130912_XM_5BP/ 18 requests, 963K
xfer, onload 7s backend is slow 60/40 blank page for 5.6s lotsa css
196K & 270K
- Slide 63
- 99designs / http://www.webpagetest.org/result/130912_VH_2CS/
121 requests, 1.46M xfer, onload 5.5s blank page for 1.7s domain
sharding stair step whats blocking rendering? WPT blocking
cache-control: max-age
- Slide 64
- 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 "Souders@google.com
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 souders@cs.stanford.edu.
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 souders@google.com
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 souders@google.com
http://stevesouders.com/docs/facebook-20081030.ppt Life's too
short, write fast code part 1 Disclaimer: This content does. Steve
Souders souders@google.com
http://stevesouders.com/docs/wordcamp-20080816.ppt Even Faster Web
Sites (inside ma.tt) best practices for faster pages. Steve Souders
souders@google.com http://stevesouders.com/docs/cbs-20090209.ppt
Even Faster Websites Disclaimer: This content does not necessarily
reflect. Steve Souders souders@google.com
http://stevesouders.com/docs/wordcamp-20090530.ppt Even Faster
Themes Disclaimer: This content does not necessarily reflect. Steve
Souders souders@google.com
http://stevesouders.com/docs/myspace-20081024.ppt Life's too short,
write fast code part 1 Disclaimer: This content does. Steve Souders
souders@google.com
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 souders@google.com
http://stevesouders.com/docs/twitter-20080821.ppt Even Faster Web
Sites best practices for faster pages Disclaimer: This. Steve
Souders souders@google.com 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
souders@google.com http://stevesouders.com/docs/google-20090305.ppt
Even Faster Web Sites Disclaimer: This content does not necessarily
reflect. Steve Souders souders@google.com 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 souders@google.com
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 = ' Souders@google.com
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(); }