Talk from The Web Is in Cardiff, October 2014 exploring the business case for web performance, and some of the underlying factors that can make sites slow
The Web is Too Slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
Too many sites are too slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
and it’s getting worse!
Only 12% of the top 100 (US) retail sites rendered
feature content in less than 3 seconds. !
!
Year-on-year the median page has slowed down
by 23%
Tammy Everts - Radware State of the Union Fall 2014
“We’re not being deliberate about performance”!
Tim Kadlec
https://www.flickr.com/photos/lukew/7382528728
But only if we build it that way…
http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is+for+Everyone.jpg
Reader panel (3,000 people) rated speed (fast page
load time) as their second most important driver!
!
Speed had the highest percentage of people saying it
was VERY important to them
increased conversions by 10%
Shaved 1 second off median home page time!
6 seconds off 98th percentile
http://www.slideshare.net/cliffcrocker/velocity-ny-how-to-measure-revenue-in-milliseconds
We’re more tolerant as we get further into purchase funnels
Less Tolerant
More Tolerant
Covert HTML …
html
head
meta name=viewport content=width=device-width,initial-scale=1.0
link href=styles.css rel=stylesheet
script src=script.js/script
titleHTML Example/title
/head
body
h1Title/h1
pSome introductory text and picture! img src=image.jpg//p
/body
/html
… into Document Object Model (DOM)
html
head body
meta link script title h1 p
img
Convert CSS …
body { font-size: 16px }
h1 { text-decoration: underline}
p { font-weight: bold }
p span { color: #000 }
img { border: 1px solid #ccc }
… into CSS Object Model (CSSOM)
body
h1 p
span
font-size: 16px
font-size: 16px
text-decoration: underline
font-size: 16px
font-weight: bold
font-size: 16px
font-weight: bold
color: #000
img
font-size: 16px
border: 1px solid #ccc
Combine DOM and CSSOM to build Render Tree
body
h1 p
img
font-size: 16px
text-decoration: underline
font-size: 16px
font-weight: bold
font-size: 16px
font-weight: bold
border: 1px solid #ccc
But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!
Tree
JavaScript Layout Paint
But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!
Tree
JavaScript
Layout Paint
JavaScript blocks DOM construction!
CSSOM construction blocks JavaScript execution
HTML
CSS
DOM
CSSOM
Render!
Tree
JavaScript Layout Paint
HTML
CSS
DOM
CSSOM
Render!
Tree
Fonts and background
images discovered
when render tree builds
JavaScript Layout Paint