please dont touch-3.6-jsday
DESCRIPTION
More and more often we talks about optimizing the server-side software, but thetrue optimization must be done on the client where 80% of the time is spentby users. The talk explains the main techniques to optimizeWeb site using HTTP protocols and rules to the base but rarelyused.TRANSCRIPT
Please Don’t Touch the Slow Parts V3.6
[email protected]://www.ideato.it/
[email protected]://www.cleancode.it/
Approved by Steve Souders
faster
WEBfaster
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
domaindomain
Browser connects to web server
TCP/IP
72.14.234.104
WEB
domaindomain connectconnect
Browser sends arequest for a page
HTTP
GET /language_tools?hl=enHost: www.google.com
domaindomain connectconnect sendsend
WEB
Browser receives a response with the page
HTTP
200 OK
domaindomain connectconnect sendsend receivereceive
WEB
Browser renders the new page
domaindomain connectconnect sendsend receivereceive renderrender
Rendering is complexrenderrender
Rendering isloading resources
renderrender
csscsscsscss
imgimgimgimg
csscsscsscss
imgimgimgimg
javascriptjavascriptjavascriptjavascript
javascriptjavascriptjavascriptjavascript
flashflashflashflash
Each resource is another web request
renderrender
Requests areprocessed in parallel
renderrender
Rendering is parsingrenderrender
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 layoutrenderrender
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 paintingrenderrender
- root - body - block - inline: This is - inline: a Text
RENDER TREEThis is
a Text
repaint
Rendering is execution
mouse movedmouse moved mouse pressedmouse pressed mouse releasedmouse released key pressedkey pressed key releasedkey released
renderrender
INPUT
OS
EVENT QUEUE
Execution in one thread
mouse movedmouse moved mouse pressedmouse pressed mouse releasedmouse released key pressedkey pressed key releasedkey released
renderrender
EVENT QUEUE
JavascriptJavascript
ExecutionExecution
NativeNativeBrowserBrowserActionAction
Once upon a time...
Few resources
Static pages
Less javascript
Most time on serverdomaindomain connectconnect sendsend receivereceive renderrender
Solution is faster serverside
domaindomain connectconnect sendsend receivereceive renderrender
Ajax revolution
Ajax revolution
performance
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 browserdomaindomain connectconnect sendsend receivereceive renderrender
Golden rule of faster web
80% of the end user response time is spent
on the front-end
Start there.
Golden rules of faster web
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
javascriptjavascriptjavascriptjavascript
csscsscsscss
javascriptjavascriptjavascriptjavascript
imgimgimgimg
flashflashflashflash
document.writelocation.hrefscripts order
htmlhtmlhtmlhtml
imgimgimgimg
csscsscsscss
Put scripts at bottom
javascriptjavascriptjavascriptjavascript
javascriptjavascriptjavascriptjavascript
imgimgimgimg
imgimgimgimg
flashflashflashflash
htmlhtmlhtmlhtml
csscsscsscss
Unloaded stylesblock page rendering
htmlhtmlhtmlhtml
imgimgimgimg
imgimgimgimg
flashflashflashflash
csscsscsscss
htmlhtmlhtmlhtml
imgimgimgimg
imgimgimgimg
flashflashflashflash
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 alive
Collections to arraysCache values to variables
DOM access triggers a live query
DOM
triggers events
Event Delegation
Events execute JS code
DOM
Reflow is expensive
Batch DOMchanges “offline”
Cloned elementDocument FragmentDisplay: none
Reflow is expensive
Batch CSS changes
One class to rule em allDynamic style property
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 usersTrack user capabilities
Conflicting rulesDNS vs ParallelInline vs ExternalConcatenated 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/
9
Questions?
Rate us on joind.inhttp://joind.in/3364
12, 14 May - Verona
www.phpday.it
27, 28 June - Florence
Come and see“don't touch the... mobile parts“
www.bettersoftware.it