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”!
https://www.flickr.com/photos/lukew/7382528728
Tim Kadlec
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%
http://www.slideshare.net/cliffcrocker/velocity-ny-how-to-measure-revenue-in-milliseconds
Shaved 1 second off median home page time!
6 seconds off 98th percentile
More tolerant as we get further in purchase funnels
Less Tolerant
More Tolerant
… 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
border: 1px solid #ccc
font-size: 16px
font-weight: bold
But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript
But what about JavaScript?
JavaScript blocks DOM construction!
CSSOM construction blocks JavaScript execution
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript
Fonts and background
images discovered
when render tree buildsHTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript