please don't touch the slow parts v3
DESCRIPTION
"Please don't touch the slow parts" version 3 given by me at From The Front, Camp Nou Edition on March 18th 2011 in Modena. It's about improving web applications speed. Based on Steve Souders work. Compared to V2, I improved and expanded on how browsers work and how to optimize dom/css Also http://www.ideato.it/ http://federico.galassi.net/ http://www.stevesouders.com/ http://www.bettersoftware.it/ http://www.phpday.it/ http://fromthefront.it/ Follow me on Twitter! https://twitter.com/federicogalassiTRANSCRIPT
![Page 1: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/1.jpg)
Please Don’t Touch the Slow Parts V3
[email protected]://www.ideato.it/
[email protected]://federico.galassi.net/
![Page 2: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/2.jpg)
slideshare.net/fgalassi
twitter.com/federicogalassi
![Page 3: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/3.jpg)
![Page 4: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/4.jpg)
faster
![Page 5: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/5.jpg)
faster WEB
![Page 6: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/6.jpg)
Faster == Better?
![Page 7: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/7.jpg)
We have to wait
![Page 8: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/8.jpg)
... All the time
![Page 9: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/9.jpg)
“Savings in timefeels like simplicity”
![Page 10: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/10.jpg)
“Time is the only commodity that matters”
![Page 11: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/11.jpg)
Psychology of webperformance
http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/
5-8SECONDS
![Page 12: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/12.jpg)
Faster web, more clicks
http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
![Page 13: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/13.jpg)
Faster web, better SEO
http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
![Page 14: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/14.jpg)
Faster web is hot
![Page 15: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/15.jpg)
Say web, Say browser
![Page 16: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/16.jpg)
How browsers work
![Page 17: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/17.jpg)
User clicks on a link
![Page 18: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/18.jpg)
Browser resolves domain name
www.google.com
72.14.234.104
DNS
UDP
domain
![Page 19: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/19.jpg)
Browser connects to web server
TCP/IP
72.14.234.104
WEB
domain connect
![Page 20: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/20.jpg)
Browser sends arequest for a page
HTTP
GET /language_tools?hl=enHost: www.google.com
domain connect send
WEB
![Page 21: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/21.jpg)
Browser receives a response with the page
HTTP
200 OK
domain connect send receive
WEB
![Page 22: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/22.jpg)
Browser renders the new page
domain connect send receive render
![Page 23: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/23.jpg)
Rendering is complexrender
![Page 24: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/24.jpg)
Rendering isloading resources
render
css
img
css
img
javascript
javascript
flash
![Page 25: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/25.jpg)
Each resource is another web request
render
![Page 26: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/26.jpg)
Requests areprocessed in parallel
render
![Page 27: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/27.jpg)
Rendering is parsingrender
HTML
CSS
DOM TREE
STYLE STRUCT
<html> <head> <title>Title</title> </head> <body> <div>This is a Text</div> <div id="hidden">Hidden</div>
body { padding: 0;}#hidden { display: none;}
- document - elem: html - elem: head - elem: title - text: Title - elem: body - elem: div - text: This is a Text - elem: div - attr: id=hidden - text: Hidden
- selector: body rule: display: block # default css padding-bottom: 0px # site css padding-left: 0px # site css padding-right: 0px # site css padding-top: 0px # site css- selector: hidden rule: display: none # site css
![Page 28: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/28.jpg)
Rendering is layoutrender
DOM TREE
STYLE STRUCT
- document - elem: html - elem: head - elem: title - text: Title - elem: body - elem: div - text: This is a Text - elem: div - attr: id=hidden - text: Hidden
- selector: body rule: display: block # default css padding-bottom: 0px # site css padding-left: 0px # site css padding-right: 0px # site css padding-top: 0px # fsite css- selector: hidden rule: display: none # site css
- root - body - block - inline: This is - inline: a Text
RENDER TREE
reflow
![Page 29: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/29.jpg)
Rendering is paintingrender
- root - body - block - inline: This is - inline: a Text
RENDER TREEThis is
a Text
repaint
![Page 30: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/30.jpg)
Rendering is execution
mouse moved mouse pressed mouse released key pressed key released
render
INPUT
OS
EVENT QUEUE
![Page 31: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/31.jpg)
Execution in one threadmouse moved
mouse pressed mouse released key pressed key released
render
EVENT QUEUE
Javascript Execution
NativeBrowserAction
![Page 32: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/32.jpg)
Once upon a time...
Few resources
Static pages
Less javascript
![Page 33: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/33.jpg)
Most time on serverdomain connect send receive render
![Page 34: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/34.jpg)
Solution is faster serversidedomain connect send receive render
![Page 35: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/35.jpg)
Ajax revolution
![Page 36: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/36.jpg)
Ajax revolutionperformance
![Page 37: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/37.jpg)
Page updating
One time(classic) WEB
![Page 38: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/38.jpg)
On demand(ajax) WEB
... later ...
Page updating
![Page 39: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/39.jpg)
Continuous(polling) WEB
Page updating
![Page 40: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/40.jpg)
Push(comet) WEB
Page updating
![Page 41: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/41.jpg)
Most time on browserdomain connect send receive render
![Page 42: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/42.jpg)
Golden rule of faster web
80% of the end user response time is spent
on the front-end
![Page 43: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/43.jpg)
Golden rule of faster web
Start there.
![Page 44: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/44.jpg)
Why webslow parts?
![Page 45: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/45.jpg)
Easy to understand
![Page 46: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/46.jpg)
Each part has its rules
![Page 47: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/47.jpg)
Which parts are slow?
![Page 48: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/48.jpg)
Network is slow
![Page 49: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/49.jpg)
Less stuffFewer requests
Concatenate js/cssCss spritesInline images
Too many resources
![Page 50: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/50.jpg)
Less stuffCache requests
Expires headerRevving FilesExternal js/cssRemove etags
Resourcesre-downloaded
![Page 51: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/51.jpg)
Smaller stuffCompress responses
Content-EncodingGzipDeflate
Resources are too big
![Page 52: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/52.jpg)
Smaller stuffMinify responses
js, css, htmlremove formattingremove commentsoptimize imagesuse tools
Resources are too big
![Page 53: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/53.jpg)
Closer stuffUse a CDN
Resources are too far
reduce latency
![Page 54: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/54.jpg)
Closer stuffFlush document early
Server can be slow
Chunked encoding
![Page 55: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/55.jpg)
Browser is slow
![Page 56: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/56.jpg)
Scripts block loading
javascript
css
javascript
img
flash
document.writelocation.hrefscripts order
html
img
![Page 57: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/57.jpg)
css
Put scripts at bottom
javascript
javascript
img
img
flash
html
![Page 58: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/58.jpg)
css
Unloaded stylesblock page rendering
html
img
img
flash
![Page 59: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/59.jpg)
css
html
img
img
flash
Put styles at top
![Page 60: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/60.jpg)
Indeed ... scripts block everything
![Page 61: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/61.jpg)
Load scripts asynchronously
var scriptTag = document.createElement("script")scriptTag.src = "http://www.example.org/js/lib.js"
document.getElementsByTagName("head")[0] .appendChild(scriptTag)
![Page 62: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/62.jpg)
Yield with timers
// doSomethingLong() is too slow, split it
doSomething()
setTimeout(function() { doSomethingElse()}, 50)
![Page 63: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/63.jpg)
Browser I/Ois slow
![Page 64: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/64.jpg)
Browser I/Ois slow
DOM
DoG
![Page 65: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/65.jpg)
is aliveDOM
Collections to arraysCache values to variables
DOM access triggers a live query
![Page 66: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/66.jpg)
triggers eventsDOM
Event Delegation
Events execute JS code
![Page 67: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/67.jpg)
Reflow is expensiveBatch DOMchanges “offline”
Cloned elementDocument FragmentDisplay: none
http://www.youtube.com/watch?v=ZTnIxIA5KGw
![Page 68: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/68.jpg)
Reflow is expensiveBatch CSSchanges
One class to rule em allDynamic style property
http://www.youtube.com/watch?v=ZTnIxIA5KGw
![Page 69: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/69.jpg)
Inefficient element location
CSS are bottom-up!
Be specific on the “right”
#header li a direction
![Page 70: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/70.jpg)
Inefficient element location
Go native in DOM
getElementByIdXpathquerySelectorAll
![Page 71: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/71.jpg)
Rules pitfalls
![Page 72: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/72.jpg)
Panta reiBrowserscope
http://www.browserscope.org/
![Page 73: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/73.jpg)
Expect the unexpected
empty cacheno compression
![Page 74: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/74.jpg)
Know your users
Track user capabilities
![Page 75: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/75.jpg)
Conflicting rules
DNS vs Parallel
Inline vs External
Concatenated vs Reuse
![Page 76: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/76.jpg)
All that glittersis not gold
![Page 77: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/77.jpg)
Everything is atradeoff
![Page 78: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/78.jpg)
performance bringscomplexity
![Page 79: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/79.jpg)
know the rules but...
![Page 80: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/80.jpg)
leave complexityto computers
![Page 81: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/81.jpg)
use librariesduring development
![Page 82: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/82.jpg)
Use toolsat build time
http://code.google.com/speed/tools.html
![Page 83: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/83.jpg)
Code smartat run time
http://www.slideshare.net/ajaxexperience2009/david-wei-and-changhao-jiang-presentation
AdaptiveOptimization
![Page 84: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/84.jpg)
http://abetterbrowser.org/
![Page 85: Please Don't Touch the Slow Parts V3](https://reader033.vdocuments.mx/reader033/viewer/2022052505/5558c40bd8b42a995d8b45fb/html5/thumbnails/85.jpg)
Questions?