Compared to other platforms, WordPress is pretty fast. However, we can still make it run even faster. A fast loading WordPress site not only gets love from people, but also from Google. Here we look at 4 useful optimization tips that you can implement right now and get your site running faster than ever before.

1. Optimize Your Database

Your MySQL database tables should be cleaned regularly. These tables are sure to have some clutter in time and this has a direct impact on the load times of your WP site. Rather than use plugins to do this, getting a hands-on idea of what is going on with your database is most recommended.

Using the phpMyAdmin panel, choose the “Check All Tables Having Overhead” to get an overview of all the tables that need to be optimized. From the drop down menu, select “optimize table” which when completed, should display a success message. In case of errors in your DB tables, select the “Repair Table” option. Always remember to backup your database before making any major optimization efforts or repairing your database tables.

If you are running WordPress 2.9 and below, which do not support automatic database optimization, add the line below to your wp-config.php file:

define (‘WP_ALLOW_REPAIR’, TRUE);

2. Cache Your Posts

Caching your WordPress posts creates .html files that are served to visitors instead of having to query the database every time, effectively speeding up your website. To do this, you can use popular WP plugins like WP Super Cache, Hyper Cache, W3 Total Cache or the DB Cache. Some plugins like the W3 Total Cache improve your server performance, caching every aspect of your site and reducing download times of site elements.

If you are caching a high traffic website, you might want to consider adding an opcode cache like Alternative PHP Cache (APC) to your server to enhance PHP’s performance. Using a CDN (content delivery network) helps to server your content via a number of servers. This is an expensive option as most CDNs are quite expensive. I would recommend a CDN like CloudFare – it is free but with features that come close to paid services.

3. Compress and Combine Your JS and CSS Files

Compressing and combining JS and CSS files has been shown to improve site loading times. Compressing reduces the overall page size while combining multiple files reduces the number of HTTP requests to the web server required to retrieve the files. There are many JS and CSS compressors out there available for free.

Again, you can do this manually by rewriting the URLs that point to the respective CSS and javascript libraries to point to one destination and then using a small script, concatenate the requested files, compress and send to the browser.

A much easier way would be to use the WP Minify plug-in that combines your various JS can CSS files into one file. And of course compressing images further using a plugin like WP Smush.it does not hurt.

4. Use CSS Sprites

This is a fantastic technique of combining multiple images into a single file with all the information about the graphical elements in it. Sprites can, for example, be used to on a blog’s sidebar where there are 5 buttons each requiring 5 images. These 5 different images can be combined into one file requiring only that single file to be loaded thereby speeding up the site and saving bandwidth.

I recommend a tool like “Sprite Me” to make your sprite coding job easier.

5. Clean Your House

Of course, there are other obvious ways to speed up a WP site like upgrading your WordPress installation, upgrading plugins and deleting unused plugins.  These should be on your regular site maintenance list.

...

Do you work on multiple sites at a time? Then no doubt you would love to improve your speed and your overall development workflow. Think of what it takes to set up WordPress the old school way:

Downloading the latest version. Extracting the downloaded zip file. Creating a new database. Creating wp-config.php file.

Developing WordPress sites has never been easier with WAMP and Simple WordPress Auto Installer.  The Auto Installer script is now available that allows you to add a WordPress install within the WampServer together with a database, all in one shot, thereby speeding up your local WordPress development.

To make this happen, you will need to download WampServer and the Simple WordPress Auto Installer, both of which are open source and available as free downloads. You will need to install the WampServer first and ensure that it is working. This is usually straight-forward and quick.

Upon downloading the Simple WordPress Auto Installer, you will notice 3 files: installer.php, license and readme.md. To install, simply drop a copy of the “installer.php” file into the root directory of WampServer designated as “www”.

When you open the “installer.php” file, you will see these lines of code:

array( 'label' => 'Latest version', 'url' => 'http://wordpress.org/latest.zip', 'description' => 'Download the latest stable English version' ), array( 'label' => 'Last nightly', 'url' => 'http://wordpress.org/nightly-builds/wordpress-latest.zip', 'description' => 'Download the latest beta version'

You can configure these settings to change the WordPress version as well as the build to your own preferences.

You can also add more languages by including an array like the one below:

array( 'label' => 'French', 'url' => 'http://fr.wordpress.org/wordpress-'.$last_v_doted.'-fr_FR.zip', 'description' => 'Download the latest stable French version' ),

Other global settings you can configure include the default username, database, password and CSS parameters.

Fire up your WampServer and navigate to the installer file we just uploaded using the link below:

http://localhost/installer.php

The Auto Installer will then allow you to configure your local site settings that include; the folder where you want WordPress to go, the database server (which by default should be localhost), the DB name, DB username and DB user password.  From here click `GO` and

the script will then download the latest copy of WordPress, extract the files to the directory you named and will create a new database.

Set your site’s name, username and password and you are ready to roll.

Whenever you need to start a new development project, you will simply fire up the installer using the above link and configure the settings for the new site as we have done. You will no longer need to download WordPress again, set up a database in phpMyAdmin or make any other configuration settings. Everything has been done for you.

...

Whether it is a list of products you are promoting, published ads or other elements on the sidebar, you will likely want to have these elements in view at all times even when scrolling. By using JQuery, you can make this possible.

To do this, use the code snippet below:

//keep element in view (function($) { $(document).ready( function() { var elementPosTop = $('#sidebar-ads').position().top; $(window).scroll(function() { var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height(); //if top of element is in view if (wintop > elementPosTop) { //always in view $('#sidebar-ads').css({ "position":"fixed", "top":"10px" }); } else { //reset back to normal viewing $('#sidebar-ads').css({ "position":"inherit" }); } }); }); })(jQuery);

The above code can also be made into a JQuery plug-in and used on WordPress sites.

Here is the plug-in version of the above code:

/** * jQuery keep element in view plugin. * * @author David Gitonga * @copyright Copyright (c) 2012 DeveloperDrive * @license Licensed * @link http://developerdrive.com * @since Version 1.0 * */ (function($) { $.fn.keepElementInView = function() { var elemPosTop = this.position().top; $(window).scroll(function()...

It doesn’t matter whether you’re an SEO, a developer, designer, information architect or any other myriad of digital based roles, we all want the same outcome; to do the best we possibly can for our websites.

As an SEO myself, I’m interested in growing the performance of my client’s website in organic search. This is not something that I (or any other SEO for that matter!) can do single handed. We also rely on the skill of the web developer to implement and carry out our recommendations and technical requests.

With this in mind I wanted to introduce some comprehensive tips that you can inject into your projects that will improve the performance of your websites allowing them, their SEO and you as their developer maximum control and ultimately search engine performance.

On page: title tags

Fundamentally the single most important part of a page with regards to SEO is the title tag. You want to make sure you have the following covered off for maximum impact:

Each page’s title tag is editable There are no dependencies between the title, the H1 or the URL of the page Every title is unique and relevant to the page Try and keep the titles under about 65 characters which will ensure the whole thing is clearly picked up in the search result pages and seen by users

On page: meta descriptions

Although these little chaps don’t carry massive weight in terms of achieving rankings, they are still relevant:

Make sure each page has an editable meta description Each one is unique For extra punch, encourage the addition of USPs and a powerful, persuasive description. For example “Brand new range of aeroplane models from small to large now with FREE delivery and up to 20% off retail price! The best price, highest quality plane kits online!” Keep it within the 170 characters to get the whole thing showing in the results pages

On page: dependencies

Depending on the CMS being used or general technical specifications of the site in question, sometimes there are dependencies that creep in. Most commonly, these are between the page title tag and the page H1 but I’ve also seen them between the title, the H1 and the page URL too. Although you might think it would be logical to have all three elements interconnected because the context of the page content is only about one thing, it doesn’t allow full control. Try to allow each of these elements to be independently changeable to really help maximise the search engine friendliness of your site.

On page: URLs

I’m sure you’ve heard about friendly URLs in the past, in fact Jeff mentioned them back in January. In their ‘raw’ format, many CMS’ will render page addresses as a series of variables and characters logical to the platform. Unfortunately a page called www.example.com/?id=1234?ads_9c.php doesn’t have quite the same user friendly ring to it as www.example.com/our-services/! So adding in those friendly URL rewrites is not only great for SEO benefit, but users will much prefer them to.

Speed: Google Analytics

No, I’m not going to tell you that implementing Google Analytics will speed the site up, well, kind of, there are two variations of GA; the old urchin style and the new a-synchronous. Double check the site has the new version of the code on the site. It’s much more load time friendly than the old urchin code and will help keep page load times down.

Speed: Sprites and Goblins

Just sprites actually. Where possible, combining CSS imagery into a single file and using CSS positioning can really help speed things up on a page. Google uses page loading time as a factor in deciding how to rank a page (a bit like you going to a restaurant, ordering and waiting 2 hours for it to arrive on the table, you probably wouldn’t recommend it to your friends) so we need to think about this. CSS sprites can really help reduce the number of HTTP requests a browser makes when requesting files from the server. This will help keep load times down and hopefully aid those rankings!

Speed: Image optimisation

Ever been in the situation where you or another person creates a new page, puts an awesome photo up on the site, you visit it and it takes over 5 seconds to load as you watch the image render line by line? Yep. Me too. Not only should you optimise your images (Photoshop has an awesome built capability for this but there are tools I like to use on the web that effectively do the same thing) before uploading but think about having a tool within the site that automatically reduces images that are too big (I like this image optimiser for WordPress). This is great if you have users on the site that aren’t immediately aware of the problems that can be caused from uploading a 2,500 pixel width image into a 400 pixel space!

Check back next week for part 2 where we tackle some more advanced techniques.

...

Since 2010, mobile searches have seen a 400% increase and it is estimated that by 2013, there will be more mobile Internet users than desktop users. A mobile-friendly site can thus help you connect with your customers and drive conversions. Just because your website can be seen on your mobile phone does not however mean that its mobile ready.

Mobile sites are designed with mobile users in mind and fit well on small screens. They are supposed to offer simple navigation capabilities and take advantage of the natural mobile phone features such as maps, location information and click-to-call. How though can you turn your desktop website to be more mobile-friendly and offer visitors the same experience as your desktop version? It turns out; you don’t have to create an entirely new mobile website. You just need the right tools to work with and you can come up with your very own mobile ready site.

Mobilize Using Plugins

Do you own a WordPress website? You are in for a good surprise because with just a single plug-in, you can automatically enable mobile users on your website to access a mobile version it. There are many plugins on the market to choose from. The MobilePress plugin, for example, can help render your WordPress-powered website on mobile phones by configuring specific themes for specific browsers or devices. The plug-in makes it possible for developers to create customized mobile themes as well.

Mippin is another plugin that detects mobile devices and redirects visitors to the mobile optimized pages on your website. Mippin even renders your blog better and faster on an iPhone compared to the desktop version. Mippin uses the RSS feeds approach to render raw content on a phone by converting videos, on the fly, to the 3GP format while scaling photos horizontally.

Online Tools

With Google having a designated bot that looks for mobile versions of your site, it seems logic to have a subdomain with your mobile version. This will also allow you to optimize separately your mobile website for SEO and landing pages. One of the easiest tools to transform your website into a suitable mobile version is the Google Mobile Optimizer. The tool allows you to test your site and contains plenty of resources to get your site mobile ready.

MobiReady is a free tool that helps test the mobile usability of your existing site and offers detail free reports on potential problem areas and how your site displays on mobiles. With this information you can use other tools to optimize your site for better mobile visibility. DudaMobile is another free online tool that helps you get a mobile version of your website with one simple click. The mobile version automatically syncs with your regular website and offers dozens of mobile templates that will surely WOW your visitors. Additional features include the ability of site visitors to easily send text about your business info and a click-to-call button that makes it easy for site visitors to contact you.

While we review just a few of the tools that can get your site mobile in a short time, there are many other more tools on the Web that can offer similar or added functionality.

What tools have you used to make your site more mobile friendly? Share your comments below.

...

A few weeks ago, I was working with a fellow developer and trying to figure out how we could enhance the functionality of a WordPress website that required managing visitor logins. The site, which was for poets and writers, would allow visitors to set up accounts, submit content, interact with others on the website and share content to outside circles on Facebook and Twitter. After scratching our heads for a number of days, we came to the conclusion that BuddyPress would provide the needed solution. A couple of weeks later, we can see our decision was not misguided.

In our case, BuddyPress worked because it accomplished what it was created to do: enable people with similar interests to connect and communicate. The BuddyPress package however is more than a social networking tool. Companies can use it as an internal communication tool and some universities and colleges have used it to deploy a wide social network on their website. While most institutions are powerless to control and monitor Facebook interactions, BuddyPress provides a safe and secure environment with similar functionality but with the ability to monitor student activity.

BuddyPress is open source and makes available its core code online. In addition, users are free to use its themes, plug-in extensions and contribute their time and knowledge to the project.

The BuddyPress Core

Since BuddyPress is essentially an enhanced WordPress plug-in, it is written with the same primary technologies that power its parent base i.e. PHP and MySQL. Most users will therefore find it real easy if they have previously been working on WordPress. The package extends the integral functions of the WordPress engine to include themes, plugins and widgets effectively inheriting what has been there all along.

BuddyPress Features

In order to allow the creation of social networking applications, BuddyPress comes installed with some basic functionality that includes Activity Streams, User Profiles, Group Creation, Friend System, Bespoke themes and Blogs per user. Even with its own login functionality, BuddyPress integrates with the underlying WordPress platform in such a way that only a single sign-on is required to the system for users thereby providing seamless experiences across the board.

With most users already on social networks, BuddyPress offers a solid strategy of helping you attract new members by allowing you to link user profiles to their other social networks like Facebook and Twitter. Using a code snippet or a plug-in, users can easily share their activity on social networks as well as allow others to check out their other profiles on these outside platforms. Members can even share their profiles on social networks if they want others to join them in their new ‘social network’.

Group Forums

Groups and group forums are popular on the Web and within communities, and BuddyPress offers communities an easy way to post and reply to forum posts. Members have the freedom to search all public forum topics from the Forums Directory and even post a reply or start a forum topic in a public group even when they are not group members. Any time a member adds a post or replies to a forum post, he or she auto joins that group. Group forums in BuddyPress are made up of Forum Topics and Discussion Threads. Forum topics are proposed discussion subjects while discussion threads are the conversations and replies that result from a particular topic.

Users can easily search and filter forum topics and groups using various parameters as well as create new Forum Directory topics in the same way.

BuddyPress also offers other enhancements that include site-wide forums, avatar uploads, a friend messaging system and a bunch of interesting plugins and themes.

BuddyPress can be installed directly through the WordPress dashboard plugins page or downloaded manually from the plugins repository and uploaded to your website. The latest BuddyPress build can also be downloaded from the SVN repository for developers who want to get their hands dirty.

...

When it comes to publishing tools, WordPress is most likely on top of the food chain. Its simplicity and ease-of-use is especially favored by publishers and its wide community support by developers makes it particularly attractive for plug-in development. WordPress is also an excellent medium to improve your website’s search engine rankings. The countless number of SEO plugins that have been developed for WordPress are a good start for most people. SEO for WordPress is however slightly different from other platforms. What should you know about WordPress SEO?

Permalink Structure

When you open a web page from a website running on WordPress, you will notice that the URL is just a number with some symbols. This is usually not very descriptive and WordPress uses it to make it easy to organize your posts and pages. For SEO purposes however, this is not good news. Fortunately, you can change your permalink structure to make it more descriptive of your posts right inside your WordPress dashboard. Navigate to the “Common Settings” section and change the settings from “Default” to “Custom Structure”. Your posts will not only reflect well on search engines, but it will be easy for people to easily link to them.

Optimize Titles

Search engines like Google take your titles as important ranking factors and thus have a direct impact on your SEO. Its not only search engines that put more weight on your page title, but people scanning results pages will also click on what they consider more relevant, based on the titles they see. Most titles on WordPress blogs and sites follow the syntax: Blog Title > Blog Archive > Blog Title To get people clicking on your posts however, you need to have your titles use the syntax below: Blog Title > Blog Archive > Blog Title

Image Optimization

One of the best tools for image optimization in WordPress is the Smush.it plug-in. This tool removes unnecessary bytes form image files without changing their look or visual quality. The plug-in strips an image’s meta data from JPEGs, optimizes JPEG compression, converts certain GIFs to indexed PNGs and strips the unused colors from indexed images. Adding relevant file names and title and alternate text (ALT) definitions to describe the image makes it easy for both search engines and visually-impaired visitors or those accessing your site from a mobile device that strips the images, visually appealing.

XML Sitemap

An XML sitemap is necessary to help search engines like Google and Bing better index your blog. A sitemap helps crawlers see your entire site structure making it possible to have new content indexed faster every time you push a new post on your site. Plugins like Google XML Sitemaps can help generate a Sitemap and notify the major search engines.

Add Breadcrumbs

Breadcrumbs are links usually added above the title post and they allow users to easily navigate your site and allow search engines to determine your site structure more easily. Ensure that breadcrumbs link back to your homepage and categories. You can use a WordPress SEO plug-in like the Yoast plug-in to accomplish this.

Others Ways you can Optimize

There are other things you can do to further improve your search engine rankings. These include cleaning up your code, preventing indexing of irrelevant pages on your site, pagination and linking to related posts on your site. There is a lot you can do when it comes to WordPress SEO, but remember that creating great and compelling content should always take priority.

...