Here is everything I’ve learnt recently in trying to debug a Wordpress sites performance problems. The site runs on a dedicated server however a lot of these also apply to shared hosting. Remember to please take backups before trying any of these.

Basics

1. Run Wordpress Updates
Often performance issues will be fixed in newer versions of Wordpress, plugins and themes. This may not always be straight forward as it depends on the plugins you have installed and the theme you use.

For all plugins you need to check they are compatible with the latest version of Wordpress, fortunately you can easily see this on Wordpress.org and on the Updates page in newer version of Wordpress.

When I come to run updates I usually take a snapshot of the site to run locally. I can then test and debug any problems before running them on the main site.

2. Empty Caches
Caching can be a great way of speeding up your website however it can also get in the way when trying to debug other problems. When trying something new always clear your caches to make sure cached data doesn’t interfere with anything you’re trying. Most caching plugins have the option to disable caching for authenticated users.

Plugins

3. Disable unused plugins.
If you’re anything like me you will always be trying new plugins for that extra bit of functionality. Check to see if there are any plugins you have that don't add to the value of your site or don't fit in with what your site offers.

4. Enable Caching Plugin
For years I’ve been using WP Super Cache as its easy to setup and works really well. However as I was troubleshooting around this area I found W3 Total Cache, this has more configuration options and the ability to configure a Content Delivery Network (explained below). Most of the default options are a good start however its worth going through every one to see how it affects your site.

5. WP-Optimize
WP-Optimize gives you access to a number of database tasks without needing PHPMYADMIN. Among other features it allows the easy removal of post revisions, comments in the spam queue, and unapproved comments.

Config

All of the following are changes you can make to the wp-config.php file (not to be mixed with wp-config-sample.php).

6. Limit number of revisions
The idea behind this one is that as your site grows by limiting the number of revisions an article can have the wp_posts table grows at a slower rate meaning any SQL queries take less time to complete. The WP-Optimize plugin mentioned above also lets you remove unwanted revisions if you wanted to do this manually.

define('WP_POST_REVISIONS', 3);

To disable post revisions all together add:

define('WP_POST_REVISIONS', false);

7. Increase memory limit
While not strictly for performance if you get out of memory errors you can add the following:
ini_set('memory_limit', '128M');
(This can also be set in php.ini and .htaccess - some shared hosting may not let you overwrite this).

8. Enable Wordpress Caching
There are different levels of caching available - to enable the basic built in caching add:
define('WP_CACHE', true);
(Caching plugins often do this for you.)

9. Add Blog Address and Site Address
Each time a page is loaded it looks up these values from the database - the idea behind hard coding these is that its one less SQL query to do.

define('WP_HOME', 'http://www.imafish.co.uk'); // blog url
define('WP_SITEURL', 'http://www.imafish.co.uk'); // site url

Once these are set in the wp-config.php file they will be greyed out in the Wordpress Admin General settings page.

10. Add Template and Stylesheet Paths
As above this adds in the paths for the template and stylesheet to stop an SQL query to find it.

define('TEMPLATEPATH', '/absolute/path/to/wp-content/themes/<theme>');
define('STYLESHEETPATH', '/absolute/path/to/wp-content/themes/<theme>');

This will disable the ability for you to change themes unless you remove these two lines.

Content Delivery Network (CDN)

11. Use a CDN
A CDN allows you to serve static content such images, scripts and stylesheets locally in a geographical sense to the user. So if the server is US based and the visitor is from the London they would get these files from a server close to London. The idea being that as the data is being served from a fast server/network close to their location loading time will be reduced.

CDNs have been around for a long time however only more recently have they become very easy to integrate with Wordpress. The service I tried was MaxCDN they offer 1TB of bandwidth for $40 making it cheap to play around with. Before you can setup MaxCDN with Wordpress you need to install the W3 Total Cache plugin and you need access to your domains DNS.

11a. Login to MaxCDN go to Manage Zones and click create pull zone. As the name suggests a pull zone will copy content from your site so you don’t have to worry about uploading it to multiple places.

11b. Enter your blogs name for the pull zone, your blogs URL for Origin Server URL, something like cdn.yourblog.com for the Custom CDN Domain, something that describes the zone for Label and tick the compression box.

11c. Maxcdn will give you a URL for your CDN that you need to setup as a cname in your sites DNS. This may take several hours to propagate.

11d. Go to Manage Account > API and add a key. The description can be your blogs name.

11e. Login to Wordpress and go to the W3 Total Cache Performance section. Scroll down to Content Delivery Network, tick enable and select NetDNA/MaxCDN.

11f. Go to the Browser Cache Settings tab and change all three options for ‘Cache Control policy’ to ‘cache (“public”)’

11g. Go to the Content Delivery Network tab in W3 Total Cache and add the API ID and Key provided by MaxCDN. Add the cname you setup under Replace site’s hostname with.

Refresh your cache and visit your site. If everything has worked you should see the urls of your stylesheets, scripts and images have been replaced by the cname URL you setup in MaxCDN.

Server - Apache

The following tips require server level access and are for more advanced troubleshooting and performance tweaking.

12. Enable compression
mod_deflate allows the server to send compressed files to the supporting browser, it will increase CPU slightly however should decrease the amount of time a client is connected to the server, a full tutorial can be found here.

13. Hostname Lookups
Turning off DNS lookups can help make your server capable of handling more traffic.
To do this add to your httpd.conf or Apache2 file (often found in etc/apache/httpd.conf or /etc/apache2/apache2.conf):
HostnameLookups Off

(There are a lot more Apache tweaks however the above two often get good results).

Server - PHP

14. Setup an opcode cache such as APC 
If your sever has APC installed you can take advantage of this with APC Object Cache Backend plugin.

15. Memcache
Memcache is another type of caching for PHP, again there is a plugin - Memcached Object Cache.

16. Batcache
Again Batcache is another caching module - Batcache Wordpress plugin.

(I will confess I didn't try any PHP caching techniques in my recent troubleshooting however where I've used them in the past there have been significant performance gains).

Server - MYSQL 

There are a number of tweaks for mysql.

17. Enable Query Cache
This will cache results to help speed up queries.
In my.cnf find or add:
query-cache-type = 1
query-cache-size = 20M
query-cache-limit = 2M

18. Setup logging of large queries
In my.cnf find or add:
log-slow-queries
long_query_time = 1

Enabling logging of large queries ultimately helped me fix the performance problems with my site. For instance I noticed a query for counting comments to determine popular posts was taking over a second to complete (since the site was now getting a lot of comments). By rewriting this query and setting it to run on a daily cron job I could still generate a list of popular posts without the query running every time the page was loaded.

19. Optimize/Repair Database tables
In PHPMYADMIN or using WP-Optimize you can optimize and repair database tables. Remember to take a backup of these tables first.

Server - General

20. Running Top
While not strictly a performance tip, running top or task manager can help you troubleshoot when the CPU is being used excessively for PHP, Apache or MYSQL.

21. Using ab or siege
Following on from running top tools such as ab or siege can help you test how any of the changes you make affect the performance of the server.

22. Checking with server admin/hosting company
If your server is managed by another company it’s often worth checking with them if there are any performance problems on there. On shared hosting another account maybe be culprit and causing issues so checking with the provider can often fix this.

Theme Optimization

23. Theme Performance
A simple way to see if your current theme is causing problems is to change to another one. If with the new theme the performance is significantly better you can then start disabling plugins and widgets until you diagnose the problem.

Firebug/YSlow

Firebug and YSlow are great browser addons to help diagnose performance issues:

24. Minify/Combine Files
Plugins such W3 Total Cache allow you to minify and combine scripts so that the browser has less and smaller files to download when requesting.

25. Optimize Images
The net tab in Firebug lets you see exactly what is downloaded when loading the page and the total size of all the files. You’ll be able to see any particularly large images and scripts and optimize accordingly. 

I hope you've found this list helpful - if you have any tips please leave them in the comments.

With the start of the new year it's a great time to start new ventures and one of the best ways to tell the world is with a website and your own @yourdomain.co.uk email address.

To try to make the cost to entry as low as possible we're offering 20% off with the code SAVE20 on top of our already low prices!

All our accounts come with unlimited email addresses, forwarders and a host of one click install scripts including PHPBB (for a forum), Wordpress (for a blog) and Drupal (for a full featured content management system)

Signup today at www.switchweb.co.uk
 

Project is the new iPad magazine launched by Virgin last week. It follows in the footsteps of Wired and Maxim in transferring the magazine experience onto a tablet - but is it really the future of magazines?

Project installs in a similar way to other iPad magazines - you install a free app through the app store that then gives you the ability to purchase issues (£1.79 for the first issue). The download took about an hour though others report it only took a few minutes.

The opening screen features a short introductory video that works very well.

The general trend for iPad magazines is to swipe left or right to change article and up or down to read more. Project follows this format and it works in most cases though it would be better if the up/down scroll worked more like a web browser rather than skipping pages.

After a couple of ads and an introduction there is an overview of how to use the app. Not everything is as intuitive as you would expect at first.

Navigation bars appear at the top at bottom of the page when you click the bottom right (though this behaviour didn't always work as expected). The table of contents allows you to skip directly to a feature.

One of the big criticisms of iPad magazines is the ability to share articles - in a web browser its easy as you can copy the link from the address bar or use one of the many social sharing features now included on web sites. Project gets around this by enabling you to include the article in an email. It doesn't quite grasp the social networking sharing options but hopefully that will come later.

The magazine format does lose a lot of the layout consistency we are use to from a webpage, while this does make the layouts more interesting it does cause usability headaches. I often found I was missing interactions, videos and other popups that I might have noticed if there was a little more consistency between features.

The Tokyo feature was one of my favourites, the clever use of video and layout made for great interaction. However there was no downwards scroll, ie. all the contents was within the one frame - again a massive inconsistency from other pages.

Performance on certain features was not great, I got very frustrated with the Ford advert. It was laggy, didn't do what I was expecting and I couldn't side swipe to the next page. Some articles the back/forward buttons worked - on others I wasn't sure how they behaved.

The delivery mechanism is not perfect either - I want magazines to be delivered in the same way that podcasts are in iTunes - automatically. I want to be able to subscribe to a magazine, not purchase then wait for individual issues.

To answer my opening question, yes I do think this is the future of magazines. The format is far from perfect and mastering the interface is going to be very hard. The content worked well, I loved the Jeff Bridges and Tokyo features - I just  got annoyed at the lack of interface consistency between them.

With an increasing number of mobile web visitors its important to make sure the mobile experience is as good as the desktop experience. With a number of smart phones including the iPhone not supporting Abobe's Flash technology it's essential to provide an alternative.

A good example is British Supermarket chain Morrisons. My task was to find the opening times of my local store, I achieved this quickly however the bulk of the main page was not viewable because no alternative to Flash was provided.

Morrisons iPhone

Looking at the same page through a desktop browser this section provides latest offers.

Even though my goal in visiting the site was not to see the latest offers I still had the intention of visiting a local store where I may have been influenced by what I had seen on the website.

By not providing a Flash alternative Morrisons are missing out on one of their top conversion points - the main banner on the front page of their website - i.e. the section that the majority of the visitors will first see.

Alternatives would be very easy to implement - an image of offers could be displayed instead of the message telling me to install Flash or the Flash section could be recreated using JavaScript.

Google will be phasing out support for Microsofts eight year old browser starting in March. This is great news for anyone who has to develop for IE6 and for users who haven't found the benefits of a modern browser.

You can sign an online petition on the number 10 website to force the Government to phase out IE6 in its departments.

Full details from Google:

"In order to continue to improve our products and deliver more sophisticated features and performance, we are harnessing some of the latest improvements in web browser technology.  This includes faster JavaScript processing and new standards like HTML5.  As a result, over the course of 2010, we will be phasing out support for Microsoft Internet Explorer 6.0 as well as other older browsers that are not supported by their own manufacturers.

We plan to begin phasing out support of these older browsers on the Google Docs suite and the Google Sites editor on March 1, 2010.  After that point, certain functionality within these applications may have higher latency and may not work correctly in these older browsers. Later in 2010, we will start to phase out support for these browsers for Google Mail and Google Calendar.

Google Apps will continue to support Internet Explorer 7.0 and above, Firefox 3.0 and above, Google Chrome 4.0 and above, and Safari 3.0 and above.

Starting this week, users on these older browsers will see a message in Google Docs and the Google Sites editor explaining this change and asking them to upgrade their browser.  We will also alert you again closer to March 1 to remind you of this change.

In 2009, the Google Apps team delivered more than 100 improvements to enhance your product experience.  We are aiming to beat that in 2010 and continue to deliver the best and most innovative collaboration products for businesses.

Thank you for your continued support!

Sincerely,

The Google Apps team"

Cinema chain Cineworld have put in some serious work into their mobile site over the past few months concentrating heavily on exploiting latest technology to improve usability.

The updated site fits nicely on the iPhone screen, automatically finds your local cinema and suggests others nearby.

After selecting a film you can click on a time to book tickets through the mobile site.

The improvement in using the mobile site over the normal site on the iPhone is huge and finding film times for your local cinema is much faster.

The Google Chrome beta for OS X is out and I've been using it for a few hours - here are some of my thoughts:

1. Dislike: Not being able to see the full page title is annoying

In all other browsers the page title is shown on the top bar of the window, this isn't such a problem for sites such as ImAFish where the title doesn't change but for Google Mail for instance the title changes when you have new mail.

2. Like: The speed is awesome

The whole experience in Chrome feels fast, pages load quickly and the interface is snappy. Compared to Firefox this is a huge improvement (scrollbar lag has been driving me crazy recently in FIrefox), the speed seems to be on par with Safari.

3. Dislike: No status bar is annoying

When you mouse over links in other browsers you can see almost the full address of where the link is going in the status bar. However in Chrome you just get a little box appear at the bottom which shows you a truncated version of the link. Again I don't see what Google hope to gain by not showing the whole link.

Above: When putting your mouse over the title of the article only part of the URL is shown.

4. Dislike: Tab Mess

Often at work I will have at least 15 tabs open with various projects on the go - Google Chrome makes it very hard to distinguish between them when you have a lot open.

 

Adding in lots of tabs doesn't scroll them or add them onto another line - you just get lots of little tabs.

5. Like: Maximum Real Estate for Web Page

By removing titles, the status bar and other parts of the browser it does mean you have the maximum amount of space to see the actual web page, though as I've pointed out this does have its downsides. 

6. Dislike: No Automatic Handling of RSS Feeds:
 
When loading an RSS feed in Chome it just shows the xml code - it doesn't ask if you want to subscribe (like in Firefox) or it doesn't make it readable (like in Safari).
 

About two months ago I sold my first website on Flippa.com, a site dedicated to buying and selling websites and domains. Launched earlier this year by a team from the internet resources site Sitepoint the marketplace is like Ebay for buying and selling websites.

The site I sold was www.ipodhistory.com, I originally bought the site from the Digital Point Forums about 18months earlier for $180 (£90 at the time), it was my most expensive site I had bought and was a relatively big gamble. Over the following year and a half I invested in search engine optimisation, added new content and grew a community. In this time I tripled the traffic and advertising revenue. 

I listed the site on Flippa and immediately received interest and a number of offers. After around two weeks the site sold for $2000 (£1300). I was paid through PayPal and the transaction went very quickly and smoothly. 

You can list sites on Flippa either with an auction style listing or where people submit private bids for a site. Flippa charge a listing fee with various optional extras (about $28 for my site) plus a final value fee of 5% (with a cap of $498). 

It's sad to see the iPod History site go from my portfolio but I'm more than happy with the return on investment. 

Time Machine Saves the Day

By Pete | @kingpetey | 28 Oct 2009

On Sunday disaster struck, my hard drive corrupted and OS X wouldn't boot. I feared the worst but had been backing up for the past two years using OS X Time Machine. Could it be as simple as restoring from backup to a new drive?

My first job was to install a new hard drive, this is easier said then done in the all in one iMac. Fortunately this video from camodesto went through step by step, first removing the glass front, then the aluminium case and then the screen. Finally you can replace the hard drive, I opted for an upgrade to a 1TB drive.

After booting from the Snow Leopard DVD I created a partition on the new hard drive then restored from Time Machine. The process took around seven hours to copy my 300gig of data from the External drive.

When I rebooted my Mac had been restored to 5pm on Sunday, 90mins before it had died. All my files were restored, even my Firefox tabs were saved.

I use many of these plugins on a daily basis and would recommend them to any web developer.

1. Firebug

Firebug allows you to inspect elements on a web page and see the associated attributes. You can edit in real time allowing you to quickly make changes to an elements colour, position, border or behavior. 

 Firebug

Firebug has a number of extensions that will be covered later on in this article.

2. Web Developer Toolbar

The Web Developer toolbar has various web developer tools. The most useful I find are for disabling certain elements on the screen such as JavaScript or clearing cookies and session data.

 Web Developer

Clicking display alt tags under the images menu is a quick way to see if you have missed any. The resize menu lets you test your site in different resolutions.

3. Extended Statusbar

Extended statusbar is useful to way to see how large a page is to download and how long it takes to load. I often use this to help monitor slow loading pages.

 Extended Statusbar

4. Colorzilla

Colorzila allows you to mouse over elements on the screen to see the colour. Its very useful if you need to match a colour or check a colour is correct.

 Colorzilla

(Note US spelling 'color').

5. MeasureIT

MeasureIT simply allows you to measure elements on a screen and gives you the measurement in pixels. Very useful for checking the height of objects, text spacing and the overall width of the page.

 MeasureIT

6. Screengrab

An easy way to take screen shots of a page. Especially useful if the page includes scroll bars as it saves you copying and pasting multiple screen shots together.

 Screen Grab

7. YSlow

YSlow shows you various options on how to speed up your website. Clearly not all are suitable/cost effective for a website such as ImAFish however many are very relevant. Each item is given a rating from A to F and a full explanation on how to implement. YSlow is developed by Yahoo.

 Yslow

8. Page Speed

Page speed is similar to YSlow however covers slightly different criteria. As you can see for ImAFish it highly recommends combing external JavaScript.

 

9. Linkification

Linkification is a simply little plugin that converts any URL on the screen into a clickable link. Quite useful for those times someone has forgotten to turn a URL into a link.

 Linkification

10. IE Tab

IE Tab is a nice plugin to test your page in Internet Explorer without actually having to open the Browser. It's also useful if you want a fresh session for a website without having to open another browser.

 

Pages