SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
3.
But I’m frustrated…
http://www.flickr.com/photos/sybrenstuvel/2468506922
4.
The Web is Too Slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
5.
Too many sites are too slow
http://www.flickr.com/photos/the_justified_sinner/3507390621
6.
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
7.
“We’re not being deliberate about performance”!
https://www.flickr.com/photos/lukew/7382528728
Tim Kadlec
8.
But only if we build it that way…
http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is+for+Everyone.jpg
9.
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
11.
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
12.
More tolerant as we get further in purchase funnels
Less Tolerant
More Tolerant
13.
sometimes we get suspicious if something’s too fast
14.
Design is all about finding solutions within constraints,!
if there were no constraints, it’s not design — it’s art.!
Matias Duarte
“
”
15.
http://www.flickr.com/photos/communityfriend/2342578485
Embrace those constraints… set a performance budget
16.
Setting a budget
An event that matters to the visitor!
within a set time!
under defined network conditions
17.
“Usable within 10 seconds on GPRS connection”!
BBC News
48.
… 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
49.
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
50.
Render the Page
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout Paint
51.
But what about JavaScript?
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript
52.
But what about JavaScript?
JavaScript blocks DOM construction!
CSSOM construction blocks JavaScript execution
HTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript
53.
Fonts and background
images discovered
when render tree buildsHTML
CSS
DOM
CSSOM
Render!
Tree
Layout PaintJavaScript
55.
Use font foundries that prioritise visitor experience
http://www.flickr.com/photos/splorp/4951916342
56.
Some interesting ideas that may help
font-timeout: <time>;!
font-desirability: [ optional | mandatory ];
https://github.com/igrigorik/css-font-timeout
57.
https://www.flickr.com/photos/christian_bachellier/582457911
Server push in HTTP/2 might help too