Fast, Faster, SEO-fast!

Quite recently I had a major problem with one of my WordPress installations: the 20k visitor rate was finally reached within a day, however, the servers were not up to the task and then crashed one time, two times, three times…many times on that same day and frantic phone calls to the hoster were mixed with furious frustrated rants about a “system that does not work” and the fact that “seems like WordPress is still a small scale solution only” (Note: WordPress ain’t small scale, it just needs to be optimized 😉

Anyways, throughout a couple of stressful days I realized something: well, complaining about the issues afterwards certainly does not help, let me recheck my setup – thus let me take one step back and see how I can solve the involved problems and what tools might come in handy to achieve that.

“Mirror, mirror, on the wall, where is the biggest error of ’em all?”

The issue was quite clear (“turtle-website-speed , how greaaat is that“) and the first question that came to my mind is: Where exactly is the problem?

• Server to slow?
• Caching setup wrong ?
• Template not optimized?
• Badly written CSS?
• Images?
• JavaScript?
• External Adds?
• …

You could make that list endless and then again: not every factor might be a huge issue.

“hochgeschwindigkeitsSEO” – Or High-Speed German SEO

Following here you will find a guideline how to make your WordPress Site faster, its a combination of international Plugins and some German SEO knowledge – Simply called “hochgeschwindigkeits SEO”

Let’s take a look under the hood…

First of all we start by installing the great Plugin WP Tuner. This plugin will  give you an overview of what is going on in the “WordPress engine department”. The main features are:

1. How long do each each components of WordPress need to load?
2. How fast are your database queries?
3. Are there any issues? (highlighted)
4. And if there are issues: in which module of WordPress can they be found?

A pretty simple method for a testing process with WP Tuner is switching off widget by widget and see whether the performance issue is still there. Quite often plugins use external databases or APIs  which do not always respond fast enough or are down. These kind of problems might stop or delay your website from loading  and surely cause major frustration levels 😉 (as it was in my case)
Tip: Try to get rid of some of the not needed plugins at this point: even though the widgets for the specific plugin do not get loaded it happens quite often that extra CSS or JavaScript will be loaded nonetheless. This also will slow down your site and certainly needs to be considered as a page speed factor.

Once problems here are solved, lets take a look at the database next.

WP Tuner

• Detailed breakdown of loading speed of modules, widgets, page areas and database
• Possible problems can only be located by “trial-and-error” testing like switching off plug-ins
• The plug-in might have issues with other plugins at times – if your website crashes or has problems check your wp-config.php and delete any entries from WP Tuner in order to make WordPress run again

WordPress Databases do grow fat!

Image that: your wordpress database will not stay all nicely tuned by simply deleting some plugins or upgrading your WordPress installation regularly. Left over data from old plugins, log files, drafts and settings will clog up your database and cause a major problem: every time a visitor loads one of your pages a lot unwanted queries might be simultaneously executed.

And of course there is also a great plugin for that: WP-Optimize

This plugin checks your database for “over fatted” tables and clears them all up for you. In my case I was able to reduce the database size down from 589 MB  down to 32MB – almost a 90%  reduction which certainly helped  in speed and also lowered the workload of the MySQL database server (PS: your website hoster will love you for that, too!)

As a rule of a thumb I use this plugin now at least once a month and certainly have noticed a positive change of database performance.

WP-Optimize

• One-click solution to clear up your database, especially the not needed settings in “config”-table
• Always a chance that you might delete an important config-setting by accident, however that is not very likely
• Back-up your database before using the tool – Also be aware that you can delete all your post revisions with the tool (if you want to) and then old versions of your articles are gone

No dead ends means less queries

Correctly redirecting you visitors from old URLs to new URLs will greatly improve usability of your site and lead to less extra clicks from users tying to get out of a 404-Landingpage. Also if external deep links will get forwarded properly to the new address  a loss of link power will not occur. Bounce rates and length/depth of visit also get positively affected (that’s no big news after all, right?)

Usually redirects are achieved by setting manual redirects in your .htaccess file, however, with larger websites that does become a pain and countless needless redirects might clog up your server after a while  ( keep in mind: every .htaccess redirect rule will be executed with every single user query).

To automatize the setting of redirects there is an awesome plugin called Redirection which has some nice features:

• Automatic implementation of redirects if post URLs get changed (Nice feature if you SEO-optimize your URL structure)
• Set-up of different redirect groups allows you to set and organize manual redirects quite easily. This is especially great if you want to setup a redirect group for affiliate deep links which you use on your website: later on you just have to change the affiliate deep link in the module instead of having to go through every page changing the links manually. Also you can make the links look better for your visitors (nobody likes these overlong parametrized affiliate URLs, they are simply just not “trustworthy”). Just make sure you set those links set to “no-follow”.
•  A server log which records when and how often redirects have occurred

There is also two more great features of this plugin which I use quite often as well

• 404 queries get recorded which will give you a live-update of your error queries and referrers. This also helps to check whether your affiliate redirects still work and what the sources of errors are: a link from another site which might be broken, Google query that went to an old page etc.
  Note: I do also use 404 error checking with Google Webmaster Tools  since that is a great tool to find out whether some your back links are not forwarded properly. However, it is quite nice to see the errors in real time: a broken affiliate link will lose you money  with every click, right?
• You can import your own redirection list out of a CSV-file which certainly helps when you are working on a relaunch and want to completely change your URL structure: you can set-up all redirects in advance and give Google a great signal that you really have give it a thought how they can pick up your new structure easily (Matt Cutts does like nicely set 301s)

Now, that’s the basic setup there. Obviously there is also other known methods (like caching plugins) to speed up your site and that point will covered next.

Redirection

• Automatically redirect posts if you change the URL on that post; advanced 404-monitoring; setup up your own redirection URLs for affiliate links
• Database log might get quite big (use WP-Optimize to solve issue); uploading CSV-redirect lists need to be in a very specific format

External and internal caching combined

Caching plugins like WP Supercache and W3 Cache have been around for a while and I am sure most readers have either of them installed or tried either of them out.  I have worked with both (and others) and finally decided to continue with W3 Cache simply because it offers a greater variety of options and nicely integrates with external sources/APIs.

One of these external sources is the great backup-up/speed-up/security server system Cloudflare.  This free system allows you to protect your sites from malicious attacks, over-extended queries, prevents hotlinking, speeds up your site and is a back-up solution in case that your servers do go down (which helped me a great deal in the days when my server was gone).

A nice feature of W3 Cache is that you can integrate the Cloudflare service into the plugin and in combination they do offer a website performance which runs almost “at steroids”. Here are the setup steps:

• Register at cloudflare.com for your free account and register your websites
• Enter DNS Servers from Cloudflare (will be displayed during the setup process) at your own hosting account (quite often this can be found in a section like enter your own name servers) and wait for verification
• You can pretty much use the “CDN + Full Optimizations” option, I just noticed some problems with the RocketLoader (Adsense, other JavaScripts) and this is why  by default I leave this setting switched to “off”; also you can switch on minification for CSS, HTML and Javascript since this seems to work better then minifications through other plug-ins

Now it’s time to  turn to the settings of W3 Cache:

• Start with your standard setup of “disk advanced” (that usually works on most servers), minification switched off, object-caching on, data-base caching off (will slow down your site otherwise) and browser caching on
• Enter your Cloudflare settings below (your API key can be found on the Cloudflare website under “account”) and set development mode to on in order to test performance of regular W3 cache; once tested switch it back to off
• Cloudflare will stop performance tests such as gtmetrix.com from checking your site. In order to still get speed benchmarks you can setup an account with Google PageSpeed and then enter the API-key at the bottom of the W3 Cache main settings screen – you will then find a report of your page speed and issues being displayed at the WordPress start page (dashboard)

Once all the settings have been completed go to “Performance” in your WordPress head menu and click on “Empty all caches“. Then go to Cloudflare, “Cloudflare settings” of the webpage, the click on the “purge cache” button in order to clear out any old cache files. (With these steps you then should have a clear and fresh copy of your website both in W3 Cache and Cloudflare)

Note: Maile from Google says under 2 sec loading speed is fine – well, gotta crank up ’em engines then 😉 …
W3 Cache

• Enable different server-side settings in order to cache static files of your website; faster delivery of contents and more stability
• Forwarding to mobile-device themes does not always work properly; settings might be different from server to server, no real “master setting” that works all the time
• If you use Cloudflare always test out whether W3 Cache file minification should be enabled since Cloudflare got its own module for that

Cloudflare

• Simple solution how to protect your website from hot-linking, malicious attacks and speeding up your site
• When switching IP-addresses on your server you manually need to update the settings in Cloudflare; JavaScript RocketLoader has issues with Google Adsense and other scripts
• When entering the new name servers at your hosting account you need to be patient: might take up to 24 hours before Cloudflare kicks in

Smush, smush (and I don’t mean baby talk to my new-born daughter ;))

Images are going to slow you down if they are not properly optimized (I guest that is no news).With WordPress there is a great plugin named “WP Smush.it” which automatically compresses images upon upload. (A lot of people are using this tool already anyways so I guess no further explanation is needed). That plugin has also an extension in order to compress file uploads of the popular NextGEN Gallery called “WP Smush.it NextGEN Gallery Integration“. Both plugins should be on your standard plugin list

WP Smush.it

• Automatically compresses your uploaded images
• Relies on external API (which seems to work properly all the the time, though)

CSS Sprites: All-in-one images

CSS Sprites are a good example how to reduce number of images loaded by combining a lot of images in to one which then will be used in your CSS file. So much for the theory, however, it is also a lot of work if you start off with Photoshop and manual coding of CSS files. For those of you who rather use a different solution: there is a great website where you can create your own CSS Sprite files on the fly: SpritePad

Personal Note: I rather use CSS3 Buttons instead of sprites for many things and a great selection of ready-made CSS3-Buttons can be found here: CSS3 Buttons Demo

SpritePad

• “Drag, drop and click” solution in order to create CSS sprites
• No downsides – it just doesn’t get any easier than that 😉

Fast, faster, SEO-fast…

That’s it then: your page now should run at a much faster speed and remain stable even if you finally get hit by that big traffic break through 😉 – And that should be your guide to ” hochgeschwindigkeitsSEO ”
If you have any further suggestions in regards to plugins please go ahead and leave a comment below.

Further resources

Here are some great other articles (from great other SEOs) for further reading on the topic and in general:

• Great post on Jason Acidres blog in regards to conversion boosters, page speed being one of them.
• WordPress SEO plugins mailing list by Joost de Valk with speed optimization tips from the Godfather of SEO Plugins 😉 (also featured on Marcus Tandlers blog)
• Ed baxter at seomoz.org with a great post on improving page speed

hochgeschwindigkeitsSEO