Slide 1
Slide 1 text
The Good, the
Bad, and the
Ugly
....of the HTTP Archive
Slide 2
Slide 2 text
Robin
Osborne
Slide 3
Slide 3 text
Dean
Hume
Slide 4
Slide 4 text
The Talk
Slide 5
Slide 5 text
HTTP
Archive
Slide 6
Slide 6 text
HTTP Archive
● Started in November 2011
● Contains over 300K URLs
● Both Mobile and Desktop sites
Slide 7
Slide 7 text
HTTP Archive
● Download as CSV or MySql archive
● Page Data
● Request Data
Slide 8
Slide 8 text
Great on its own..
HTTP Archive
Slide 9
Slide 9 text
+
Google
BigQuery
HTTP Archive
Slide 10
Slide 10 text
= Awesome!
Slide 11
Slide 11 text
SELECT AVG(PageSpeed) as AvgPageSpeed
FROM [httparchive:runs.2014_07_15_pages]
Slide 12
Slide 12 text
http://bigqueri.es
Slide 13
Slide 13 text
Good BAD
UGLY
Slide 14
Slide 14 text
The Criteria
Slide 15
Slide 15 text
The Criteria
● The Alexa top 100 sites have been
excluded from this list
Slide 16
Slide 16 text
The Criteria
● The Alexa top 100 sites have been
excluded from this list
● The site needs to be usable and
modern
Slide 17
Slide 17 text
The Criteria
● The Alexa top 100 sites have been
excluded from this list
● The site needs to be usable and
modernmodern(ish)
Slide 18
Slide 18 text
The Criteria
● The Alexa top 100 sites have been
excluded from this list
● The site needs to be usable and
modern
● Follows best practices
modern(ish)
Slide 19
Slide 19 text
The Criteria
● The Alexa top 100 sites have been
excluded from this list
● The site needs to be usable and
modern
● Follows best practices
● Not a porn site
modern(ish)
Slide 20
Slide 20 text
The Criteria
● The Alexa top 100 sites have been
excluded from this list
● The site needs to be usable and
modern
● Follows best practices
● Not a porn site (sorry)
modern(ish)
Slide 21
Slide 21 text
The Criteria
● The Alexa top 100 sites have been
excluded from this list
● The site needs to be usable and
modern
● Follows best practices
● Not a porn site (sorry)
● Bonus points for a responsive site
modern(ish)
Slide 22
Slide 22 text
easy?
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
BEWARE!
Here be dragons!
Slide 26
Slide 26 text
Key takeaway
● Super fast holding pages
Http Archive + Big Query is a great
way to find:
Slide 27
Slide 27 text
Key takeaway
● Super fast holding pages
● Super fast porn sites
Http Archive + Big Query is a great
way to find:
Slide 28
Slide 28 text
80%
20%
Slide 29
Slide 29 text
How we measured
Slide 30
Slide 30 text
How we measured
Fully Loaded
Slide 31
Slide 31 text
Fully
loaded
A time measurement that
includes any activity that is
triggered by JavaScript after
the main page loads.
Slide 32
Slide 32 text
How we measured
Page Speed
Fully Loaded
Slide 33
Slide 33 text
Page
Speed
The PageSpeed Score (0-
100) is calculated on a
number of factors.
A high score is good.
A low score is not so good.
Slide 34
Slide 34 text
How we measured
Speed Index
Page Speed
Fully Loaded
Slide 35
Slide 35 text
Speed
Index
Speed Index measures how
complete a page is during
various points in page load
A low score is good.
A high score is not so good.
Slide 36
Slide 36 text
The Good
Slide 37
Slide 37 text
SELECT url, pagespeed, SpeedIndex,
fullyLoaded, rank
FROM [httparchive:runs.latest_pages]
WHERE (rank is not null) and (speedindex is
not null) and pagespeed > 80
ORDER BY rank asc, pagespeed desc,
speedindex asc limit 1000 ;
Slide 38
Slide 38 text
Filament Group
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
filament group
● 8-person development studio based all
around the US
● Develop a wide range of sites and apps
● Responsive website
Slide 41
Slide 41 text
100 Page Speed
A Grade YSlow
Slide 42
Slide 42 text
What is your SECRET?
Slide 43
Slide 43 text
“How we load assets matters
just as much as how many
assets we’re loading. We
focus on perceived
performance”
Slide 44
Slide 44 text
Reduce the
Critical Path
Slide 45
Slide 45 text
tools
Slide 46
Slide 46 text
tools
Grunt-CriticalCSS
Slide 47
Slide 47 text
tools
LoadCss
Grunt-CriticalCSS
Slide 48
Slide 48 text
LoadJS
LoadCss
Grunt-CriticalCSS
tools
Slide 49
Slide 49 text
KEY TAKEAWAYS
Slide 50
Slide 50 text
KEY TAKEAWAYS
REDUCE THE CRITICAL PATH
Slide 51
Slide 51 text
KEY TAKEAWAYS
REDUCE THE CRITICAL PATH
FOCUS ON PERCEIVED
PERFORMANCE
Slide 52
Slide 52 text
nature.com
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
nature.com
● Scientific journal for research across
a wide range of fields
● Part of the Macmillan publishing
group
● Responsive website
● Based in London, UK
Slide 55
Slide 55 text
86 Page Speed
A Grade YSlow
Slide 56
Slide 56 text
Explain
Slide 57
Slide 57 text
“ We try to stick to the 14
rules as outlined in
High Performance
Web Sites ”
Slide 58
Slide 58 text
How ?
Slide 59
Slide 59 text
“Monitoring is key for us”
Slide 60
Slide 60 text
Showslow.com
“Monitoring is key for us”
Slide 61
Slide 61 text
StatsD & Graphite
Showslow.com
“Monitoring is key for us”
Slide 62
Slide 62 text
KEY TAKEAWAYS
Slide 63
Slide 63 text
KEY TAKEAWAYS
STICK TO BASICS
Slide 64
Slide 64 text
KEY TAKEAWAYS
STICK TO BASICS
MONITOR
Slide 65
Slide 65 text
Zomato.com
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
Online restaurant guide -
Based in New Delhi, India -
13 countries in 5 languages -
Responsive site -
zomato.xxx -
Slide 68
Slide 68 text
88 Page Speed
C Grade YSlow
Slide 69
Slide 69 text
What is your SECRET?
Slide 70
Slide 70 text
“A blank page is always
going to be the fastest,
start from there. Add only
what is needed.”
Slide 71
Slide 71 text
Heavy use of caching
Slide 72
Slide 72 text
KEY TAKEAWAYS
Slide 73
Slide 73 text
KEY TAKEAWAYS
START SMALL
Slide 74
Slide 74 text
KEY TAKEAWAYS
START SMALL
CACHE BIG
Slide 75
Slide 75 text
Envato
Marketplaces
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
envato marketplaces
➔ Specializes in online
marketplaces
➔ Based in Melbourne, Australia
➔ Themeforest, CodeCanyon
Slide 78
Slide 78 text
85 Page Speed
B Grade YSlow
Slide 79
Slide 79 text
What is your SECRET?
Slide 80
Slide 80 text
“Stick to basics and aim
for low hanging fruit.”
Slide 81
Slide 81 text
“ We think about
performance from the
earliest design stage. ”
Slide 82
Slide 82 text
If users add their own images
you
need a performance strategy
Slide 83
Slide 83 text
KEY TAKEAWAYS
Slide 84
Slide 84 text
KEY TAKEAWAYS
CONSIDER USER
GENERATED CONTENT
Slide 85
Slide 85 text
KEY TAKEAWAYS
CONSIDER USER
GENERATED CONTENT
STICK TO BASICS
Slide 86
Slide 86 text
The Bad
Slide 87
Slide 87 text
SELECT url, visualComplete, fullyLoaded,
reqTotal, bytesTotal,numdomelements
FROM [httparchive:runs.latest_pages] as
pages
ORDER BY visualcomplete DESC, fullyloaded
DESC;
Slide 88
Slide 88 text
welovefashion.it
Slide 89
Slide 89 text
welovefashion.it
➔ Visually complete in 20 secs
Slide 90
Slide 90 text
welovefashion.it
➔ Visually complete in 20 secs
➔ Fully loaded in 30 secs
Slide 91
Slide 91 text
welovefashion.it
➔ Visually complete in 20 secs
➔ Fully loaded in 30 secs
➔ 3.5 MB of resources are
downloaded
Slide 92
Slide 92 text
One simple
change
Slide 93
Slide 93 text
Enable
Compression
Slide 94
Slide 94 text
3.5 MB
Slide 95
Slide 95 text
2.5 MB
Slide 96
Slide 96 text
gu-japan.com
Slide 97
Slide 97 text
gu-japan.com
➔ 15.5 MB of images are loaded
Slide 98
Slide 98 text
gu-japan.com
➔ 15.5 MB of images are loaded
➔ Visually complete in 16 secs
Slide 99
Slide 99 text
gu-japan.com
➔ 15.5 MB of images are loaded
➔ Visually complete in 16 secs
➔ Fully loaded in 35 secs
Slide 100
Slide 100 text
gu-japan.com
➔ 15.5 MB of images are loaded
➔ Visually complete in 16 secs
➔ Fully loaded in 35 secs
➔ 717 HTTP requests
Slide 101
Slide 101 text
One simple
change
Slide 102
Slide 102 text
Lose the
carousels
Slide 103
Slide 103 text
1%
Slide 104
Slide 104 text
shouldiuseacarousel.com
Slide 105
Slide 105 text
15 MB
Slide 106
Slide 106 text
1.5 MB
Slide 107
Slide 107 text
gamepedia.com
Slide 108
Slide 108 text
10MB of images
gamepedia.com
Slide 109
Slide 109 text
10MB of images
130 Resources
gamepedia.com
Slide 110
Slide 110 text
10MB of images
130 Resources
Fully loaded in 15 secs
gamepedia.com
Slide 111
Slide 111 text
One change?
Slide 112
Slide 112 text
One change?
Serve scaled
images
Slide 113
Slide 113 text
10 MB
Slide 114
Slide 114 text
6 MB
Slide 115
Slide 115 text
The Ugly
Slide 116
Slide 116 text
SELECT url, visualComplete, fullyLoaded,
reqTotal, bytesTotal,numdomelements
FROM [httparchive:runs.latest_pages] as
pages
ORDER BY visualcomplete DESC, fullyloaded
DESC;
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
44
Slide 119
Slide 119 text
sailboatlistings.com
● Fully loaded in 18 secs
Slide 120
Slide 120 text
sailboatlistings.com
● Fully loaded in 18 secs
● Visually complete in 20 secs
Slide 121
Slide 121 text
sailboatlistings.com
● Fully loaded in 18 secs
● Visually complete in 20 secs
● 3 MB total
Slide 122
Slide 122 text
sailboatlistings.com
● Fully loaded in 18 secs
● Visually complete in 20 secs
● 3 MB total
● 580 requests in total
Slide 123
Slide 123 text
sailboatlistings.com
● Fully loaded in 18 secs
● Visually complete in 20 secs
● 3 MB total
● 580 requests in total
● 535 image requests
Slide 124
Slide 124 text
sailboatlistings.com
● Fully loaded in 18 secs
● Visually complete in 20 secs
● 3 MB total
● 580 requests in total
● 535 image requests
● 14872 dom elements
Slide 125
Slide 125 text
colorsbycherry.com
Slide 126
Slide 126 text
14
Slide 127
Slide 127 text
colorsbycherry.com
Visually complete in 30 secs
Slide 128
Slide 128 text
colorsbycherry.com
Fully loaded in 1 min
Visually complete in 30 secs
Slide 129
Slide 129 text
colorsbycherry.com
34 MB of resources
Fully loaded in 1 min
Visually complete in 30 secs
Slide 130
Slide 130 text
colorsbycherry.com
34 MB of resources
Fully loaded in 1 min
Visually complete in 30 secs
say what!?
Slide 131
Slide 131 text
Just.
Plain.
Rude.
Slide 132
Slide 132 text
No content
Slide 133
Slide 133 text
11
Slide 134
Slide 134 text
callofduty.com
Slide 135
Slide 135 text
callofduty.com
15.2 MB of resources
callofduty.com
Slide 136
Slide 136 text
callofduty.com
15.2 MB of resources
Visually complete in 1.3 secs
callofduty.com
Slide 137
Slide 137 text
callofduty.com
15.2 MB of resources
Visually complete in 1.3 secs
Fully loaded in 13 secs
callofduty.com
Slide 138
Slide 138 text
callofduty.com
15.2 MB of resources
Visually complete in 1.3 secs
Fully loaded in 13 secs
Page Speed score of 11
callofduty.com
Slide 139
Slide 139 text
Round Up
Slide 140
Slide 140 text
DO THIS
Stick to the basics
Monitor
Start with the minimum
Slide 141
Slide 141 text
don’t do this
Serve unscaled images
Use bloated carousels
Forget compression
Slide 142
Slide 142 text
definitely don’t do this
Serve humungous pages
Use non-streaming videos
Serve unoptimized images
Slide 143
Slide 143 text
Tools
Slide 144
Slide 144 text
Tools
psi
Slide 145
Slide 145 text
psi
● Page Speed Insights
● Get PSI reporting from the
command line
● On GitHub, by Addy Osmani
● Can be hooked into a build
process via the Gulp or Grunt
plugins
Slide 146
Slide 146 text
No content
Slide 147
Slide 147 text
Tools
psi
ngrok
Slide 148
Slide 148 text
ngrok
● Creates a tunnel to localhost
● Request inspection
Slide 149
Slide 149 text
No content
Slide 150
Slide 150 text
@rposbo
@deanohume
Slide 151
Slide 151 text
Thank you