Webpage Component Caching (Part 1 of 2)

Cache Components As Long As Possible

The best way to im­prove per­form­ance of an ac­tion is to not per­form the ac­tion.  Ze­ro sounds like a great per­for­mance mea­sure­ment!  When it comes to the jour­ney a re­sponse makes from a ser­ver to a cli­ent, the best pos­si­ble per­for­mance is to eli­mi­nate the jour­ney com­plete­ly.

A web page con­sists of many com­po­nents:  the HTML, CSS, Java­Script, vari­ous types of me­dia, and others.  Each com­po­nent has to make the jour­ney from the ser­ver to the cli­ent.  Or does it?  If the com­po­nent hasn’t changed since the last time it made the trip, why make the trip a second time?  Why can’t the brow­ser just use the com­po­nent it got last time?

If the brow­ser would be so kind as to store the com­po­nent lo­cal­ly, it could re­use that com­po­nent in the fu­ture in­stead of down­load­ing it again.  In fact, brow­sers can do this.  All they need to know is how long to cache the com­po­nent before re-request­ing it from the ser­ver.  The brow­ser can­not be ex­pect­ed to know when the com­po­nent changes, so the ser­ver has to tell it.  This cach­ing pro­cess hap­pens on the cli­ent’s ma­chine, but is un­der the ser­ver’s con­trol.

HTML cach­ing is in­ap­pro­pri­ate if the page changes dy­na­mi­cal­ly or fre­quent­ly.  It al­so in­ter­feres with page sta­tis­tics be­cause it hides user hits from the ser­ver.  For these rea­sons, it is of­ten more ap­pro­pri­ate to make the HTML non-cache­able and to place all cache­able com­po­nents in ex­ter­nal files.

How To Implement HTML Caching

Ser­ver-side script­ing lang­uages (e.g., PHP, ASP) pro­vide a way to set headers for the cur­rent HTML page.  Use it to in­clude eith­er the expires or cache-control: max-age head­er line.  Expires al­lows us to set an ex­pi­ry date; cache-control: max-age al­lows us to set a du­ra­tion (length of time from ac­cess date to ex­pi­ry date).

How To Implement Other Caching

Apache’s ExpiresDefault and ExpiresByType di­rec­tives can be used with­in .htaccess files to set the ex­pi­ry dates.  For example:

ExpiresActive On
ExpiresByType image/gif "access plus 1 year"
ExpiresByType application/ecmascript M86400
ExpiresDefault A3600

In this ex­am­ple, the first line turns cache con­trol on (a ne­ces­sary first step), the se­cond line sets GIF images served from this di­rec­to­ry to ex­pire one year af­ter the brow­ser accesses them, the third line sets Java­Scripts served from this di­rec­to­ry to ex­pire 24 hours af­ter they were last mo­di­fied, and the fourth line sets other data served from this di­rec­to­ry to ex­pire one hour after they are ac­cessed.

Keep in mind that .htaccess applies to the di­rec­tory it is in and to all sub­di­rec­to­ries be­low it.

References

Caching Tutorial for Web Authors and Webmasters by Mark Nottingham.  Published 2010.06.29 by Mark Nottingham at www.mnot.net/cache_docs.  Accessed 2011.12.14.

Optimize Caching.  Published by Google at code.google.com/speed/page-speed/docs/caching.html.  Accessed 2011.12.14.  This is a detailed explanation of HTTP caching and a how-to tutorial.

Website Performance: Taxonomy of Tips by Warren Gaebel.  Published 2011.12.29 by Paid Monitor at blog.monitor.us/2011/12/website-performance-taxonomy-of-tips.  Accessed 2012.01.02

YSlow Ruleset Matrix.  Published by Yahoo at developer.yahoo.com/yslow/matrix.  Accessed 2011.11.30.  Yahoo’s implicit rankings can be inferred from the second column of the table (weight).  The bigger the number, the more important Yahoo considers the tip to be.

Try Paid Monitor For Free.  A 15-day free trial.  Your opportunity to see how easy it is to use the Paid Monitor cloud-based monitoring system.  Credit card not required.

The Paid Monitor Exchange at GitHub.  This is the official repository for scripts, plugins, and SDKs that make it a breeze to use the Paid Monitor system to its full potential.