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.
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.
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:
- WordPress Compress HTML: This plugin will compress HTML content exclusively and requires no configuration. Simply install and active it.
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
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
Using the htaccess directives above will instruct web browsers to cache files for a period based on file type:
- Image files: 1 year
- 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:
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:
- Download and install WP Super Cache from http://wordpress.org/extend/plugins/wp-super-cache/
- Activate the plugin and go to Settings > WP Super Cache.
- Under the Easy tab, select Caching On and click Update Status.
- 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.
- Click on Update Status.
- Scroll down the Advanced settings page and click the Update Mod_Rewrite Rules button below the Mod Rewrite Rules section.
- Scroll down to Expiry Time & Garbage Collection and select Timer next to Scheduler. Click on Change Expiration.
- 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.
- Click the Update Settings button.
- 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.
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:
- Go to your Bluehost control panel and click the CloudFlare icon.
- Enter your email address below “Enable CloudFlare” and click on Next.
- Once your account is created, you’ll be prompted to enter your website’s domain name.
- 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.
- 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.
- Click on I’ve added all missing records, continue.
- Select the plan that you wish to use. For this tutorial, we’ll be using the Pro Plan.
- Choose the performance level that you wish to use. We’ll select CDN + Full Optimizations for this tutorial.
- Set the security level to Medium and click on Continue.
- On the Confirm SSL page, click Continue to the final step.
- 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.
- Click on I’ve updated my nameservers, continue.
- One the page titled My Websites, click the gear icon next to your domain name and select CloudFlare settings.
- 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 WebHostingHero.com, a website dedicated to providing tutorials, reviews and news about the web hosting industry.