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.
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
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
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
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
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 JavaScript blocks DOM construction! CSSOM construction blocks JavaScript execution