The Ultimate Guide to Supercharging Your WordPress Blog

Nobody likes a slow website. Poor website performance results in fewer visitors. For online merchants, slow-loading pages lead to shopping cart abandonment and loss of sales. Underlying the experiential problems, website performance has a huge impact on SEO and search rankings. When your page rank falls, the number of visits decrease, and your revenue stream will suffer. Unless you have optimized your site, it’s highly likely that some elements of your code are leaking page load time. Milliseconds add up, and the fixes may be simple. First, you need to identify the leaks.

What is Slowing Down Your Blog?

As you prepare to optimize your website, it is important to determine what is impacting page load times. To test the speed of your website, go to http://www.webhostinghero.com/speed/ and enter the URL of a web page you would like to analyze. Once the speed test is completed, have a look at the Performance Grade and PageSpeed reports. Those reports will provide you with various tips to improve the performance of your website.

Before you spend your money

As you analyze the results of the speed test, you will see that are many on-page factors that can contribute to increased load times. Before you start spending money on content delivery networks and other online optimization services, it is advisable to make all the on-page adjustments possible. If your code is resource-intensive, optimization services won’t make a significant difference, and your return on investment will fall flat.

Optimization Tip #1: Reduce and Compress Images

For your images to load as quickly as possible, it is important to resize them before uploading them to your website. Don’t upload images larger than what you actually need to display. Scaling images in the HTML code might display them as desired, but it won’t reduce its original file size. For example, a JPG image that is 800×800 pixels with a 100kb file size will take just as long to load when coded to display at a 200×200 size as it would if you displayed it at full size. If you optimize the JPG to only 200×200 before you upload it, you might be able to get it down to 20kb and reduce the load time significantly.

The PNG image format is actually the best choice as it allows to store high quality images with a high level of compression. Unfortunately, PNG files are usually large due to the simple fact that they are not compressed.

To compress PNG images, you can use TinyPNG.org, a free online tool that allows you to compress PNG files without losing quality while preserving alpha transparency.

Optimization Tip #2: Reduce the number of requests

When a browser retrieves all of the elements of a web page, it will not simultaneously download more than five (5) elements from the same host. Therefore, the more files that your web page has, the longer it will take to load it, no matter how small the files are.

If you have multiple CSS and Javascript documents, it is a good practice to combine them to reduce the number of requests made to the web server.

Optimization Tip #3: Minify HTML, Javascript and CSS

Remove extra spaces and line breaks from your source code to reduce the amount of data transferred and decrease the load time. The following plugins are some of the easiest ways to dynamically minimize the documents:

1. Minify HTML: This plugin will minify HTML.
2. Better WordPress Minify: This plugin will “minify” Javascript and CSS documents exclusively and is completely configurable. A “minify” process combines multiple CSS or Javascript files, removing unnecessary whitespace and comments, and then serves them with gzip encoding and optimized client-side cache headers. If you decide to activate Javascript compression, make sure to test your website thoroughly, as it could break your scripts. This plugin also gives you the possibility of excluding certain files from the compression process.
3. WP Minify: This plugin can minify HTML, Javascript and CSS documents.

If you would rather not use a plugin to compress CSS and Javascripts documents, it is also possible to minify them by using some online tools such as these:

• CSSMinifier.com
• Javascript-Minifier.com

If you use online tools to compress your files, make sure to keep a copy of the original sources files in case you need to edit them later.

Optimization Tip #4: Leverage Browser Caching

By specifying a longer caching period for your web page components (HTML, images, Javascripts, CSS documents, etc.), web browsers will cache these elements locally so that they don’t need to be downloaded from the server each time the page is accessed.

In order to leverage browser caching, create a file named .htaccess at the root of your blog (ie.: /public_html/path/to/blog). If an .htaccess file already exists, append this code to the end of it:

AddType image/x-icon .ico

Another option is to add an Expires header by appending this code to your .htaccess file:

AddType image/x-icon .ico

ExpiresActive On
ExpiresByType image/gif A29030400
ExpiresByType image/png A29030400
ExpiresByType image/jpeg A29030400
ExpiresByType image/x-icon A29030400
ExpiresByType application/pdf A29030400
ExpiresByType application/x-javascript A604800
ExpiresByType text/plain A86400
ExpiresByType text/css A604800

Using the htaccess directives above will instruct web browsers to cache files for a period based on file type:

• Image files: 1 year
• Javascript, CSS and SWF files: 1 week
• HTML and PHP files: 24 hours

Optimization Tip #5: Enabling GZip Compression

By enabling GZip, the web server will compress files on the fly before sending them to the web browser. This significantly reduces the total size of a web page. In some cases, GZip is enabled by default by the web hosting provider. But if that’s not the case, you can add this code to your .htaccess file:

AddOutputFilterByType DEFLATE image/gif image/png image/jpeg image/x-icon application/pdf application/javascript application/x-javascript text/plain text/html text/css text/x-component text/xml application/json 

Optimization Tip #6: Add a Caching Plugin

Caching pages on your WordPress blog will significantly decrease processing time. When a web page is generated by WordPress, the caching plugin will store the output in a database. The next time the page is requested, it will be retrieved from the cache for faster rendering. Another benefit of caching pages is that it decreases server load, leaving more resources available for other processes.

There are various WordPress cache plugins that can accomplish this, but the best one, by far, is WP Super Cache. From my experience, it is the most efficient caching plugin and it plays well with other WordPress plugins. Here’s a quick and dirty step-by-step guide to installing and configuring WP Super Cache:

1. Download and install WP Super Cache from http://wordpress.org/extend/plugins/wp-super-cache/
2. Activate the plugin and go to Settings > WP Super Cache.
3. Under the Easy tab, select Caching On and click Update Status.
4. Click the Advanced tab and check the following parameters:
   • Cache hits to this website for quick access.
   • Use mod_rewrite to serve cache files.
   • Compress pages so they’re served more quickly to visitors.
   • 304 Not Modified browser caching. Indicate when a page has not been modified since last requested.
   • Don’t cache pages for known users.
   • Cache rebuild. Serve a supercache file to anonymous users while a new file is being generated.
5. Click on Update Status.
6. Scroll down the Advanced settings page and click the Update Mod_Rewrite Rules button below the Mod Rewrite Rules section.
7. Scroll down to Expiry Time & Garbage Collection and select Timer next to Scheduler. Click on Change Expiration.
8. Click the Preload tab set the preload cache process to be executed every 720 minutes (twice a day). You can decrease this value if you have a lot of activity on your blog.
9. Click the Update Settings button.
10. You can chose to preload the cache right away by clicking on Preload Cache Now but this is optional.

Caching pages will increase the first byte time of our speed test because there’s less processing involved.

By simply applying these on-site optimization tips, the load time has improved by 89%.

Using a Content Delivery Network

If your website has a high level of traffic, you might want to take things a step further and use a Content Delivery Network (CDN). A CDN will replicate the content of your website on multiple servers that are located around the world. Visitors will download your website from the location that is geographically closest to them.

There are several CDN services out there that employ various technologies. Some CDN services will only cache CSS documents, Javascript, and media files (images files, videos, etc.), while others will cache the content of your pages, too.

One CDN we recommend is CloudFlare, a CDN that can cache all of the static resources of your website and decreases load time for your visitors no matter where they are geographically located.

Here’s how to use CloudFlare with your WordPress blog:

1. Go to your SirsteveHQ control panel and click the CloudFlare icon.
2. Enter your email address below “Enable CloudFlare” and click on Next.
3. Once your account is created, you’ll be prompted to enter your website’s domain name.
4. Cloudflare will be scanning your website for a while, so you can watch the video in the meantime. Click on Continue when the scan is complete.
5. Cloudflare will present you with the suggested DNS records for your domain. If you need to add any records manually, you may do so now.
6. Click on I’ve added all missing records, continue.
7. Select the plan that you wish to use. For this tutorial, we’ll be using the Pro Plan.
8. Choose the performance level that you wish to use. We’ll select CDN + Full Optimizations for this tutorial.
9. Set the security level to Medium and click on Continue.
10. On the Confirm SSL page, click Continue to the final step.
11. Go to your domain registrar’s control panel and change the nameservers for your domain name to those given by CloudFlare. If SirsteveHQ is your domain registrar, then you don’t need to update your nameservers, as your SirsteveHQ account will be linked to your CloudFlare account.  Once you’ve updated your nameservers, it can take up to 48 hours before the traffic is directed to CloudFlare’s network.
12. Click on I’ve updated my nameservers, continue.
13. One the page titled My Websites, click the gear icon next to your domain name and select CloudFlare settings.
14. Select the Performance settings tab and set the following parameters:
    • Caching level: Agressive
    • Autominify: Check JS, CSS and HTML
    • Rocket Loader: Automatic
    • Website preloader: On

Using the same sample we used above for caching, you can see how our test site was optimized even further by using CloudFlare.

Notice that the number of requests and the total size of the web page has increased since implementing CloudFlare. This is because CloudFlare pushes three (3) additional files: cloudflare.min.js, rocket.js and oracle.js. Fortunately, there is still an improvement of about 25% in load time. The real gain in using a CDN will be much more apparent for high traffic websites.

There are many other things you can do to improve the load time of your website. These were just a few example. Try them out and see if you notice any improvement in your site performance!