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.thewebhostinghero.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.

Don’t Spend Your Money… Yet!

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.

On-Page Optimization Tips

For this tutorial, our example site is a vanilla WordPress installation on a Bluehost shared hosting account with only the Akismet plugin installed. We generated fictional content with the WP Example Content plugin and then removed the plugin.

Before we start optimizing our WordPress blog, let’s see how it actually performs. Here are the summary results from the speed test:

As we perform the optimization tasks described below, we will constantly monitor the website’s speed it to determine which changes have the most impact.

Let’s start optimizing our WordPress blog.

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.

By compressing island.png, the only PNG file on our blog, we saved 324 KB, reducing our file size from 409 KB to 93 KB. Below you can see the difference in loading times for both versions of the image. Notice that the transferred image size is not the actual size of the image, since it is compressed using Gzip by the web server. The actual image size is much larger. There is still an improvement in load time; the compressed images loads about 27% faster than the original one:

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. WordPress Compress HTML: This plugin will compress HTML content exclusively and requires no configuration. Simply install and active it.
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.

Here’s how compressing HTML and CSS files translates into load time reductions:

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

<IfModule mod_headers.c>
# YEAR
<FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf)$">
 Header set Cache-Control "max-age=29030400"
</FilesMatch>
# WEEK
<FilesMatch "\.(js|css|swf)$">
 Header set Cache-Control "max-age=604800"
</FilesMatch>
# 24 HOURS
<FilesMatch "\.(html|htm|txt|php)$">
 Header set Cache-Control "max-age=86400"
</FilesMatch>
</IfModule>

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

AddType image/x-icon .ico

<IfModule mod_expires.c>
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
</IfModule>

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:

<ifmodule mod_deflate.c>

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
</ifmodule>

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.

Let’s see how that translates into performance improvements, compared to our initial results:

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.

For this tutorial, we’ll be using 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 Bluehost 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 Bluehost is your domain registrar, then you don’t need to update your nameservers, as your Bluehost 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

Let’s see how our WordPress blog performs after implementing 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. We’d love to hear how you optimize your site and what works for you!

Stephane Brault is a veteran web developer and system administrator. He is the owner of TheWebHostingHero.com, a website dedicated to providing tutorials, reviews and news about the web hosting industry.

This shift in the consumer psyche is partially due to the increase in available information and guidance, and partially a result of a difficult economy. Consumers are driven to attempt new feats that they’d never otherwise consider, all in the hope of saving a few bucks.  In the realm of web hosting in particular, the DIY mentality shows no signs of slowing down. There’s no question that as these new webmasters become more capable and aware of the possibilities that come with building their own website, they will also become more dependent on their web hosting companies.  And this dependence is – perhaps surprisingly – not a bad thing.

Here are some reasons why:

1. The more people attempt to build their own websites, the more web hosts will develop their services to meet the growing needs of their customers.  There’s no question that as individuals become consumers of the web hosting industry and don’t leave these decisions to professionals, there will be a shift in the desires of web hosting consumers. Top web hosts will continue to show expanded features and services to meet these evolving needs.
2. Those building websites for the first time depend on their web hosts to make the endeavor as simple as possible. The continued growth of this trend will prompt web hosts to simplify their web hosting services in new and innovative ways. This will be a significant advantage for consumers at all skill levels.  Though many web hosts entice consumers by offering the latest technologies such as PHP 5 and PostgreSQL databases, novice website builders are looking for the simplest technologies. The more new website builders rely on their web hosts, the more hosts will simplify and adapt their platforms accordingly.
3. Web hosting is evolving from a strictly technical field to one that comprises a lot of design elements, and consumers at all levels depend on their hosts to provide these services.  Whether via a drag-and-drop website builder or a wide array of website templates, web hosts have begun to help their clients build not only reliable websites, but beautiful sites – and this is a trend that is certain to extend into the future.

One More Thing to Consider

It’s also important to consider that while DIY endeavors are becoming more popular, we are also living in an age where people are overstimulated and over-scheduled. They can only make time for things that are truly critical.  Some web hosting providers have already begun to offer mobile platforms through which webmasters can update their sites on-the-go. All of the top web hosts provide automatic site backups to protect their clients’ information, without placing this burden on the webmaster.

Moving forward, webmasters will likely find it even more difficult to balance the burden of building and maintaining their websites while tending to their family, business or other obligations.  In turn, they will rely on their web hosts even more to provide support services, reliable uptime and easy access – things which can always be improved.  Though this situation may seem paradoxical, it is certainly one that will have long term benefits for webmasters worldwide.

Jessica Stewart is a researcher at Consumer-Rankings.com and specializes in covering the progress of the hosting industry.