Frontend Caching, PHPTek 2011, Chicago
-
Upload
helgi-bormar-borbjoernsson -
Category
Technology
-
view
1.596 -
download
0
description
Transcript of Frontend Caching, PHPTek 2011, Chicago
Frontend Caching
Helgi Þormar ÞorbjörnssonPHP Tek, Chicago, 26th May 2011
Thursday, 26 May 2011
Who am I?
Thursday, 26 May 2011
Who am I?
VP of Engineering at Orchestra.io
Thursday, 26 May 2011
Who am I?
VP of Engineering at Orchestra.io
Developer at PEAR
Thursday, 26 May 2011
Who am I?
VP of Engineering at Orchestra.io
Developer at PEAR
From Iceland
Thursday, 26 May 2011
Who am I?
VP of Engineering at Orchestra.io
Developer at PEAR
From Iceland
@h on Twitter
Thursday, 26 May 2011
Pareto Principle
20% 80%
Thursday, 26 May 2011
20% 80%
80 / 20 Rule
20% of the population receives 80% of the income
Thursday, 26 May 2011
20% 80%
80 / 20 Rule
20% of causes produce 80% of the effects
Thursday, 26 May 2011
80% of response time is
spent downloading resources
Thursday, 26 May 2011
4 Rules of Web Performance
Thursday, 26 May 2011
Weight
Time
Processing
Perception
Thursday, 26 May 2011
Perception
Thursday, 26 May 2011
Make people think your site is fast
Thursday, 26 May 2011
When people can interact with the site
Thursday, 26 May 2011
Thursday, 26 May 2011
“It all depends on how we look at things, and not how
they are in themselves.”
- Carl G. Jung
Thursday, 26 May 2011
50% of users arrive
on an empty cache
Perception
Thursday, 26 May 2011
Perception
Empty Cache Full Cache28.0K 1 HTML Document
1.9K 1 Style Sheet File
59.5K 4 Javascript Files
78.7K 24 Images
168.1K Total Size
30 HTTP Requests
2.4s Response Time
28.0K 1 HTML Document
0.1K 2 Images
28.1K Total Size
3 HTTP Requests
0.9s Response Time
Thursday, 26 May 2011
Weight
Thursday, 26 May 2011
HTTP Requests
Thursday, 26 May 2011
HTTP Requests
Less is more
Thursday, 26 May 2011
HTTP Requests
Less is more
Fewer HTTP Requests
Thursday, 26 May 2011
HTTP Requests
Less is more
Fewer HTTP Requests
Easy to improve on
Thursday, 26 May 2011
Cookies
Thursday, 26 May 2011
Cookies
Sent with static content
Thursday, 26 May 2011
Cookies
Sent with static content
Slow upstream speed
Thursday, 26 May 2011
Cookies
Sent with static content
Slow upstream speed
Big cookies
Thursday, 26 May 2011
Experiment Time!
Cookie Size Response Time (Delta)
0 bytes 78 ms ( 0 ms)
500 bytes 79 ms ( +1 ms)
1000 bytes 94 ms (+16 ms)
1500 bytes 109 ms (+31 ms)
2000 bytes 125 ms (+47 ms)
2500 bytes 141 ms (+63 ms)
3000 bytes 156 ms (+78 ms)
Thursday, 26 May 2011
Experiment Time!
Cookie Size Response Time (Delta)
0 bytes 78 ms ( 0 ms)
500 bytes 79 ms ( +1 ms)
1000 bytes 94 ms (+16 ms)
1500 bytes 109 ms (+31 ms)
2000 bytes 125 ms (+47 ms)
2500 bytes 141 ms (+63 ms)
3000 bytes 156 ms (+78 ms)
Thursday, 26 May 2011
Experiment Time!
Cookie Size Response Time (Delta)
0 bytes 78 ms ( 0 ms)
500 bytes 79 ms ( +1 ms)
1000 bytes 94 ms (+16 ms)
1500 bytes 109 ms (+31 ms)
2000 bytes 125 ms (+47 ms)
2500 bytes 141 ms (+63 ms)
3000 bytes 156 ms (+78 ms)
Thursday, 26 May 2011
Cookies
Thursday, 26 May 2011
Cookies
Thursday, 26 May 2011
Cookies
Remove unnecessary cookies
Thursday, 26 May 2011
Cookies
Remove unnecessary cookies
Appropriate domain level
Thursday, 26 May 2011
Cookies
Remove unnecessary cookies
Appropriate domain level
Keep size low
Thursday, 26 May 2011
Cookies
Remove unnecessary cookies
Appropriate domain level
Keep size low
Set Expires
Thursday, 26 May 2011
Parallel Downloads
Thursday, 26 May 2011
Parallel Downloads
Be aware of max connection limits
Thursday, 26 May 2011
Parallel Downloads
Borrowed from BrowserScope.org
Thursday, 26 May 2011
Parallel Downloads
Borrowed from BrowserScope.org
Thursday, 26 May 2011
Parallel Downloads
One domain = 2 Parallel connections
Thursday, 26 May 2011
Parallel Downloads
HTML
Image
Image
Image
Image
Image
Image
Image
Image
0.4 0.8 1.2 1.6 2 2.4 Secs
One domain = 2 Parallel connections
Thursday, 26 May 2011
Parallel Downloads
HTML
Image
Image
Image
Image
Image
Image
Image
Image
0.4 0.8 1.2 1.6 2 2.4 Secs
Two domains = 4 Parallel connections
Thursday, 26 May 2011
Parallel Downloads
Too many hostnames can cause complications
Thursday, 26 May 2011
Parallel Downloads
Too many hostnames can cause complications
2 – 4 sub domains is a good average
Thursday, 26 May 2011
Combine Files
Combining 6 scripts into 1 eliminates 5 requests
Thursday, 26 May 2011
Combine Files
Combining 6 scripts into 1 eliminates 5 requests
Challenges: develop as separate modules combinations vs. loading more than needed
Thursday, 26 May 2011
Javascript
Doesn’t comply with parallel download rules
Thursday, 26 May 2011
Javascript
HTML
JS
Image
Image
Image
Image
Image
Image
Image
0.4 0.8 1.2 1.6 2 2.4 Secs
Doesn’t comply with parallel download rules
Thursday, 26 May 2011
Javascript
script defer attribute is not a solution
Thursday, 26 May 2011
Javascript
script defer attribute is not a solution
Solution - move them as low in the page as possible
Thursday, 26 May 2011
Processing
Thursday, 26 May 2011
Processing
Thursday, 26 May 2011
Processing
Fake the delivery
Thursday, 26 May 2011
Processing
Fake the delivery
Lazy Loading
Thursday, 26 May 2011
Processing
Fake the delivery
Lazy Loading
Above the fold Loading
Thursday, 26 May 2011
Processing
Fake the delivery
Lazy Loading
Above the fold Loading
Delay Javascript Loading
Thursday, 26 May 2011
Processing
Thursday, 26 May 2011
Processing
Bonus - async attribute
Thursday, 26 May 2011
Processing
Bonus - async attribute
http://www.appelsiini.net/projects/lazyload
Thursday, 26 May 2011
JS Minification
Thursday, 26 May 2011
JS Minification
Crushes the file
Strips out all cruft
Voodoo Magic!
Thursday, 26 May 2011
JS Minfication
UglifyJS
Google Closure
YUI Compressor
Thursday, 26 May 2011
JS Minfication
UglifyJS
Google Closure
YUI Compressor
http://bit.ly/compression-rates
Thursday, 26 May 2011
CSS Minification
YUI Compressor
minifycss.com
OOCSS
Thursday, 26 May 2011
GZipGZip can be used on
Thursday, 26 May 2011
GZip
JS
GZip can be used on
Thursday, 26 May 2011
GZip
JS
CSS
GZip can be used on
Thursday, 26 May 2011
GZip
JS
CSS
XML
GZip can be used on
Thursday, 26 May 2011
GZip
JS
CSS
XML
JSON
GZip can be used on
Thursday, 26 May 2011
GZip
GZip should not be used on
Thursday, 26 May 2011
GZip
Images
GZip should not be used on
Thursday, 26 May 2011
GZip
Images
Document formats
GZip should not be used on
Thursday, 26 May 2011
GZip
Images
Document formats
Already compressed
GZip should not be used on
Thursday, 26 May 2011
404
robots.txt
favicon
Thursday, 26 May 2011
Images
Thursday, 26 May 2011
Images
favicon
Thursday, 26 May 2011
Images
favicon
CSS Sprites
Thursday, 26 May 2011
Images
favicon
CSS Sprites
inline base64
Thursday, 26 May 2011
Images
favicon
CSS Sprites
inline base64
Thursday, 26 May 2011
Images
Thursday, 26 May 2011
Images
Badly optimised
Thursday, 26 May 2011
Images
Badly optimised
Thumbnails
Thursday, 26 May 2011
Images
Badly optimised
Thumbnails
PNGs compressed up to 50%
Thursday, 26 May 2011
PNG Optimise
OptiPNG
pngwolf
pngcrush
jpegtran
Thursday, 26 May 2011
Time
Thursday, 26 May 2011
SSL
Thursday, 26 May 2011
SSL
Extra roundtrips
Thursday, 26 May 2011
SSL
Extra roundtrips
More resources for servers
Thursday, 26 May 2011
SSL
Extra roundtrips
More resources for servers
Worth it, tho!
Thursday, 26 May 2011
Tread the users’ path
Thursday, 26 May 2011
Tread the users’ path
Test on slower connections
Thursday, 26 May 2011
Tread the users’ path
Test on slower connections
Slow proxies
Thursday, 26 May 2011
Tread the users’ path
Thursday, 26 May 2011
Tread the users’ path
Tables / Phones
Thursday, 26 May 2011
Tread the users’ path
Tables / Phones
Airline connections
Thursday, 26 May 2011
Tread the users’ path
Tables / Phones
Airline connections
Public places
Thursday, 26 May 2011
CDN
Thursday, 26 May 2011
CDN
Single domain
Thursday, 26 May 2011
CDN
Single domain
Smart routing
Thursday, 26 May 2011
CDN
Single domain
Smart routing
Data is closer to end user
Thursday, 26 May 2011
CDN
Thursday, 26 May 2011
CDN
Thursday, 26 May 2011
CDN on a Budget
Thursday, 26 May 2011
CDN on a Budget
S3
Thursday, 26 May 2011
Query vs. Filenamerevisions
Thursday, 26 May 2011
Query vs. Filenamerevisions
Cache far in future
Thursday, 26 May 2011
Query vs. Filenamerevisions
Cache far in future
Revisioning forces downloads
Thursday, 26 May 2011
Query vs. Filenamerevisions
Cache far in future
Revisioning forces downloads
Thursday, 26 May 2011
Query revisions
Thursday, 26 May 2011
Query revisions
Easy and convenient
Thursday, 26 May 2011
Query revisions
Easy and convenient
Usually not recommended
Thursday, 26 May 2011
Query revisions
Easy and convenient
Usually not recommended
Bad proxies are a problem
Thursday, 26 May 2011
Filename revisions
Thursday, 26 May 2011
Filename revisions
Requires more work
Thursday, 26 May 2011
Filename revisions
Requires more work
Recommended
Thursday, 26 May 2011
Filename revisions
Requires more work
Recommended
During build, using md5 hash
Thursday, 26 May 2011
Compromise
Thursday, 26 May 2011
CompromiseCreate a version function
Thursday, 26 May 2011
CompromiseCreate a version function
Put on all resources
Thursday, 26 May 2011
CompromiseCreate a version function
Put on all resources
mod_rewrite magic
Thursday, 26 May 2011
Compromise
http://bit.ly/query_rev_comp
Create a version function
Put on all resources
mod_rewrite magic
Thursday, 26 May 2011
Browser Tools
Thursday, 26 May 2011
Browser Tools
Firebug
Thursday, 26 May 2011
Browser Tools
Firebug
YSlow
Thursday, 26 May 2011
Browser Tools
Firebug
YSlow
PageSpeed
Thursday, 26 May 2011
Browser Tools
Firebug
YSlow
PageSpeed
Chrome Inspector
Thursday, 26 May 2011
Other Tools
Thursday, 26 May 2011
Other Tools
HTTPWatch.com
Thursday, 26 May 2011
Other Tools
HTTPWatch.com
WebPageTest.org
Thursday, 26 May 2011
Other Tools
HTTPWatch.com
WebPageTest.org
HTTPArchive.org
Thursday, 26 May 2011
Other Tools
HTTPWatch.com
WebPageTest.org
HTTPArchive.org
chartbeat.com
Thursday, 26 May 2011
Other Tools
Thursday, 26 May 2011
Other Tools
WonderProxy.com
Thursday, 26 May 2011
Other Tools
WonderProxy.com
BrowserScope.com
Thursday, 26 May 2011
Other Tools
WonderProxy.com
BrowserScope.com
html5boilerplate.com
Thursday, 26 May 2011
“Knowledge rests not upon truth alone, but upon error also”
- Carl G. Jung
Thursday, 26 May 2011
Questions?
Joind.in: http://joind.in/3401
Thursday, 26 May 2011