Upload
helgi-bormar-borbjoernsson
View
2.644
Download
6
Embed Size (px)
DESCRIPTION
You’ve used all the server-side caching tricks in the book: memcache, APC, database cache and so on to squeeze every millisecond out, and now your site is as fast as it will ever get. Well guess again! These technologies are caching and creating the HTML which, if they done correctly, is only 10 – 20% of the user response time, so there is a lot of room for improvement. Learn how to optimize your JavaScript, CSS, Images, Cookies and a whole slew of other things that make frontend caching a magical place.
Citation preview
Frontend Caching
Helgi Þormar ÞorbjörnssonPhpDay, Italy, Verona, 14th May 2011
Saturday, 14 May 2011
Who am I?
Saturday, 14 May 2011
Who am I?
VP of Engineering at Orchestra.io
Saturday, 14 May 2011
Who am I?
VP of Engineering at Orchestra.io
Developer at PEAR
Saturday, 14 May 2011
Who am I?
VP of Engineering at Orchestra.io
Developer at PEAR
From Iceland
Saturday, 14 May 2011
Who am I?
VP of Engineering at Orchestra.io
Developer at PEAR
From Iceland
@h on Twitter
Saturday, 14 May 2011
Pareto Principle
20% 80%
Saturday, 14 May 2011
20% 80%
80 / 20 Rule
20% of the population receives 80% of the income
Saturday, 14 May 2011
20% 80%
80 / 20 Rule
20% of causes produce 80% of the effects
Saturday, 14 May 2011
80% of response time is
spent downloading resources
Saturday, 14 May 2011
4 Rules of Web Performance
Saturday, 14 May 2011
Weight
Time
Processing
Perception
Saturday, 14 May 2011
Perception
Saturday, 14 May 2011
Make people think your site is fast
Saturday, 14 May 2011
When people can interact with the site
Saturday, 14 May 2011
Saturday, 14 May 2011
“It all depends on how we look at things, and not how
they are in themselves.”
- Carl G. Jung
Saturday, 14 May 2011
50% of users arrive
on an empty cache
Perception
Saturday, 14 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
Saturday, 14 May 2011
Weight
Saturday, 14 May 2011
HTTP Requests
Saturday, 14 May 2011
HTTP Requests
Less is more
Saturday, 14 May 2011
HTTP Requests
Less is more
Fewer HTTP Requests
Saturday, 14 May 2011
HTTP Requests
Less is more
Fewer HTTP Requests
Easy to improve on
Saturday, 14 May 2011
Cookies
Saturday, 14 May 2011
Cookies
Sent with static content
Saturday, 14 May 2011
Cookies
Sent with static content
Slow upstream speed
Saturday, 14 May 2011
Cookies
Sent with static content
Slow upstream speed
Big cookies
Saturday, 14 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)
Saturday, 14 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)
Saturday, 14 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)
Saturday, 14 May 2011
Cookies
Saturday, 14 May 2011
Cookies
Saturday, 14 May 2011
Cookies
Remove unnecessary cookies
Saturday, 14 May 2011
Cookies
Remove unnecessary cookies
Appropriate domain level
Saturday, 14 May 2011
Cookies
Remove unnecessary cookies
Appropriate domain level
Keep size low
Saturday, 14 May 2011
Cookies
Remove unnecessary cookies
Appropriate domain level
Keep size low
Set Expires
Saturday, 14 May 2011
Parallel Downloads
Saturday, 14 May 2011
Parallel Downloads
Be aware of max connection limits
Saturday, 14 May 2011
Parallel Downloads
Be aware of max connection limits
CNAME to point multiple sub domains to the same IP
Saturday, 14 May 2011
Parallel Downloads
Be aware of max connection limits
CNAME to point multiple sub domains to the same IP
Saturday, 14 May 2011
Parallel Downloads
Borrowed from BrowserScope.org
Saturday, 14 May 2011
Parallel Downloads
Borrowed from BrowserScope.org
Saturday, 14 May 2011
Parallel Downloads
One domain = 2 Parallel connections
Saturday, 14 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
Saturday, 14 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
Saturday, 14 May 2011
Parallel Downloads
Too many hostnames can cause complications
Saturday, 14 May 2011
Parallel Downloads
Too many hostnames can cause complications
2 – 4 sub domains is a good average
Saturday, 14 May 2011
Combine Files
Combining 6 scripts into 1 eliminates 5 requests
Saturday, 14 May 2011
Combine Files
Combining 6 scripts into 1 eliminates 5 requests
Challenges: develop as separate modules combinations vs. loading more than needed
Saturday, 14 May 2011
Javascript
Doesn’t comply with parallel download rules
Saturday, 14 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
Saturday, 14 May 2011
Javascript
script defer attribute is not a solution
Saturday, 14 May 2011
Javascript
script defer attribute is not a solution
Solution - move them as low in the page as possible
Saturday, 14 May 2011
Processing
Saturday, 14 May 2011
Processing
Saturday, 14 May 2011
Processing
Fake the delivery
Saturday, 14 May 2011
Processing
Fake the delivery
Lazy Loading
Saturday, 14 May 2011
Processing
Fake the delivery
Lazy Loading
Above the fold Loading
Saturday, 14 May 2011
Processing
Fake the delivery
Lazy Loading
Above the fold Loading
Delay Javascript Loading
Saturday, 14 May 2011
Processing
Saturday, 14 May 2011
Processing
Bonus - async attribute
Saturday, 14 May 2011
Processing
Bonus - async attribute
http://www.appelsiini.net/projects/lazyload
Saturday, 14 May 2011
JS Minification
Saturday, 14 May 2011
JS Minification
Crushes the file
Strips out all cruft
Voodoo Magic!
Saturday, 14 May 2011
JS Minfication
UglifyJS
Google Closure
YUI Compressor
Saturday, 14 May 2011
JS Minfication
UglifyJS
Google Closure
YUI Compressor
http://bit.ly/compression-rates
Saturday, 14 May 2011
CSS Minification
YUI Compressor
minifycss.com
OOCSS
Saturday, 14 May 2011
GZipGZip can be used on
Saturday, 14 May 2011
GZip
JS
GZip can be used on
Saturday, 14 May 2011
GZip
JS
CSS
GZip can be used on
Saturday, 14 May 2011
GZip
JS
CSS
XML
GZip can be used on
Saturday, 14 May 2011
GZip
JS
CSS
XML
JSON
GZip can be used on
Saturday, 14 May 2011
GZip
GZip should not be used on
Saturday, 14 May 2011
GZip
Images
GZip should not be used on
Saturday, 14 May 2011
GZip
Images
Document formats
GZip should not be used on
Saturday, 14 May 2011
GZip
Images
Document formats
Already compressed
GZip should not be used on
Saturday, 14 May 2011
404
robots.txt
favicon
Saturday, 14 May 2011
Images
Saturday, 14 May 2011
Images
favicon
Saturday, 14 May 2011
Images
favicon
CSS Sprites
Saturday, 14 May 2011
Images
favicon
CSS Sprites
Saturday, 14 May 2011
Images
Saturday, 14 May 2011
Images
Badly optimised
Saturday, 14 May 2011
Images
Badly optimised
Thumbnails
Saturday, 14 May 2011
Images
Badly optimised
Thumbnails
PNGs compressed up to 50%
Saturday, 14 May 2011
PNG Optimise
OptiPNG
pngwolf
pngcrush
jpegtran
Saturday, 14 May 2011
Time
Saturday, 14 May 2011
SSL
Saturday, 14 May 2011
SSL
Extra roundtrips
Saturday, 14 May 2011
SSL
Extra roundtrips
More resources for servers
Saturday, 14 May 2011
SSL
Extra roundtrips
More resources for servers
Worth it, tho!
Saturday, 14 May 2011
Tread the users’ path
Saturday, 14 May 2011
Tread the users’ path
Test on slower connections
Saturday, 14 May 2011
Tread the users’ path
Test on slower connections
Slow proxies
Saturday, 14 May 2011
Tread the users’ path
Saturday, 14 May 2011
Tread the users’ path
Tables / Phones
Saturday, 14 May 2011
Tread the users’ path
Tables / Phones
Airline connections
Saturday, 14 May 2011
Tread the users’ path
Tables / Phones
Airline connections
Public places
Saturday, 14 May 2011
CDN
Saturday, 14 May 2011
CDN
Single domain
Saturday, 14 May 2011
CDN
Single domain
Smart routing
Saturday, 14 May 2011
CDN
Single domain
Smart routing
Data is closer to end user
Saturday, 14 May 2011
CDN
Saturday, 14 May 2011
CDN
Saturday, 14 May 2011
CDN on a Budget
Saturday, 14 May 2011
CDN on a Budget
S3
Saturday, 14 May 2011
Query vs. Filenamerevisions
Saturday, 14 May 2011
Query vs. Filenamerevisions
Cache far in future
Saturday, 14 May 2011
Query vs. Filenamerevisions
Cache far in future
Revisioning forces downloads
Saturday, 14 May 2011
Query vs. Filenamerevisions
Cache far in future
Revisioning forces downloads
Saturday, 14 May 2011
Query revisions
Saturday, 14 May 2011
Query revisions
Easy and convenient
Saturday, 14 May 2011
Query revisions
Easy and convenient
Usually not recommended
Saturday, 14 May 2011
Query revisions
Easy and convenient
Usually not recommended
Bad proxies are a problem
Saturday, 14 May 2011
Filename revisions
Saturday, 14 May 2011
Filename revisions
Requires more work
Saturday, 14 May 2011
Filename revisions
Requires more work
Recommended
Saturday, 14 May 2011
Filename revisions
Requires more work
Recommended
During build, using md5 hash
Saturday, 14 May 2011
Compromise
Saturday, 14 May 2011
CompromiseCreate a version function
Saturday, 14 May 2011
CompromiseCreate a version function
Put on all resources
Saturday, 14 May 2011
CompromiseCreate a version function
Put on all resources
mod_rewrite magic
Saturday, 14 May 2011
Compromise
http://bit.ly/query_rev_comp
Create a version function
Put on all resources
mod_rewrite magic
Saturday, 14 May 2011
Browser Tools
Saturday, 14 May 2011
Browser Tools
Firebug
Saturday, 14 May 2011
Browser Tools
Firebug
YSlow
Saturday, 14 May 2011
Browser Tools
Firebug
YSlow
PageSpeed
Saturday, 14 May 2011
Browser Tools
Firebug
YSlow
PageSpeed
Chrome Inspector
Saturday, 14 May 2011
Other Tools
Saturday, 14 May 2011
Other Tools
HTTPWatch.com
Saturday, 14 May 2011
Other Tools
HTTPWatch.com
WebPageTest.org
Saturday, 14 May 2011
Other Tools
HTTPWatch.com
WebPageTest.org
HTTPArchive.org
Saturday, 14 May 2011
Other Tools
HTTPWatch.com
WebPageTest.org
HTTPArchive.org
Yottaa.com
Saturday, 14 May 2011
Other Tools
Saturday, 14 May 2011
Other Tools
WonderProxy.com
Saturday, 14 May 2011
Other Tools
WonderProxy.com
pagespeed.googlelabs.com
Saturday, 14 May 2011
Other Tools
WonderProxy.com
pagespeed.googlelabs.com
BrowserScope.com
Saturday, 14 May 2011
Other Tools
WonderProxy.com
pagespeed.googlelabs.com
BrowserScope.com
html5boilerplate.com
Saturday, 14 May 2011
“Knowledge rests not upon truth alone, but upon error also”
- Carl G. Jung
Saturday, 14 May 2011
Questions?
Joind.in: http://joind.in/2987
Saturday, 14 May 2011