Please Don't Touch the Slow Parts V2
-
Upload
federico-galassi -
Category
Technology
-
view
2.177 -
download
0
description
Transcript of Please Don't Touch the Slow Parts V2
![Page 1: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/1.jpg)
Please Don’t Touch the Slow Parts V2
[email protected]://www.ideato.it/
[email protected]://federico.galassi.net/
Saturday, May 15, 2010
![Page 2: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/2.jpg)
Saturday, May 15, 2010
![Page 3: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/3.jpg)
faster
Saturday, May 15, 2010
![Page 4: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/4.jpg)
faster WEB
Saturday, May 15, 2010
![Page 5: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/5.jpg)
Faster == Better?
Saturday, May 15, 2010
![Page 6: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/6.jpg)
We have to wait
Saturday, May 15, 2010
![Page 7: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/7.jpg)
... All the time
Saturday, May 15, 2010
![Page 8: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/8.jpg)
“Savings in timefeels like simplicity”
Saturday, May 15, 2010
![Page 9: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/9.jpg)
“Time is the only commodity that matters”
Saturday, May 15, 2010
![Page 10: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/10.jpg)
Psychology of webperformance
http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/
5-8SECONDS
Saturday, May 15, 2010
![Page 11: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/11.jpg)
Faster web, more clicks
http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
Saturday, May 15, 2010
![Page 12: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/12.jpg)
Faster web, better SEO
http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
Saturday, May 15, 2010
![Page 13: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/13.jpg)
Faster web is hot
Saturday, May 15, 2010
![Page 14: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/14.jpg)
Say web, Say browser
Saturday, May 15, 2010
![Page 15: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/15.jpg)
How browsers work
Saturday, May 15, 2010
![Page 16: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/16.jpg)
User clicks on a link
Saturday, May 15, 2010
![Page 17: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/17.jpg)
Browser resolves domain name
www.google.com
72.14.234.104
DNS
UDP
domain
Saturday, May 15, 2010
![Page 18: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/18.jpg)
Browser connects to web server
TCP/IP
72.14.234.104
WEB
domain connect
Saturday, May 15, 2010
![Page 19: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/19.jpg)
Browser sends arequest for a page
HTTP
GET /language_tools?hl=enHost: www.google.com
domain connect send
WEB
Saturday, May 15, 2010
![Page 20: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/20.jpg)
Browser receives a response with the page
HTTP
200 OK
domain connect send receive
WEB
Saturday, May 15, 2010
![Page 21: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/21.jpg)
Browser renders the new page
domain connect send receive render
Saturday, May 15, 2010
![Page 22: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/22.jpg)
Rendering is complexparse + paint
render
Saturday, May 15, 2010
![Page 23: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/23.jpg)
Rendering really complexparse + paint + resources
render
css
img
css
img
javascript
javascript
flash
Saturday, May 15, 2010
![Page 24: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/24.jpg)
Each resource is another web request
render
Saturday, May 15, 2010
![Page 25: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/25.jpg)
Requests areprocessed in parallel
render
Saturday, May 15, 2010
![Page 26: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/26.jpg)
Rendering is execution
mouse moved mouse pressed mouse released key pressed key released
render
INPUT
OS
EVENT QUEUE
Saturday, May 15, 2010
![Page 27: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/27.jpg)
Execution in one threadmouse moved
mouse pressed mouse released key pressed key released
render
EVENT QUEUE
Javascript Execution
WebBrowsing
Saturday, May 15, 2010
![Page 28: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/28.jpg)
Once upon a time...
Few resources
Static pages
Less javascript
Saturday, May 15, 2010
![Page 29: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/29.jpg)
Most time on serverdomain connect send receive render
Saturday, May 15, 2010
![Page 30: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/30.jpg)
Solution is faster serversidedomain connect send receive render
Saturday, May 15, 2010
![Page 31: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/31.jpg)
Ajax revolution
Saturday, May 15, 2010
![Page 32: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/32.jpg)
Ajax revolutionperformance
Saturday, May 15, 2010
![Page 33: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/33.jpg)
Page updating
One time(classic) WEB
Saturday, May 15, 2010
![Page 34: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/34.jpg)
On demand(ajax) WEB
... later ...
Page updating
Saturday, May 15, 2010
![Page 35: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/35.jpg)
Continuous(polling) WEB
Page updating
Saturday, May 15, 2010
![Page 36: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/36.jpg)
Push(comet) WEB
Page updating
Saturday, May 15, 2010
![Page 37: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/37.jpg)
Most time on browserdomain connect send receive render
Saturday, May 15, 2010
![Page 38: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/38.jpg)
Golden rule of faster web
80% of the end user response time is spent
on the front-end
Saturday, May 15, 2010
![Page 39: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/39.jpg)
Golden rule of faster web
Start there.
Saturday, May 15, 2010
![Page 40: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/40.jpg)
Why webslow parts?
Saturday, May 15, 2010
![Page 41: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/41.jpg)
Easy to understand
Saturday, May 15, 2010
![Page 42: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/42.jpg)
Each part has its rules
Saturday, May 15, 2010
![Page 43: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/43.jpg)
Which parts are slow?
Saturday, May 15, 2010
![Page 44: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/44.jpg)
Network is slow
Saturday, May 15, 2010
![Page 45: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/45.jpg)
Less stuffFewer requests
Concatenate js/cssCss spritesInline images
Too many resources
Saturday, May 15, 2010
![Page 46: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/46.jpg)
Less stuffCache requests
Expires headerRevving FilesExternal js/cssRemove etags
Resourcesre-downloaded
Saturday, May 15, 2010
![Page 47: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/47.jpg)
Smaller stuffCompress responses
Content-EncodingGzipDeflate
Resources are too big
Saturday, May 15, 2010
![Page 48: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/48.jpg)
Smaller stuffMinify responses
js, css, htmlremove formattingremove commentsoptimize imagesuse tools
Resources are too big
Saturday, May 15, 2010
![Page 49: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/49.jpg)
Closer stuffUse a CDN
Resources are too far
reduce latency
Saturday, May 15, 2010
![Page 50: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/50.jpg)
Browser is slow
Saturday, May 15, 2010
![Page 51: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/51.jpg)
Scripts block loading
javascript
css
javascript
img
flash
document.writelocation.hrefscripts order
html
img
Saturday, May 15, 2010
![Page 52: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/52.jpg)
css
Put scripts at bottom
javascript
javascript
img
img
flash
html
Saturday, May 15, 2010
![Page 53: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/53.jpg)
css
Unloaded stylesblock page rendering
html
img
img
flash
Saturday, May 15, 2010
![Page 54: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/54.jpg)
css
html
img
img
flash
Put styles at top
Saturday, May 15, 2010
![Page 55: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/55.jpg)
Indeed ... scripts block everything
Saturday, May 15, 2010
![Page 56: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/56.jpg)
Load scripts asynchronously
var scriptTag = document.createElement("script")scriptTag.src = "http://www.example.org/js/lib.js"
document.getElementsByTagName("head")[0] .appendChild(scriptTag)
Saturday, May 15, 2010
![Page 57: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/57.jpg)
Yield with timers
// doSomethingLong() is too slow, split it
doSomething()
setTimeout(function() { doSomethingElse()}, 50)
Saturday, May 15, 2010
![Page 58: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/58.jpg)
Scripts and stylesside effects
dom is alivelayout is alive
Saturday, May 15, 2010
![Page 59: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/59.jpg)
Rules pitfalls
Saturday, May 15, 2010
![Page 60: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/60.jpg)
Panta reiBrowserscope
http://www.browserscope.org/
Saturday, May 15, 2010
![Page 61: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/61.jpg)
Expect the unexpected
empty cacheno compression
Saturday, May 15, 2010
![Page 62: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/62.jpg)
Know your users
Track user capabilities
Saturday, May 15, 2010
![Page 63: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/63.jpg)
Conflicting rules
DNS vs Parallel
Inline vs External
Concatenated vs Reuse
Saturday, May 15, 2010
![Page 64: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/64.jpg)
All that glittersis not gold
Saturday, May 15, 2010
![Page 65: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/65.jpg)
Everything is atradeoff
Saturday, May 15, 2010
![Page 66: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/66.jpg)
performance bringscomplexity
Saturday, May 15, 2010
![Page 67: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/67.jpg)
know the rules but...
Saturday, May 15, 2010
![Page 68: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/68.jpg)
leave complexityto computers
Saturday, May 15, 2010
![Page 69: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/69.jpg)
use librariesduring development
Saturday, May 15, 2010
![Page 70: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/70.jpg)
Use toolsat build time
Saturday, May 15, 2010
![Page 71: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/71.jpg)
http://abetterbrowser.org/Saturday, May 15, 2010
![Page 72: Please Don't Touch the Slow Parts V2](https://reader033.fdocuments.us/reader033/viewer/2022052523/5558c407d8b42a995d8b45f9/html5/thumbnails/72.jpg)
Questions?
Saturday, May 15, 2010