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
Please Don’t Touch the Slow Parts V3
[email protected]://www.ideato.it/
[email protected]://federico.galassi.net/
slideshare.net/fgalassi
twitter.com/federicogalassi
faster
faster WEB
Faster == Better?
We have to wait
... All the time
“Savings in timefeels like simplicity”
“Time is the only commodity that matters”
Psychology of webperformance
http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/
5-8SECONDS
Faster web, more clicks
http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
Faster web, better SEO
http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
Faster web is hot
Say web, Say browser
How browsers work
User clicks on a link
Browser resolves domain name
www.google.com
72.14.234.104
DNS
UDP
domain
Browser connects to web server
TCP/IP
72.14.234.104
WEB
domain connect
Browser sends arequest for a page
HTTP
GET /language_tools?hl=enHost: www.google.com
domain connect send
WEB
Browser receives a response with the page
HTTP
200 OK
domain connect send receive
WEB
Browser renders the new page
domain connect send receive render
Rendering is complexrender
Rendering isloading resources
render
css
img
css
img
javascript
javascript
flash
Each resource is another web request
render
Requests areprocessed in parallel
render
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
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
Rendering is paintingrender
- root - body - block - inline: This is - inline: a Text
RENDER TREEThis is
a Text
repaint
Rendering is execution
mouse moved mouse pressed mouse released key pressed key released
render
INPUT
OS
EVENT QUEUE
Execution in one threadmouse moved
mouse pressed mouse released key pressed key released
render
EVENT QUEUE
Javascript Execution
NativeBrowserAction
Once upon a time...
Few resources
Static pages
Less javascript
Most time on serverdomain connect send receive render
Solution is faster serversidedomain connect send receive render
Ajax revolution
Ajax revolutionperformance
Page updating
One time(classic) WEB
On demand(ajax) WEB
... later ...
Page updating
Continuous(polling) WEB
Page updating
Push(comet) WEB
Page updating
Most time on browserdomain connect send receive render
Golden rule of faster web
80% of the end user response time is spent
on the front-end
Golden rule of faster web
Start there.
Why webslow parts?
Easy to understand
Each part has its rules
Which parts are slow?
Network is slow
Less stuffFewer requests
Concatenate js/cssCss spritesInline images
Too many resources
Less stuffCache requests
Expires headerRevving FilesExternal js/cssRemove etags
Resourcesre-downloaded
Smaller stuffCompress responses
Content-EncodingGzipDeflate
Resources are too big
Smaller stuffMinify responses
js, css, htmlremove formattingremove commentsoptimize imagesuse tools
Resources are too big
Closer stuffUse a CDN
Resources are too far
reduce latency
Closer stuffFlush document early
Server can be slow
Chunked encoding
Browser is slow
Scripts block loading
javascript
css
javascript
img
flash
document.writelocation.hrefscripts order
html
img
css
Put scripts at bottom
javascript
javascript
img
img
flash
html
css
Unloaded stylesblock page rendering
html
img
img
flash
css
html
img
img
flash
Put styles at top
Indeed ... scripts block everything
Load scripts asynchronously
var scriptTag = document.createElement("script")scriptTag.src = "http://www.example.org/js/lib.js"
document.getElementsByTagName("head")[0] .appendChild(scriptTag)
Yield with timers
// doSomethingLong() is too slow, split it
doSomething()
setTimeout(function() { doSomethingElse()}, 50)
Browser I/Ois slow
Browser I/Ois slow
DOM
DoG
is aliveDOM
Collections to arraysCache values to variables
DOM access triggers a live query
triggers eventsDOM
Event Delegation
Events execute JS code
Reflow is expensiveBatch DOMchanges “offline”
Cloned elementDocument FragmentDisplay: none
http://www.youtube.com/watch?v=ZTnIxIA5KGw
Reflow is expensiveBatch CSSchanges
One class to rule em allDynamic style property
http://www.youtube.com/watch?v=ZTnIxIA5KGw
Inefficient element location
CSS are bottom-up!
Be specific on the “right”
#header li a direction
Inefficient element location
Go native in DOM
getElementByIdXpathquerySelectorAll
Rules pitfalls
Panta reiBrowserscope
http://www.browserscope.org/
Expect the unexpected
empty cacheno compression
Know your users
Track user capabilities
Conflicting rules
DNS vs Parallel
Inline vs External
Concatenated vs Reuse
All that glittersis not gold
Everything is atradeoff
performance bringscomplexity
know the rules but...
leave complexityto computers
use librariesduring development
Use toolsat build time
http://code.google.com/speed/tools.html
Code smartat run time
http://www.slideshare.net/ajaxexperience2009/david-wei-and-changhao-jiang-presentation
AdaptiveOptimization
http://abetterbrowser.org/
Questions?