Embed Size (px)
DESCRIPTION
Extended version of talk "Please don't touch the slow parts". I gave this at PhpDay on May 15th 2010. It's about improving web applications speed. Based on Steve Souders work. 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/federicogalassi
Citation preview
Please Don’t Touch the Slow Parts V2
[email protected]://www.ideato.it/
[email protected]://federico.galassi.net/
Saturday, May 15, 2010
Saturday, May 15, 2010
faster
Saturday, May 15, 2010
faster WEB
Saturday, May 15, 2010
Faster == Better?
Saturday, May 15, 2010
We have to wait
Saturday, May 15, 2010
... All the time
Saturday, May 15, 2010
“Savings in timefeels like simplicity”
Saturday, May 15, 2010
“Time is the only commodity that matters”
Saturday, May 15, 2010
Psychology of webperformance
http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/
5-8SECONDS
Saturday, May 15, 2010
Faster web, more clicks
http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
Saturday, May 15, 2010
Faster web, better SEO
http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
Saturday, May 15, 2010
Faster web is hot
Saturday, May 15, 2010
Say web, Say browser
Saturday, May 15, 2010
How browsers work
Saturday, May 15, 2010
User clicks on a link
Saturday, May 15, 2010
Browser resolves domain name
www.google.com
72.14.234.104
DNS
UDP
domain
Saturday, May 15, 2010
Browser connects to web server
TCP/IP
72.14.234.104
WEB
domain connect
Saturday, May 15, 2010
Browser sends arequest for a page
HTTP
GET /language_tools?hl=enHost: www.google.com
domain connect send
WEB
Saturday, May 15, 2010
Browser receives a response with the page
HTTP
200 OK
domain connect send receive
WEB
Saturday, May 15, 2010
Browser renders the new page
domain connect send receive render
Saturday, May 15, 2010
Rendering is complexparse + paint
render
Saturday, May 15, 2010
Rendering really complexparse + paint + resources
render
css
img
css
img
javascript
javascript
flash
Saturday, May 15, 2010
Each resource is another web request
render
Saturday, May 15, 2010
Requests areprocessed in parallel
render
Saturday, May 15, 2010
Rendering is execution
mouse moved mouse pressed mouse released key pressed key released
render
INPUT
OS
EVENT QUEUE
Saturday, May 15, 2010
Execution in one threadmouse moved
mouse pressed mouse released key pressed key released
render
EVENT QUEUE
Javascript Execution
WebBrowsing
Saturday, May 15, 2010
Once upon a time...
Few resources
Static pages
Less javascript
Saturday, May 15, 2010
Most time on serverdomain connect send receive render
Saturday, May 15, 2010
Solution is faster serversidedomain connect send receive render
Saturday, May 15, 2010
Ajax revolution
Saturday, May 15, 2010
Ajax revolutionperformance
Saturday, May 15, 2010
Page updating
One time(classic) WEB
Saturday, May 15, 2010
On demand(ajax) WEB
... later ...
Page updating
Saturday, May 15, 2010
Continuous(polling) WEB
Page updating
Saturday, May 15, 2010
Push(comet) WEB
Page updating
Saturday, May 15, 2010
Most time on browserdomain connect send receive render
Saturday, May 15, 2010
Golden rule of faster web
80% of the end user response time is spent
on the front-end
Saturday, May 15, 2010
Golden rule of faster web
Start there.
Saturday, May 15, 2010
Why webslow parts?
Saturday, May 15, 2010
Easy to understand
Saturday, May 15, 2010
Each part has its rules
Saturday, May 15, 2010
Which parts are slow?
Saturday, May 15, 2010
Network is slow
Saturday, May 15, 2010
Less stuffFewer requests
Concatenate js/cssCss spritesInline images
Too many resources
Saturday, May 15, 2010
Less stuffCache requests
Expires headerRevving FilesExternal js/cssRemove etags
Resourcesre-downloaded
Saturday, May 15, 2010
Smaller stuffCompress responses
Content-EncodingGzipDeflate
Resources are too big
Saturday, May 15, 2010
Smaller stuffMinify responses
js, css, htmlremove formattingremove commentsoptimize imagesuse tools
Resources are too big
Saturday, May 15, 2010
Closer stuffUse a CDN
Resources are too far
reduce latency
Saturday, May 15, 2010
Browser is slow
Saturday, May 15, 2010
Scripts block loading
javascript
css
javascript
img
flash
document.writelocation.hrefscripts order
html
img
Saturday, May 15, 2010
css
Put scripts at bottom
javascript
javascript
img
img
flash
html
Saturday, May 15, 2010
css
Unloaded stylesblock page rendering
html
img
img
flash
Saturday, May 15, 2010
css
html
img
img
flash
Put styles at top
Saturday, May 15, 2010
Indeed ... scripts block everything
Saturday, May 15, 2010
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
Yield with timers
// doSomethingLong() is too slow, split it
doSomething()
setTimeout(function() { doSomethingElse()}, 50)
Saturday, May 15, 2010
Scripts and stylesside effects
dom is alivelayout is alive
Saturday, May 15, 2010
Rules pitfalls
Saturday, May 15, 2010
Panta reiBrowserscope
http://www.browserscope.org/
Saturday, May 15, 2010
Expect the unexpected
empty cacheno compression
Saturday, May 15, 2010
Know your users
Track user capabilities
Saturday, May 15, 2010
Conflicting rules
DNS vs Parallel
Inline vs External
Concatenated vs Reuse
Saturday, May 15, 2010
All that glittersis not gold
Saturday, May 15, 2010
Everything is atradeoff
Saturday, May 15, 2010
performance bringscomplexity
Saturday, May 15, 2010
know the rules but...
Saturday, May 15, 2010
leave complexityto computers
Saturday, May 15, 2010
use librariesduring development
Saturday, May 15, 2010
Use toolsat build time
Saturday, May 15, 2010
http://abetterbrowser.org/Saturday, May 15, 2010
Questions?
Saturday, May 15, 2010
![Second Oral History Interview...resume, and we'll get in touch with you.” So I don't know…. I mean getting a “break” starts ... I don't think Dave Hackett [David L. Hackett]](https://img.pdfslide.net/doc/110x75/5ff5191561000f3b720da389/second-oral-history-interview-resume-and-well-get-in-touch-with-youa-so.jpg)
