5 Tips to Cache Websites and Boost Speed

5 Tips to Cache Websites and Boost Speed:

Often when we think about speeding up and scaling, we focus on the application layer itself.  We look at the webserver tier, and database tier, and optimize the most resource intensive pages.

There's much more we can do to speed things up, if we only turn over the right stones.  Whether you're using WordPress or not, many of these principals can be applied.  However we'll use WordPress as our test case.

Test Your Website speed

There are web-based speed testing tools that will help with this step.  Take a look at Webpagetest , Pingdom tools and Google's Chrome plugin Pagetest which integrates right into your browser.  If you're using firefox, take a look at YSlow .

If you've already got the WordPress plugin W3 Total Cache installed, that also integrates with Google Speed Test through an API key.  That integrates right into your WordPress dashboard.

1. Reduce objects

The first thing you can do to improve page performance and response is to make the page simpler.  Fewer images, fewer posts, fewer plugins, fewer widgets and so forth all contribute to a speedier page.  Obviously you don't want to forfeit functionality, but if you are loading 20 posts, you might want to reduce them to five or ten.   If you are calling out to third party APIs to load badges, twitter counts or SKYPE buttons, consider each and its affect on webpage load times.

If you have access to the underlying HTML, your application should try to reduce the number of DOM objects that are created.  These are created as the HTML is parsed.  Simpler structure here means faster page load times.

2. Compress objects

Your page is full of objects.  Many of them such as images, can be compressed.  This saves server storage space, and is a smaller object to copy across the network to the end users browser.  The web page test will show you a list of objects that are good candidates for compression.

3. Employ page & object caching

An object cache will store name/value pairs in memory for your application.  Essentially the webserver tier will cache data that it reads from the database to avoid additional round trips and network overhead.   For most of us, we'll want to get memcache installed in our webserver tier.

For a page cache, take a look at Varnish.  This can also be installed by package manager.  A page cache is like a tiny hyper efficient webserver.  It can sit on the webserver itself or on it's own server if you have many webservers in your environment.

Lastly if you have not already, grab the W3 Total Cache plugin for WordPress.  This plugin integrates directly with these two types of caches.  Simply click the Performance tab, select General Settings, and scroll to the object cache and varnish sections.

4. Browser caching

Browser caching is a tricky one.  You might think this is totally in the hands of the end user.  As it turns out, however the objects your webserver sends back to clients specifies various caching information in the HTTP headers.

Since we're encouraging you to test things yourself, fire up your command line terminal, and use "curl" to take a look at the headers of a file on your webserver.  Here's an example:

$ curl -I http://www.iheavy.com/files/pros.gif

HTTP/1.1 200 OK

Date: Tue, 01 Nov 2011 04:58:55 GMT

Server: Apache/2.2.3 (CentOS)

Last-Modified: Wed, 24 Aug 2011 01:06:09 GMT

ETag: "1649b1fb-5562-4ab35eadfe240"

Accept-Ranges: bytes

Content-Length: 21858

Content-Type: image/gif

 

Now we'll go ahead and enable W3 Total Cache in wordpress, then rerun the same curl command again:

 

$ curl -I http://www.iheavy.com/files/pros.gif

HTTP/1.1 200 OK

Date: Tue, 01 Nov 2011 05:01:27 GMT

Server: Apache/2.2.3 (CentOS)

Last-Modified: Wed, 24 Aug 2011 01:06:09 GMT

ETag: "5562-4ab35eadfe240"

Accept-Ranges: bytes

Content-Length: 21858

Cache-Control: max-age=31536000, public, must-revalidate, proxy-revalidate

Expires: Wed, 31 Oct 2012 05:01:27 GMT

Vary: User-Agent

Pragma: public

X-Powered-By: W3 Total Cache/0.9.2.3

Content-Type: image/gif

The main line we're interested here is the cache-control line.  Notice that the object has an expiration of 31536000.  Turns out that is the number of seconds in one week.  This tells the browser to keep these objects in its own cache and not refetch from the webserver each time.  That's a tremendous speedup.

5. Employ a CDN

If you haven't heard of CDN before, it stands for content delivery network.  Dropbox, the filesharing service is essentially a CDN service with a handsome user interface built on top of it.  Akamai is another famous CDN solution, one of the most mature, and respected available.  If you're on Amazon you might look at CloudFront, their CDN solution.

What is a CDN exactly?  Consider your pressing need for some basic groceries.  Maybe you need juice, a sandwich, beer or cigarettes.   If you're walking around the city, you'll find a deli on every corner.  That's the quickest way to get those items, a short walk and a short line.  When you need bigger items, you might make a weekly trek to Whole Foods.  From the perspective of food and beverage manufacturers you certainly want to get your products into the delis.  They are your grocery distribution networks, if you will.

W3 Total Cache supports Amazon CloudFront, simply enter your private and secret keys, and save.  Then upload all of your content up to S3 and you'll be benefiting from a CDN in no time.

Test again

Now that you've had a chance to look at all these caching opportunities, and hopefully implemented many of them in WordPress, rerun your Google Speed Test.

Google Page Test - Score of 91

We were able to raise our score from the mid-70's to 91 after tweaking various pieces of the site.  We haven't even implemented image sprites yet.

Hopefully this time around you'll see some objects loaded via CDN, more objects compressed, and proper expirations on most if not all content on your site.

 

 

 

 

 

CDN & caching are closer than you think

Most internet sites can make great gains in faster response time by looking in the right places.  Application and server rearchitecting give you a lot, but usually involve more complex and ongoing effort by developers.  However the basic caching improvements we described above will make a big difference as well.  CDN and caching technology is a lot more within reach than you think it is.