03 Aug 2011

Best Way To Speed Up Your WordPress Site – 6 Easy Steps

WASSUP Wednesday, WordPress 7 Comments

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.

[divider /]

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.

FirebugYou 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 /]

YSlow – A Firebug plugin, that analyzes your page speed and suggests ways to improve it’s performance based on a set of rules for high performance web pages.

[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]

[divider /]

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.

Manual Method

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.

Click To Enlarge

Plugin Method

Install WP-Minify, a plugin that takes care of minifying your CSS AND Javascript for you.  The default settings should be fine for most people.  If you run into any problems with your page’s layout after installing this, you might have to exclude certain CSS files from the minification process.

[button link="http://wordpress.org/extend/plugins/wp-minify/"]GET IT NOW[/button] [divider /]

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.

Manual Method

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.

Plugin Method

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

Like CSS, most Javascript files could use some optimization by removing all of the unnecessary characters.  This can shave time off your total load time.

Manual Method

Page Speed gives you minified versions of your JS files.  Grab them and replace your old javascript files.

Plugin Method

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.

Manual Method

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.

# Enable GZIP AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html # Expires Headers - 2678400s = 31 days ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 0 seconds" ExpiresByType image/gif "access plus 2678400 seconds" ExpiresByType image/jpeg "access plus 2678400 seconds" ExpiresByType image/png "access plus 2678400 seconds" ExpiresByType text/css "access plus 518400 seconds" ExpiresByType text/javascript "access plus 2678400 seconds" ExpiresByType application/x-javascript "access plus 2678400 seconds" # Cache Headers # Cache specified files for 31 days Header set Cache-Control "max-age=2678400, public" # Don't cache HTML Header set Cache-Control "max-age=0, private, must-revalidate" # Cache PDFs for a day Header set Cache-Control "max-age=86400, public" # Cache Javascripts for 31 days Header set Cache-Control "max-age=2678400, private" 

Plugin Method

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.

Manual Method

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.

define(‘WP_POST_REVISIONS’, false);

For more tips, check out Michael Martin’s great post on how to fully optimize your WordPress Database.

Plugin Method

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

Other Suggestions:

  • 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?

Created by

Jarrett Gucci is the owner of Dynasty Web Solutions. A full service Internet presence provider specializing in WordPress development for business owners. Jarrett Gucci along with his team of professionals have designed over 400 WordPress websites. Jarrett Gucci believes strongly in creating websites that are unique, functional and generate referrals.

Facebook Twitter LinkedIn Google+ YouTube 

Did you enjoy this article?
"Subscribe & Get my Top 100 MUST HAVE WordPress Plugins E-book Download"
Subscribe to our Blog and get an instant download to the Top 100 MUST HAVE WordPress Plugins E-book Download complete with secret Plugins revealed.



7 Responses to “Best Way To Speed Up Your WordPress Site – 6 Easy Steps”

  1. Hades says:

    you can help speed my site???

  2. rebeccahappy says:

    My problem is that the domain loads very qucikly but if I try out one of my posts it is always substantially slower.

  3. Joshua says:

    GUCCI! Man this post is SICK!!! Way to take it to the next level! And thanks for the link love!

    Joshua the ZamuraiBlogger

Leave a Reply


8 + = ten

Facebook