<img class="alignleft size-full wp-image-1764" alt="maxcdn-logo-cat" src="https://itxdesign.com/wp-content/uploads/2013/10/maxcdn-logo-cat.jpg" width="168" height="168" />We recently launched our new website at ITXDesign.com that features our new line of VPS Servers, Dedicated Servers, and Shared Web Hosting Plans.  After the launch we were tasked with quickly optimizing the site to take advantage of some of the latest optimization and caching tools.  The first thing you should do before making any changes to your website is test the site using <a href="http://webpagetest.org" target="_blank">webpagetest.org</a>.  This will allow you to establish a benchmark on how your site ranks.  Run the test:
<p style="text-align: center;">When we first ran the test we had very low rankings for almost all of the items that webpagetest.org checks.  We had a few A's, however most of the tests failed horribly with D's and F's.<img class="size-medium wp-image-1762 aligncenter" alt="webpage-speed-test-bad" src="https://itxdesign.com/wp-content/uploads/2013/10/webpage-speed-test-bad-300x75.jpg" width="300" height="75" /></p>

<ul>
	<li>First Byte Time</li>
	<li>Compress Transfer</li>
	<li>Compress Images</li>
	<li>Progressive JPEGs</li>
	<li>Cache static content</li>
	<li>Effective use of CDN</li>
</ul>
Our goal was to get all A's since we're over achievers, however it wasn't an easy task.  Our visitors appreciate a fast loading website so we began the process of speeding things up.

This tutorial is primarily for Wordpress Websites as that's what we use for our corporate sites.

<strong>Step 1.</strong>  We installed and configured <a title="wp super cache for wordpress" href="http://wordpress.org/plugins/wp-super-cache/" target="_blank">WP Super Cache</a>.  To complete the install login to your worpdress admin, click Plugins, and then search for "WP Super Cache".  Click the install and the activate the plugin.  This alone will address a lot of the issues.  Once the install is complete go to the settings for the plugin, Click the Easy tab, and then select "On" caching.  Then Click Update Status.  After this we would suggest clicking the Advanced Tab and be sure to select the following options:
<ul>
	<li>Cache hits to this website for quick access. (Recommended)</li>
	<li>Use mod_rewrite to serve cache files. (Recommended)</li>
	<li>Compress pages so they’re served more quickly to visitors. (Recommended)</li>
	<li>Cache rebuild. Serve a supercache file to anonymous users while a new file is being generated. (Recommended)</li>
</ul>
Then Click Update Status

This will enable the WP Super Cache Plugin, however there's still one more step.  After applying these changes you must click Update Mod_Rewrite Rules.  This will update your .htaccess file automatically with all of the caching directives so caching is enabled.

This step really helps with the <strong>First Byte Time </strong>and<strong> Compress Images</strong>.  It causes your website to create a cache version of each of your dynamic pages.  In other words it speeds up the first response from the server since it doesn't happen to make multiple mysql calls and generate the page on the fly.  Once you've completed all of this it's time to go to webpagetest.org again and run another test.  First you should open your website homepage in your browser to ensure the cache is generated.  Then run the second test and grab a cup of coffee.

<strong>Setting Up MaxCDN With WP Super Cache In Wordpress</strong>

<strong>Step 2.</strong> To resolve the rest of the optimization issues we would suggest setting up a CDN account with Max CDN

Simply visit their website, select a CDN plan, and within minutes you'll have your welcome letter.  After you login to your Max CDN account create a new "Pull Zone".  A pull zone makes managing your CDN easy.  A CDN works by making a copy of your images and javascript files which rarely change.  It then takes those copies and publishes them to several web servers around the world.  When a user visits your website the image is then loaded from the CDN instead of your site.  For example if your website was itxdesign.com and you wanted to load the image webhosting.jpg instead of using itxdesign.com/webhosting.jpg the coding is automatically updated to cdn.itxdesign.com/webhosting.jpg.  So your website pages still load from your hosting account, however the images load from the subdomain cdn.itxdesign.com.  The power behind the CDN is that the subdomain that you setup is dynamic.  In otherwords the ultimate location that it points to varies depending on the geographical location of the user.  If someone is in Virginia then cdn.itxdesign.com is automatically pointed to the closest server in Virginia and the images would be loaded from there.

<strong>The benefits of a Pull Zone with Max CDN</strong>

You should really consider using a Pull Zone.  If not then every time you upload a new image to your website you would have to login to your CDN account and upload it there. However, with a pull zone you simply upload the image to your website.  The first time a visitor goes to your site and requests an image that's not in the CDN, the CDN will automatically download that image from your site, add it to the CDN, and then display the image to the visitor.  This initial pull is slower than hosting the image yourself, however after the first pull the image is stored in the CDN and you'll see a huge improvement in speed.

<strong>Setup a Sub Domain or CNAME Record for Your CDN</strong>

In this step you can choose to either use the url that Max CDN provides or you can setup a sub domain using your own domain name.   We would suggest using cdn.yourdomain.com.  Contact your hosting provider and have them create a new dns cname record that points cdn.yourdomain.com to your url with Max CDN.  Your Max CDN url can be found by logging into your account, click Zones, click Manage next to the zone your created, Click Settings.  Then scroll to the bottom under custom domain settings.  For custom domains enter in cdn.yourdomain.com and click add.  Right below that you will see: <label>CNAME to</label> domain.domain.netdna-cdn.com.  Copy the CNAME to and that's what you send to your host.  This will allow them to setup your CNAME Record and point cdn.yourdomain.com to your Max CDN CNAME to domain.domain.netdna-cdn.com.

Enabling a CDN in WP Super Cache

<strong>After you've installed WP Super Cache and setup Max CDN you have to login to WordPress and enable the CDN function. </strong>
<ol>
	<li>Login to WordPress</li>
	<li>Go to Settings --&gt; WP Super Cache</li>
	<li>Click the CDN tab</li>
	<li>Check "Enable CDN Support"</li>
	<li>Off-site URL "cdn.yourdomain.com"</li>
	<li>Additional CNAMES "http://cdn.yourdomain.com"</li>
	<li>Check "Skip https URLs to avoid "mixed content" errors"</li>
	<li>Save Changes</li>
</ol>
We followed all of these steps and in the end it was very rewarding.  Our website is now superfast and we were able to achieve all "A's" with webpagetest.org<img class="aligncenter size-medium wp-image-1763" alt="webpage-test-great" src="https://itxdesign.com/wp-content/uploads/2013/10/webpage-test-great-300x75.jpg" width="300" height="75" />

If I had to rank this on difficulty for the average user I would say it's an 8 out of 10.  You have to understand caching, dns, cname records and CDN services in order to optimize your website and achieve a great report.  If you have questions leave a comment and we'll try to help.  If your website is hosted with us and you're using WordPress you can open a support ticket and we can handle the setup for you which is included in our hosting and support services.  If not we offer this service to non-clients for $150 if you're using WordPress and your website is hosted by another host.

Host On!