Measuring website
performance
Takis Bouyouris
Web Developer @ Nevma
WordPress Greek Community Meetup 5
Wed 23/09/2015
Measuring website
performance
Takis Bouyouris
Web Developer @ Nevma
WordPress Greek Community Meetup 5
Wed 23/09/2015
Slide 2
Slide 2 text
Nice to meet you
My name is Takis Bouyouris
web developer @ Nevma
Nice to meet you
My name is Takis Bouyouris
web developer @ Nevma
Slide 3
Slide 3 text
Today
Discuss the different aspects of
measuring website performance
with a focus on page load times
Today
Discuss the different aspects of
measuring website performance
with a focus on page load times
Slide 4
Slide 4 text
Contents
1. What it is
2. How to measure it
3. Tools we can use
*-_BUT NOT_-*
How to achieve it
Contents
1. What it is
2. How to measure it
3. Tools we can use
*-_BUT NOT_-*
How to achieve it
Slide 5
Slide 5 text
What is performance?
What is performance?
Slide 6
Slide 6 text
Performance means to be fast!
Performance means to be fast!
`
Performance requires the
- completion of a
user request in a
- fast (or perceived fast)
timeframe with a
- reliable and predictable
outcome
Performance requires the
- completion of a
user request in a
- fast (or perceived fast)
timeframe with a
- reliable and predictable
outcome
Slide 9
Slide 9 text
Performance is important because
1. Fast is good
saves time
saves resources
keeps users happy
Slide 10
Slide 10 text
Performance is important because
2. Fast means more conversions
whatever that means for you
be it sales, pageviews, emails etc
Performance is not always real,
sometimes it is just
"perceived performance"
measurable performance
! ==
UI/UX performance
Slide 15
Slide 15 text
eg
progress indicators
Slide 16
Slide 16 text
eg
progressive JPEG
Slide 17
Slide 17 text
But let's talk about
"real" website performance
But let's talk about
"real" website performance
Slide 18
Slide 18 text
Three phases in every HTTP request
1 2 3(a, b)
Server -> Network -> Browser
Three phases in every HTTP request
1 2 3(a, b)
Server -> Network -> Browser
Slide 19
Slide 19 text
Phase 1 - Server performance
System
Database
Filesystem
CMS
Custom code
Phase 1 - Server performance
System
Database
Filesystem
CMS
Custom code
Slide 20
Slide 20 text
Phase 2 - Network performance
How the website data will reach
the browser as fast as possible
"Make fewer, faster requests"
Phase 2 - Network performance
How the website data will reach
the browser as fast as possible
"Make fewer, faster requests"
Slide 21
Slide 21 text
Phase 3 - Browser / part-a
until page is loaded
Phase 3 - Browser / part-a
until page is loaded
'DOMContentLoaded',
'load'
events
'DOMContentLoaded',
'load'
events
Slide 22
Slide 22 text
Phase 3 - Browser / part-b
after page has loaded
Phase 3 - Browser / part-b
after page has loaded
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Today we are talking about part-a
"Page load time "
a web developer's headache
Today we are talking about part-a
"Page load time "
a web developer's headache
Slide 25
Slide 25 text
Tools to use
Browser Developer Tools > Net tab
Firefox, Chrome, (Opera),
Safari, even IE
Tools to use
Browser Developer Tools > Net tab
Firefox, Chrome, (Opera),
Safari, even IE
Slide 26
Slide 26 text
Chrome > Network tab
Chrome > Network tab
Slide 27
Slide 27 text
Firefox/Firebug > Net tab
Firefox/Firebug > Net tab
Slide 28
Slide 28 text
Internet Explorer > Network
Internet Explorer > Network
Slide 29
Slide 29 text
Browser tools are -very- good
for undestanding performance during
development, but not nearly enough
to reliably measure it
One relies on their machine's
conditions and their own perception
of understanding performance
Browser tools are -very- good
for undestanding performance during
development, but not nearly enough
to reliably measure it
One relies on their machine's
conditions and their own perception
of understanding performance
Sit tight
this might take some time
it's my favourite tool
Sit tight
this might take some time
it's my favourite tool
Slide 33
Slide 33 text
Why Webpagetest.org
- Real machines
- Real browsers
- Real networks
- In as stable and uniform
conditions as possible
Why Webpagetest.org
- Real machines
- Real browsers
- Real networks
- In as stable and uniform
conditions as possible
Slide 34
Slide 34 text
Why Webpagetest.org
- Honest
- Qualitative
- Most complete in features
(cities, devices, networks, options)
- Open source
Why Webpagetest.org
- Honest
- Qualitative
- Most complete in features
(cities, devices, networks, options)
- Open source
Slide 35
Slide 35 text
Overview
Overview
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
And this was only desktop
browser testing
Wanna go mobile?
And this was only desktop
browser testing
Wanna go mobile?
To sum up
- choose your tool
- measure your performance
- make fewer requests
- make the blue and purple lines
happen quickly as possible
To sum up
- choose your tool
- measure your performance
- make fewer requests
- make the blue and purple lines
happen quickly as possible
Slide 50
Slide 50 text
Name a website
and let's test it...
Name a website
and let's test it...
Slide 51
Slide 51 text
Thank you for listening!
Questions?
Thank you for listening!
Questions?
Slide 52
Slide 52 text
WordPress Greek Community / WPGreece
https://facebook.com/groups/WordPressGreekCommunity/
https://twitter.com/wordpressgrcomm/
http://www.wpgreece.org/
http://www.wpgc.gr/
WordPress Greek Community / WPGreece
https://facebook.com/groups/WordPressGreekCommunity/
https://twitter.com/wordpressgrcomm/
http://www.wpgreece.org/
http://www.wpgc.gr/