Sunday, December 4, 2011

HowTo: Configure WordPress To Use A Content Delivery Network (CDN)

Research shows that if your web pages take longer than 5 seconds to load, you lose 50% of your viewers and sales. You can speed up your wordpress blog by using a CDN to display content to users faster and more efficiently. You can distributes common files or content such as css, javascript, uploaded images, videos and much more through a CDN, which serves the content from the closest cdn edge server to the end-user. In this tutorial, I will explains how to configure WordPress, Apache/Lighttpd webserver, Bind dns server to use a CDN to distribute your common files such as css, js, user uploaded files and lighten load on your web server.

What Is A CDN?

A content delivery network or content distribution network (CDN) is a system of computers containing copies of data, placed at various points in a network so as to maximize bandwidth for access to the data from clients throughout the network. A client accesses a copy of the data near to the client, as opposed to all clients accessing the same central server, so as to avoid bottleneck near that server. A cdn will increase speed and efficiency for your blog.

What Are The Advantages Of Using CDN Over Central Server?

  • Speed - All common media files distributed via CDN. For example, files.cyberciti.biz configured as CDN subdomain. Everything hosted on files.cyberciti.biz is geographically closer to the end-user. If you run dns query over files.cyberciti.biz, it will return an IP geographically closer to you.
    $ host files.cyberciti.biz
    $ ping files.cyberciti.biz
    • This will increase delivery speed and avoids network congestion on your own server.
  • Security - It adds additional level of security.
  • Availability - CDNs offers 100% availability, even with large power, network or hardware outages.

Different Types Of CDNs

A CDN can use various methods to distribute your content such as:
  1. Peer to peer CDN - This is used to distribute latest episode of a soap opera (movies / TV shows) or some sort of software patch/update in short period of time to large number of users.
  2. Origin Pull CDN - This is useful to distribute small files such as javascript, css, images, text, pdf, .doc, .xls etc. This is recommended for WordPress. All content is stored on your own server called "Origin Pull Host". This host is then registered with the CDN. When the first user requests the content, it is pulled to the CDN network from your host and delivered via CDN to the closest point to that end user. The content is cached on CDN with a TTL (or max age and Etags is also used). This kind of configuration requires storage on your own server and not on the CDN server. The first requesting user has an average CDN experience, while later users have very fast user delivery experience. This is recommended for file size <= 10MB.
  3. PoP Pull CDN - You need to upload content to the CDN host server, where it is stored for delivery. This option is little expensive as you need to purchase the CDN storage with provider along with bandwidth. This is recommend for large files and video streaming etc. You need to upload files to the CDN server using FTP / SCP or API.

Content Delivery Service Providers

A list of some of the larger content delivery network providers. Do your own research before purchasing CDN service from any one of the following provider:
  • Amazon CloudFront
  • Akamai
  • CacheFly
  • EdgeCast Networks
  • Internap
  • Level 3 Communications
  • Limelight Networks

Our Sample Setup

  • Blog URL : http://nixcraft.in/ - This is hosted on your own server using Apache, Lighttpd, IIS or Nginx.
  • Origin Pull URL : http://www-origin.nixcraft.in/ - This is hosted on your own server. You need to configure your web server, wordpress and dns server to use this. This is called as "Origin Pull Host" which is a CDN method by which content is pulled from your web server.
  • CDN URL : http://files.nixcraft.in/ - This is a cdn url hosted by one of the above CDN provider. This url always point to an edge server via proprietor DNS hacks. files.nixcraft.in must be set as CNAME records which will point to domain names of CDN server.
  • CDN DNS CNAME : files.nixcraft.in.example.com - example.com is one of the above CDN provider. This is must be set as CNAME for files.nixcraft.in

Step # 1: Purchase CDN Service

The cost varies between CDN providers. Check CDN service providers website for more information. Next, you need to use service providers "control panel" to configure an "Origin Pull Host" for each domain. In other words configure files.nixcraft.in in origin pull mode. The control panel will also provide your an option to setup CDN dns CNAME. You need to use same CNAME in step # 2. Once the configuration is active and the CNAME is resolving, calls to files.nixcraft.in will be cached from www-origin.nixcraft.in.

Step # 2: Update Your DNS Server

Assuming that you are using BIND dns server edit your zone file and add entry as follows:
; CDN CNAME mapping for files.nixcraft.in
files                3660       IN CNAME files.nixcraft.in.example.com.
; Your www-origin url (note nixcraft.in is also hosted on same server IP 123.1.2.3)
www-origin      3600       IN A 123.1.2.3
Reload your named:
# rndc reload
To keep your configuration simple use same web server for origin pull domain and main domain i.e. host both www-origin.nixcraft.in and nixcraft.in on same web server. This allows you to directly upload and map files to the CDN server.
Please note that you can setup CNAME and origin host names using your ISPs DNS control panel too.

Step # 3: Configure Origin Pull Web Server

You need to configure www-origin.nixcraft.in as follows:
  • Origin pull DocumentRoot: /home/httpd/www-origin.nixcraft.in - All your .css, .js and uploaded files are hosted here.
  • Server Blog DocumentRoot: /home/httpd/nixcraft.in - All your wordpress files are hosted here.
  • MaxAge: Set cache-lifetime headers for static files for cdn network.
  • Etags: An ETag (entity tag) is part of HTTP, the protocol for the World Wide Web. It is a response header that may be returned by an HTTP/1.1 compliant web server and is used to determine change in content at a given URL. When a new HTTP response contains the same ETag as an older HTTP response, the client can conclude that the content is the same without further downloading.
Here is a sample Lighttpd lighttpd.conf entry for the same:
# Configure ETags
etag.use-inode = "enable"
etag.use-mtime = "enable"
etag.use-size = "enable"
static-file.etags = "enable"
 
###### CDN FILES via WordPress Upload ##############
$HTTP["host"]  == "www-origin.nixcraft.in"{
        server.document-root = "/home/httpd/www-origin.nixcraft.in"
        accesslog.filename         = "/var/log/lighttpd/cdn.access.log"
 #  Set max age
        $HTTP["url"] =~ "^/" {
            expire.url = ( "" => "access 60 days" )
        }
}
Here is a sample Apache httpd.conf file:
<VirtualHost www-origin.nixcraft.in>
 ServerAdmin webmaster@nixcraft.in
 DocumentRoot /home/httpd/www-origin.nixcraft.in
 ServerName files.nixcraft.in
 ServerAlias file.nixcraft.in
 ErrorLog /var/logs/httpd/cdn-error_log
 CustomLog /var/logs/httpd/cdn-access_log common
 
 # Files in this directory will be cached for 1 week only.
 # After 1 week, CDN server will check if the contents has been modified or not.
 # If not modified, Apache will send 304 "Not Modified" header
 <Directory "/userimages">
  Header set Cache-Control "max-age=604800, must-revalidate"
 </Directory>
 
 # Disable ETag as we are on cluster Apache server
 <Directory "/pdfs">
  Header unset ETag
  FileETag None
 </Directory>
 
 # Do not cache
 <Directory "/patches">
  Header Set Cache-Control "max-age=0, no-store"
 </Directory>
</VirtualHost>

Step # 4: Configure WordPress To Upload Files To CDN Server

  1. Visit your wordpress dashboard url (e.g., http://nixcraft.in/wp-admin/)
  2. Click on Settings > Miscellaneous Settings
  3. Update it as follows to point out to our configuration paths and CDN domains
Fig.01: Wordrpess Miscellaneous Settings - Set CDN URLS
Fig.01: Wordrpess Miscellaneous Settings - Set CDN URLS
All your uploaded files are saved on your server at /home/httpd/www-origin.nixcraft.in directory. Which is mapped to CDN via origin pull method. In this example:
  • A user requests for http://files.nixcraft.in/uploads/2010/04/test.png
  • First pulled from http://www-origin.nixcraft.in/uploads/2010/04/test.png by your CDN server
  • It is cached at CDN server for 60 days (or as per max age rule)
  • Rest of all user gets image from the CDN server.

Step # 5: Configure WordPress Theme To Serve CSS / JS From The CDN Server

First, copy your .css, and .js files to /home/httpd/www-origin.nixcraft.in directory:
mkdir -p /home/httpd/www-origin.nixcraft.in/{css,js}
cp -av /home/httpd/nixcraft.in/wp-content/themes/mythemename/*.css /home/httpd/www-origin.nixcraft.in/css
cp -av /home/httpd/nixcraft.in/wp-content/themes/mythemename/*.js /home/httpd/www-origin.nixcraft.in/js
Finally, edit your theme (header.php and footer.php) to point to CDN location for stylesheet and/or .js files by visiting "Manage Themes" option from the wordpress dashboard:
 
<link rel="stylesheet" href="http://files.nixcraft.in/css/style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://files.nixcraft.in/css/images.css" type="text/css" media="screen, projection" />
 

Results

The end result is pretty nice. Here are sample website load speed upgrades after using a CDN:
Fig.02: Alexa Showing Website loading speed
Fig.02: Alexa Showing Website loading speed
Fig.03: Pingdom Tools Showing Website loading speed
Fig.03: Pingdom Tools Showing Website loading speed
  • See 6 Tools To Find Out Website Load Speed

How Do I Test Images And Other Media Files Are Cached Or Not By CDN?

Use curl to test HTTP headers (look for Etags, max-age and Expires headers):
$ curl -I http://files.nixcraft.in/css/styles.css
$ curl -I http://files.nixcraft.in/uploades/2010/04/test.png
Sample outputs:
HTTP/1.1 200 OK
Content-Type: image/png
Accept-Ranges: bytes
ETag: "1482142335"
Last-Modified: Fri, 02 Apr 2010 09:11:53 GMT
Content-Length: 33143
Server: lighttpd
Cache-Control: max-age=2588785
Expires: Sun, 02 May 2010 09:13:50 GMT
Date: Fri, 02 Apr 2010 10:07:25 GMT
Connection: keep-alive
Posted by Edmund Liew at 9:23 PM

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)