June 18th, 2012
Having a site that loads quickly is becoming more and more important. In fact, Google recently announced that they will start rewarding site’s with faster speeds. They have set the bar at 1.4 seconds.
At first, this might seem like a daunting task. Most people are happy with a site that loads in 3-5 seconds. But with the right knowledge and tools, it is pretty easy to dramatically improve your speeds, even to less than a second. And this can all be done in less than an hour.
Each step of the way I’ll show you the manual way of doing it as well as ways you can accomplish the same thing through WordPress plugins. The manual method is intended for those that are comfortable changing the core files of a theme and the “plugin methods” are intended for those who don’t want to risk messing anything up. If your comfortable with the manual methods, I’d suggest going that route as you won’t have to deal with incompatibility issues with plugins.
Remember – backup your site first and take it slow, just in case.
CLICK HERE for step by step on Backing up your site.
Step 1 – Install the Right Tools
You’ll need a few tools to analyze your site’s speed and track the changes you make to see how they are effecting the load time.
There are lots of useful tools out there for Safari and Chrome, but for analyzing page speed I highly recommend using Firefox and the following extensions.
Firebug – You probably already use this one, but you’ll need this to run YSlow and Page Speed.
[button link="http://getfirebug.com/"]GET IT NOW[/button] [divider /]
[button link="http://developer.yahoo.com/yslow/" ]GET IT NOW[/button] [divider /]
Page Speed – Very similar to YSlow in that it will grade your site and show you ways to improve. It’s my favorite of the two simply because it takes some of the work out actually completing the changes.
[button link="http://code.google.com/speed/page-speed/download.html" ]GET IT NOW[/button]
Step 2 – Minify & Optimize Your CSS
Minifying your CSS is the process of removing unnecessary characters from code to reduce its size thereby improving load times. This can have a dramatic effect on your page load time. When I minified my CSS, my page speed improved by almost two seconds.
Go to your website and open up Page Speed (within Firebug) and click “Analyze Performance”. Find the section titled “Minify CSS”. You will see download links for optimized versions of every CSS file your page calls. Replace your bloated CSS with these.
Step 3 – Optimize Your Images
Having images that are “Optimized for Web” by Photoshop isn’t enough. There’s more you can do. Photoshop leaves in a huge amount of metadata that can easily be stripped out. Remember, even if you only shrink an image by 5%, that’s still making your site load 5% faster.
YSlow > Tools > All Smush.it – this will batch shrink the images on the page and maintain folder structure. It’s a piece of cake to use. Only drawback is you have to do this to each and every page of your site.
If you are using a Mac, I’d suggest using ImageOptim, an offline tool that can optimize whole directories of images quickly. Run every image you upload through this first.
Download and install the plugin WP Smush.it. Every image you add to a page or post will be automatically run through Smush.it behind the scenes. You don’t have to do anything different.[button link="http://dialect.ca/code/wp-smushit/" ]GET IT NOW[/button] [divider /]
Step 4 – Minify & Optimize Your JS Files
WP-Minify to the rescue once again. Not only does it minify CSS, but it takes care of your JS files as well.[button link="http://wordpress.org/extend/plugins/wp-minify/" ]GET IT NOW[/button] [divider /]
Step 5 – Enable Browser Cache & GZip in Apache with .htaccess
When a page is loaded, it can be cached so it doesn’t need to be re-rendered to be redisplayed. You have to tell the browser to cache your pages. GZip is a method for compressing HTTP requests. It too must be enabled.
Add the following code snippet to your .htaccess file after your WordPress rules. If it doesn’t make sense to you, don’t worry. It takes care of many of the criteria that Page Speed will bring to your attention regarding Browser Cache & Gzip.
All of the popular cache plugins for WordPress allow you enable browsing cache. Some even have GZip compression settings. My favorite plugin for this is W3 Total Cache. WPBeginner has a great tutorial on how to best set it up.[button link="http://wordpress.org/extend/plugins/wp-minify/" ]GET IT NOW[/button] [divider /]
Step 6 – Optimize Your Database
Steps 1-5 all dealt with making the front end of your website faster. Now let’s tackle making the back-end faster by optimizing your database. This can be rather tricky so please backup your database first.
You’ll need phpMyAdmin installed on your hosting to make this all easier. Most hosting companies provide this by default. If not, just ask your hosting company to install it for you.
The first thing we are going to do is clean up the wasted space in your tables. In phpMyAdmin, just select the table, go to the “Operations” tab, and then click “Optimize Table.”
Next, we are going to free up space that’s created by post revisions. Wordpress automatically keeps a history of all the changes to a post. This leads to wasted space.
To do that, you just have to add this line to your wp-config.php file.
For more tips, check out Michael Martin’s great post on how to fully optimize your WordPress Database.
WP-Optimize is a simple plugin that lets you clean up your WordPress database and optimize it without phpMyAdmin. It’ll clean up the wasted space in your tables, remove post revisions, remove all auto draft posts, remove all the comments in the spam queue and remove all the un-approved comments to shrink your database to an optimum size.[button link="http://wordpress.org/extend/plugins/wp-minify/" ]GET IT NOW[/button] [divider /]
- Register your site with Google’s Webmaster Tools. Then go to the Labs > Site Performance section to track your page load speeds over time.
- Don’t over qualify. Use efficient CSS selectors. Chris Coyier has a great writeup about Efficiently Rendering CSS.
- Use properly scaled images. Serve a 100x100px wide image instead of scaling down a 300x300px wide image to 100x100px. Larger images take longer to download and resizing takes longer to render in browser.
- Use image sprites. While they can be a little tricky figuring out, they can reduce HTTP requests and make your site much faster. There is even a tool that helps automate much of this, SpriteMe.
- Only use one JS library. If you’re loading JQuery, Mootools and Prototype, you are severely hurting your page speed. These libraries have a lot of overlap so you are basically repeating yourself and wasting tons of bandwidth. Take a good look at the libraries you are loading and pick one. This might mean you’ll have to find alternative plugins.
Here is another great poston SPEEDING UP YOUR WORDPRESS SITE by Joshua Zamora
What other tips do you have for speeding up your WordPress site?