Web Performance Workshop - Velocity London 2013

Andy Davies
Andy DaviesIndependent Web Performance Consultant at Asteno
Hands on Web
Performance Workshop
Andy Davies
@andydavies

Tobias Baldauf
@tbaldauf
#VelocityConf London 2013
We’re planning to cover
● Tools
● Techniques
● Live Analysis

But…
…this session is about

YOU
so feel free to jump in with questions
What sites should we test?
http://man.gl/londonworkshop
Do you use WebPageTest?
PhantomJS

http://github.com/ariya/phantomjs/
Phantomas
http://github.com/macbre/phantomas

{
"url":"http://tobias.is",
"metrics":{
"requests":11,
"gzipRequests":2,
"postRequests":0,
"redirects":0,
"notFound":0,
"timeToFirstByte":107,
"timeToLastByte":120,
"bodySize":151897,
"contentLength":206417,
[...]
All together now!
#!/usr/bin/env bash
URL_to_measure="$1"

#!/usr/bin/env bats
@test "Time to first byte" {
[ "$timeToFirstByte" -lt 200 ]
}

Metrics_to_analyze=('timeToFirstByte' 'requests' 'cssSize')
Phantomas_JSON_output=$(phantomas --format=json --url "${URL_to_measure}")
for((i=0;i<${#Metrics_to_analyze[@]};i++)) ; do
eval ${Metrics_to_analyze[$i]}=$(echo "$Phantomas_JSON_output" | jq ".metrics."${Metrics_to_analyze[$i]})
export ${Metrics_to_analyze[$i]}
done
bats --tap performance-tests.bats

#1..3
ok 1 Time to first byte
ok 2 Number of HTTP requests
not ok 3 CSS size
# (in test file /test/webperf/performance-tests.bats, line 23)

@test "Number of HTTP requests" {
[ "$requests" -lt 30 ]
}
@test "CSS size" {
[ "$cssSize" -lt 15360 ]
}

http://github.com/technopagan/simple-website-speed-test
WebPagetest API

http://github.com/marcelduran/webpagetest-api
Run WPT Run!
webpagetest test http://velocityconf.com --server wpt.yourdomain.tld --location Local-SGS2 --wait

{
"statusCode": 200,
"statusText": "Ok",
"data": {
"testId": "131019_VF_1",
"ownerKey": "b5cf1cb86be59d94f3ee714f15da3efe5cf05b7z",
"jsonUrl": "http://wpt.yourdomain.tld/jsonResult.php?test=131019_VF_1",
"xmlUrl": "http://wpt.yourdomain.tld/xmlResult.php?test=131019_VF_1",
"userUrl": "http://wpt.yourdomain.tld/results.php?test=131019_VF_1",
"summaryCSV": "http://wpt.yourdomain.tld/csv.php?test=131019_VF_1",
"detailCSV": "http://wpt.yourdomain.tld/csv.php?test=131019_VF_1&amp;req=1"
}
SwissArmyKnife Results
"response": {
"statusCode": 200,
"statusText": "Ok",
"data": {
"testId": "131019_VF_1",
"summary": "http://wpt.yourdomain.tld/results.php?test=131019_VF_1",
"from": "Samsung Galaxy SII - Native",
"runs": 1,
"successfulFVRuns": 1,
"successfulRVRuns": 1,
"average": {
"firstView": {
"loadTime": 6285,
"TTFB": 2852,
[...]
TAP & Jenkins Integration
What if we want
to test more
than one page?
./sitespeed.io -u http://news.bbc.co.uk
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Setup your own HTTP Archive…
Barbara Bermes - http://man.gl/1eHoyqB
Lots of data!
Import data into R
library(RMySQL)
drv = dbDriver('MySQL')
con = dbConnect(drv, user='user', password='password', dbname='dbname', host='127.0.0.1')
results = dbGetQuery(con,statement='select * from pages;')

Plot histogram of requests / page
hist(results$reqTotal,
xlim=c(0,200),
ylim=c(0,375),
breaks=seq(0,200,by=5),
main="",
xlab="Number of Requests",
col="steelblue",
border="white", axes=FALSE)
axis(1, at = seq(0, 225, by = 25))
axis(2, at = seq(0, 400, by = 25))
Web Performance Workshop - Velocity London 2013
Sometimes bi-modal distributions
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Commercial tools available too…
Web Performance Workshop - Velocity London 2013
Let’s look at some live sites
Performance isn’t just about load time

http://www.flickr.com/photos/jaxport/8554780980
Web Performance Workshop - Velocity London 2013
Painting every 20ms!
Web Performance Workshop - Velocity London 2013
Web Performance Workshop - Velocity London 2013
Logo is actually made of four
images that fade from one to
another.
CPU load varies between 7 - 20%
Has detrimental impact on mobile
battery life
A Tale of CSS Checkbox Hacks
<input type="checkbox" id="toggle" />
<label for="toggle" class="toggle" onclick></label>
<ul class="menu">
<li><a href="#">Sictransit</a></li>
<li><a href="#">Gloriamundi</a></li>
</ul>

#toggle:checked ~ .menu {
display: block;
}
http://css-tricks.com/the-checkbox-hack/
http://thenittygritty.co/toggle-navigation-with-purecss

body {
-webkit-animation: bugfix infinite 1s; /* here be dragons */
}
@-webkit-keyframes bugfix {
from {
white-space: default;
}
to {
white-space: normal;
}
}

http://bugs.webkit.org/show_bug.cgi?id=45168
Web Performance Workshop - Velocity London 2013
Be neighborly
Adjacent sibling selector trumps general sibling selector
<input type="checkbox" id="toggle" />
<nav>
<label for="toggle" class="toggle" onclick></label>
<ul class="menu">
<li><a href="#">Sictransit</a></li>
<li><a href="#">Gloriamundi</a></li>
</ul>
</nav>

#toggle:checked + nav .menu {
display: block;
}
Lessons learned
Working in web performance is as much
about educating as optimizing.

Choose your battles

http://sapdesignguild.org

http://josefbrandenburg.com
Thank You (we’re around all week)
Andy:

@andydavies
hello@andydavies.me

Tobias:

@tbaldauf
kontakt@tobias-baldauf.de

Office Hours: 12:30 Thursday
1 of 41

Recommended

Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns? by
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Andy Davies
6.7K views48 slides
The Need For Speed by
The Need For SpeedThe Need For Speed
The Need For SpeedAndy Davies
2.5K views30 slides
Making Mobile Sites Faster by
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites FasterAndy Davies
2.2K views44 slides
Sniffing the Mobile Context by
Sniffing the Mobile ContextSniffing the Mobile Context
Sniffing the Mobile ContextAndy Davies
3.2K views21 slides
Speed is Essential for a Great Web Experience by
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceAndy Davies
12.2K views49 slides
Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns? by
Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices... Tomorrow’s Performance Anti-Patterns?Andy Davies
3.5K views42 slides

More Related Content

What's hot

Web Performance - A Whistlestop Tour by
Web Performance - A Whistlestop TourWeb Performance - A Whistlestop Tour
Web Performance - A Whistlestop TourAndy Davies
3.7K views19 slides
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm by
The Case for HTTP/2  - Internetdagarna 2015 - StockholmThe Case for HTTP/2  - Internetdagarna 2015 - Stockholm
The Case for HTTP/2 - Internetdagarna 2015 - StockholmAndy Davies
2.7K views91 slides
Making Mobile Sites Faster by
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites FasterAndy Davies
13.8K views52 slides
Mobile Web Performance - Getting and Staying Fast by
Mobile Web Performance -  Getting and Staying FastMobile Web Performance -  Getting and Staying Fast
Mobile Web Performance - Getting and Staying FastAndy Davies
2.4K views64 slides
Web Page Test - Beyond the Basics by
Web Page Test - Beyond the BasicsWeb Page Test - Beyond the Basics
Web Page Test - Beyond the BasicsAndy Davies
17.5K views52 slides
The Case for HTTP/2 - EpicFEL Sept 2015 by
The Case for HTTP/2 - EpicFEL Sept 2015The Case for HTTP/2 - EpicFEL Sept 2015
The Case for HTTP/2 - EpicFEL Sept 2015Andy Davies
2K views60 slides

What's hot(20)

Web Performance - A Whistlestop Tour by Andy Davies
Web Performance - A Whistlestop TourWeb Performance - A Whistlestop Tour
Web Performance - A Whistlestop Tour
Andy Davies3.7K views
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm by Andy Davies
The Case for HTTP/2  - Internetdagarna 2015 - StockholmThe Case for HTTP/2  - Internetdagarna 2015 - Stockholm
The Case for HTTP/2 - Internetdagarna 2015 - Stockholm
Andy Davies2.7K views
Making Mobile Sites Faster by Andy Davies
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites Faster
Andy Davies13.8K views
Mobile Web Performance - Getting and Staying Fast by Andy Davies
Mobile Web Performance -  Getting and Staying FastMobile Web Performance -  Getting and Staying Fast
Mobile Web Performance - Getting and Staying Fast
Andy Davies2.4K views
Web Page Test - Beyond the Basics by Andy Davies
Web Page Test - Beyond the BasicsWeb Page Test - Beyond the Basics
Web Page Test - Beyond the Basics
Andy Davies17.5K views
The Case for HTTP/2 - EpicFEL Sept 2015 by Andy Davies
The Case for HTTP/2 - EpicFEL Sept 2015The Case for HTTP/2 - EpicFEL Sept 2015
The Case for HTTP/2 - EpicFEL Sept 2015
Andy Davies2K views
The web is too slow by Andy Davies
The web is too slow The web is too slow
The web is too slow
Andy Davies15.2K views
Speed Matters! by Andy Davies
Speed Matters!Speed Matters!
Speed Matters!
Andy Davies1.8K views
What does the browser pre-loader do? by Andy Davies
What does the browser pre-loader do?What does the browser pre-loader do?
What does the browser pre-loader do?
Andy Davies10.7K views
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns? by Andy Davies
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?
Andy Davies2.3K views
Speed is Essential for a Great Web Experience by Andy Davies
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web Experience
Andy Davies21.1K views
Speed is Essential for a Great Web Experience (Canvas Conf Version) by Andy Davies
Speed is Essential for a Great Web Experience (Canvas Conf Version)Speed is Essential for a Great Web Experience (Canvas Conf Version)
Speed is Essential for a Great Web Experience (Canvas Conf Version)
Andy Davies7.3K views
Speed is Essential for a Great Web Experience (Digicure - Copenhagen) by Andy Davies
Speed is Essential for a Great Web Experience (Digicure - Copenhagen)Speed is Essential for a Great Web Experience (Digicure - Copenhagen)
Speed is Essential for a Great Web Experience (Digicure - Copenhagen)
Andy Davies5K views
How fast are we going now? by Steve Souders
How fast are we going now?How fast are we going now?
How fast are we going now?
Steve Souders37.5K views
[jqconatx] Adaptive Images for Responsive Web Design by Christopher Schmitt
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
Christopher Schmitt31.4K views
Design+Performance Velocity 2015 by Steve Souders
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015
Steve Souders18.3K views
Mobile Web Speed Bumps by Nicholas Zakas
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
Nicholas Zakas13.4K views
Progressive web and the problem of JavaScript by Christian Heilmann
Progressive web and the problem of JavaScriptProgressive web and the problem of JavaScript
Progressive web and the problem of JavaScript
Christian Heilmann6.1K views
Real World Web Standards by gleddy
Real World Web StandardsReal World Web Standards
Real World Web Standards
gleddy18K views
HTML / CSS / JS Web basics by btopro
HTML / CSS / JS Web basicsHTML / CSS / JS Web basics
HTML / CSS / JS Web basics
btopro262 views

Similar to Web Performance Workshop - Velocity London 2013

Intro to node and mongodb 1 by
Intro to node and mongodb   1Intro to node and mongodb   1
Intro to node and mongodb 1Mohammad Qureshi
2K views40 slides
RoR vs-nodejs-by-jcskyting by
RoR vs-nodejs-by-jcskytingRoR vs-nodejs-by-jcskyting
RoR vs-nodejs-by-jcskytingSky Wang
463 views21 slides
Node azure by
Node azureNode azure
Node azureEmanuele DelBono
1.6K views66 slides
Cape Cod Web Technology Meetup - 2 by
Cape Cod Web Technology Meetup - 2Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2Asher Martin
283 views25 slides
Practical tipsmakemobilefaster oscon2016 by
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Doris Chen
1.3K views86 slides
Nodejs - A quick tour (v6) by
Nodejs - A quick tour (v6)Nodejs - A quick tour (v6)
Nodejs - A quick tour (v6)Felix Geisendörfer
3.9K views68 slides

Similar to Web Performance Workshop - Velocity London 2013(20)

RoR vs-nodejs-by-jcskyting by Sky Wang
RoR vs-nodejs-by-jcskytingRoR vs-nodejs-by-jcskyting
RoR vs-nodejs-by-jcskyting
Sky Wang463 views
Cape Cod Web Technology Meetup - 2 by Asher Martin
Cape Cod Web Technology Meetup - 2Cape Cod Web Technology Meetup - 2
Cape Cod Web Technology Meetup - 2
Asher Martin283 views
Practical tipsmakemobilefaster oscon2016 by Doris Chen
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
Doris Chen1.3K views
Get Ahead with HTML5 on Moible by markuskobler
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
markuskobler442 views
Writing robust Node.js applications by Tom Croucher
Writing robust Node.js applicationsWriting robust Node.js applications
Writing robust Node.js applications
Tom Croucher15.6K views
Event-driven IO server-side JavaScript environment based on V8 Engine by Ricardo Silva
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 Engine
Ricardo Silva4.1K views
soft-shake.ch - Hands on Node.js by soft-shake.ch
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.js
soft-shake.ch2.3K views
Html5 and web technology update by Doug Domeny
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
Doug Domeny1.7K views
[Coscup 2012] JavascriptMVC by Alive Kuo
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
Alive Kuo1.3K views
Javascript first-class citizenery by toddbr
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
toddbr1.2K views
Why Node.js by guileen
Why Node.jsWhy Node.js
Why Node.js
guileen2.9K views
Why Nodejs Guilin Shanghai by Jackson Tian
Why Nodejs Guilin ShanghaiWhy Nodejs Guilin Shanghai
Why Nodejs Guilin Shanghai
Jackson Tian669 views
introduction to node.js by orkaplan
introduction to node.jsintroduction to node.js
introduction to node.js
orkaplan3.7K views
Performance Optimization and JavaScript Best Practices by Doris Chen
Performance Optimization and JavaScript Best PracticesPerformance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best Practices
Doris Chen3.6K views
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜 by Yuki Okada
Web開発の技術選び、 好き嫌いでやってませんか  〜技術選びで注目すべきポイントとは〜Web開発の技術選び、 好き嫌いでやってませんか  〜技術選びで注目すべきポイントとは〜
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜
Yuki Okada6K views

More from Andy Davies

Fast Fashion… How Missguided revolutionised their approach to site performanc... by
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Andy Davies
1K views67 slides
Fast Fashion… How Missguided revolutionised their approach to site performanc... by
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...Andy Davies
20.5K views78 slides
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018 by
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018Andy Davies
1K views73 slides
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018 by
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018Andy Davies
3.3K views76 slides
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018 by
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018Andy Davies
2.2K views32 slides
Selling Performance - Bristol WebPerf Meetup 2017-07-20 by
Selling Performance - Bristol WebPerf Meetup 2017-07-20Selling Performance - Bristol WebPerf Meetup 2017-07-20
Selling Performance - Bristol WebPerf Meetup 2017-07-20Andy Davies
1.6K views62 slides

More from Andy Davies(18)

Fast Fashion… How Missguided revolutionised their approach to site performanc... by Andy Davies
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...
Andy Davies1K views
Fast Fashion… How Missguided revolutionised their approach to site performanc... by Andy Davies
Fast Fashion… How Missguided revolutionised their approach to site performanc...Fast Fashion… How Missguided revolutionised their approach to site performanc...
Fast Fashion… How Missguided revolutionised their approach to site performanc...
Andy Davies20.5K views
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018 by Andy Davies
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018
Andy Davies1K views
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018 by Andy Davies
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018
Andy Davies3.3K views
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018 by Andy Davies
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018
Andy Davies2.2K views
Selling Performance - Bristol WebPerf Meetup 2017-07-20 by Andy Davies
Selling Performance - Bristol WebPerf Meetup 2017-07-20Selling Performance - Bristol WebPerf Meetup 2017-07-20
Selling Performance - Bristol WebPerf Meetup 2017-07-20
Andy Davies1.6K views
Speed: The 'Forgotten' Conversion Factor by Andy Davies
Speed: The 'Forgotten' Conversion FactorSpeed: The 'Forgotten' Conversion Factor
Speed: The 'Forgotten' Conversion Factor
Andy Davies859 views
Building an Appier Web - London Web Standards - Nov 2016 by Andy Davies
Building an Appier Web -  London Web Standards - Nov 2016Building an Appier Web -  London Web Standards - Nov 2016
Building an Appier Web - London Web Standards - Nov 2016
Andy Davies1.1K views
Building an Appier Web - Velocity Amsterdam 2016 by Andy Davies
Building an Appier Web - Velocity Amsterdam 2016Building an Appier Web - Velocity Amsterdam 2016
Building an Appier Web - Velocity Amsterdam 2016
Andy Davies985 views
The Case for HTTP/2 - GreeceJS - June 2016 by Andy Davies
The Case for HTTP/2 -  GreeceJS - June 2016The Case for HTTP/2 -  GreeceJS - June 2016
The Case for HTTP/2 - GreeceJS - June 2016
Andy Davies891 views
Building an Appier Web - May 2016 by Andy Davies
Building an Appier Web - May 2016Building an Appier Web - May 2016
Building an Appier Web - May 2016
Andy Davies980 views
The Fast, The Slow and The Unconverted - Emerce Conversion 2016 by Andy Davies
The Fast, The Slow and The Unconverted -  Emerce Conversion 2016The Fast, The Slow and The Unconverted -  Emerce Conversion 2016
The Fast, The Slow and The Unconverted - Emerce Conversion 2016
Andy Davies1.3K views
Making Mobile Sites Faster by Andy Davies
Making Mobile Sites FasterMaking Mobile Sites Faster
Making Mobile Sites Faster
Andy Davies23.3K views
Speed matters, So why is your site so slow? by Andy Davies
Speed matters, So why is your site so slow?Speed matters, So why is your site so slow?
Speed matters, So why is your site so slow?
Andy Davies44K views
The Case for HTTP/2 by Andy Davies
The Case for HTTP/2The Case for HTTP/2
The Case for HTTP/2
Andy Davies3K views
HTTP2 is Here! by Andy Davies
HTTP2 is Here!HTTP2 is Here!
HTTP2 is Here!
Andy Davies5.1K views
Http/2 - What's it all about? by Andy Davies
Http/2  - What's it all about?Http/2  - What's it all about?
Http/2 - What's it all about?
Andy Davies4.4K views
EdgeConf - Page Load Performance Opening Talk by Andy Davies
EdgeConf - Page Load Performance Opening TalkEdgeConf - Page Load Performance Opening Talk
EdgeConf - Page Load Performance Opening Talk
Andy Davies4.1K views

Recently uploaded

Democratising digital commerce in India-Report by
Democratising digital commerce in India-ReportDemocratising digital commerce in India-Report
Democratising digital commerce in India-ReportKapil Khandelwal (KK)
15 views161 slides
Info Session November 2023.pdf by
Info Session November 2023.pdfInfo Session November 2023.pdf
Info Session November 2023.pdfAleksandraKoprivica4
12 views15 slides
Data Integrity for Banking and Financial Services by
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial ServicesPrecisely
21 views26 slides
Unit 1_Lecture 2_Physical Design of IoT.pdf by
Unit 1_Lecture 2_Physical Design of IoT.pdfUnit 1_Lecture 2_Physical Design of IoT.pdf
Unit 1_Lecture 2_Physical Design of IoT.pdfStephenTec
12 views36 slides
Serverless computing with Google Cloud (2023-24) by
Serverless computing with Google Cloud (2023-24)Serverless computing with Google Cloud (2023-24)
Serverless computing with Google Cloud (2023-24)wesley chun
11 views33 slides
Voice Logger - Telephony Integration Solution at Aegis by
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at AegisNirmal Sharma
39 views1 slide

Recently uploaded(20)

Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely21 views
Unit 1_Lecture 2_Physical Design of IoT.pdf by StephenTec
Unit 1_Lecture 2_Physical Design of IoT.pdfUnit 1_Lecture 2_Physical Design of IoT.pdf
Unit 1_Lecture 2_Physical Design of IoT.pdf
StephenTec12 views
Serverless computing with Google Cloud (2023-24) by wesley chun
Serverless computing with Google Cloud (2023-24)Serverless computing with Google Cloud (2023-24)
Serverless computing with Google Cloud (2023-24)
wesley chun11 views
Voice Logger - Telephony Integration Solution at Aegis by Nirmal Sharma
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at Aegis
Nirmal Sharma39 views
Special_edition_innovator_2023.pdf by WillDavies22
Special_edition_innovator_2023.pdfSpecial_edition_innovator_2023.pdf
Special_edition_innovator_2023.pdf
WillDavies2217 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software263 views
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb14 views
Attacking IoT Devices from a Web Perspective - Linux Day by Simone Onofri
Attacking IoT Devices from a Web Perspective - Linux Day Attacking IoT Devices from a Web Perspective - Linux Day
Attacking IoT Devices from a Web Perspective - Linux Day
Simone Onofri16 views
Case Study Copenhagen Energy and Business Central.pdf by Aitana
Case Study Copenhagen Energy and Business Central.pdfCase Study Copenhagen Energy and Business Central.pdf
Case Study Copenhagen Energy and Business Central.pdf
Aitana16 views
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson85 views
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... by Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker37 views
PharoJS - Zürich Smalltalk Group Meetup November 2023 by Noury Bouraqadi
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023
Noury Bouraqadi127 views

Web Performance Workshop - Velocity London 2013

  • 1. Hands on Web Performance Workshop Andy Davies @andydavies Tobias Baldauf @tbaldauf #VelocityConf London 2013
  • 2. We’re planning to cover ● Tools ● Techniques ● Live Analysis But…
  • 3. …this session is about YOU so feel free to jump in with questions
  • 4. What sites should we test? http://man.gl/londonworkshop
  • 5. Do you use WebPageTest?
  • 8. All together now! #!/usr/bin/env bash URL_to_measure="$1" #!/usr/bin/env bats @test "Time to first byte" { [ "$timeToFirstByte" -lt 200 ] } Metrics_to_analyze=('timeToFirstByte' 'requests' 'cssSize') Phantomas_JSON_output=$(phantomas --format=json --url "${URL_to_measure}") for((i=0;i<${#Metrics_to_analyze[@]};i++)) ; do eval ${Metrics_to_analyze[$i]}=$(echo "$Phantomas_JSON_output" | jq ".metrics."${Metrics_to_analyze[$i]}) export ${Metrics_to_analyze[$i]} done bats --tap performance-tests.bats #1..3 ok 1 Time to first byte ok 2 Number of HTTP requests not ok 3 CSS size # (in test file /test/webperf/performance-tests.bats, line 23) @test "Number of HTTP requests" { [ "$requests" -lt 30 ] } @test "CSS size" { [ "$cssSize" -lt 15360 ] } http://github.com/technopagan/simple-website-speed-test
  • 10. Run WPT Run! webpagetest test http://velocityconf.com --server wpt.yourdomain.tld --location Local-SGS2 --wait { "statusCode": 200, "statusText": "Ok", "data": { "testId": "131019_VF_1", "ownerKey": "b5cf1cb86be59d94f3ee714f15da3efe5cf05b7z", "jsonUrl": "http://wpt.yourdomain.tld/jsonResult.php?test=131019_VF_1", "xmlUrl": "http://wpt.yourdomain.tld/xmlResult.php?test=131019_VF_1", "userUrl": "http://wpt.yourdomain.tld/results.php?test=131019_VF_1", "summaryCSV": "http://wpt.yourdomain.tld/csv.php?test=131019_VF_1", "detailCSV": "http://wpt.yourdomain.tld/csv.php?test=131019_VF_1&amp;req=1" }
  • 11. SwissArmyKnife Results "response": { "statusCode": 200, "statusText": "Ok", "data": { "testId": "131019_VF_1", "summary": "http://wpt.yourdomain.tld/results.php?test=131019_VF_1", "from": "Samsung Galaxy SII - Native", "runs": 1, "successfulFVRuns": 1, "successfulRVRuns": 1, "average": { "firstView": { "loadTime": 6285, "TTFB": 2852, [...]
  • 12. TAP & Jenkins Integration
  • 13. What if we want to test more than one page?
  • 20. Setup your own HTTP Archive… Barbara Bermes - http://man.gl/1eHoyqB
  • 22. Import data into R library(RMySQL) drv = dbDriver('MySQL') con = dbConnect(drv, user='user', password='password', dbname='dbname', host='127.0.0.1') results = dbGetQuery(con,statement='select * from pages;') Plot histogram of requests / page hist(results$reqTotal, xlim=c(0,200), ylim=c(0,375), breaks=seq(0,200,by=5), main="", xlab="Number of Requests", col="steelblue", border="white", axes=FALSE) axis(1, at = seq(0, 225, by = 25)) axis(2, at = seq(0, 400, by = 25))
  • 30. Let’s look at some live sites
  • 31. Performance isn’t just about load time http://www.flickr.com/photos/jaxport/8554780980
  • 36. Logo is actually made of four images that fade from one to another. CPU load varies between 7 - 20% Has detrimental impact on mobile battery life
  • 37. A Tale of CSS Checkbox Hacks <input type="checkbox" id="toggle" /> <label for="toggle" class="toggle" onclick></label> <ul class="menu"> <li><a href="#">Sictransit</a></li> <li><a href="#">Gloriamundi</a></li> </ul> #toggle:checked ~ .menu { display: block; } http://css-tricks.com/the-checkbox-hack/ http://thenittygritty.co/toggle-navigation-with-purecss body { -webkit-animation: bugfix infinite 1s; /* here be dragons */ } @-webkit-keyframes bugfix { from { white-space: default; } to { white-space: normal; } } http://bugs.webkit.org/show_bug.cgi?id=45168
  • 39. Be neighborly Adjacent sibling selector trumps general sibling selector <input type="checkbox" id="toggle" /> <nav> <label for="toggle" class="toggle" onclick></label> <ul class="menu"> <li><a href="#">Sictransit</a></li> <li><a href="#">Gloriamundi</a></li> </ul> </nav> #toggle:checked + nav .menu { display: block; }
  • 40. Lessons learned Working in web performance is as much about educating as optimizing. Choose your battles http://sapdesignguild.org http://josefbrandenburg.com
  • 41. Thank You (we’re around all week) Andy: @andydavies hello@andydavies.me Tobias: @tbaldauf kontakt@tobias-baldauf.de Office Hours: 12:30 Thursday