Please Don’t Touch
the Slow Parts V3.6
francesco.fullone@ideato.it
http://www.ideato.it/
federico.galassi@gmail.com
http:/...
faster
WEBfaster
Faster == Better?
We have to wait
... All the time
“Savings in time
feels like simplicity”
“Time is the only
commodity that matters”
Psychology of web
performance
http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/
5-8
SECONDS
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 a
request for a page
HTTP
GET /language_tools?hl=en
Host: www.google.com
domaindomain connectconnect sendsen...
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 complex
renderrender
Rendering is
loading resources
renderrender
csscss
imgimg
csscss
imgimg
javascriptjavascript
javascriptjavascript
flashfla...
Each resource is
another web request
renderrender
Requests are
processed in parallel
renderrender
Rendering is parsing
renderrender
HTML
CSS
DOM TREE
STYLE STRUCT
<html>
<head>
<title>Title</title>
</head>
<body>
<div>Th...
Rendering is layout
renderrender
DOM TREE
STYLE STRUCT
- document
- elem: html
- elem: head
- elem: title
- text: Title
- ...
Rendering is painting
renderrender
- root
- body
- block
- inline: This is
- inline: a Text
RENDER TREE
This is
a Text
rep...
Rendering is execution
mouse movedmouse moved
mouse pressedmouse pressed
mouse releasedmouse released
key pressedkey press...
Execution in one thread
mouse movedmouse moved
mouse pressedmouse pressed
mouse releasedmouse released
key pressedkey pres...
Once upon a time...
Few resources
Static pages
Less javascript
Most time on server
domaindomain 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 browser
domaindomain 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 web
slow parts?
Easy to understand
Each part has its rules
Which parts are
slow?
Network is slow
Less stuff
Fewer requests
Concatenate js/css
Css sprites
Inline images
Too many
resources
Less stuff
Cache requests
Expires header
Revving Files
External js/css
Remove etags
Resources
re-downloaded
Smaller stuff
Compress responses
Content-Encoding
Gzip
Deflate
Resources are too big
Smaller stuff
Minify responses
js, css, html
remove formatting
remove comments
optimize images
use tools
Resources are too...
Closer stuff
Use a CDN
Resources are too far
reduce latency
Closer stuff
Flush document
early
Server can be slow
Chunked encoding
Browser is slow
Scripts block loading
javascriptjavascript
csscss
javascriptjavascript
imgimg
flashflash
document.write
location.href
scri...
csscss
Put scripts at
bottom
javascriptjavascript
javascriptjavascript
imgimg
imgimg
flashflash
htmlhtml
csscss
Unloaded styles
block page rendering
htmlhtml
imgimg
imgimg
flashflash
csscss
htmlhtml
imgimg
imgimg
flashflash
Put styles at top
Indeed... scripts
block everything
Load scripts
asynchronously
var scriptTag = document.createElement("script")
scriptTag.src = "http://www.example.org/js/li...
Yield with timers
// doSomethingLong() is too slow, split it
doSomething()
setTimeout(function() {
doSomethingElse()
}, 50)
Browser I/O
is slow
Browser I/O
is slow
DOM
DoG
is alive
Collections to arrays
Cache values to variables
DOM access triggers a live query
DOM
triggers events
Event Delegation
Events execute JS code
DOM
Reflow is expensive
Batch DOM
changes “offline”
Cloned element
Document Fragment
Display: none
Reflow is expensive
Batch CSS changes
One class to rule em all
Dynamic 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
getElementById
Xpath
querySelectorAll
Rules pitfalls
Panta rei
Browserscope
http://www.browserscope.org/
Expect the
unexpected
empty cache
no compression
Know your users
Track user capabilities
Conflicting rules
DNS vs Parallel
Inline vs External
Concatenated vs Reuse
All that glitters
is not gold
Everything is a
tradeoff
performance brings
complexity
know the rules but...
leave complexity
to computers
use libraries
during development
Use tools
at build time
http://code.google.com/speed/tools.html
Use tools
at build time
Apache
mod_pagespeed
http://code.google.com/speed/tools.html
Code smart
at run time
http://www.slideshare.net/ajaxexperience2009/david-wei-and-changhao-jiang-presentation
Adaptive
Opt...
http://abetterbrowser.org/
Questions?
Please, dont touch the slow parts v.3.6 @webtechcon
Upcoming SlideShare
Loading in …5
×

Please, dont touch the slow parts v.3.6 @webtechcon

1,467
-1

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,467
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Please, dont touch the slow parts v.3.6 @webtechcon

  1. 1. Please Don’t Touch the Slow Parts V3.6 francesco.fullone@ideato.it http://www.ideato.it/ federico.galassi@gmail.com http://federico.galassi.net/
  2. 2. faster
  3. 3. WEBfaster
  4. 4. Faster == Better?
  5. 5. We have to wait
  6. 6. ... All the time
  7. 7. “Savings in time feels like simplicity”
  8. 8. “Time is the only commodity that matters”
  9. 9. Psychology of web performance http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ 5-8 SECONDS
  10. 10. Faster web, more clicks http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
  11. 11. Faster web, better SEO http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
  12. 12. Faster web is hot
  13. 13. Say web, Say browser
  14. 14. How browsers work
  15. 15. User clicks on a link
  16. 16. Browser resolves domain name www.google.com 72.14.234.104 DNS UDP domaindomain
  17. 17. Browser connects to web server TCP/IP 72.14.234.104 WEB domaindomain connectconnect
  18. 18. Browser sends a request for a page HTTP GET /language_tools?hl=en Host: www.google.com domaindomain connectconnect sendsend WEB
  19. 19. Browser receives a response with the page HTTP 200 OK domaindomain connectconnect sendsend receivereceive WEB
  20. 20. Browser renders the new page domaindomain connectconnect sendsend receivereceive renderrender
  21. 21. Rendering is complex renderrender
  22. 22. Rendering is loading resources renderrender csscss imgimg csscss imgimg javascriptjavascript javascriptjavascript flashflash
  23. 23. Each resource is another web request renderrender
  24. 24. Requests are processed in parallel renderrender
  25. 25. Rendering is parsing renderrender 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
  26. 26. Rendering is layout renderrender 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
  27. 27. Rendering is painting renderrender - root - body - block - inline: This is - inline: a Text RENDER TREE This is a Text repaint
  28. 28. Rendering is execution mouse movedmouse moved mouse pressedmouse pressed mouse releasedmouse released key pressedkey pressed key releasedkey released renderrender INPUT OS EVENT QUEUE
  29. 29. Execution in one thread mouse movedmouse moved mouse pressedmouse pressed mouse releasedmouse released key pressedkey pressed key releasedkey released renderrender EVENT QUEUE JavascriptJavascript ExecutionExecution NativeNative BrowserBrowser ActionAction
  30. 30. Once upon a time... Few resources Static pages Less javascript
  31. 31. Most time on server domaindomain connectconnect sendsend receivereceive renderrender
  32. 32. Solution is faster serverside domaindomain connectconnect sendsend receivereceive renderrender
  33. 33. Ajax revolution
  34. 34. Ajax revolution performance
  35. 35. Page updating One time (classic) WEB
  36. 36. On demand (ajax) WEB ... later ... Page updating
  37. 37. Continuous (polling) WEB Page updating
  38. 38. Push (comet) WEB Page updating
  39. 39. Most time on browser domaindomain connectconnect sendsend receivereceive renderrender
  40. 40. Golden rule of faster web 80% of the end user response time is spent on the front-end
  41. 41. Start there. Golden rules of faster web
  42. 42. Why web slow parts?
  43. 43. Easy to understand
  44. 44. Each part has its rules
  45. 45. Which parts are slow?
  46. 46. Network is slow
  47. 47. Less stuff Fewer requests Concatenate js/css Css sprites Inline images Too many resources
  48. 48. Less stuff Cache requests Expires header Revving Files External js/css Remove etags Resources re-downloaded
  49. 49. Smaller stuff Compress responses Content-Encoding Gzip Deflate Resources are too big
  50. 50. Smaller stuff Minify responses js, css, html remove formatting remove comments optimize images use tools Resources are too big
  51. 51. Closer stuff Use a CDN Resources are too far reduce latency
  52. 52. Closer stuff Flush document early Server can be slow Chunked encoding
  53. 53. Browser is slow
  54. 54. Scripts block loading javascriptjavascript csscss javascriptjavascript imgimg flashflash document.write location.href scripts order htmlhtml imgimg
  55. 55. csscss Put scripts at bottom javascriptjavascript javascriptjavascript imgimg imgimg flashflash htmlhtml
  56. 56. csscss Unloaded styles block page rendering htmlhtml imgimg imgimg flashflash
  57. 57. csscss htmlhtml imgimg imgimg flashflash Put styles at top
  58. 58. Indeed... scripts block everything
  59. 59. Load scripts asynchronously var scriptTag = document.createElement("script") scriptTag.src = "http://www.example.org/js/lib.js" document.getElementsByTagName("head")[0] .appendChild(scriptTag)
  60. 60. Yield with timers // doSomethingLong() is too slow, split it doSomething() setTimeout(function() { doSomethingElse() }, 50)
  61. 61. Browser I/O is slow
  62. 62. Browser I/O is slow DOM DoG
  63. 63. is alive Collections to arrays Cache values to variables DOM access triggers a live query DOM
  64. 64. triggers events Event Delegation Events execute JS code DOM
  65. 65. Reflow is expensive Batch DOM changes “offline” Cloned element Document Fragment Display: none
  66. 66. Reflow is expensive Batch CSS changes One class to rule em all Dynamic style property
  67. 67. Inefficient element location CSS are bottom-up! Be specific on the “right” #header li a direction
  68. 68. Inefficient element location Go native in DOM getElementById Xpath querySelectorAll
  69. 69. Rules pitfalls
  70. 70. Panta rei Browserscope http://www.browserscope.org/
  71. 71. Expect the unexpected empty cache no compression
  72. 72. Know your users Track user capabilities
  73. 73. Conflicting rules DNS vs Parallel Inline vs External Concatenated vs Reuse
  74. 74. All that glitters is not gold
  75. 75. Everything is a tradeoff
  76. 76. performance brings complexity
  77. 77. know the rules but...
  78. 78. leave complexity to computers
  79. 79. use libraries during development
  80. 80. Use tools at build time http://code.google.com/speed/tools.html
  81. 81. Use tools at build time Apache mod_pagespeed http://code.google.com/speed/tools.html
  82. 82. Code smart at run time http://www.slideshare.net/ajaxexperience2009/david-wei-and-changhao-jiang-presentation Adaptive Optimization
  83. 83. http://abetterbrowser.org/
  84. 84. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×