Keep your code at minimum

Don’t rely on javascript. Don’t duplicate your scripts. Treat it like a candy-tool to make things more pretty. Don’t bloat your site with s**t-loads of javascript. Use it only when necessary. Only when it really improves user experience.

Minimize DOM access

Accessing DOM elements with JavaScript is easy, code is more readable, but it’s slow. Here are some tips: Limit your layout fixing with javascript, cache references to accessed elements. Sometimes when your site is depending so much on DOM modifications you should consider limiting your markup. It’s a good reason to switch to HTML5 and leave those old XHTML, HTML4 behind. You can check the number of your DOM elements by typing in Firebug’s console: document.getElementsByTagName('*').length

Compress your code

The most efficient way to serve compressed JavaScript is to first run your code through a JavaScript compressor that shrinks variable and argument names, and then serve the resulting code using gzip compression.

Well, I don’t compress my main.js, but check if you have any jQuery plugins that are not compressed, do it (remember to keep author’s notes). Below I listed some options for compression.

• YUI Compressor (my favorite, used by jQuery team), beginners guide, second guide and official site
• Dean Edwards Packer
• JSMin

GZip Compression: Idea behind this is to reduce time of transferring data between browser and server. When it’s done you get your file with Accept-Encoding: gzip,deflate header. It has some disadvantages though. It takes: CPU on both server-side and client side (to compress and uncompress) and disc space.

Avoid eval(): While sometimes it may bring some time efficiency, it’s definitely wrong practice. It makes your code look more dirty and it crashes out most of the compressors.

Tool to speed up javascript loading – Lab.js

There are many awesome tools that could speed up your javascript loading time. One is worth mentioning — Lab.js.

With LAB.js (Loading And Blocking JavaScript) you can load your javascript files in parallel, speeding up the total loading process. What is more you can also set up certain order for scripts to be loaded, so no dependencies are broken. Also, the developer declares a 2x speed improvement on his site.

Using proper CDN

Many webpages now use CDN (Content delivery network). It improves your caching, because everybody can use it. It can also save you some bandwidth. You can easy ping or firebug those servers to check from where you get data faster. Choose CDN by matching your readers localization. Remember to use public repositories when it’s possible.

Some CDN options for jQuery:

• http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js – Google Ajax, information about more libraries
• http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js – Microsoft’s CDN
• http://code.jquery.com/jquery-1.4.2.min.js – Edgecast (mt)

Load your javascript at the end of page

Very good practice if you care about user and him/her not leaving your page because of slow internet connection. Usability and user at first, javascript at the end. This may be painful, but you should be prepared for users with disabled javascript. You may put some javascript to be loaded in head section, but only if it’s loading asynchronously.

Load tracking asynchronously

This one is very important. Most of us are using Google Analytics for statistics. It’s good. Now look where you put your tracking code. Is it in head section? Is it using document.write? Then you should blame yourself for not using asynchronous tracking code for Google Analytics.

This is what asynchronous tracking code for Google Analytics looks like. We must acknowledge that it uses DOM instead of document.write, which may be better for you. It detects some of the events before page load which is very important. Now think of all the users closing your page before it even loaded. The cure of missing page views has been found.

	var _gaq = _gaq || [];
	_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']);
	_gaq.push(['_trackPageview']);

	(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();

Don’t using GA? It’s not a problem, most of today’s analytics providers will allow you to use asynchronous tracking.

Ajax Optimization

Ajax request have great impact on your site’s performance. Below I pointed some tips about ajax optimization.

Cache your ajax

Look at your code. Is your ajax cacheable? Well, it depends on data, but mostly your ajax requests should be cacheable. In jQuery your requests are cached by default, not including script and jsonp dataType.

Use GET for Ajax Requests

POST type requests takes two TCP packets to send (headers sent first, data next). GET type request takes only one packet to send (which may depend on your amount of cookies). So while your URL length is less than 2K and you want to request some data use GET.

Use ySlow

It’s both simple and extremely powerful when it comes to performance. It grades your website and shows you what you need to correct, what should be taken care of.

Bonus: Pack your javascript into PNG File

Imagine adding your JS and CSS to the end of an image and cropping it in CSS to have all the info you need in an app in a single HTTP request.

I have recently found this. What is basically does it packs up your javascript/css data into PNG file. After that you can unpack it by using the canvas API’s getImageData(). What is more it’s very efficient. You can gain about 35% compression without minifying your data. Lossless compression! I must point out that for larger scripts you can feel “some” load time while image is pointed to canvas and pixels are read.

For more information about this one check out this article from 2008.

Final Thoughts

Hope you guys liked this article. If yes, remember to share it and to say hello to me on twitter. Stay in tune for some further posts about serious performance optimization.

Search engines are the best way to promote, publicize and help people discover your content. Thus, it is very important to optimize your blog or web site so that search engines can discover your content and understand how relevant it is to specific search queries.

WordPress, in addition to providing you with the state-of-the-art publishing platform, also provides plethora of plugins for Search Engine Optimization(SEO). Some plugins are really effective whereas some are not. To help you find the right plugin for your web site, we have composed some of the best SEO plugins.

1. All in one SEO Pack

One among the most popular and widely discussed plugins for WordPress. This plugin is easy to use and is compatible with most WordPress plugins. It works as an overall SEO plugin – automatically generating META tags and optimizes your titles for search engines and helps you in avoiding duplicate content. This plugin also enables you to manually include META tags (title, description and keywords) for each page and post in your web site.

2. HeadSpace2

A powerful all-in-one plugin to manage meta-data and handle a wide range of SEO tasks. It allows you to tag your posts, create custom titles and descriptions, thereby improves your page ranking and relevance on search engines. You can also change the theme or load plugins on specific pages and much more. This plugin is available in multiple languages.

3. Platinum SEO plugin

An all-in-one SEO plugin with a host of features like automatic 301 redirects for permalink changes, auto generation of META tags, avoid duplicate content, SEO optimized post and page titles and a whole lot of other features.

4. TGFI.net SEO WordPress Plugin

This plugin is a fairly modified version of the all-in-one SEO Pack. The unique feature of this plugin is that, it’s directed at people who use WordPress as a CMS. It can auto generate titles, descriptions and keywords when overrides are not present and also avoids duplicate content.

5. Google XML Sitemaps

Generates an XML sitemap supported by Google, Bing, Yahoo and Ask. Sitemaps make it much easier for crawlers to see the complete structure of your web site and retrieve more efficiently. It also notifies all major search engines every time you create a new post. You can either choose to write a normal XML file or a zipped file. In case of any errors, you can rebuild the sitemap manually. As a remark, Pingomatic can be used to ping your blog to multiple search engines and other specialized services.

6. Sitemap Generator

Creates a highly customizable sitemap for your WordPress powered web site. It enables you to choose what to show and what not to including – what order to list the items in. It supports multi-level categories, pages and permalinks.

7. SEO Slugs

Slugs are long filenames assigned to your posts. Ex: http://yourblog.com/what-you-can-do-immediately-for-higher-rankings. This plugin removes common words like ‘a’, ‘the’,'in’,'what’,'you’ etc. from the automatically assigned post slug to make it more Search Engine friendly.

8. SEO Post Links

This plugin works similar to SEO slugs. It shortens the post slug and retains only the necessary keywords making it Search Engine friendly. It allows you to choose the longest number of characters in your post slug and also remove unnecessary words.

9. Automatic SEO links

Just choose a word or a phrase for automatic linking and this plugin will replace all matches in the posts of your weblog. It allows you to set the title, target and rel. for each link. You can also set the anchor text and choose if it should be no-follow or not. If there are repeated words, only the first matched word in the post will be replaced.

10. SEO Smart links

Automatically links keywords and phrases on your blog with corresponding posts, pages, categories or tags on your blog. It allows you to set up your own keywords and a list of matching URLs and also set the no-follow attribute. You can customize it according to your needs through the Administration Settings Panel.

11. WP Backlinks

This plugin helps in making the task of link exchange very simple. Once installed, it puts a small form on the sidebar of your blog that allows webmasters and other bloggers to quickly submit a link for link exchange. The plugin will spider the webmasters site for a reciprocal link and if everything is successful you will have made a successful link exchange. It also has the option of displaying different links on different pages.

12. SEO Title Tag

SEO Title Tag makes it easy to optimize the title tags across your WordPress powered blog. It allows you to override a page’s title tag with a custom one, mass editing of title tags, title tags for 404 error pages and much more.

13. 404 SEO plugin

Gives you a smart, customized ‘Page Not Found(404)’ error message and automatically displays links to relevant pages on your site, based on the words in the URL that was not found.

14. Redirection

This plugin helps you to manage 301 redirections, to keep track of 404 errors and also correct them. It also allows you to monitor your redirects by giving you full logs of all redirected URLs and also RSS feed for 404 errors. Automatically adds a redirection when a posts URL changes.

15. Simple Submit SEO/Social Bookmarking Plugin

This plugin adds submission links for Digg, Delicious, Buzz, and Stumble to pages and posts. It allows you to choose whether to display it on home page, post page, all pages etc.

16. AntiSocial

Adding this plugin on your blog allows readers to submit your posts to Digg, Reddit, Del.Icio.Us, StumbleUpon and other social bookmarking sites. It adds a row of buttons with links to the sites and also adds a nofollow to the links. It is actually a hacked version of the famous plugin Socialable.

17. AddToAny

Helps your readers share,save,email and also bookmark your posts and pages. It supports over hundred social bookmarking and sharing sites. It comes with a smart menu that places the services that visitors use a lot at the top of the menu based on their browsing and usage history.

18. SEO Friendly Images

This plugin helps in making your images SEO friendly. It automatically updates all images with a proper ALT and TITLE. ALT acts as a description for your image and TITLE is the tooltip text displayed when the mouse is over the image. These attributes are one of the important part of SEO.

19. Robots Meta

A very easy solution to add robot tags to your WordPress pages. It allows you to add meta tags to individual posts and pages, prevent indexing of your comments, login and admin pages.

20. Nofollow Case by Case

Allows you to selectively apply or remove nofollow attributes to comment links, comment author links, pingbacks and trackbacks and also open the comment links in a new window. If not configured it automatically strips nofollow attributes from all your comment links and comment author links.

Many of these require a reciprocal link and which have fallen out of favor since Google declared against “excessive reciprocal linking”; but in moderation it is fine as Matt Cutts talked about in 2007 – “Trading links is natural and it’s natural to have reciprocal links. At some level, natural reciprocal links happen, but if you do it way too often, it looks artificial.”

1. DesignDirectory

• Year Site Created: 2001
• Indexed Pages in Google: 15,400
• Backlinks in Yahoo: 155,988
• PageRank: 6
• Link Status: Nofollow
• Quantcast Ranking: 24,796
• Submission rules: Read the submission rules here

2. Web Design Directory org dot uk

• Year Site Created: 2008
• Indexed Pages in Google: 319
• Backlinks in Yahoo: 837
• PageRank: 4
• Link Status: Dofollow
• Quantcast Ranking: No data
• Submission rules: Reciprocal link required.

This is more than a directory and is intended as means for a client to quickly receive a quote for a job from a wide range of design companies. UK only.

3. Web Design Stuff

• Year Site Created: 2006
• Indexed Pages in Google: 1,850
• Backlinks in Yahoo: 44.301
• PageRank: 5
• Link Status: Dofollow
• Quantcast Ranking: No data
• Submission rules: Free to submit to.

The submission rules read: “If you are submitting a portfolio, design firm, or resource site, please select the most appropriate category and do not use “Best Design Showcase”. We will select the best to be placed in that category. You may however submit client sites or sites you think do have the best design to be placed in “Best Design Showcase”. Not all sites will be approved. Only well designed or sites with useful resources will be considered.”

4. Web-Development.com

• Year Site Created:1997
• Indexed Pages in Google: 11,400
• Backlinks in Yahoo: 1,639
• PageRank: 5
• Link Status: Dofollow
• Quantcast Ranking: No data
• Submission rules: Free to submit to but a reciprocal is required. From the submission page:

Web-Development.com is a directory of Web design companies. We ONLY add Web design company websites to our directory. In the future we plan to add additional categories for related companies such as Web hosting companies and domain name registrars, but at this time we are only accepting submissions for Web design companies.

5. American Association of Webmasters Directory

• Year Site Created: 2002
• Indexed Pages in Google: 1,670
• Backlinks in Yahoo: 30,433
• PageRank: 5
• Link Status: Dofollow
• Quantcast Ranking: No data
• Submission rules: Free to submit to but a reciprocal is required.

6. UK Webmaster World Directory

• Year Site Created: 2003
• Indexed Pages in Google: 302
• Backlinks in Yahoo: 3,457
• PageRank: 3
• Link Status: Dofollow
• Quantcast Ranking: No data
• Submission rules: Links are either paid or a reciprocal. Open to non-UK submissions.

7. UK Webmaster Directory

• Year Site Created: 2008
• Indexed Pages in Google: 73
• Backlinks in Yahoo: 469
• PageRank: 4
• Link Status: Dofollow
• Quantcast Ranking: No data
• Submission rules: Free but reciprocal is required. For UK only.

8. Web Design • Designers Directory

• Year Site Created: 2005
• Indexed Pages in Google: 2,229
• Backlinks in Yahoo: 163,889
• PageRank: 6
• Link Status: Dofollow
• Quantcast Ranking: 130,167
• Submission rules: Free and no reciprocal is required. US only.

9. Webmasters Lookup

• Year Site Created: 2005
• Indexed Pages in Google: 237
• Backlinks in Yahoo: 4,236
• PageRank: 4
• Link Status: Dofollow
• Quantcast Ranking: No data
• Submission rules: Free to submit to. This site is intended as a means for web designers to display their experience and portfolio to potential clients. Deep links are allowed.

10. The Web Design Directory UK

The Web Design Directory UK is a new venture and is totally free.

• Year Site Created: 2002
• Indexed Pages in Google: 77
• Backlinks in Yahoo: 14.388
• PageRank: 5
• Link Status: Dofollow
• Quantcast Ranking: No data
• Submission rules: Free to submit to for UK web designers but a reciprocal is required. States on the submission form that it could take up to three months before they approve your entry.

11. DesignDir.net

• Year Site Created: 2003
• Indexed Pages in Google: 625
• Backlinks in Yahoo: 14,359
• PageRank: 4
• Link Status: Dofollow
• Quantcast Ranking: No data
• Submission rules: Paid or free if a reciprocal link. This directory covers not just web design but also related industries.

12. DirectoryDesigner.am

• Year Site Created: 2003
• Indexed Pages in Google: 480
• Backlinks in Yahoo: 12,224
• PageRank: 5
• Link Status: Dofollow
• Quantcast Ranking: No data
• Submission rules: Please read the submission guidelines before you submit. It is free but a reciprocal is advised.

And last but not least is my own directory for web designers and webmasters here: http://www.suburban-glory.com/directory.html. It is free to submit to.

So what am I talking about??
Every WordPress blog user should use and customize their permalink structure. What permalink means and stand for? Permalinks are the permanent URLs to Your individual blog posts, categories, archives and others. It is URL that follows after Your web site address for example I use (example.com as web site front page address) – example.com/follows-permalink-address. You see?

This is default address to blog posts after installing WordPress blog – http://example.com/?p=123, WordPress calls this “Ugly” link and I cannot agree more :)

Whole reason I write this short article, because I see so many blogs using this default ugly link. Why people call this about ugly link?  Actually it’s because this link is very unfriendly to the search engines – one of the most important criteria to the search engine spider is file name – do not to waste this SEO friendly factor. You see permalink address like ?p=123 do not say anything about Your post. Okay, now maybe You agree, You should use SEO friendly permalink so I will go ahead and answer to the next question – How to implement it?

Ugly permalink – http://example.com/?p=123

Pretty permalink – http://example.com/category/post-name/ or  http://example.com/year/month/day/post-name

You can change permalink settings in Your admin panel  Settings–>Permalinks. If Your settings are default I suggest and recommend to change  it to  – /%category%/%postname%/

Do this in every blog when You are starting out. Now Your address to post will be http://www.example/com/category/post-title – much better indeed?

Huh, but what You can do if You’re using default settings and have many posts already?

You have all these links in search engines, trackbacks, pingbacks and social bookmarking sites – permalink change would seriously crash and broke all links out there. If You are in this situation there is actually one thing to do, I’ll explain things later.

Take these steps then in following order:

1. Download and install Permalink Migration plugin

2. Unzip it, drop it in wp-content/plugins folder and activate it;

3. Now go to admin panel->options->PermalinksMigration

4. And then set the old, default permalink structure of your site in the form.

5. Now go to Your admin panel  Settings–>Permalinks. Now change  it to  – /%category%/%postname%/

Permalink Migration plugin – “With this plugin, you can safely change your permalink structure without breaking the old links to your web site,and even doesn’t affect your search engine rankings.” It’s called 301 Redirect, also known as a permanent redirect. For alternative You can also check out this Redirection plugin with more options.

Now  instead of hitting 404 error page, user will be automatically redirected to Your new structure URL in moments and search engine spiders also will find new links faster and change it! Nice one! Also You can use redirection plugin if You are migrating pages from other web site, or are changing the directory of your WordPress installation. I hope this will help – now You have much more SEO-friendly permalink structure!

If You have any tips, questions, feel free to ask, also consider to visit WordPress Codex – Using Permalinks, You’ll find more options how to change Your permalinks using different tags like -  %year%, %monthnum%, %day%, %hour%, %minute%, %second% and much more detailed explanation.