Optimize Page Speed for WordPress Site

Optimize Page Speed for WordPress Site

Why Page Speed is so important

  • Web surfers are very impatient.Slow loading speeds cause them to press the back button.
    So you are loosing money if the impatient web surfer (read Client/Customer) coming to your website hits the back button due to slow load time
  • Slow speeds are used in Google’s ranking algorithm.
    Which means that solwer the website, lower the Google Rank.You might never get to the first page in Google’s Search result.

How to check Page Speed?

Simple, ask Google. Go to Google Page Speed Online.
Remember, this tool measures pages, not entire websites. So, test and optimize each page (or the important and most visited ones) separately.

And Dont forget to test for Mobile

Google Page Speed also has feature to test your site for mobile devices. With more and more users using internet from their handheld devices, having slower internet connection, you cannot afford to ignore that.

How to Increase Page Speed

Note : The Steps to increase the Page Speed listed here are for WordPress Sites only.

Step 1: Get the Actual Page Score Before we start

Use Google Page Speed to analyse your page speed. We will analyse the Page Speed regularly. Please Note sometimes after we do the changes, the Page Speed is not imediately affected. You might have to wait for few minutes to see the change.

Now, to increase Page Speed, first of all I refered a Guide on WP Tuts + : The Ultimate Quickstart Guide to Speeding Up Your WordPress Site. The Major difference that I saw in my Page Speed is due to this guide. I am listing the steps provided in that guide here for your easy reference

Step 2: W3 Total Cache

If you are using any other caching plugin , Please deactivate it!

Head over to your “Add new” plugins section within the WordPress, search “W3 Total Cache” , install it and activate it

Once W3 Total Cache is switched on you will see a new sidebar tab called “Performance”, click it.

Let’s first look at the “General Settings”, you will want to tick the following boxes (to enable):

  • Page Cache (select “Disk: Enhanced” in the drop down) – Caching pages will reduce the response time of your site and increase the scale of your web server.
  • Minify (Select “Manual”, leave the other settings) – Minification can decrease file size of HTML, CSS, JS and feeds respectively by ~10% on average.
  • Do not tick Database cache (we will sort this later via a different method)
  • Object cache (select “Disk” in the drop down) – Object caching greatly increases performance for highly dynamic sites (that use the Object Cache API).
  • Browser Cache – Enable HTTP compression and add headers to reduce server load and decrease file load time.
  • Leave CDN, Varnish & cloudflare untouched. (again to do this quick upload the settings file included in the “source files” via the option at the bottom of the “General Settings”)

Step 2B: Get Cracking with Minify

  • Click the “Minify” tab/link at the top of the W3 panel/page. In the “HTML & XML” section make sure that the first three boxes are checked.
  • Then click the “Help” button at the top.
    Once this popover loads up you will be faced with a list of javascript files, followed by stylesheets that your site is linking to. Essentially we want to try and tick everything EXCEPT:

    • Jquery files
    • Google ads (or any ads for that matter)
    • Any stats.wordpress.js files (you will have these if you have jetpack installed

However for CSS you can pretty safely select all of them. Now this isn’t an exact science as this is minifying your theme files (Don’t worry it’s non destructive) and there are alot of different themes all employing a wide range of different files, plugins and functions. Basically preview your changes before submitting them.

Minify is one of the biggest improvements you will be integrating, once you have selected all your files (and done the same with every theme, if you are using more than one) then click “Apply & close”, directly followed by “Save all settings” (Deploy it if your site still looks/works the same).

Step 2C: Head Over to Browser Cache…

Once your in the “Browser Cache” tab/page you will need to change the “Expires header lifetime” to 691200 seconds. This will immediately boost your ySlow score.

Now head back to “General Settings” and click “empty all caches”, then go to your homepage and run the ySlow test again, you should see a nice improvement.

Step 3: Install Database Manager Plugin

In the Same tutorial, I also followed the Step 3: Let’s get back to that pesky Database optimization.
You will need to Install and Activate WP-DBmanager
Below the “Performance” sidebar tab in the WordPress backend there should be another tab with the name “Database” (if not then go back and activate it).

Now this is very simple you need to do three things, backup, repair, optimize.

To backup click the “Backup DB” then at the bottom click “Backup” (Don’t worry about gzipping).

Next up we want to repair your database (just incase) so go to the “Repair DB” in the sidebar. Click the “Repair” button at the bottom.
Lastly, optimize it. Click the “Optimize DB” sidebar button & yep you’ve guessed it, click the “Optimize” button at the bottom.

To avoid this process again pop into the “DB Options” sidebar tab. At the bottom there will be an “Automatic Scheduling” section. Ensure that backups are done EVERY DAY (you can’t be too careful) then set it to optimize say every few days and repair once a week. Then save the changes.

Step 4: Time for Image Compression

Large Images really slows done your site. Lossless Compression can come to rescue. I used Image Compressor 2008
However, there are many other good compressors available that you can use.

Step 5: Leverage Browser Caching

This Step is from another Great Guide How to Leverage Browser Caching in WordPress via htacces
Open up your htacces file and paste in the following directives at the top of the file:

## EXPIRES CACHING ##

ExpiresActive OnExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## EXPIRES CACHING ##

Step 6: Do the Housekeeping

  • Removing “broken links”, or requests that result in 404/410 errors, avoids wasteful requests.
  • Remove unnecessary Plugins. And Keep the Plugins upto Date
  • Upgrade to latest version of WordPress as and when new version is released

This covers pretty much everything…. Now is the time to check the Score.

Dont Forget to reply below with the change in speed you observed in your site

You must be logged in to post a comment