please don't touch the slow parts
DESCRIPTION
Talk i gave at Better Software on May 5th 2010, together with Fullo of Ideato. It's about improving web applications speed. Based on Steve Souders work. I'll be giving a newer version of the talk at PHP Day 2010 Also http://www.ideato.it/ http://federico.galassi.net/ http://www.stevesouders.com/ http://www.bettersoftware.it/ http://www.phpday.it/ Follow me on Twitter https://twitter.com/federicogalassiTRANSCRIPT
![Page 1: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/1.jpg)
Please Don’t Touch the Slow Parts
[email protected]://www.ideato.it/
[email protected]://federico.galassi.net/
Saturday, May 8, 2010
![Page 2: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/2.jpg)
Saturday, May 8, 2010
![Page 3: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/3.jpg)
faster
Saturday, May 8, 2010
![Page 4: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/4.jpg)
faster WEB
Saturday, May 8, 2010
![Page 5: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/5.jpg)
Faster == Better?
Saturday, May 8, 2010
![Page 6: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/6.jpg)
We have to wait
Saturday, May 8, 2010
![Page 7: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/7.jpg)
... All the time
Saturday, May 8, 2010
![Page 8: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/8.jpg)
“Savings in timefeels like simplicity”
Saturday, May 8, 2010
![Page 9: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/9.jpg)
“Time is the only commodity that matters”
Saturday, May 8, 2010
![Page 10: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/10.jpg)
Faster web, more clicks
http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
Saturday, May 8, 2010
![Page 11: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/11.jpg)
Faster web, better SEO
http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
Saturday, May 8, 2010
![Page 12: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/12.jpg)
Faster web is hot
Saturday, May 8, 2010
![Page 13: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/13.jpg)
Say web, Say browser
Saturday, May 8, 2010
![Page 14: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/14.jpg)
How browsers work
Saturday, May 8, 2010
![Page 15: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/15.jpg)
User clicks on a link
Saturday, May 8, 2010
![Page 16: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/16.jpg)
Browser resolves domain name
www.google.com
72.14.234.104
DNS
UDP
domain
Saturday, May 8, 2010
![Page 17: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/17.jpg)
Browser connects to web server
TCP/IP
72.14.234.104
WEB
domain connect
Saturday, May 8, 2010
![Page 18: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/18.jpg)
Browser sends arequest for a page
HTTP
GET /language_tools?hl=enHost: www.google.com
WEB
domain connect send
Saturday, May 8, 2010
![Page 19: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/19.jpg)
Browser receives a response with the page
HTTP
200 OK
WEB
domain connect send receive
Saturday, May 8, 2010
![Page 20: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/20.jpg)
Browser renders the new page
domain connect send receive render
Saturday, May 8, 2010
![Page 21: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/21.jpg)
Rendering is complexparse + paint
render
Saturday, May 8, 2010
![Page 22: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/22.jpg)
Rendering really complexparse + paint + resources
render
css
img
css
img
javascript
javascript
flash
Saturday, May 8, 2010
![Page 23: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/23.jpg)
Each resource is another web request
render
Saturday, May 8, 2010
![Page 24: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/24.jpg)
Requests areprocessed in parallel
render
Saturday, May 8, 2010
![Page 25: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/25.jpg)
Once upon a time...
Few resources
Static pages
Less javascript
Saturday, May 8, 2010
![Page 26: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/26.jpg)
Most time on serverdomain connect send receive render
Saturday, May 8, 2010
![Page 27: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/27.jpg)
Solution is faster serversidedomain connect send receive render
Saturday, May 8, 2010
![Page 28: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/28.jpg)
Ajax revolution
Saturday, May 8, 2010
![Page 29: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/29.jpg)
Most time on browserdomain connect send receive render
Saturday, May 8, 2010
![Page 30: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/30.jpg)
Golden rule of faster web
80% of the end user response time is spent
on the front-end
Saturday, May 8, 2010
![Page 31: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/31.jpg)
Golden rule of faster web
Start there.
Saturday, May 8, 2010
![Page 32: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/32.jpg)
Why webslow parts?
Saturday, May 8, 2010
![Page 33: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/33.jpg)
Easy to understand
Saturday, May 8, 2010
![Page 34: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/34.jpg)
Each part has its rules
Saturday, May 8, 2010
![Page 35: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/35.jpg)
Which parts are slow?
Saturday, May 8, 2010
![Page 36: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/36.jpg)
Network is slow
Saturday, May 8, 2010
![Page 37: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/37.jpg)
Less stuffFewer requests
Concatenate js/cssCss spritesLess dns requests
Pages have toomany resources
Saturday, May 8, 2010
![Page 38: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/38.jpg)
Less stuffCache requests
Expires headerRevving FilesExternal js/cssRemove etags
Browser downloadresources repeatedly
Saturday, May 8, 2010
![Page 39: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/39.jpg)
Smaller stuffCompress responses
Content-EncodingGzipDeflate
Resources aretoo big
Saturday, May 8, 2010
![Page 40: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/40.jpg)
Smaller stuffMinify responses
js, css, htmlremove formattingremove commentsuse tools
Resources aretoo big
Saturday, May 8, 2010
![Page 41: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/41.jpg)
Closer stuffUse a CDN
Resources aretoo far
reduce latency
Saturday, May 8, 2010
![Page 42: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/42.jpg)
Browser is slow
Saturday, May 8, 2010
![Page 43: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/43.jpg)
Scripts block loading
javascript
css
javascript
img
flash
document.writelocation.hrefscripts order
html
img
Saturday, May 8, 2010
![Page 44: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/44.jpg)
css
Put scripts at bottom
javascript
javascript
img
img
flash
html
Saturday, May 8, 2010
![Page 45: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/45.jpg)
css
Unloaded stylesblock page rendering
html
img
img
flash
Saturday, May 8, 2010
![Page 46: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/46.jpg)
css
html
img
img
flash
Put styles at top
Saturday, May 8, 2010
![Page 47: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/47.jpg)
Scripts and stylesside effects
dom reflowscss expression reflows
Saturday, May 8, 2010
![Page 48: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/48.jpg)
All that glittersis not gold
Saturday, May 8, 2010
![Page 49: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/49.jpg)
Everything is atradeoff
Saturday, May 8, 2010
![Page 50: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/50.jpg)
performance bringscomplexity
Saturday, May 8, 2010
![Page 51: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/51.jpg)
know the rules but...
Saturday, May 8, 2010
![Page 52: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/52.jpg)
leave complexityto computers
Saturday, May 8, 2010
![Page 53: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/53.jpg)
use librariesduring development
Saturday, May 8, 2010
![Page 54: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/54.jpg)
Use toolsat build time
Saturday, May 8, 2010
![Page 55: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/55.jpg)
http://abetterbrowser.org/Saturday, May 8, 2010
![Page 56: Please Don't Touch the Slow Parts](https://reader033.vdocument.in/reader033/viewer/2022061220/5487f722b47959190d8b5576/html5/thumbnails/56.jpg)
Questions?
Saturday, May 8, 2010