You are on page 1of 67

Friday, June 4, 2010

Cache Money
High Performance Websites and Cache Optimization

By: Nathan Bertram

Friday, June 4, 2010


What is Caching?

- Every time a request is made to your servers; code gets executed on the
fly possibly with some database requests. (compiled vs. scripting)

- Caches are used to retain pages or data access over HTTP requests and
reuse them without the expense of re-creating them.

- Caches save time and valuable resources when used appropriately.

- Caches are often a life-line when creating high-performance and scalable


applications.

Friday, June 4, 2010


What is Caching?

Page Responsiveness - Simply the amount of time that it takes to


load a webpage on a browser.

Faster loading pages = Good for everyone =)

Two Questions we should be asking:


A. How can we measure responsiveness?
B. How can we improve responsiveness?

Friday, June 4, 2010


How can we measure responsiveness?

Client Side - Firebug Plugin for Firefox

Friday, June 4, 2010


How can we measure responsiveness?

Client Side - Safari: Web Inspector

Friday, June 4, 2010


How can we measure responsiveness?

Client Side - Google Chrome: Resources

Friday, June 4, 2010


How can we measure responsiveness?

Client Side - Google Chrome: Timeline

Friday, June 4, 2010


How can we measure responsiveness?
When Working Server Side: Server Logs

Friday, June 4, 2010


How can we measure responsiveness?
Load Testing

Apache Bench: http://httpd.apache.org/docs/2.0/programs/ab.html

Friday, June 4, 2010


How can we measure responsiveness?
Load Testing - SAAS Cloud Apps.

Friday, June 4, 2010


How can we measure responsiveness?
Load Testing

Remember. These auto-test results are no substitute for how users


actually will use & abuse your application.

Friday, June 4, 2010


How can we improve responsiveness?

In addition to Code & Query Optimization. We can improve:

1. Client Side Caching


- Assets
- HTTP Headers
- CSS Sprites
- CDN’s
2. Server Side Caching
- Page Caching
- Business Logic Specific Caching
- Fragment Caching

Focus on the greatest return in responsiveness (performance) for


time invested to implement.

Friday, June 4, 2010


Client Side Caching

What are assets?


Any file we load in the returned html page: blah.css, blah.js, blah.jpg,
blah.swf & etc.

Asset loading typically accounts for 75-90% of your load time.


Google WebMaster tools.

Friday, June 4, 2010


Asset Caching

Joe Client Visits:


prairiedevcon.com

Friday, June 4, 2010


Asset Caching

Joe Client Visits:


prairiedevcon.com

Server:
Sends HTML
File

Friday, June 4, 2010


Asset Caching

Joe Client Visits:


prairiedevcon.com

Joe Client
Server: Reads HTML File
Sends HTML
File

Friday, June 4, 2010


Asset Caching

Joe Client Visits:


prairiedevcon.com GotStyle.css

Joe Client
Server: Reads HTML File
Sends HTML
File

Friday, June 4, 2010


Asset Caching

lolcat2.jpg
lolcat.jpg

Joe Client Visits:


prairiedevcon.com GotStyle.css

Joe Client
Server: Reads HTML File
Sends HTML
File

Friday, June 4, 2010


Asset Caching

lolcat2.jpg
lolcat.jpg

Joe Client Visits:


prairiedevcon.com GotStyle.css
Default.js

jquery.js
Joe Client
Server: Reads HTML File
Sends HTML
File lolcat.jpg

jumpingWookie.png PirateFail.jpg

Friday, June 4, 2010


Asset Caching
Reduce the Total Number of Requests
- Combine CSS and JS files where possible
- Use CSS Sprites where possible

Friday, June 4, 2010


Asset Caching
Combine JS & CSS Files

Friday, June 4, 2010


Asset Caching
Combine JS & CSS Files

Write an automated task or implement a library that takes all .js/.css files
and combines them into one. Various permutations of how this can be
accomplished.

Friday, June 4, 2010


Asset Caching
Combine JS & CSS Files

Make use of the browser cache by adding a version or timestamp to the


end of the file. Change the version or timestamp when there are new
changes to the .js/.css file in question.

Friday, June 4, 2010


Asset Caching
Combine JS & CSS Files

Make use of the browser cache by adding a version or timestamp to the


end of the file. Change the version or timestamp when there are new
changes to the .js/.css file in question.

Tip: On code generation grab the mtime (unix) and append it on.

Friday, June 4, 2010


Asset Caching
Combine JS & CSS Files

Make use of the browser cache by adding a version or timestamp to the


end of the file. Change the version or timestamp when there are new
changes to the .js/.css file in question.

Tip: On code generation grab the mtime (unix) and append it on.

Exact same concept can be applied to all other assets.

Friday, June 4, 2010


Asset Caching
Minify JS and CSS

Friday, June 4, 2010


Asset Caching
Minify JS and CSS

Friday, June 4, 2010


Asset Caching
Minify JS and CSS

What do JS & CSS Minify Libraries do?


- Compresses Code: Takes a selected file and gets rid of excess white space
& excess carriage returns (\n\r).
- May run an optimization algorithm against the css or js file.

Friday, June 4, 2010


Asset Caching
Minify JS Libraries

Libraries
- JSMin (http://www.crockford.com/javascript/jsmin.html)
------ C#,Java, Perl, PHP, Python, OCAML, Ruby.

- YUI Compressor (http://developer.yahoo.com/yui/compressor)


------- java -jar yuicompressor-x.y.z.jar myfile.js -o myfile-min.js

- Packer (http://dean.edwards.name/packer/
----- .NET, PERL, WSH, PHP, APANTA IDE PLUGIN

Find the one that works for you in your environment.

Friday, June 4, 2010


Asset Caching
Minify CSS Libraries

Libraries
- YUI Compressor (http://developer.yahoo.com/yui/compressor)
------- java -jar yuicompressor-x.y.z.jar myfile.css -o myfile-min.css

Friday, June 4, 2010


Asset Caching
Minify JS and CSS

Bandwidth Savings:
Reduce the total weight of the file.
24kb x 1 000 000 unique visitors per month= ~22.8GB
Reduce from 24kb to 15kb
15kb x 1 000 000 unique visitors per month = ~14.3GB

Save: ~8.5GB /mnth

Friday, June 4, 2010


Asset Delivery
CSS Sprites
Combine multiple images into one file.
Use CSS to go to the part of the image you need for the given element.

Friday, June 4, 2010


Asset Delivery
Take Advantage of CDNs - Content Delivery Networks

Serve up assets from closest geographically CDN in relation to user


request.

Friday, June 4, 2010


Asset Delivery

Take Advantage of Google’s CDN

http://code.google.com/apis/ajaxlibs/documentation/#AjaxLibraries

Some may already have a cached version of the given file.

You don’t pay for any of the bandwidth being used to download that given
file.

jQuery, jQuery UI, Prototype, Script.aculo.us, MooTools, Dojo, SWFObject,


YUI, Ext Core, Chrome Frame, WebFont Loader

Friday, June 4, 2010


Asset Delivery

Take Advantage of Microsoft’s CDN

http://www.asp.net/ajaxlibrary/cdn.ashx

Friday, June 4, 2010


Asset Delivery

CDNs can be expensive. Sometimes geo-located hosted assets just don’t


make sense (ie. 75% of your users are in the Prairies).

Friday, June 4, 2010


Asset Delivery

Setup a static host for your assets.

- Allows you to maximize parallel downloads.


- Limited to 2 parallel downloads per hostname.
- Don’t use more than 2-4 domains because of DNS lookup penalty.

Friday, June 4, 2010


Expires Header
HTTP Header:
Expires: Wed, Jan 1 2012 18:00:00 GMT

Joe Client Server

Browser
Cache

1. User Requests Asset from the Server


2. User Receives & Stores the file in the local browser cache
3. Next time the user visits that website, the browser checks the local
cache.
4. If the local browser cache has the same file and it hasn’t expired the
browser simply doesn’t bother downloading a new copy of that file
because it already has that given file in its local cache.

Friday, June 4, 2010


Expires Header
On Apache you can:

Friday, June 4, 2010


Expires Header
On Apache you can:
Expires: Wed, Jan 1 2012 18:00:00 GMT

But..... There is a problem with this.


What happens if you decide to update your content. No good.

Friday, June 4, 2010


Expires Header
Remember this:

Problem solved.

Friday, June 4, 2010


ETag Header

What are Entity Tags (ETags)?

- Are a mechanism that web servers and browsers use to determine


whether or not a specific component in the browsers cache matches the
one on the origin server.

- Added to be a more flexible than the last-modified date.

Joe Client Server

Friday, June 4, 2010


ETag Header

What are Entity Tags (ETags)?

- Are a mechanism that web servers and browsers use to determine


whether or not a specific component in the browsers cache matches the
one on the origin server.

- Added to be a more flexible than the last-modified date.

"10c24bc-4ab-457e1c1f"
Joe Client Server

Friday, June 4, 2010


ETag Header

What are Entity Tags (ETags)?

- Are a mechanism that web servers and browsers use to determine


whether or not a specific component in the browsers cache matches the
one on the origin server.

- Added to be a more flexible than the last-modified date.

"10c24bc-4ab-457e1c1f"
Joe Client Server

304 Not Modified

Friday, June 4, 2010


ETag Header

Problems with Entity Tags (ETags)?

- They are typically constructed using attributes that make them unique
to a specific server hosting a site. No good for a large cluster.

- If you aren’t taking advantage of them, disable them in Apache or IIS.

Friday, June 4, 2010


Others Headers
Utilize the clients caching even more. Useful with Fragment & object
caching.

Max-Age - Amount of time from when the file was received to when it
expires.
Last-Modified - Compares the modified date in cached to the one in the
server. Just like ETags except using date instead of a custom hash.

Cache-Control: private, max-age=0, must-revalidate

Friday, June 4, 2010


Server Side Caching

Page Caching
- One of the simplest forms of server aching
- Saves generated files .html, .json, .csv to the file system.
- Subsequent requests the server serves up these files directly.

Use when content on entire page doesn’t change very often. This can even be
an entire page that only changes once every hour.

Friday, June 4, 2010


Server Side Caching
Use when content on entire page doesn’t change very often. This can even be
an entire page that only changes once every hour.

Friday, June 4, 2010


Server Side Caching

Cache Storage
FileStore - Keeps cached files on file system.
MemoryStore - Keeps cached files in memory. *warning*
DrbStore - Keeps cached files in memory of a seperate, Drb process. Drb ==
Distributed Ruby.
MemCachedStore - Keeps cached files in proven cache server memcached.

Friday, June 4, 2010


Server Side Caching
Problem with page caching is often we need execute more complex logic
and display dynamic content.

Friday, June 4, 2010


Server Side Caching

Fragment Caching
- When you need more granular control over what parts of the page need
to be cached. Probably because certain parts of the page are unique to the
user.

Friday, June 4, 2010


Server Side Caching
Cache specific parts of your business logic.

For example:

Friday, June 4, 2010


Server Side Caching
Quick word: Reverse Proxies Caching.
A reverse proxy can reduce load on web servers by caching static content
(ie. pictures, css)

Know that they exist.

Friday, June 4, 2010


Server Side Caching

It’s alot of work maintaing all this expiration.

Friday, June 4, 2010


Server Side Caching
Memcached.

A distributed memory object caching system.

Simply a {} in memory. Dead simple Key-Value pairs.

- Store full Objects


- Store parts of a template
- Store entire pages instead of directly on the filesystem

sudo port install memcached (runs as seperate process)

memcached -m 1500 (1.5 Gigs).

Friday, June 4, 2010


Server Side Caching

Memcached.

Friday, June 4, 2010


Misc. Optimization Tips
Enable gzip on your server.

1. Starting with HTTP/1.1 web clients indicate support for compression.


Accept-Encoding: gzip, deflate

2. If the web server sees this in the header it returns a compressed


Content-Encoding: gzip

Reduces response size by about 70%.


~90% of traffic on the web claims to use it.
GZIP uncompressed file types(html, css, js)

Friday, June 4, 2010


Misc. Optimization Tips
Flush the buffer.

- Optimize your images.


pngcrush image.png -rem alla -reduce -brute result.png
jpegtran -copy none -optimize -perfect src.jpg dest.jpg

- Use CSS. Replace image headers and style when CSS when appropriate.
- Reduce the number of DOM elements on the page. Clean & lean markup.
- Choose <link> over @import for css. (IE will load @import items last)
- Minimize number of iframes
- Where possible avoid unnecessary redirects. Slows down user experience.
- Avoid Empty img src’s <img src=“” alt= “” /> (Safari, Chrome, IE)
- Look into Post-Loading
--- YUI ImageLoader

Friday, June 4, 2010


Misc. Optimization Tips
Pagination.

Friday, June 4, 2010


Firefox: YSlow Plugin for Firefox & Firebug

http://developer.yahoo.com/yslow/

Friday, June 4, 2010


In Summary.

1. Measure responsiveness. Know where you stand.


2. Improve Responsiveness. Pick battles with the greatest return.
3. Repeat.

Friday, June 4, 2010


In Summary.

1. Measure responsiveness. Know where you stand.


2. Improve Responsiveness. Pick battles with the greatest return.
3. Repeat.

1. Client Side Caching


- Assets
- HTTP Headers
- CSS Sprites
- CDN’s
2. Server Side Caching
- Page Caching
- Business Logic Specific Caching
- Fragment Caching
Remember - Caching is no substitute to in-efficient code.
Use Caches to boost your performance and save on
valuable resources (servers, your time, etc.)

Friday, June 4, 2010


In Summary.

Remember - Caching is no substitute to in-efficient code.

Use Caches to boost your performance and save valuable resources


(servers, time, money etc.)

Friday, June 4, 2010


Resources.
http://developer.yahoo.com/performance/rules.html
http://developer.yahoo.com/yslow/
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=35769
http://www.websiteoptimization.com/publications/
http://memcached.org/

Friday, June 4, 2010


Thank you.

Friday, June 4, 2010


Questions?

Skype: nathanbertram
Twitter: @nathanbertram
Email: nathan@2012technologies.com
Phone: +1 204 995-3147

Friday, June 4, 2010