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
Please Don’t Touch the Slow Parts
[email protected]://www.ideato.it/
[email protected]://federico.galassi.net/
Saturday, May 8, 2010
Saturday, May 8, 2010
faster
Saturday, May 8, 2010
faster WEB
Saturday, May 8, 2010
Faster == Better?
Saturday, May 8, 2010
We have to wait
Saturday, May 8, 2010
... All the time
Saturday, May 8, 2010
“Savings in timefeels like simplicity”
Saturday, May 8, 2010
“Time is the only commodity that matters”
Saturday, May 8, 2010
Faster web, more clicks
http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
Saturday, May 8, 2010
Faster web, better SEO
http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
Saturday, May 8, 2010
Faster web is hot
Saturday, May 8, 2010
Say web, Say browser
Saturday, May 8, 2010
How browsers work
Saturday, May 8, 2010
User clicks on a link
Saturday, May 8, 2010
Browser resolves domain name
www.google.com
72.14.234.104
DNS
UDP
domain
Saturday, May 8, 2010
Browser connects to web server
TCP/IP
72.14.234.104
WEB
domain connect
Saturday, May 8, 2010
Browser sends arequest for a page
HTTP
GET /language_tools?hl=enHost: www.google.com
WEB
domain connect send
Saturday, May 8, 2010
Browser receives a response with the page
HTTP
200 OK
WEB
domain connect send receive
Saturday, May 8, 2010
Browser renders the new page
domain connect send receive render
Saturday, May 8, 2010
Rendering is complexparse + paint
render
Saturday, May 8, 2010
Rendering really complexparse + paint + resources
render
css
img
css
img
javascript
javascript
flash
Saturday, May 8, 2010
Each resource is another web request
render
Saturday, May 8, 2010
Requests areprocessed in parallel
render
Saturday, May 8, 2010
Once upon a time...
Few resources
Static pages
Less javascript
Saturday, May 8, 2010
Most time on serverdomain connect send receive render
Saturday, May 8, 2010
Solution is faster serversidedomain connect send receive render
Saturday, May 8, 2010
Ajax revolution
Saturday, May 8, 2010
Most time on browserdomain connect send receive render
Saturday, May 8, 2010
Golden rule of faster web
80% of the end user response time is spent
on the front-end
Saturday, May 8, 2010
Golden rule of faster web
Start there.
Saturday, May 8, 2010
Why webslow parts?
Saturday, May 8, 2010
Easy to understand
Saturday, May 8, 2010
Each part has its rules
Saturday, May 8, 2010
Which parts are slow?
Saturday, May 8, 2010
Network is slow
Saturday, May 8, 2010
Less stuffFewer requests
Concatenate js/cssCss spritesLess dns requests
Pages have toomany resources
Saturday, May 8, 2010
Less stuffCache requests
Expires headerRevving FilesExternal js/cssRemove etags
Browser downloadresources repeatedly
Saturday, May 8, 2010
Smaller stuffCompress responses
Content-EncodingGzipDeflate
Resources aretoo big
Saturday, May 8, 2010
Smaller stuffMinify responses
js, css, htmlremove formattingremove commentsuse tools
Resources aretoo big
Saturday, May 8, 2010
Closer stuffUse a CDN
Resources aretoo far
reduce latency
Saturday, May 8, 2010
Browser is slow
Saturday, May 8, 2010
Scripts block loading
javascript
css
javascript
img
flash
document.writelocation.hrefscripts order
html
img
Saturday, May 8, 2010
css
Put scripts at bottom
javascript
javascript
img
img
flash
html
Saturday, May 8, 2010
css
Unloaded stylesblock page rendering
html
img
img
flash
Saturday, May 8, 2010
css
html
img
img
flash
Put styles at top
Saturday, May 8, 2010
Scripts and stylesside effects
dom reflowscss expression reflows
Saturday, May 8, 2010
All that glittersis not gold
Saturday, May 8, 2010
Everything is atradeoff
Saturday, May 8, 2010
performance bringscomplexity
Saturday, May 8, 2010
know the rules but...
Saturday, May 8, 2010
leave complexityto computers
Saturday, May 8, 2010
use librariesduring development
Saturday, May 8, 2010
Use toolsat build time
Saturday, May 8, 2010
http://abetterbrowser.org/Saturday, May 8, 2010
Questions?
Saturday, May 8, 2010