Setting up a Content Delivery Network (CDN) for a website can be complicated. You might need to upload files to the CDN storage, update all links to point to the CDN, and time-consuming operations. Even with plugins or addons, all that easily takes at least 30 minutes.

I'll show you how setup WordPress CDN in a minute or less.

You do need to first setup W3 Total Cache and create CDN for WordPress with MaxCDN, as instructed in the previous post. Even with all that, it won't take you too long, and more importantly, it'll be very easy. And you only have to do this once.

W3 Total Cache and MaxCDN take care of everything, you don't need to manually change the image or file URLs. You don't need to upload anything to CDN or anything. Just enable CDN in W3TC with MaxCDN. It's so simple that it's pretty damn close to magic if you ask me.

The CDN information W3 Total Cache needs

Before you can configure W3 Total Cache to use CDN, you must have the account details from MaxCDN. (See the previous post)

From MaxCDN, you need

• the custom CDN URL, which required you to create a new CNAME record, and
• the MaxCDN API ID and API Key.

The Custom CDN URL is something like: "cdn.example.com" (without the quotes), depending on how you configured your Pull Zone at MaxCDN. The API ID is numeric ID, e.g. 1234. And the API Key is a string of various characters.

On the previous post, we set up the MaxCDN account and the pull zone for our WordPress blog. We got the API ID/Key and created CNAME record for the CDN. If you followed the instructions on that post, you should now have what you need.

Got the API ID/Key and the custom CDN URL?

OK, here's how to set W3 Total Cache and your WordPress blog to use MaxCDN...

Setting up MaxCDN to W3 Total Cache

1. Go to W3 Total Cache settings on your admin area (Click 'Performance' on the left)

2. On the General Settings -page, scroll down to Content Delivery Network settings

3. Check the checkbox to Enable CDN

4. Choose (Origin Pull) "Mirror: NetDNA / MaxCDN"

5. Click 'Save changes'

You'll very likely see a warning on red: "Content Delivery Network Error: The "Replace default hostname with" field must be populated."

To fix, and get things running...

1. Go to the Content Delivery Network (CDN) Settings

All checkboxes on CDN Settings - General can be checked...

2. Enter the API ID and API Key you saved from MaxCDN to Configuration...

Leave SSL Support as Auto, unless you know better.

3. Enter the new custom CDN URL you updated on the CNAME records, e.g. http://cdn.zemalf.com, into the "Replace site's hostname with:"

4. Click 'Test NetDNA'

If you see "Test passed", all is cool.

(if not, there's probably something wrong with the API ID/Key, or the DNS server has not been updated with the new CNAME yet)

5. Click 'Save changes' to put MaxCDN into action.

And then, one last thing...

1. Go to the General Settings -page and
2. click on 'empty all caches'

Now if you open your blog, and check the Page Source, you'll see that the minified JS- and CSS-files are served from the custom CDN URL, and also images and files from your Media Library.

If there are files that are not in the Media Library, or among your theme-files, you should add them to the Custom file list under Advanced settings. These might include JavaScript-files from plugins you didn't add to Minify Settings, or images/files uploaded outside the Media Library.

All done. Test to see the results

Go to Pingdom Tools or WebPageTest.org to see how fast the different pages on your blog are loading.

You can also analyze your blog with Firebug / Page Speed / YSlow if you want, but note that they don't necessary recognize your custom CDN URL unless you tell'em. Of course, you will see the benefit in speed, even that the "CDN rating" in YSlow is F for example.

It is also possible that loading speed on individual tests go up. For me, because the site was stupidly fast to start with: full load time went up, but response time for the first byte, the render start and document completely loaded got faster. So getting everything loaded takes (just) a bit longer, but the visitor sees (something from the) page faster, so it's better overall.

However, CDN will even the load on traffic spikes and keep the site fast for everyone, which might not be the case when you don't have the CDN. Also, using CDN will even the loading speeds for visitors from different locations.

Summary

1. Get your MaxCDN API ID, API Key and custom URL for the CDN (see previous post)
2. Enable CDN in W3 Total Cache: (Origin Pull) "Mirror: NetDNA / MaxCDN"
3. Enter API ID and API Key you saved from MaxCDN to W3TC CDN Settings
4. Enter the custom CDN URL to W3TC CDN Settings
5. Test

Original post from Zemalf's Website optimization blog:
How to setup WordPress CDN with W3 Total Cache and MaxCDN

In this post, I'll show how to setup CDN for WordPress with MaxCDN. In more detail, you'll learn how to create a "content delivery pull zone" for your blog inside MaxCDN and how to setup a CNAME for that CDN (Content Delivery Network).

After these step, the next post continue by going through the steps needed to put W3 Total Cache and MaxCDN work together.

This post will do also if you're setting the CDN for Joomla or Drupal. If that's the case, follow along setting up the MaxCDN side of things, and look into the instructions on MaxCDN site for your platform.

MaxCDN

This post got started when a fellow from MaxCDN contacted me a while back, probably because of my speed related posts and guides, and asked if I'd want to join their affiliate program. They offered me an account to test when I asked, so I took the offer and have used MaxCDN here at the blog for several months after that.

There hasn't been any issues with it, the CDN has worked extremely well and it made this blog even faster than it was (and I believe the effect would be even bigger with not-so-minimalistic design). This isn't a review, but I can say that I'm more than happy with how easy MaxCDN was to setup and how well it has worked for me. With that, I'm confident to write a little guide about it.

MaxCDN is not free, but it's very reasonable priced and comes with 30-day money back guarantee in case you'd just want to test it. Plus the first 1TB that you get for a flat free will last a good while. MaxCDN has worked very well for me and the setup is as easy as it can get (no need to move or upload stuff anywhere), so I'm proud to recommend them with my affiliate link.

But now, don't worry if all that CDN and CNAME jargon at the beginning sounded scary, it's quite simple in the end, especially with these step by step instructions...

1. Get a MaxCDN Account

This step is quite simple.

• Go to maxcdn.com,
• click on "Sign Up Now" and you'll be taken to the order form
• Create a new account.

Go to your email, find the maxcdn account verification email and click the link on the email

2. Create a New CDN Zone for Your Blog

After your account is verified, login to the CDN control panel with your new account

Click 'Manage Zones' from the top-menu

(This is the area you create "zones" for your files)

Click "Create Pull Zone"

• Add Pull Zone Name (e.g. blog, this will be part of the long URL provided by MaxCDN)
• Add your blog URL as the Origin Server URL (where you normally access your site = URL as seen in browser window, e.g. http://example.com or http://www.example.com)
  • Use the final destination URL, e.g. if you redirect www.example.com to example.com, use example.com and vice versa
• Add custom CDN domain (e.g. cdn.example.com, a sub-domain that will "mask" the temporary MaxCDN URL)
  • Note that you need to create a CNAME record for this custom CDN domain, and I'll show you how in this article
  • The custom CDN domain is like a subdomain of the main domain, but instead of hosting the sub-domain on your server, the sub-domain will be the URL for MaxCDN via CNAME record.
  • The prefix can be anything, but for clarity, you probably want to include the "cdn" in it, e.g. my blog is zemalf.com, so I made my custom CDN domain cdn.zemalf.com. If your blog is example.com, you can make the CDN domain cdn.example.com and so on.
• Add a label for the zone (e.g. blog's name, this is shown on the MaxCDN dashboard)
• Enable compression by checking the checkbox (like on a site, gzip compression is a good thing for speed)
• Click 'Create'

After MaxCDN creates the zone, you'll see a notification like this:

Pull Zone has been successfully created.
Please create a CNAME record for cdn.example.com to blog.example.netdna-cdn.com"

Save the Custom Domain URL and the temporary MaxCDN URL for reference, as we'll need'em soon, e.g. copy-paste the notification with the "Please create a CNAME record..." to a text editor.

In the text file, you should have:

• Custom CDN URL, e.g. cdn.example.com
• The long MaxCDN URL, e.g. blog.example.netdna-cdn.com

3. Get the MaxCDN API Key

To set up a content delivery network for your blog, we started by creating an account at MaxCDN and proceeded to create a new Pull Zone in MaxCDN. Next, we need to generate a MaxCDN API ID and Key the W3 Total Cache will use...

1. Go to MaxCDN and login
2. Click 'Manage Account'
3. Click 'API'
4. Click '+ Add Key' (button on the right)
5. Enter Description (e.g. "API for W3 Total Cache on example.com")
6. Select 'Individual Zones'
7. Select the Pull Zone you just created.
8. Click 'Save'

You could use the same API for all your sites, and choose Master, but this is the more secure way to do this, and the individual API ID/Key will not be not overused.

Click the 'API' again, and you'll see your newly created API Key there.

Copy-paste the API ID and the API Key to a text-file.

Keep your MaxCDN API ID and API Key safe, no stranger needs to see those. So you and those configuring your websites for you only.

You can always find them from MaxCDN dashboard, but since we'll be putting them into use, it's handy to have'em in a text file. You should now have these saved:

• Custom CDN URL you setup, e.g. cdn.example.com
• The MaxCDN URL, e.g. blog.example.netdna-cdn.com
• API ID (4-5 digit number)
• API Key for the ID (long string of characters)

Next step is creating the CNAME record for the custom CDN URL.

To do this, jump into your hosting control panel, and create the CNAME record to the MaxCDN URL. That's the one you saved from the MaxCDN message: xxx.yyy.netdna-cdn.com, e.g. "blog.example.netdna-cdn.com".

After creating the CNAME record, using the custom CDN URL (cdn.example.com) will be "the same" as using the long MaxCDN URL (blog.example.netdna-cdn.com), which again, serves the content of the origin URL you created the Pull Zone for (e.g. example.com) via MaxCDN content delivery network.

4. Create a CNAME record for the custom CDN URL to the long MaxCDN

Before you start using the newly created content delivery network, you need to create a CNAME record for the custom CDN URL to the MaxCDN URL.

The CNAME record is done to the main domain. CNAME record, or the "Name", will be the prefix of your custom CDN URL. For example, if the CDN URL is cdn.example.com, CNAME record "Name" is "cdn" (without the quotes). The "CNAME" in the CNAME record is the long MaxCDN URL, e.g. blog.example.netdna-cdn.com.

How you create the CNAME record depends a bit on your hosting provider / domain registrar. Usually CNAME is created on your hosting control panel, where you can manage your domains.

I added instructions below on how to do it with cPanel (e.g. Host Gator and Bluehost) and how to create CNAME record on DreamHost control panel.

If your (uncommonly) using name servers other than your hosting provider, it's possible that you can/must manage CNAMES on your domain registrar. If that's the case, define the CNAME record there.

On hosts with cPanel, like Host Gator or Bluehost:

• find the Domains section, and
• click 'Simple DNS Zone Editor',
• Find the 'Add an CNAME Record',
• Enter Name = cdn,
• Enter CNAME = the URL you got from MaxCDN, and finally
• click 'Add CNAME Record' after filling the values.

To update DNS record on DreamHost...

• log in to your account at panel.dreamhost.com
• click 'Manage Domains'
• click 'DNS' under your blogs URL
• Find 'Add a custom DNS record to...'
• Add "cdn" as Name (or any other prefix you set for the 'custom CDN domain' at MaxCDN
• Choose 'CNAME' for the Type
• Add the long domain name you got from MaxCDN to Value
• Add (optional) comment (I added "maxcdn")

After creating the CNAME record, you can wait for a day to ensure all DNS servers are updated with the new CNAME before you start using the custom CDN URL, e.g. set up W3 Total Cache to use MaxCDN.

Check that the CNAME record works before configuring your blog / website.

• If the CNAME record creation went OK, the Custom CDN URL (e.g. cdn.example.com) now "points" to your blog.
• You can test if the custom CDN URL opens your blogs front page. If it does, then it's all good.
• To double check, run the URL through WebPageTest.org or some other service that accesses the URL from otherside of the world.

5. Start Using Your New Content Delivery Network

When the custom CDN URL works, you can access all files in your site via that URL and it will be delivered through the MaxCDN content delivery network.

For example, if you normally open an image from example.com/images/example.jpg, that same image now opens with cdn.example.com/images/example.jpg as well, and it's loaded from content delivery network.

As there is no "special setup", MaxCDN can be used on any website, replacing the normal URL with the Custom CDN URL, leaving the "path" as it was.

In theory, you could go, search & replace the URLs of all static file (e.g. images, CSS- and JavaScript -files, etc.) with the new CDN URL by hand and it'd work just fine. But there's no reason to do that by hand, when you can do it without any of that trouble even when files change.

There are plugins and addons for the most popular platforms, like Joomla, Drupal, vBulletin and Magento. For WordPress, the easiest way to start using MaxCDN is to use W3 Total Cache -plugin, as after setting it up with MaxCDN, it'll get your blog's files served via CDN automatically after you set it up once.

The next post has the instructions for the W3 Total Cache and MaxCDN setup. If you don't have W3TC installed yet, start with my W3 Total Cache guide.

Summary

1. Sign up for a MaxCDN account
2. Create a pull zone for your blog at MaxCDN
3. Get your MaxCDN API Key
4. Create a CNAME record for the custom MaxCDN URL
5. Start using your New CDN for WordPress (or any other site/platform you have)

Original post from Zemalf's Website optimization blog:
How to create CDN for WordPress with MaxCDN

Are you running Disqus Comments on your WordPress blog?

Have you received comments that you've marked as spam or deleted?

You have, right? We all have.

Standard business, we get spam comments or comments not compliant with our comment policy, we mark them as spam and remove the comment...

Here's an usual lame-ass SPAM comment in Disqus, marked as spam...

Stay with me...

When comment is left to WordPress blog with Disqus comments, the comment is also added to WordPress database, like a normal comment would.

This is good in case you would remove Disqus one day, you'd still have the comments.

OK - cool

BUT

After the comment is received, Disqus picks up the comment, so the comment going to WordPress database it is not caught by SPAM filters or anything...

Not a problem, we just manually marked the comment as spam...

RIGHT?

well...

No.

Disqus doesn't think it needs to "communicate back" to the WordPress database and remove the comment there as well...

Check your normal comments (click 'Dashboard > Comments > Comments' to see comments in WordPress database), and you will find comments there that you've deleted or marked as spam in Disqus, safely in the WordPress database.

The same SPAM comment, marked as SPAM in Disqus, is in the WordPress comment, approved like any good comment...

LOVELY!

And if Disqus being slow as hell wasn't enough...

:sigh:

BUT

IT GETS WORSE

Spot a comment from "normal" comments that was spam, removed from Disqus, but still in WordPress database etc...

Not a problem, Disqus wouldn't show a comment removed from its own system and only existing in WP database, would it?

YOU BET YOUR SORRY ASS IT WOULD!

Go to the blog post in question...

You can't see the comment there...

OK - good...

Open the page source.

Search for the spam comment.

The same SPAM comment is now HIDDEN in the page source by Disqus Comments. Not visible on the page, but there it is...

WTF?

Looks like Disqus Comments on WordPress, at least with the Disqus Comments -plugin, help SPAM comments to turn our blogs into black hat SEO shit, hiding spammy comments and links in our page source.

Please tell me that this is just some oddity in my blog.

Original post from Zemalf's Website optimization blog:
Disqus LOOPHOLE for SPAM Comments in WordPress

Can I ask you - is your WordPress htaccess is in a good shape?

• Do you have the essential security rules in place?
• Do you know what you should have there?
• Are you afraid to touch the whole darn thing?

No worries - after reading this post you will know the answers. You will know exactly what kind of htaccess file you should have. I will not bore you with technicalities, or go into details that you don't need, but instead - I give you the solution, right now:

Ultra Quick Intro to htaccess

• .htaccess is the default name of a directory-level configuration file for a web server
• it was originally created for per-directory access control, but nowadays htaccess can include many other configurations, mostly related to content control.
• The file name is .htaccess ("dot htaccess"). Don't forget the "dot". In some operating systems, the files beginning with "dot" might be hidden, so keep that in mind.
• the name of the htaccess-file can be changed by configuration (which is wise for security, but beyond the scope of this article).
• .htaccess overrides the rules in the main configuration file, usually called httpd.conf.
• for performance, it's better to use httpd.conf -file, but on shared hosting, the webmaster doesn't usually have access to the main configuration -file and needs to rely on .htaccess.
• if you DO have access to httpd.conf, all non-directory specific rules should go into httpd.conf instead of .htaccess.

I promised I won't bore you with details you don't need, so that's it - in fact, you don't even need all the above, but I couldn't call this article definite guide if I didn't add some of that stuff in... If you want to know even more, check the links below on this post for all the htaccess information you'll ever need and then some.

WordPress htaccess

Good, default WordPress htaccess looks like this:

# BEGIN htaccess
# Protect the htaccess file
<Files .htaccess>
Order Allow,Deny
Deny from all
</Files>

# Protect the htaccess file
<Files wp-config.php>
Order Allow,Deny
Deny from all
</Files>

# Disable directory browsing
Options All -Indexes

# Enable the following of symlinks
Options +FollowSymLinks

<IfModule mod_headers.c>
# No ETags, No Pragma
Header unset Pragma
Header unset ETag
# Make sure proxies deliver correct content
Header append Vary User-Agent env=!dont-vary
# Ensure proxies deliver compressed content correctly
Header append Vary Accept-Encoding
</IfModule>

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
# END htaccess


WARNING: The redirect rules at the end might be different in case you've installed WordPress in a directory and/or run several blogs from the same domain. If WordPress has already added mod_rewrite -rules into the .htaccess -file (similar to above), DO NOT delete/edit them.

With these rules in place we have the basic security in place

• .htaccess file itself is protected,
• WordPress wp-config.php is protected, and
• directory browsing is disabled.

Apart from the security, we just need the default WordPress redirect rules (the last rules there).

Add More Rules as Needed

The rules above are the starting point and suitable for any blog. As said, the default rules are what any WordPress blog needs. If you do nothing else, but add the rules I showed above, you will be fine. The following posts are for the tech-heads, geeks and crazy tweakers like me:

• The Ultimate Htaccess
• Stupid htaccess Tricks (Perishable Press)
• .htaccess rules for site speed optimization (Zemalf.com)
• The most essential .htaccess rules for blogs (Zemalf.com)

Editing the htaccess from WordPress Dashboard

I don't recommend using a plugin that creates htaccess, because you don't really need to use such a plugin, but you can use a plugin that allows you to edit it easily from the Dashboard, so you don't have to mess with FTP or SSH if you don't have to.

From the WordPress plugins I use and recommend, Robots Meta offers just that (in addition to all the useful things it does for SEO and stuff). With Robots Meta, you can edit the htaccess file from the plugin settings (just remember to back up the content before editing and saving).

Advanced users should always use FTP or SSH to edit the files.

WordPress htaccess and W3 Total Cache

With the default rules in the htaccess,

• we can let W3 Total Cache add the rules it needs for Browser Cache, and
• we don't necessarily need to (manually) add the .htaccess rules for performance.

Also, se can add other .htaccess rules for blogs, but we can skip the mod_deflate / Expires rules.

The rules added by W3 Total Cache are *not* optimal, but they're good enough. And since editing .htaccess is quite technical, and hard for many WordPress bloggers out there, it's good that non-techies don't need to touch it too many times.

For tech people, there's still the option to just disable Browser Cache -option in W3TC, and tweak the caching/proxy settings manually, and this is the best option for website performance. BUT for the "average blogger", the rules above + the rules added by W3TC are everything they need.

Summary

Add the rules I presented above to your .htaccess -file before installing W3 Total Cache (or add them in by replacing everything else but the W3TC rules). Always take backup of your blog AND the htaccess before editing the file.

If your site "dies" after editing the file, you probably did something wrong - restore the backup (or add only the rules in this post in) and try again. It's not hard, but be careful when deleting / modifying the rules already in the file, as some rules can and will be, site-specific.

Afterword

I hope I managed to present the kind of htaccess rules that every WordPress blogger could use. With the feedback from my earlier posts with htaccess rules for WordPress, while they were highly useful and comprehensive, I learned that some parts of them were complicated for the "technologically challenged".

Thus, the rules in this post make up for what I think is, truly essential WordPress htaccess. Beyond this, it's tweaking and tuning, adding your personal favorites, etc.

What do you think? And also: Did these .htaccess rules work for your blog?

Original post from Zemalf's Website optimization blog:
WordPress htaccess: The Definite Guide

The extended version of the W3 Total Cache guide is available as a free eBook:

Download the free W3 Total Cache Installation and Configuration Guide from MediaFire.

Introduction

Installing and configuring the W3 Total Cache -plugin for WordPress is part of a step-by-step process to optimize WordPress for speed that will make it easier to retain readers and keep the site speed on a level that Google appreciates as well.

The initial steps to speed up WordPress are laid out as the WordPress Speed Challenge here at my blog.

Why W3 Total Cache?

With this free guide, you can easily make your WordPress blogs pages load faster than before and save money on hosting bills as you can stay on shared hosting and still make your blog withstand huge amounts of traffic without compromising the performance.

Installing W3 Total Cache (W3TC for short) is just like installing any other plugin for WordPress (super simple via the Dashboard). The default options will make W3TC handle page caching, which it does similarly, and even a bit better, than the WP Super Cache.

But with proper configuration, W3TC does much more, like combining and minifying (compressing & making smaller) JavaScript and CSS-files, and also cache Database queries and make using Content Delivery Network easy (read: automatic). Because of all this, the W3 Total Cache is the best caching plugin for WordPress.

This guide is meant for WordPress blogs on shared hosting, who can't use more advanced caching solutions like Opcode caching and/or memcache, which are available on dedicated servers and virtual private servers. With this guide, you can handle loads of traffic with a blog on shared hosting, and you can stay on shared hosting until you can afford to pay for better (if you need it then).

For blogs that do need more powerful hosting solutions, Total Cache is even better. With the advanced options like Database Caching and automated use of Content Delivery Network, W3TC is the ultimate caching solution (the "Total" in the plugin name is there for a reason) and this is why huge blogs like Mashable use it.

How to Install and Configure W3 Total Cache for WordPress

The first step is to uninstall any other caching plugin you might be using, like WP Super Cache. We don't need (or even can't have) two caching plugins running, so you need to uninstall WP Super Cache before you move on.

Installing and configuring the W3 Total Cache is a simple step-by-step process... and actually since you don't necessarily need to take one of the steps and one you can skip altogether, it's really 3-7 steps, depending on how you count it :)

How to install W3 Total Cache

Here's the installation in short (as installing any WordPress -plugin):

• (Uninstall WP Super Cache, or any other caching plugin you might have installed)
• Install W3 Total Cache -plugin: Go to 'Plugins', Click 'Add New', Search for 'W3 Total Cache', click 'Install now' for W3TC, confirm the installation and activate the plugin.

How to Configure W3 Total Cache -plugin

W3TC - General Settings

• Page Cache: Enabled ('Enable' checked), Disk (enhanced)
• Minify: Enabled ('Enable' checked), Disk
• Database Cache: Disabled ('Enable' unchecked)
• Object Cache: Disabled ('Enable' unchecked)
• Content Delivery Network: Disabled ('Enable' unchecked) (*
• Browser Cache: Enabled ('Enable' checked)

*) For the best performance and speed, I recommend setting up a content delivery network (CDN) and configure it into W3TC settings. It's optional as it's not free, but it's well worth it in the end. Depending on your hosting setup, it can even save you money as it takes the load and bandwidth off your main server.

I personally use MaxCDN, and wrote a guide on how to set it up here: CDN with MaxCDN.

W3TC - Page Cache Settings

Page Cache Settings - General

• Enable (checked) - Don't cache pages for logged in users
• Enable (checked) - Cache home page
• Enable (checked) - Cache feeds
• Disable (unchecked) - Cache URIs with query string variables
• Disable (unchecked) - Cache 404 (not found) pages

Page Cache Settings - Advanced

No need to touch these.

Page Cache Settings - Cache Preload

With Cache Preload, you can automatically "fill the cache", using a XML sitemap. This means serving pre-cached pages to all visitors, even if a page has not been visited recently. It's OK to leave this disabled, and keep it disabled if you run into performance problems when the preload activates, or lower the number of 'Pages per interval'.

• Enable (checked) - Automatically prime the page cache
• Update internal - 907
• Pages per interval: 7 (increase/decrease as needed)
• Sitemap URL: Your blogs sitemap.xml URL, e.g. http://example.com/sitemap.xml

W3TC - Minify Settings

This is where the magic happens, and also, this is the hardest part of W3 Total Cache configuration. If you're uncomfortable to look into HTML source and find CSS- and JS-files there, skip this section. You won't have minify, but Page Cache will work just fine. However, for performance optimization and site speed, this is essential.

Skip the General, HTML and JavaScript for now, and scroll to...

Minify Settings - Cascading Style Sheets

CSS Minify Settings:

• Enable: Enable (checked)
• Disable: Combine only (unchecked)
• Enable: Comment Removal (checked)
• Enable: Line break removal (checked)

If you run into problems with badly coded CSS, try disabling the Comment- and Line break removal. Well coded CSS will still work, bad ones might get into problems.

CSS file management

Theme: The active theme should be chosen, but you can set configurations to all installed themes here (even for non-active ones, in case you ever activate them).

• Open another browser window or tab, and open your blog.
• Open the page source (right-click, show page source).
• Open Find (e.g. CTRL+F or from menu: Edit > Find)
• Search for ".css" (without quotes)
• Copy the full URL of the first .css-file you find, e.g. http://example.com/wp-content/themes/yourtheme/style.css (do not copy this URL, you must get it from YOUR BLOGS page source)
• Go back to the window/tab with W3 Total Cache settings and the Minify Setting -page, click 'Add a style sheet' under Cascading Style Sheets...
• Paste the .css -file URL in, unless the css-file is specific to certain page/template, choose 'All Templates'. Just in case, click 'Veriry URI' to see that the URL is correct
• Go back to the page source, hit next on the find to locate the next css-file. Copy the URL to the W3 Total Cache, Verify.
• Repeat until you've added all css-files from the page source to W3TC.

Notes: If there is "version number" like "?ver=2.4.1" in the CSS-files URL, remove it.

For example: /styles.css?ver=2.4.1 would go into W3TC as /styles.css - This way, W3TC will pick up the CSS, even if the plugin/theme updates and the CSS-version changes.

Note that you can change the order of the CSS-files by dragging them (hover your mouse over the file, and you'll see an "up-and-down" arrows), which might help if some CSS-files need to be before/after another. It's best to follow the same order of the files they were in the source code (taken that everything was working).

After you 'Save changes', W3TC might remove part of the URL, this is normal.

Minify Settings - Advanced

• Update external files every: 216000 seconds
• Garbage collection interval: 216000 seconds

For high traffic sites, lower the Garbage collection to 86400, or just leave it there by default.

Save Changes.

Minify Settings - JavaScript

TO AVOID PROBLEMS - DO NOT ADD AdSense, Chitika or such advertising code to W3TC!!

The process is similar to adding the CSS-files, but the problem is that many plugin- and theme-authors are not very good JavaScript coders, so they code can't handle minification.

• Enabled: Enable (checked)
• Disabled: Combine only after <head>
• Disabled: Combine only after <body>
• Disabled: Combine only before </body>
• Enabled: Comment removal
• Enabled: Line break removal

Go to your blogs page source, find ".js" files. Add them one by one to W3TC. Again, remove the "?ver=2.4.1" and similar version numbers if you see'em. For performance, it's better to Embed JavaScript to the bottom of the page = Embed before </body> and use the "Non-blocking" -option

Non-blocking can be used if the functionality of that script is not needed when loading the page, but only after the page is loaded. (In general, interface scripts can be non-blocking, and scripts that modify the content usually need to be "blocking")

If a script doesn't work correctly when embedded to the footer (before </body>), embed it to the same location you found it, e.g. Embed script located originally in the <head>, in <head> = Embed in <head>.

Also, you can change the order of the JavaScript files by dragging them, which might help if some scripts need to be in certain order. It's best to place the scripts in the same order they were in the source code (taken that everything was working).

If a script is only used/needed on certain pages, use the Template selector to choose the correct template from your theme, e.g. Page for page.php, Category for category.php, etc.

Disable 'Comment removal' and 'Line break removal', if you're having problems. And if everything else fails, remove JS-file from W3TC (and seriously consider getting rid of that poorly coded script!!)

Save changes.

Test your site functionality before enabling the HTML minify! If you're on Preview-mode, test your site after 'Deploy' and change configuration if needed.

Change the settings (e.g. Comment-/Line break removal, remove scripts from W3TC, etc.) if there's problems.

Did you have a lot of CSS- and JavaScript -files to go through? Maybe you're running a few unneeded plugins, widgets and external scripts? Do you really need them all? Remember - best performance optimization trick is to remove stuff.

Minify Settings - General

• Enable: Rewrite URL structure (checked)
• Enable: Automatically upload mofified files (checked)
• Minify error notification: Enable this to get error notification if something goes wrong.

Minify Settings - HTML

Note: After enabling HTML, your page source will become somewhat difficul to read, so adjust CSS- and JS-settings before enabling this. And if you ever need to look into your blogs source, disable HTML minifying then.

Best Performance:

• Enable: Enable (checked)
• Disable: Don't minify feed (checked)
• Enable: Inline CSS minification (checked)
• Enable: Inline JS minification (checked)
• Enable: Line break removal (checked)

Best compatibility with HALF-ASS coded themes:

• Disable: Enable (unchecked)

Add stuff to ignore-field as needed (Advanced stuff)

Save changes.

Skip Database Cache-, Object Cache- and CDN settings, as those are probably disabled for now + the default options work OK, even if you do have opcode-/memcache running on your VPS or dedicated server.

W3TC - Browser Cache

The browser cache settings will change rules in your .htaccess-file if you have the Browser Cache enabled.

Advanced users probably want to tweak their .htaccess manually, but this is an excellent way for non-techies to get .htaccess-based browser cache set-up.

Go through the settings, and set'em like this...

Browser Cache - General / Default

• Enable (checked): Set expires header
• Enable (checked): Set cache control header
• Disable (unchecked): Set entity tag (eTag)
• Enable (checked): Set W3 Total Cache header
• Enable (checked): Enable HTTP (gzip) compression
• Disable (unchecked): Do not process 404 errors

Save changes.

Browser Cache - Cascading Style Sheets & JavaScript

(default = OK, no changes)

• Enable (checked): Set expires header
• Expires header lifetime: 31536000 seconds
• Enable (checked): Set cache control header
• Cache Control Policy: cache with validation
• Disable (unchecked): Set entity tag (eTag)
• Enable (checked): Set W3 Total Cache header
• Enable (checked): Enable HTTP (gzip) compression

Browser Cache - HTML

(default = OK, no changes)

• Enable (checked): Set expires header
• Expires header lifetime: 3600 seconds
• Enable (checked): Set cache control header
• Cache Control Policy: cache with validation
• Disable (unchecked): Set entity tag (eTag)
• Enable (checked): Set W3 Total Cache header
• Enable (checked): Enable HTTP (gzip) compression

Browser Cache - Media & Other Files

(default = OK, no changes)

• Enable (checked): Set expires header
• Expires header lifetime: 31536000 seconds
• Enable (checked): Set cache control header
• Cache Control Policy: cache with validation
• Disable (unchecked): Set entity tag (eTag)
• Enable (checked): Set W3 Total Cache header
• Enable (checked): Enable HTTP (gzip) compression

Save changes.

You might change the Cache Control policies if you have issues with proxies, but other than that, the above config is solid.

You don't have to, but if you now go and check your root .htacces-file, you'll see that W3TC has added loads of rules there.

W3 Total Cache and Mobile Browsers: User Agent Groups -settings

This is where you'll do tweaks for different agents, e.g. mobile users, but you can skip these for now.

W3TC - Content Delivery Network settings

This is where you'll configure W3TC and the blog to use your CDN or (sub-)domain to server files in the Media Library, the Theme-files, minified-files, etc. W3TC does all this automatically.

In case you are interested in taking CDN in to use, WP Total Cache and MaxCDN make taking CDN into use very, very easy (read my WordPress CDN guide for the step-by-step instructions).

Preview Mode & Deploying the changes

After you've done all the settings, go back to the General Settings -page and hit 'Deploy'.

You'll see 'Preview settings succesfully deployed'

Hit 'Disable' to disable the preview mode and "go live"

Hit 'Empty Page Cache'

Hit 'Empty Minify Cache'

(as noted at the start, the 'Deselect this option to disable all caching functionality.' option seems to be broken, just ignore it, even if its unchecked by default)

If you want, check 'Combatibility Check' for some info. If you're on shared hosting, these are pretty much out-of-your-control, but will give some clue in case you have problems with W3 Total Cache.

It is normal that Opcode cache and Memcache extension are 'Not installed', unless you have a Virtual Private Server or dedicated server and have'em installed there.

But now you're done, you have succesfully installed and configured W3TC on your blog.

The Extended W3 Total Cache Guide

Installing and configuring W3 Total Cache is not overly complicated, but there are a lot of options in it (even that some are OK by default). I noticed that with all the step-by-step instructions, screenshots and additional tips, this guide started to bloat beyond a blog post - so I turned a detailed version of this post into a PDF and uploaded the eBook to my Scribd (embedded below).

UPDATE: Since then Scribd has changed their ways and made the download paid/difficult, but I uploaded the PDF to a free file sharing site, so you can download the W3 Total Cache Installation and Configuration Guide from Mediafire.

W3 Total Cache Installation and Configuration Guide

Don't be too scared about the 30+ 45+ pages, it's a simple step-by-step guide, but there are many options with the plugin and I wanted to include clear screenshots of the settings to make things easy for you.

Scribd has changed their ways and made download difficult and/or paid, thus the PDF is now uploaded to a free file sharing site. Download the W3 Total Cache Installation and Configuration Guide via MediaFire.

Updates and Versions

2010-07-12: 1.0 Post published.

2010-08-15: 1.02 Minor updates and corrections.

2010-10-30: 1.1 Total post re-work and update to the PDF guide.

2011-03-28: 1.2 Checked that everything is up-to-date. Updated CDN info. Uploaded a new version of the extended edition to Scribd.

2012-0912: Uploaded the PDF to MediaFire

Summary

Installing and configuring W3 Total Cache is a simple 7 5 step process, which you can take right now to speed up your WordPress blog:

1. (Uninstall WP Super Cache, or any other caching plugin than W3TC, like WP Cache, WP Minify or such)
2. (Place the essential rules to your WordPress htaccess)
3. Install the W3 Total Cache -plugin
4. (Optional: Check the General Settings, defaults OK, can be skipped)
5. (Optional: Adjust the Page Cache Settings)
6. Adjust the Minify Settings
7. Adjust the Browser Cache Settigs
8. (No need to touch the Database Cache or Object Cache -settings, the easiest step!)
9. Advanced: Configure the CDN settings if you're using one (or skip!)

Download the W3 Total Cache Installation and Configuration Guide from MediaFire for detailed step-by-step instructions.

p.s. I've been told I should be selling my own products, and ask money for eBooks like this one, instead of putting it out there for free... I don't know about that, but if all goes as planned, there'll be plenty of opportunities for you to buy stuff from me at some point, but for now, you'll just have to get it all for free. Sorry.

p.p.s. If you like what I'm doing here, subscribe to this blog via RSS or email and connect with me on my Facebook -page.

Original post from Zemalf's Website optimization blog:
W3 Total Cache -Plugin: The Complete Settings Guide

WP Super Cache is an awesome plugin, but W3 Total Cache is better. We don't want (can't have) both, so here's how to uninstall WP Super Cache.

Do this only if you are ready to replace it with W3 Total Cache right away. Caching is essential for blog performance, and you don't want to have the blog running for too long without caching.

Before you begin: BACKUP your blog, including the root .htaccess -file. Uninstalling WP Super Cache is quite simple, but having a backup is smart, in case something does go wrong.

5 Steps to Uninstall WP Super Cache

Notice: You need to run WP Super Cache uninstall.php instead of just deactivating and deleting the plugin to ensure everything that the plugin is removed fully and files are cleaned on the server.

1. Go to WP Super Cache settings. Turn OFF caching in WP Super Cache settings. Clear the expired files. Clear the cache.

2. Go to Dashboard and Plugins. Deactivate the WP Super Cache from Plugins screen. (Do not DELETE yet)

3. Edit the file uninstall.php in your plugins/wp-super-cache/ directory and set
UNINSTALL_WPSUPERCACHE to a non blank value (e.g. '1').

define( 'UNINSTALL_WPSUPERCACHE', '1' );

4. Open your browser and load wp-content/plugins/wp-super-cache/uninstall.php directly. You must be logged in as an admin, and you must confirm the action.

5. Go to Dashboard and Plugins. Find WP Super Cache, click remove and confirm removing all files.

How to Verify that WP Super Cache was Uninstalled Successfully

The above 5 steps will uninstall WP Super Cache and clean all the files on your server. However, just to make sure, you can follow these steps to ensure everything was cleared successfully:

1. Open wp-config.php (in the WordPress install directory) and ensure the line is removed:

define('WP_CACHE', true);

2. Go to /wp-content/ and check that the files advanced-cache.php and wp-cache-config.php are not there (delete them if they are there).

3. Open the .htaccess -file at the root of your domain and make sure the WP Super Cache rules are not there. The WP Super Cache's rules are between commented lines:

# BEGIN WPSuperCache
...
# END WPSuperCache

Delete the rules between the BEGIN/END WPSuperCache, including the commented lines themselves.

Note that WP Super Cache's rules might already be removed from the .htaccess -file. Also, do not remove the WordPress redirect rules, or any other special rules from the .htaccess.

In case you're wondering, the default WordPress .htaccess rules (also in WordPress Codex) look like this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress


Or for blogs installed in subdirectory:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /subdirectory/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /subdirectory/index.php [L]
</IfModule>
# END WordPress


WordPress installations need to have at least the above code (either the normal or the subdirectory option) in the root .htaccess file. Without these rules, the WordPress permalinks won't work.

4. Check that the directory wp-content/cache/ has been deleted.

5. Check that the directory wp-super-cache from your plugins directory has been deleted.

6. Open a page in your blog, e.g. the homepage and make sure it loads OK.

References and Further Information

For further information and detailed instructions about WP Super Cache uninstallation, check out:

• How to uninstall WP Super Cache
• WP Super Cache -homepage
• WP Super Cache -plugin for WordPress
• Creating and editing WP .htaccess

What Next?

The third step of the WordPress Speed Challenge is to take the W3 Total Cache -plugin into use, and the W3 Total Cache -plugin for WordPress: Installation and Configuration Guide is now available (for free) on Scribd. Read, download and share it here: (and more importantly, take action to take the BEST caching plugin for WordPress into use!)

Original post from Zemalf's Website optimization blog:
How to uninstall WP Super Cache

WordPress Speed Challenge - Step 2

As a preparation for the challenge, we installed the essential tools every blogger needs, and on the first step of the WordPress Speed Challenge, we analyzed the blog performance, and saved the results from YSlow, Page Speed and total loading time via Pingdom to a spreadsheet or a text file.

If you are new to this, begin by reading the WordPress Speed Challenge introduction and work through the preparation and step 1 before moving on.

After getting the tools and initial baseline from the analysis metrics, we move to the WordPress optimization steps. The first optimization step, and the step 2 in the WordPress Speed Challenge, is backing up and optimizing WordPress database.

More about security than speed

Having regular and automatic backups will ensure that your precious work is not lost in case something breaks (or worse, your site gets hacked or something). Because of this, I included the backup as a part of the WP Speed Challenge, even that the backup itself has very little to do with speeding up WordPress - Although it will be signicantly faster to restore a backup than re-write each and every blog post on your blog if the original data is lost...

With the WP-DBManager -plugin we can take the backup, and we can schedule it as well, making the backups automatic. And since on the challenge, we're optimizing our WordPress for speed, we get a chance to automatically optimize the WordPress DB as well.

The speed benefit of the database optimization with the plugin is not significant, unless you have an older blog with lots of unused data in the database. Thus, don't expect this to make your blog faster, but I'm sure you understand how important it is to have backups from your blog - the optimization is just a little bonus on top of having your hard work saved in case something goes wrong.

Action: Backup and optimize WordPress database

See how you can easily have a piece of mind that your blogs data is safe by using couple of minutes to set the automated backups and optimization with my instructions.

Here's what you should do NOW:

1. Install the WP-DBManager -plugin
2. Backup the WordPress Database with the plugin
3. Optimize the WordPress Database with the plugin
4. Configure automatic backup and optimization for the future

Read the full step-by-step instructions here: How to automatically backup and optimize WordPress database.

Next in the WP Speed Challenge

After analyzing the performance and backing up and optimizing the WordPress database, the next step in the WordPress Speed Challenge is to edit your WordPress htaccess, and then do the ultimate optimization tweak that will make your blog REALLY FAST - installing the W3 Total Cache -plugin.

Original post from Zemalf's Website optimization blog:
How to Backup and Optimize the WordPress Database

Introduction

Backing up the WordPress database is the smartest thing you can do and one of the first things to take care of after setting up a new WordPress blog. With the instructions in this post, you don't have to worry about losing everything you've written and done to your blog if something breaks. And best of all, the backups are automatically emailed to you, so you'll have them even if the whole server blows up.

While taking care of the backup, we'll also automatically optimize the WordPress database by removing unnecessary data, making the database cleaner and smaller, which in return makes database calls faster.

The speed gain of WordPress database optimization is very small, even non-existent, but since we get the DB-optimization as a bonus while having a backup, installing the WP-DBManager -plugin to optimize and backup your WordPress Database is first of the 4 WordPress optimization steps in the WordPress Speed Challenge.

1. Install the WP-DBManager -plugin

I have chosen and recommend a plugin called WP-DBManager for optimizing and backing up the WordPress database. First, because it works like a charm, and second, because it's automatic after setting it up once. For backup, the other awesome option is the WB-DB-Backup -plugin, but as said, I prefer the WP-DBManager because it also optimizes the database and it can be scheduled for automation.

To install the WP-DBManager, go to your WordPress Dashboard (admin area)

1. Click 'Plugins'
2. Click 'Add New'
3. Type in the search field: "WP-DBManager" (without quotes)
4. Click 'Search Plugins' -button
5. Check the results for WP-DBManager and click install now

WP-DBManager will automatically create a folder called backup-db in the wp-content folder if that folder is writable. If it is not created, create it and CHMOD it to 777. See WP-DBManager installation instructions for more info.

The plugin will also ask you to create a .htaccess -file to the backup-db directory, which you can do by copying the htaccess.txt from the plugin dir to the backup-db dir, and rename it to .htaccess there. The .htaccess -file is needed to ensure no-one can access the backed-up files but you. Here's what should be inside the .htaccess -file placed in the backup-db dir:

<Files ~ ".*\..*">
order allow,deny
deny from all
</Files>

WP-DBManager does not backup the files in your server, just the WordPress MySQL database.

2. Backup the WordPress Database

After getting the WP-DBManager -plugin installed, let's create the first backup manually...

Go to your WordPress Dashboard (admin area)

1. Click 'Database'
2. Click 'Backup DB'
3. The Backup Status checks should be green ("Excellent. You Are Good To Go")
4. Choose to GZIP (compress) the results if you want
5. Click Backup

3. Optimize the WordPress Database

Optimizing database will clean and optimize the WordPress database, removing unneeded data, making the database calls faster (because there is no unnecessary data to go through).

If you go to Database (Database), you can see the overhead on the right hand side, and at the bottom of the table, you'll see how much unneeded data you can remove right away (by doing the optimization).

Here's how to do the optimization manually...

1. Click 'Database'
2. Click 'Optimize Db'
3. (Scroll down if needed) Click 'Optimize'

4. Configure Automatic Backup and Optimizations of the WordPress Database

After doing backup manually once and optimizing the database by hand, we can now automate and schedule the WordPress database backup...

Go to your WordPress Dashboard (admin area)

1. Click 'Database'
2. Click 'DB Options'
3. Ignore the advanced options on top, look down to 'Automatic scheduling'
4. Set Backup frequency, e.g. once a day
5. Enter an email address you want the backup to be sent to
6. Choose if you want to GZIP the backup file
7. Adjust the optimization schedule, once a week is fine
8. Click 'Save Changes' -button

Source and references

• WP-DBManager -plugin homepage
• WP-DBManager at the WordPress.org plugin directory

Summary

The first thing one must do after WordPress install and configuring the settings, is to setup automatic backups for the database. In case you have a WordPress blog, and you have not done this, you MUST DO THIS RIGHT NOW. Here are the action steps:

1. Install the WP-DBManager -plugin
2. Backup the WordPress Database
3. Optimize the WordPress Database
4. Configure Automatic Backup and Optimizations of the WordPress Database

Do this, and you have backed up your WordPress database, optimized it for faster usage, and automated the backups and the optimization for the future - ensuring both tasks are done automatically in the background.

Backing up and optimizing the WordPress database is more important for security (we have a backup to go back to), than speed, since the speed gain of the WordPress database optimization is quite minimal - although on a cluttered, old blog, optimizing the database can significantly speed up the database calls.

As mentioned, setting up the automatic backup and optimization of the WordPress database is the first thing to do after a fresh WordPress install. And it is essential to backup the database before making any changes into the database or the blog.

Original post from Zemalf's Website optimization blog:
How to automatically backup and optimize WordPress database

WordPress Speed Challenge Recap

In all it's simplicity, the WP Speed Challenge is a step-by-step process of analyzing the performance before optimization, doing the optimization, then analyzing the performance post-optimization and finally checking the results by comparison the before- and after results of the analyzation.

• On the preparation, I showed you the 10 tools every WordPress blogger needs.
• On the first step of the WP Speed Challenge, you analyzed the blog performance and recorded the results to a spreadsheet.

WordPress optimization is not any more complicated than that. Now that you have the baseline metrics stored to a spreadsheet or a text file, you can begin the WordPress speed optimizing.

Optimizing WordPress for Speed

The 4 most important WordPress optimization steps are...

1. Install WP-DBManager -plugin to optimize and backup your Database
2. edit your WordPress htaccess,
3. install and configuring W3 Total Cache -plugin
4. optimize your blog images

Two out of those four you can already learn from my previous posts - go ahead and work on those (.htaccess -file for WordPress and optimizing your images).

The other two, installing WP-DBManager and W3 Total Cache are also simple, but there are things "you just have to know" to get it right, but with my instructions, including how to configure them properly, it'll be easy as pie (and you do love pie, right?).

4 Steps Is All It Takes

To avoid confusion, the first optimization step, optimizing and backing up the WordPress database does not speed up the blog very much. The optimization of the database is good for speed and performance, but it's not much. However, the step itself is very important. In case something goes wrong with your blog, you will love me for telling you to have an automatic database backup done with a plugin.

The other 3 steps will speed up WordPress a lot, with the W3 Total Cache being the most important one (If I'd need to choose one optimization step, that would be it, by far in fact). Optimizing images and placing speed-optimized WordPress HTACCESS in place will help on their own, and complement what the W3 Total Cache plugin will do.

Together, these 4 steps will take care of 90% of WordPress optimization you need to do in order to make your blog fast.

This might come as a surprise to you, but that's how simple it really is. The only tricky part is getting W3 Total Cache installed and configured properly, and even that is not really that hard. The rest is a cakewalk.

Original post from Zemalf's Website optimization blog:
Top 4 WordPress Optimization Steps for Speed

WordPress Speed Challenge so far

1. On your marks... (WordPress Speed Challenge introduction)
2. Get set... (Getting the tools every WordPress blogger need)
3. Go! (this post!)

Introduction to Blog Performance Analysis

This is the first step of the WordPress Speed Challenge. In short, and for a quick start (in this challenge, where the speed matters - quick start is what's it's all about!), we are gonna check how fast (or slow) your blog is and write the results down, so we have a baseline we can compare the results against when we've done optimization.

Action 1: Get Firefox with Firebug-, YSlow- and Google Page Speed -addons

First, go back and install the must-have tools for bloggers, if you don't yet have the Firefox -browser with the Firebug, YSlow and Google Page Speed addons.

When optimizing your WordPress blog for speed, you'll be needing all the 10 essential tools for WordPress bloggers on the post, but for the first step of WP Speed Challenge, you just need the Firefox plugins for performance analysis.

Action 2: Prepare a spreadsheet for the statistics

We're gonna use a spreadsheet, or just a text file, Google Docs document, or just pen and paper to store and record the statistics.

You can create your own spreadsheet in Google Docs, Excel or Open Office for example (nothing fancy, just columns for YSlow, Google Page Speed and Pingdom - put the URLs to the left and then data to the rows).

You can also download or make a copy of the public WordPress Speed Challenge spreadsheet I've stored in Google Docs (You don't need Google Account / Google Docs to download a copy, but to make a copy for yourself into the Google Docs, you naturally need an account):

1. Open the public WordPress Speed Challenge spreadsheet
2. (The public copy is view-only. You need to make a copy for yourself)
3. Login to Google Docs (top right when you open the spreadsheet)
4. Click the File-menu and choose to Make a copy...
5. Leave the "copy document collaborators" -option UNCHECKED unless you want to share your document with everyone, including me.
6. Rename the document if you want (defaults to "Copy of...")
7. When you have the spreadsheet copied to your Google Docs:
   • replace the http://example.com with your blogs homepage and http://example.com/postname with the blog post URL you chose
8. And you're done!

You now have a spreadsheet ready and you can fill in the data on the next action step...

How to use the spreadsheet: Before doing any optimization, do the next action step (Action 3 below) and write down the results to the BASELINE -sheet. (After doing optimization stuff, you'll write the new results to the After Optimization -sheet and you'll see summary in the Comparison -sheet).

Unsharing the Google Docs spreadsheet: Next to Google Docs logo, you see the document name and next to that, the privacy / sharing settings - change the settings as you want. To avoid accidental sharing, do *not* check the "copy document collaborators" -option when making a copy.

Using other spreadsheet programs: If you don't want to edit the spreadsheet in Google Docs, but just download it: Click the File-menu and choose to download a copy... (instead of making a copy). Export in format of your choosing (e.g. CVS or Excel) and open it in your spreadsheet program.

No spreadsheets? If you for some reason don't feel like using a spreadsheet, you can also store the data in a text file with your favorite text editor.

No matter what method you use to save the data, the important thing is to record the results of the analysis before you do any optimization, repeat the process after optimization and compare the results.

Action 3: Analyze your blog with the YSlow- and Google Page Speed -addons and the Pingdom Tools

• WordPress blog tends to behave differently for an admin, so go to the Dashboard and log out - then proceed into running YSlow and Page Speed.
• Analyze two pages on the blog: the homepage and one individual blog post.
• Choose one blog post, and always use that same blog post on all tests - a popular post with uploaded images and at least some blog comments is a good choice.

You'll want to test a page that is the most popular "landing page", the first page new visitors load when they come to your blog - the loading time of THAT page is what counts the most. Most often, this is the homepage, or one individual blog post, which you can then choose as the other page.

For the two pages (the homepage and the blog post page), get the YSlow Grade/Score, Page Speed Score and the Pingdom Tools Total Loading Time.

1) YSlow works by clicking the Firebug or the YSlow icon on the bottom right of the Firefox browser window. Open the page you want to test, click to the YSlow tab and click "Run Test" (if it didn't run automatically).

2) Google Page Speed works similarly. You'll see the Page Speed -tab in the Firebug. Click on that and then analyze performance to get the score.

3) Pingdom Tools is even simpler. Open the Pingdom Tools and enter the URL of the homepage and run the test, and repeat for the blog post -page.

While doing the tests, you should have the WP Speed Challenge -spreadsheet ready on another tab of Firefox, so you can...

Action 4: Write down the results: YSlow Grade and score, Google Page Speed score and Pingdom Tools Total Loading Time

• Write down the Grades (YSlow, A to F) and the Scores (both YSlow and Google Page Speed) that you get for the homepage and the blog post page.
• Check the two pages with Pingdom Tools and write the Total Loading Time times down.
• You might want to run the Pingdom Tools test again after a while, or even on a another day, to make sure there's not too much variance on the number

These loading times, grades and scores will be the baseline for your WP speed challenge (and for any optimization or other changes you do on your blog).

Don't worry about the reds, yellows and greens on the YSlow and Page Speed results yet - the important thing, for now, is to look at the overall score, and even more simply, the grade in YSlow - and the loading time is our primary metric for speed, the Grades and Scores give us a simple metric to see how well we're following the best practices - which again, result to faster blogs. If you want to learn a bit more about analyzing your blog speed, go back and read the post on how to analyze your blog speed.

Summary

The first step of the WordPress Speed Challenge is to do little preparation: get the tools and have a place to record the stats. Then run the performance analysis tools, like YSlow and Pingdom Tools website speed test and write the results down for later comparison:

1. Get Firefox with Firebug-, YSlow- and Google Page Speed -addons
2. Prepare a spreadsheet or a text-file for the statistics
3. Analyze your blog with the YSlow- and Google Page Speed -addons and Pingdom Tools
4. Write down the results: YSlow Grade and score, Google Page Speed score and Pingdom Tools Total Loading Time

On the next post, we get to the actual optimization, as I'll share the 4 most important steps to speed up WordPress. It's be surprisingly simple, since I'm focusing on actions that really speed up the blog, instead of wasting time on stuff that doesn't really matter that much (until the more fundamental optimizations are done first).

If you want to jump ahead, tweaking the WordPress htaccess and optimizing images you upload to your blog is part of the optimization and the easiest steps to do right now.

How's the challenge going for you?

1. What kind of YSlow Grades / Google Page Speed scores and loading times you got?
2. What kind of loading time you'd be happy with?

Leave your comments below, it'll help me help you better with this stuff.

Original post from Zemalf's Website optimization blog:
How to Analyze the Performance of a WordPress Blog

Introduction

I've been working on the WordPress optimization stuff for quite some time now. I've turned the things I've learned into a WordPress Speed Challenge, but before we begin the speed optimization, let's do some prep work and get our bloggers' toolbox in order.

On this post, I show the 10 must-have tools for WordPress bloggers, essential for any web development - website optimization included - and plenty of alternatives and optional tools as well.

I compiled the list based on my personal prerefences, which over the years have been heavily influenced by the info from the choiced on the Lifehacker's "Hive Mind" lists.

This post is part of, and the preparation for the WordPress Speed Challenge, but these tools are essential for any WordPress blogger, let alone developer. And of course, these same tools work even if you don't blog on WordPress, since these tools are not connected to WordPress itself (e.g. the recommended WordPress plugins are listed elsewhere).

Essential tools for bloggers

As a WordPress blogger you need tools for

• analyzing performance
• editing text files and images
• optimizing images
• transferring files and images

So in short, we need

• A FTP program to connect to the web/file server
• A text editor to edit files
• A browser with addons for website performance analyzis
• Image editing and optimization tools
• Optional: Productivity timers, e.g. a stop watch and a egg-timer
• Optional: A frosty beverage (and/or cup of something hot)

As you see, you don't need fancy tools for blogging or to optimize your WordPress blog.

All the tools listed on this post are free, with the most of the tools being open source as well - with the exception of the frosty beverage and other drinks, which probably costs a bit. But the drinks are optional anyway, and not included in the "must-have" category.

Other optional tools, the stop watch and the egg timer, are for productivity and seeing how much time goes into what we're doing. I don't like to waste time, an egg timer lets me to work in dashes (e.g. 10 minutes to finish a post) and a stop watch will help me see where the time goes when I don't set a timer.

Basic set of tools for WordPress optimization

WordPress blogger can do well with what's inside the WordPress blog, but using separate tools for certain tasks is essential in order to staying productive and getting stuff done. I've tried a lot of tools and ended up using the ones I've listed on this post, I have listed some alternatives below on the details, but make sure you have:

• A powerful code- and text-editor (I use Notepad++ on Windows)
• A good browser (I prefer Firefox for the addons)
• A FTP program (FileZilla is my choice)
• An image editor and a viewer (I use GIMP and IfranView)
• Image optimizers (I use Image Magick and RIOT)

If you don't have these tools, or your personal choice of tools to do the same tasks, install the 10 tools listed to this post right now and start using them.

10 Must-Have Tools for WordPress Bloggers

With the above, here's the shortlist of the 10 must-have tools for bloggers:

• (1) FTP / File Transfer: FileZilla
• (2) Text editing:
  • Windows: Notepad++
  • Linux/Mac: Bluefish Editor
• (3) Browsing: Firefox + addons:
  • (4) Firebug -addon
  • (5) YSlow -addon
  • (6) Google Page Speed -addon
• Image viewer and editing:
  • (7) IfranView
  • (8) GIMP
• Image optimizing:
  • (9) RIOT (Standalone and/or plugin to IfranView and GIMP)
  • (10) Image Magick

The details, alternatives and optional tools are below.

Building the Blogger's Toolbox

Now that you know what the tools are, it's time to get'em.

Get a FTP Program

FileZilla is the BEST and the easiest way to access the files we need to modify and edit. FileZilla is available for all platforms, including Windows, Linux and Mac.

Get FileZilla at http://filezilla-project.org/

Source:

• Lifehacker - Best FTP clients

Get an Awesome Text Editor

Next, we need an awesome text editor (for editing the files and the code). Any text editor will do, but download and install one of these if you don't have a good one yet:

• Windows: Notepad++
• Mac/Linux: Bluefish Editor
• Other popular text editors:
  • jEdit (Windows, Mac, Linux)
  • Emacs (Windows, Mac, Linux)
  • gedit (Linux GNOME)

You only need one, so choose one based on your preferences. My choice is Notepad++ on Windows.

Source:

• 12 Excellent Free Text Editors for Coders
• Wikipedia - Comparison of Text Editors
• Lifehacker - Best Text Editors

Get Firefox and Addons

In order to make the most out of the challenge and learn stuff, you also need:

• Firefox -browser, with the following addons:
  • Firebug
  • YSlow
  • Google Page Speed

Install the website performance analyzing addons to Firefox

1. (if you don't have Firefox yet) Go to http://www.mozilla.com/firefox/ and install Firefox
2. Open Firefox
3. Go to http://getfirebug.com/ and install Firebug
4. Go to http://developer.yahoo.com/yslow/ and install YSlow
5. Go to http://code.google.com/speed/page-speed/download.html and install Google's Page Speed
6. Re-start Firefox
7. Look to the bottom right of the browser window (status bar) for the Firebug and YSlow icons
8. (Open your blog and try the tools out)

Source:

• Lifehacker - Five Best Browsers

Get an image editor

Primary purpose (from WordPress speed point of view) for an image editor is resizing and scaling the image. For that simple purpose, and for super-simple processing of images, you can use Shrink O'matic.

For more functionality, and the recommended choice, is IfranView. With IfranView you can get simple image editing done, including resizing the images. With it's small size, and all the extensions and plugins, IfranView is the best image viewer there is.

Not so much related to image optimization, but if you're looking for an advanved image editor, get GIMP to get any image editing task done. It takes a while to get used to, but after you do, GIMP is on par with commercial (read: expensive) editors like PhotoShop.

• Get IfranView
• Get GIMP
• Get Shrink O'matic

Source:

• Lifehacker - Five Best Image Editors
• How to optimize images for the web

Get image optimizer tools

A lossless image optimizer is optional (and Shrink O'matic and the other tools above do optimization too). We can take care of optimization inside WordPress with a plugin, but sometimes you'll want to crunch images to minimum size by compromizing the quality a bit.

For this job, RIOT is the tool for you. The Radical Image Optimization Tool (RIOT) is a free image optimizer that let's you visually adjust compression parameters side by side, while keeping minimum filesize. But what makes RIOT truly exceptional is that it plugs-in to IfranView and GIMP - and also XnView if you have that.

• Get RIOT - The standalone program is Windows only, but the plugins work for on any system you can run IfranView and GIMP on, e.g. Windows, Linux and Mac.

If you're taking the WP Speed Challenge and you want a head start on optimization (do take the baseline metrics first, check the end of the post for details), you can check my detailed post on how to optimize images for the web for all the details on image optimization.

Source:

• How to optimize images for the web

Advanced image optimization, command line tools

This is somewhat optional, but for command line, and more advanced image optimization, you should get Image Magick and possible PNGcrush and jpegtran as well.

Command line tools are not required by the WordPress speed challenge, but with these you can get image optimization tasks done on the command line (instead of using a graphical user interface), if you prefer that. And also, as these tools are run from the command line, with scripting you can automate image processing.

Command line image optimization tools:

• Get Image Magick
• Get pngcrush
• Get jpegtran

Source:

• How to optimize images for the web

Get a stop watch and a egg timer

This is partly for fun, but also for productivity): Get a timer so you can see how much time it takes for you do stuff, and to set yourself a timeframe to work on.

Get a stop watch closeby, or bookmark one of these online timers:

• http://stopwatch.onlineclock.net/
• http://www.online-stopwatch.com/

Use a "egg timer" to set how long you want to work on a task and finish until the timer runs out:

• E.gg Timer

Or even better, as a combination of the above, track where all your time is going with

• RescueTime

(optional) Get a frosty beverage

For enjoyment while doing stuff, or for post-task celebration - your choice. Get a frosty beverage before we you start doing the optimization steps (coming in the upcoming posts), or get cup of coffee/tea if you prefer something hot. Personally, I prefer to save the ice-cold beer after things are done and consume cups of coffee when I'm doing stuff.

Summary

Make sure you have the tools (all free) in order to get stuff done for your blog, and also to follow through the WP Speed Challenge

• FTP: FileZilla
• Editor:
  • Windows: Notepad++
  • Linux/Mac: Bluefish Editor
• Browser: Firefox
  • Firebug
  • YSlow
  • Google Page Speed
• Image viewer and editing:
  • IfranView
  • GIMP
• Image optimizing:
  • RIOT
  • Image Magick

Good text editor will help you edit the files, so get one and get used to using it. Any editor will do, but editors like Notepad++ and Bluefish Editor have lot of features that will make your file editing a lot more enjoyable process (and lots of poweruser stuff for the editing- and coding-zen).

You probably had a FTP program already, but if you don't have one, or want to switch into using the best, get FileZilla and configure your blog server(s) in it.

The Firefox addons YSlow and Google Page Speed are essential for website performance analysis and for the WordPress Speed Challenge (and you need Firebug too), so make sure you have those.

You need image editor that allows you to resize images with ease. For that, Shrink O'matic gets the job done, but IfranView is probably better option with all the added functionality (and it's an awesome image viewer too).

A "local" image optimizer is optional, but RIOT does a great job reducing the size of the image while keeping you in manual control of the quality, which makes it great for non-lossless optimization (e.g. when lower quality is enough).

Get set...

At the Midsummer 2010, the WordPress Speed Challenge was announced. On this post, you learned about the tools of the trade and you can prepare for the challenge by downloading and installing them. You'll learn how to use these tools while we're doing the optimization steps.

This post was the preparation and on the next post, the challenge begins. We will begin by analyzing the performance of your WordPress blog before we do any optimization.

You'll learn how to spot site-slowing bottlenecks on your blog and what affects WordPress speed in general. As we write down the statistics when analyzing, we'll have data to compare our end-results to - which is important in order to see how well the different optimization steps worked.

Original post from Zemalf's Website optimization blog:
10 Best and Most Essential Tools for WordPress Bloggers

Get ready...

Don't you find it annoying when you run into a blog that loads so slow that you feel like leaving before you get to read anything? - Have you thought that maybe your blog is "one of those" slow blogs?

Are you tired of your blog being so slow? Would you like your blog to be a lot faster, to deliver fast loading pages to keep your readers happy? Would you like to run your blog on cheap shared hosting until you can afford to pay for better hosting options?

Look no further and get ready...

...for the WordPress Speed Challenge!

This thing has been on my mind for quite some time, the thing I've been working on, a guide to help WordPress bloggers to speed up their blogs, making them load faster. I've spilled some details on this already and I've proven (on a video!) that it's possible to speed up WordPress, even on a shared hosting (and beat the big blogs with their fancy hostings and Content Delivery Networks while at it)...

My website speed and WordPress optimization -related posts have already been among the most popular posts of Zemalf.com, but now it's time to take it to the next level. It's time for the WordPress Speed Challenge.

Help me... help you

I'm doing the WP Speed Challenge for two reasons

1. To help WordPress bloggers speed up their slow blogs
2. Get feedback on how this stuff works and how easy/hard it actually is

To help others is the reason why I started blogging in the first place, and getting feedback from you makes sure the stuff works, your questions are answered and I can make the stuff better and easier to follow.

I've spent the last 14 or so months looking for the best ways to speed up WP blog, I've now found them, but the challenge (for me) is to put all that, even that's it's relatively simple, out in a way that anyone can do it. Plus I know the results from my own WordPress blogs, I've gotten my home page to load in 1-2 seconds, but I want to know how the stuff works for other WordPress bloggers...

As some of you know, I've been working on my first product, an eBook about WordPress optimization, or more accurately about speeding up WordPress. The challenge is all about that. I'm giving the best stuff away for free in this challenge, even that many have told me I should sell this stuff.

After all this, I might or might not have anything up for sale, but at least I know I've helped all of you to make your WordPress blogs faster and helped you learn some important WordPress skills.

The WordPress Speed Challenge

The challenge is to

1. check how fast (or SLOW!) your WordPress blog is now,
2. follow the quick and easy steps I'll show you to make the blog faster,
3. check how FAST your WP blog is after you've done the optimization, and finally
4. see how much you managed to improve your blogs speed and send in the "Final Report" to finish the thing.

If you don't want to send in your results at the end, just follow along, speed up your WordPress blog and let your readers enjoy faster loading pages.

However, if you send in the results, you'll get a greater sense of accomplishment, your stats will serve the greater good in improving the optimization stuff I teach you, and help the WordPress community in the Quest for Speed. Plus you'll feel AWESOME afterwards - in addition to having a lightning fast WP blog!

Not sending the results, and only DRASTICALLY improving your blogs speed without helping the community is boring as HELL, but if you want to do this on your own, as said, that's cool too...

The WP Speed Challenge Overview

The challenge is about learning how to improve WordPress performance and making a self-hosted WordPress blog load faster. The challenge is primarily for bloggers with blogs on a shared hosting, even that the same optimization techniques do work on all kinds of hosting.

In short, the WP Speed Challenge will help you optimize your WordPress blog in a way that it will withstand huge amounts of traffic and load fast, even on the cheapest hosting. This way, you don't need to upgrade to more expensive options before you actually afford them.

You might not even know it, but a slow blog makes readers leave your blog even before the tracking system picks them up. Google has started using the speed as one factor for the search engine rankings. All in all, you are losing money with your slow blog.

Take the WP speed challenge and you don't have to worry about any of that.

Following through the WordPress Speed Challenge will save you money and it will make sure your blog will not be penalized by Google for loading too slowly - And your readers will appreciate your fast loading blog.

Here's what the WP Speed Challenge looks like

• Introduction (this post)
• Get the right tools for WordPress performance analysis and optimization
• Analyze WordPress performance & write the pre-optimization results down
• Optimize your WordPress blog for speed (I'll show you how!)
• Check your WordPress performance after optimization, write the post-optimization results down
• Compare the results (improvement!)

The first ever WordPress Speed Challenge spans over the upcoming posts on this blog. There will be worksheets and step-by-step guides to walk you through the optimization steps - and it's gonna be loads of fun.

This is the first time I've done this... heck, it's probably the first time anyone has done this for WordPress bloggers - so join the fun, spread the word and let's make all of our WordPress blogs optimized for speed...

Questions and Answers

Your question here? Leave a comment or send me a message using my contact form!

On your marks...

The challenge has now been announced, and it'll continue on the next post, getting your WordPress blogger's toolbox ready. Check that post out and subscribe to the blog via RSS or get the RSS via email to get more useful posts from this blog.

What do you think? Any comments about the challenge? Questions?

Begin the challenge with the preparation (get the tools every WordPress blogger needs) and move on to the step 1: analyzing the performance of your blog

Original post from Zemalf's Website optimization blog:
WordPress Speed Challenge – Make your WordPress blog faster!

I like to spend as little time in email as humanly possible. I like efficiency. But I still want to make sure I get to read all the emails that really matter and not waste time on emails I don't need to be acted on immediately.

Because of this, I'm a heavy user of filters in email. I filter emails like newsletters and mailing lists away from my Inbox automatically, so they don't interfere with the important emails, and I can then go and read them when I have the time.

For the longest time I used the senders email or subjects to filter stuff. I still do this, but only a few months ago I found a new way to filter email. I needed to find a better way to filter emails, because over the years I've ended up subscribing to hundreds of newsletters and mailings lists, in addition to the tens of sites and forums I've registered in.

Using sub-addressing to filter and protect your email

The secret trick of mine is using sub-addressing by adding +tag qualifier to the email addresses I use for subscriptions and registrations. By using +tag qualifiers for sub-addressing, I've managed to lower the number of filters in my GMail A LOT and make the whole thing more manageable at the same time.

With sub-addressing and filtering I can make sure my Inbox stays clean of clutter as the emails can be automatically filtered and I'm also protected from spam, as I can immediately see if I start to get spammed from a site based on the +tag I used when I registered or subscribed.

If you just went ??? when I talked about +tag qualifiers and sub-addressing, don't worry - I didn't now this stuff couple of months ago either - and I'll give you the quick intro on the subject right now...

What is email sub-addressing?

With email being used since the 1980's, you'd think that we know everything about it. Well, we probably do, but this is something that I only learned this year - And I've been around computers for 25 years, from which a good portion working in the industry!

I learned only recently that you can effectively sub-address your emails by adding +tag qualifier to your email. Or I might have known it, but never got around into using it. Anyway...

• You can add any tag to your email by injecting +tag after the name before the @-sign, e.g. firstname.lastname+tag@gmail.com (before the @ is the local part of the email address).
• All these emails are still delivered to "firstname.lastname@gmail.com", and you can use the +tag to filter the emails!
• You can use +tag qualifiers to effectively create infinite email sub-addresses.

MAGIC!

One more time: If your email address is firstname.lastname@gmail.com, you can add a tag like firstname.lastname+tag@gmail.com. You can then use the +tag sub-address to filter and monitor that email address.

For me, the main use of sub-addresses is filtering. For spam protection, sub-addressing via +tag qualifiers are not disposable email addresses, but at least I'll know where the spam originated from if I see a +tag on the email.

Source: E-mail address, Wikipedia.

Services that support email sub-addressing

GMail supports sub-addressing with plus (+). GMail is not the only mail service that supports sub-addressing via +tag qualifiers, but GMail is the one I use just because it works do damn well.

Some mail servers violate the RFC 5322, and the recommendations in RFC 3696, by refusing to send mail if the local-part of the address contains the plus sign (+). - Wikipedia

You can test if +tag qualifiers work for you by sending a test email to yourself and add +tag to your email.

Also, some mail systems support sub-addressing via hyphen (-) instead of plus sign, so ask your email provider or their documentation which you should be using. But as said, with GMail it's the plus (+)

How to take advantage of email sub-addressing in GMail

• Use generic +tag to filter mails from mailing lists you subscribe to
• Use +tag for each newsletter you subscribe to
• Use +tag for each site your register on
• Use different +tags in the from-address for the emails you send, e.g. add +tag to your newsletter from-address, so you'll spot the emails send as a reply to your newsletter or mail to a mailing list.

Use the +tags to filter your email, e.g. keep low-priority mails like newsletters out of the Inbox automatically.

For example, if you subscribe to this blog via email, you could add tag like +subscriptions or +newsletters to your email after the name, but before the @-sign.

Or you could use the blogs name or the newsletter owners name, and add tag like +zemalf or +anttislist to the email.

You can also add tags to all sites you've registered in, like Twitter, different forums, etc.

I use combination of these, individual tags for some sites and lists, and generic tags, like "+lowpriority" for bulk newsletters and mailing lists I sign to.

I have then proceeded into build filters around the tags as I like (to either highlight important content or process lower priority mails automatically)

Start using email sub-addressing right now!

• From this moment on, use sub-addressing and the +tags on emails you use for each newsletter and for each site your register in.
• Use the +tags to both filter your email for maximum productivity and also to protect yourself from getting spammed into the email address you used to a certain site (spammers aren't smart enough to remove the +tags)

Also note that for the better mailing list services, like AWeber, you can edit your email address even after you have subscribed, so you can use this trick for existing subscriptions as well.

Just take a look at the links at the bottom of the newsletters that say something other than just "unsubscribe", e.g. "change subscriber options" or "edit your subscription".

And of course, you can go and edit the email address on the services you are already registered in, like forums, social media sites, etc.

Summary

• Sub-addressing with +tag qualifiers is a great way to filter your emails
• You can create an email sub-address by injecting +tag before the @-sign
• The plus (+) works in GMail and some other email services, test it your by sending yourself an email and add +tag qualifier to the email (e.g. firstname.lastname+test@example.com)

What do you think? Did you know about email sub-addressing before your read this post? How have you used it, or how you plan to use it?

Original post from Zemalf's Website optimization blog:
A little known way to manage your email via sub-addressing

May 2010 - Best month so far

May was an amazing month for me. My post on how to optimize images for web got featured at Holy Kaw, resulting in the biggest traffic spike this blog has seen so far. (over 6500 views and 70+ re-tweets at Holy Kaw: How to optimize images for the web, resulted to roughly 1000 visits to my blog)

My traffic stats are public at SeeTheStats: Zemalf.com, where you can see the nice spike around 16th and 17th of May. In total, traffic to the blog increased by nearly 100% during May. Yes - 100%.

That means I doubled my traffic from April to May 2010. Traffic increased this much because of the traffic spike from the Holy Kaw exposure, and more importantly, because search engine traffic increasing by 50% from about 1700 to over 2600 a month.

Bounce rate is still crap, and there's loads of room for improvement on average page views and time spent on site, but the first target is to get people in here, so I'm happy.

All in all, my efforts in improving SEO has started to pay off. 50% increase in search engine traffic is awesome. Most of that came from Google.

Part of the good results come from writing more content on May, which both increased rankings, because Google likes fresh content, but also because I started slowly building some links to the blog.

This goes on to show that my on-page SEO, overall blog SEO and writing SEO friendly posts has been on good level, just waiting for the off-page SEO to get going.

June 2010 Busyness

On May, I nearly created my first product, I kinda promised that the product in question, an eBook on how to speed up WordPress will be out soon...

Unfortunately June is extremely busy time for me, and because of various things I can't fully keep the momentum going. I'm still trying to get the eBook out as soon as I can, but it'll have to wait for couple of weeks because of number of things. Most likely it'll come out at the end of the month or beginning of July.

I'm facing changes in my day job, finishing an on-going project with big release and moving on to new job role and part of the organization at the same time. An amateur theater play I'm in premieres on Friday, with shows every other day for couple of weeks.

With three graduation in the family last weekend, and not getting any blog-stuff done on the weekend as I usually do, and the next weekend going to the theater and the shows, blog stays behind. After two weeks however, I'll be coming back strong. Or that's the plan anyhow.

Not blogging or putting things on paper for two weeks easily results in procrastination and lack of motivation which has happened to me twice during the last year... This time however, it'll be much easier to get back on the horse after seeing such a great results on May...

How did things go for you on May? And how's things looking for June?

Original post from Zemalf's Website optimization blog:
May 2010 Awesomeness

I've been keeping Dave Doolin busy by leaving blog comments on his blog, as all of my blog comments went to his SPAM queue. Dave was awesome enough to notify me about that, so I figured my comments were being marked as SPAM by Akismet, the default SPAM filter of WordPress which is also used in other sites and platforms.

I realized that it was indeed so, I was being blocked by Akismet, which effectively means my comments automatically went into the spam queue on all blogs and other sites protecting themselves from SPAM with Akismet. Not good.

I leave a lot of blog comments, but I know I'm not a spammer, even that I use some advanced blog commenting tricks, I always leave blog comments that carry some value.

Luckily, getting out of the Akismet trap was easy (I'll show you how to do that too).

How to check if Akismet marks your comment as SPAM (for whatever reason)

Are your blog comments not appearing when you leave them on blogs?

This can happen for two reasons

• Blog's comments are moderated, or
• your comment gets picked by the spam filter of that blog.

(different commenting systems handle comments differently, so you might not see anything right away, even that things are OK, or the comment is just being moderated, approved by the admin.)

If you see your comment right away, with a text "your comment is being moderated", that's normal. However, if your blog comments are not appearing at all, there's a chance you've been caught in the Akismet SPAM queue by mistake.

There is no way to absolutely make sure you are blocked by Akismet. Thus, the only way is to contact Akismet Support as instructed below and ask them to check it for you.

The Akismet test blog no longer exists, because it was against WordPress.com service policy.

I created a "Akismet test blog" on WordPress.com, because I didn't know it was against their policy. That blog is now deleted, and no one should create a blog in WordPress.com just to test Akismet ,or as they said it:

Akismet test blogs or facilities not run by WordPress.com staff are forbidden on our service. -WordPress.com Support

How to get off the Akismet "hot list"

Akismet thinks you are spammer.

No worries, these things happen.

Here's how to get your name cleared...

To get off the Akismet hot list, go to Akismet.com contact page and send a message - and choose purpose of the support message: I think Akismet is catching my comments by mistake.

1. Go to http://akismet.com/contact/
2. Choose Purpose: "I think Akismet is catching my comments by mistake"
3. Give the URL of your blog and your email address so they can de-spam you.
4. (put the email and URL in the "message", even if you add them to the contact details)

Naturally, the above works only if one is legit and not really a spammer. I think their logs show why one has been marked as SPAM by Akismet, so dumb-ass comment spammers are out of luck (which is just awesome).

It might take a while, days or even a week, depending on how much Akismet support has stuff to do, but eventually you'll get a mail if they managed to fix the issue, and if it all works out, your comments are no longer blocked and marked as spam by Akismet.

For me it took about a week to get the answer from the support (that they fixed the issue) and after that my blog comments were no longer blocked. High five to Akismet support for great work.

Summary

Even if you're using blog commenting the right way, your blog comments can be mistakenly marked as spam by Akismet.

If this happens, go to Akismet.com contact page and tell them you've been marked as spam by mistake. Tell them the email and URL you think are blocked by Akismet and they will help you out.

Change log:

• Jun 2, 2010: Added the screenshot of Akismet support contact form
• Jun 27, 2010: Created a simple Akismet test blog
• Aug 29, 2010: Deleted the test blog as it was against WordPress.com policy. Edited the post accordingly.

References:

• "I'm blocked in Akismet!" - WordPress.com forums
• Akismet FAQ
• Akismet.com contact form

Original post from Zemalf's Website optimization blog:
How to stop your blog comments from being blocked by Akismet

In the spirit of Dirty Harry, and in honor of Clint Eastwood's birthday, I say this... "Opinions are like assholes; everybody has one". "Essential WordPress plugins" -lists are no different. So here's my opinion on it.

Anyone who creates a list of 20 or 30 WP plugins and calls them "must-have" or "essential" is, for the lack of a better word, a moron. You know: "30 must-have WordPress plugins" ...really? MUST. HAVE. ...pfff

Publishing such posts shows that the author has no idea what they're talking about when it comes to WordPress and they just made the list as link bait. I'm sorry for all you so called "blogging / WordPress experts", but you should title your posts properly...

For me, essential plugin means "a plugin I must and want to install to each and every WordPress blog" -or- "a plugin does something that I must do better or easier than I could do it by hand". You can have a huge list of "great plugins" or "plugins I use and like", but essential... the max is 10 in my mind.

My recommended WordPress plugins -list now has 8, with couple of arguable choices there as well. I complement the list with additional 7 I really like, but I do not call them essential.

Truly Essential WordPress plugins?

Luckily, there are exceptions - I really liked this demonstration / speech by Jonathan Dingman (@Dingman on Twitter) from WP Vibe showing his non-bloated list of WordPress plugin choices. (The presentation took place in WordCamp Orange County 2010)

What made this different from most other such presentations and lists, was that these plugins actually can be considered essential or "must-haves", and not just cool plugins the author happens to like (with couple of exceptions, but that's cool).

Anyway, here is the video from Jonathan Dingman: Essential WordPress Plugins & Optimization (the presentation itself takes about 14 minutes, and continues for about 35 minutes from there with Q&A, which is good stuff too):

And here are the slides from that Essential (WordPress) Plugins and Optimization Presentation:

6 Awesome WordPress -plugins

Here is the edited list (by me) of the plugins from the presentation and the slides with some highlighted benefits if you're too busy to go through the video or the slides:

1. SEO Smart Links
   • In-post, relevant links to posts and categories
   • Automatic cross-post linking
   • Custom keyword linking (optional case-sensitive), e.g. Affiliate links
   • Limitation options
   • (I haven't personally used this, as I've been doing internal linking and affiliate linking manually, but naturally it makes sense to automate it)
2. Google XML Sitemaps
   • Great for SEO
   • Lots of options
   • Easy to use
   • Updated regularly
   • (This is one of the plugin I put on every single WordPress blog I've ever setup and each blog I will setup in the future. Beyond awesome.)
3. Yet Another Related Posts Plugin
   • Great for SEO
   • Users can see related content that they may like, making those links more "relevant" to the page
   • (This plugin has caused some issues before on performance, but I haven't seen any problems on my own blogs. Great plugin.)
4. Redirection
   • Track the number of clicks
   • Affiliate links
   • Links you don't want to pass "juice"
   • Be able to change where a link goes later on
   • Track how often a link is clicked on
   • Disallow all outgoing links (SEO reasons)
   • (Awesome plugin. I'd add that it also tracks 404s, which is great for spotting bad links for example)
5. W3 Total Cache
   • By far, the best caching plugin.
   • (This plugin is one of the enablers for speeding up WordPress to load under 2 seconds on shared hosting)
   • CDN options, Minify options (HTML/css/js), Memory caching via Disk/Memcache/APC)
   • (Do not use both this and WP Super Cache. If possible, use this, if not good on your hosting, use WP Super Cache)
   • Check my W3 Total Cache guide for step-by-step instructions on how to install and configure W3 Total Cache
6. Google Analytics for WordPress
   • Easy to use
   • Lots of options (advanced)
   • Updated regularly for improvements and security
   • (I recently opted to use the highly Optimized Google Analytics asynchronous tracking code instead, just because it's SO FAST *and* I don't need the options this plugin has. But it's still AWESOME plugin that I might go back to one day)

The above is ripped straight from the slides, so give credit to the @Dingman. Jonathan also lists these two, which are awesome plugins, but not essential in my mind:

• WP Super Cache
  • Focuses on utilizing file caching
  • Only use if you can't get W3 Total Cache to work
  • (Do not use both this and W3 Total Cache!)
• Tweeted
  • Easy way to embed (single) Tweets from Twitter to a post or page!
  • (A little self-promotion from Jonathan, which is OK, since the plugin is good for what it does, but not needed by everyone)

On the Q&A part of the video, Jonathan also mentions other great plugins, like Contact Form 7 which I use on my contact page, Viper's Video Quicktags, which is an awesome plugin if you're using a lot of video, either your own or embed other people's content to the blog and Yoast's Breadcrumbs, which I run here on my blog as well. (All awesome plugins to recommend, but not quite for each and every blog)

Summary

All in all, great list with 6 truly essential WordPress plugins and great presentation by Jonathan Dingman (check his WP Vibe -blog as well!). When I think of it, it's not that far from my list of plugins...

I think the plugins on my list, like WP-DBManager for backups and WP Smush.it for automatic image optimization deserve the "essential" stamp on them. Currently I use All in One SEO for SEO-stuff (HeadSpace2 is the other option) and Akismet for Spam protection but I'm constantly refining the list...

And with combination of these plugins listed by Jonathan and from my own list of essential WordPress plugins, my short list of recommended WordPress plugins is getting better and better - but that's just my opinion :)

So... What WordPress plugin(s) would *you* call a "must-have"?

Original post from Zemalf's Website optimization blog:
How many “must-have” WordPress plugins can there be?

You might have read some of my WordPress optimization posts, like how to optimize images and .htaccess rules for site speed. So you know that I'm getting quite good at speeding up WordPress.

So maybe it's time to see just how fast I've taken this blog now...

Here's how fast my blog loads compared to couple of my favorite blogs...

Can't see the video? Watch it on YouTube: Speed Up WordPress.

About the test

There's a timer at the bottom, each sites screenshot (taken every 0.1 seconds) pops up when the site render is started = First render (FR) - before that the screen is white - and screenshot turns gray after the site is fully loaded = Fully Loaded (FL).

• This test was executed on the 27th of May 2010
• Test and video were done using the WebPageTest.org visual comparison tool.
• For each URL, 3 first-view tests were be run from 'Dulles, VA - 1.5Mbps ADSL' and the median run was used for comparison.
• I edited the video on Windows Movie Maker - I had to, because the video went too fast from 0 to 1.2 seconds! :)
• The tests reports are public (not sure how long they keep'em there, but here's the website comparison and the original video generated by the visual comparison tool).

Note that load times can be different based on location, time of day, etc - so the other sites in the test might be faster at some other time. I ran the test three times to make sure it was reliable (and rendered video from the last run).

Sites included in this test

I picked 8 blogs I liked, favoring the big blogs, because when you compete, you want to compete with the best, right? I didn't plan to make a video out of it, but did it when I saw the option on the visual comparison tool.

1. Zemalf.com (First render 0.9s, fully loaded in 1.2s)
2. Yoast.com (FR 0.9s, FL 3.8s)
3. ViperChill.com (FR 2.0s, FL 4.1s)
4. DailyBlogTips.com (FR 1.5s, FL 4.4s)
5. Copyblogger.com (FR 2.6s, FL 5.1s)
6. Problogger.net (FR 4.6s, FL 13.1s)
7. Mashable.com (FR 4.6s, FL ~18s)
8. SmartPassiveIncome.com (FR 5.8s, FL ~20s)
9. SEOmoz.org (FR 6.3s, FL ~24s)

Interestingly, the last four sites just begun their rendering when the first five were already fully loaded. At around 6-8 seconds all the sites are "readable" (with main content visible). The last four continued to load scripts, ads, images, etc. after that.

WordPress blog that loads as fast as 1.2 seconds on shared hosting

This tiny WordPress blog of mine, running on shared hosting, was done loading in 1.2 seconds...

I'm pretty sure the other blogs in the video pay more than $9.95 a month for their hosting. That's what I pay for my shared hosting at DreamHost.

My page loading is slower on the individual post like this (abound 3-5 secs fully loaded I think), that's mostly because of Disqus commenting system (boo for slowness, yay for many other things), but I still beat the big guys with their cloud hostings and CDNs fair and square.

Do I need to say that DreamHost is awesome for WordPress blogs? (That's very much of an affiliate link. I couldn't be more proud recommending DreamHost to any WordPress blogger.)

Afterword

My blog is fast, and it's something I'm quite proud of. And now I have a video to proof it :)

Everything in moderation; I have (purposely) very minimalistic design on this blog which favors my blog on a test like this, using CSS-based design without any images is unbeatable. I don't have huge load because I don't have as much traffic as the other blogs on the video, and the amount of traffic might slow the other blogs down.

But my blog would not be this fast without the other tweaks I've done... And it's still pretty cool that I "won" them all, isn't it? And I didn't just win, I CRUSHED them.

• Is my blog more minimalistic than the other blogs? - Yes.
• Do all the other blogs get way more traffic than my blog? - Yes.
• Does my blog kick ass in this speed test and wipe the floor with'em? - Hell yes!

So yeah - the test is just a test, but it gives you an idea how fast my blog now is...

...and I'm confident that your WordPress blog can get just as fast.

Would you like me to show you how to speed up WordPress?

Join the WordPress Speed Challenge to do this yourself - speed up your WordPress blog and make it load a lot faster!

Original post from Zemalf's Website optimization blog:
Speed Up WordPress – Even on a Shared Hosting!

There might not be the right way to use different social networking sites, but I think there is smart way to use them - using different sites for different purposes. This way you don't have to bore your family with the your everyday work-stuff and your business contacts don't need to be reminded how tasty burger you had for lunch when visiting relatives over the weekend.

Don't use all the social networking sites the same way

Chris Brogan made a post, wondering what LinkedIn was thinking when they linked into Twitter, taking people's tweets and posting them on LinkedIn. Chris made a good point that Twitter is a service where anything goes. "It's the scratch pad, watercooler, the phone" - as Chris said it.

But LinkedIn is not like that. LinkedIn is more "serious". For me, LinkedIn is a way to connect with business contacts, job contacts, etc. I don't want to go "WooHoo, boobs!" there EVER. (I probably don't want to do that in Twitter either, at least very often, but at least the CEOs of the companies I work with don't see it when they check my recommendations).

I left a comment on Chris' post, explaining shortly how I use the different social media sites, connecting them selectively together. I have partly covered this before in my post showing how to connect different social media profiles together, but on that post I didn't really explain how I use the different social networking sites, which I think is the smart way of using these services.

Different social networking site, different use

With so many different social media sites, it is easy to get overwhelmed and lose touch on how to use the sites effectively...

First, you should be where the people you want to connect with are too - Often that means focusing on the biggest social networking sites, using them in a way others are using the site - and to an extent, the way others expect you to use the system too.

This is probably what got Chris writing about LinkedIn and their Twitter integration, suggesting people to stop importing your Twitter feed into LinkedIn indiscriminately. For people using Twitter very differently than LinkedIn, connecting Twitter to LinkedIn is not a good idea, if you're using LinkedIn like most people are - for more "serious" business.

The same goes for Facebook, MySpace and any other social networking site you're using. You use them the way you like, but you should consider the people you are there for too... depending on how are they using the service and why you are connecting there.

Three social networking sites, four different purposes

For me, there are three main social networking sites I use. And I use them in very different way. The main services I use are

• Twitter
• Facebook
• LinkedIn

Twitter is my main channel of communicating. There I share things I do, links and info I found interesting and think others will like too. On Twitter I can discuss with people and connect with people I otherwise couldn't.

On Twitter, I follow everyone and connect with wide variety of people, because I think that's what Twitter was made for. For me, Twitter is the service where "anything goes".

I tweet...

• links I like
• about things I do
• what I'm thinking
• new blog posts
• photos, videos, etc...

I use Twitter...

• to connect with people
• to promote others
• to engage in quick and easy discussions

Twitter is the fastest way to connect to me.

I post things on Twitter that I wouldn't post to LinkedIn. LinkedIn I use for business and work related things. I connect with people who I've done business with. This makes LinkedIn very different environment for me. I don't post all the links and articles I like there, only the ones that are related the "business and work side" of me.

Also, LinkedIn was not built to get 50 updates a day from you. It just doesn't make sense for me to flood everything I do in there. This keeps the focus on what I like people there to see. And in case someone is interested, I have the links to my other profiles there.

On Facebook, I use personal profile and Facebook page to separate my "private" life from everything else. If you've read my Posterous post about personal Facebook fan page, you know that I have saved Facebook personal profile only for my family and close friends.

I don't accept friend requests from people I don't know and haven't met at some point. For that purpose and to connect with everyone who wants to connect with me, I created my personal Facebook page (check my connect page for the Facebook widget, I moved there to unclutter my sidebar).

There are people who are using Facebook very differently, and they have rendered their personal profile unusable by "becoming friends" with thousands of people. There are people who "connect" with everyone in LinkedIn, not just the ones they have done business with.

I'm not saying it's wrong to use these services like that, but I know that for me, all the services are usable, beneficial and fun - for different reasons. Thus, I can recommend using the different social networkings sites, well, differently and for different aspects of your life.

Summary

I use different social networking sites for different purposes.

• Twitter for everything,
• LinkedIn for business,
• Facebook personal profile page to connect with friends and family, and
• Facebook page for blog (business) related things

By using the three services in four different ways, I am able to connect with people from at least 4 different aspects of my life and keep them somewhat separated. Also, I don't get distracted by personal stuff when I'm in the "work mood" and I don't get dragged into doing work when the only thing I want to do is check what my family's been doing lately.

What about you? Are you using the different sites for different purposes?

Original post from Zemalf's Website optimization blog:
LinkedIn is not Twitter is not LinkedIn

Summary: Use Google Analytics asynchronous tracking code to speed up your site. Use this optimized, minified and compressed async Analytics snippet for maximum impact

I made a quick post to my Posterous on how to speed up your blog with Google Analytics asynchronous tracking, and here are the detailed instructions on how to add the Google Analytics asynchronous tracking to your blog with the hyper-optimized version of the async Analytics snippet for maximized speed (awesome!)

Quick introduction to Google Analytics Asynchronous tracking

Last December, Google announced new asynchronous tracking for the Analytics. The new tracking system has been fully functional for a while, but now it's officially out of beta, and everyone who is using Analytics to track traffic and other metrics should update to the new code.

Asynchronous tracking, while very hard to spell and type correctly, simply means enhancing the speed in which the tracking code is loaded. In addition to the site speed benefit (loving it!), the new version of the tracking code can be placed higher in the page without delaying subsequent content from rendering. Which means that the tracking will capture those visitors who leave before the page has been loaded better than the old code.

For advanced users, the new asynchronous tracking gives flexibility and more options over the old code. For details on that, check the async tracking usage guide. The syntax of the advanced options have been changed, so if you've been tracking outgoing links and other events, read the documentation before starting to use the async tracking.

The default Google Analytics Asynchronous Tracking Code Snippet, which we won't be using...

Here's the asynchronous snippet for tracking sites with Google Analytics:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_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);
})();
</script>

Outstandingly optimized Google Analytics asynchronous tracking code snippet for maximum pleasure speed

But we wouldn't want to go in and add the normal code, when we can get the hyper-optimized code snippet instead, right? Feast your eyes in this amazingly beautiful and optimized Analytics tracking snippet by Mathias Bynens (@mathias on Twitter):

<script>var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)})(document,'script')</script>

(the whole code is on one line, no linebreaks)

Replace UA-XXXXX-X with your Google Analytics Account ID when using this. Add type="text/javascript" for HTML4 validity (see below for the full code).

Don't worry if you don't understand why the optimized code means, how it works and what has been done to it, because you only need to know that it works...

However, do check Mathias' article for details on how the code was optimized if you want. For (a geek like) me getting such a detailed explanation and reasoning on the optimization process is like spilling sun cream on the naked body of Marisa Miller.

(...)

Moving on!

The optimized snippet is 50% smaller when minified and compressed, for total size of only 380 bytes

Mathias did some testing the optimized async tracking code to show why it's worth it to optimize the code...

Test was done with three different HTML5 documents

• one with the original asynchronous Analytics snippet
• one with the optimized but non-minified snippet, and
• another with the optimized and minified snippet.

All files were served with gzip compression enabled.

Here are the file sizes of the different HTML5 documents, before and after compression:

1. With the original snippet: 735 bytes, after gzip 432 bytes
2. With the optimized (but non-minified) snippet: 614 bytes, after gzip 389 bytes
3. With the optimized and minified snippet: 569 bytes, after gzip 380 bytes

Thereâ€s an improvement of ± 23% in byte size when using the optimized snippet without gzip. When using gzip, the compression rate is still around ± 12%. When every byte counts, going from 735 bytes to 380 bytes for ~50 percent improvement is amazing.

How to add the optimized Google Analytics asynchronous tracking code to your website

If you don't have Google Analytics account yet, follow my guide on how to set up Google Analytics. When you are ready to copy the code to your site, come back here for the optimized code...

Remove the old Analytics code from your site templates and replace it with the new async code snippet:

1. Remove ALL old Analytics tracking code!
2. Copy the optimized Google Analytics asynchronous tracking code snippet above and
3. paste it just above the </head> tag in the HTML code.

For WordPress bloggers this means:

1. Uninstall any Analytics for WordPress -plugins you might have installed
2. Remove the old code if you have inserted it manually (probably in the footer.php of your theme)
3. Open the header.php -file of your WordPress theme,
4. find the </head> -tag, and
5. copy the async analytics code just above the </head> -tag.

The end result will look like this (with your Analytics Account ID replacing the UA-XXXXX-X):

<script type="text/javascript">var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)})(document,'script')</script>
</head>

Everything between <script and /script> is on one line with no linebreaks (the code wraps on the post to make it readable and easier to copy). The script-type text/javascript has been added for full HTML4 validity (optional in HTML5).

Verify that the Google Analytics tracking is working to ensure you'll get your site statistics

After inserting the code snippet, saving all the files and emptying any (page) cache (e.g. W3 Total Cache or WP Super Cache), verify the Analytics setup by going to the Analytics profile and clicking the "Check status" on the top right corner:

1. Click on the "Check Status"

After clicking you should see this:

2. "Receiving Data" means tracking is working

Google Async Tracking in WordPress

Mathias' optimized code snippet made me let go of the good'ol Google Analytics for WordPress -plugin for a while, but I went back to it when the plugin got updated to a new version (version 4), which has the asynchronouos tracking code as well. The code is not compressed like the one on this post, but the plugin is very easy to use and there are loads of highly useful options in it.

Thus, if you run a WordPress blog, use the plugin instead of manually copying the optimized code snippet. You'll easily add the async code, and the plugin will also tracks outgoing links (the new version tracks clicks as events), segments the visitors (e.g. visits per category, author, tag, etc.), and the Google Analytics for WordPress -plugin is the easiest and the best option to do it. With the plugin, you also get the benefit of not tracking my own (or other logged in) visits.

Summary

• Google Analytics Asynchronous tracking means enhancing the speed of the script and your site, in addition to tracking the visitors more reliably (if you place the code high as recommended)
• If you use Google Analytics to track your site, update the new asynchronous tracking code to your site right away.
• Use the highly optimized tracking snippet provided above for maximum speed and ultra-minified goodness.
• On WordPress, add Google Analytics into your blog with the Google Analytics for WordPress -plugin (The additional options and convenience of the plugin make it better option over the little speed benefit of the tiny code)

But now, go take Google Analytics Asynchronous Tracking in use on your blog (and use the optimized code if you want to geek it with ultra optimized code).

p.s. Thanks, credit and boatload of respect to Mathias for the optimized async analytics snippet.

Original post from Zemalf's Website optimization blog:
Optimized Google Analytics asynchronous tracking code

Summary: Zemalf.com was 1 year young on the 20th of May, 2010. This is an unsensored post and my thoughts about the year, the blog and everything that has happened

One year. Where did the time go? What happened?

beginning

On the 20th of May 2009, I registered a domain, zemalf.com. If you've read my about page, or the story before that, you know that the blog's name comes from my online nickname, gamer tag (XBox Live, etc.) and just a name I came up with (back in 1995ish) and used since.

Even that I've been blogging since the late 2005, I knew very little about blogging a year ago. I had the gaming blog in blogspot, Zemalf's Haven (still there), which I kept for fun when playing games like World of Warcraft and EVE Online.

On the new domain I started this blog. I didn't have a plan. I didn't know what to do. As a hindsight, I didn't even know what I wanted.

But I started a blog, the first posts went live here on the 21st of May. I imported my gaming blog to this domain, but as I was learning stuff about blogging, I didn't feel like writing about games anymore, so I rolled back and removed the old content, reverting the gaming blog traffic back to the Haven.

I didn't know what I was going to write about and I never sat down and did any kind planning. But I knew I didn't want to write about the stuff I "normally did". My day job was out of it, this was my thing. So I didn't start writing about the software development, continuous integration and the IT stuff I was doing for living - I wanted to experiment something new...

But I didn't have a clue what I was getting into, but I was excited, I had my own blog now, on my own domain. I wrote post after post, even that I had no idea what I was doing or why I was writing those posts. There was no plan. I just blogged.

I wanted to make money, but I didn't think through how I would do that. I wanted to build a business, but I didn't know what business I would build. Instead of stopping, thinking it through, I just kept going (to this day).

(lack of) focus

I wrote about wide variety of topics I was researching as I was learning. I wanted to figure out everything about WordPress, I wanted to build the perfect blog, system-wise. I digged into PHP, themes, CSS and plugins. I studied and learned Internet business and making money online -stuff. I got interested about Internet marketing.

Around those early days, I did a self-interview, which was an interesting read now that nearly a year has passed from it. It also reminded me that for the longest time I tried to come up with cool name for the blog, like Technology Alchemist's Trek in the Blogosphere. At one time, I called it Blog of Antti Kokkonen, but then settled for Zemalf.com.

To this day, the blog does not have a better name, it just is. That's what you get for picking a domain name based on your online nickname which doesn't mean much. But that's OK. I can make it work. But it needs a little bit of focus. And some re-structuring. This is stuff I should've thought a bit at the beginning, now I've just went with the flow...

The blog's name wasn't the only thing I changed a lot during the year. I self-designed the blog (started with free WordPress theme called Fusion), I re-designed the blog, twice - no, three times: my blog design.

I really should've been taking screenshots of the old designs. Fuck (...) I'll have to see if I have some somewhere... Where's wayback machine when you need it :(

Hah. Found'em!

Evolution of my blog design, The first 365 days

Started with the free Fusion theme:

May 2009: Fusion, the theme I started with (not a screenhost from Zemalf.com)

I built my own WordPress theme from the ground up, it was a fun exercise. The black/green look was stolen inspired by Tim Ferriss' and David Risley's blogs at the time (screenshots here)...

June 2009: My first own WordPress theme design was called Zemalf Zen Green, quickly replacing the free Fusion -theme.

From the black/green, I moved into grayish black and white look...

January 2010: The first iteration of the new design, new theme built on the previous design, mainly tweaking the CSS styling, colors, etc.

And then to white/light green...

May 2010: Current design (at the time this post is published). The second iteration of my WP theme, ZZ (not published to public).

As a bonus, here's a "logo" I used on the early days, with my first design and also in my custom Twitter background for a while. I completely forgot I did this :)

When it comes to WordPress, Zemalf.com is a good place to visit. Even when trying to load it into C64 :)

perfectionism

So I wanted to learn to how to build WordPress themes, don't know why, but I just wanted to - so I did it myself. For anyone else, I'd say, get a theme and stick with it. Or at least, don't waste any time building the theme yourself, unless that is something you want to do for money.

Lately, when I got obsessed with speed, having my own theme and knowing exactly what's in it, definitely helped. During the year I spend hours tweaking the blog. In my craze of having WordPress set up the right way, I went on a quest to find the best permalink, tuned my .htaccess rules, and tried different WordPress plugins before finding the ones I use now (the WP plugins I use and recommend to others).

I got the basic WP settings when starting out figured already, but the journey continues to find what the ultimate WP setup, the settings, plugins and themes that work the best. I'm still working on it, the perfecting never stops. Perfectionism is a bitch.

uncertainty

The biggest problem is the uncertainty of all this. I should have a plan. A plan about where this blog and myself are going. During the year I've learned that I want to make some money of this stuff, after all, I'm using quite a lot of time on it. It's been a great hobby and I've learned tons, I've even made some money already, but around one thousand for the whole year isn't much.

It is enough to cover all the hosting stuff, etc, so I haven't "lost" any money, but I haven't really made any either - especially as I've invested the money back to tools and training.

The problem is I've made most of the money through various marketing experiments, not this blog, even that I used most time and effort into this. I've made less than a hundred dollars directly from this blog. I don't have any advertising here, and I'm not sure if I ever want to, so the money has come from the affiliate sales of the 31DBBB Problogger workbook, Beyond Blogging and even one random sale of the How to Launch the **** Out of Your Ebook, which I mentioned on my post about writing and marketing eBooks.

I probably could've made more money, if I've had a mailing list, and I had driven people to my reviews more aggressively. I also should've written more than 3 reviews already. And I should've started making my first product a lot sooner. But the self-doubt kept me from it, and I struggle with it every day. Thus far, I've been unable to convince myself to sell stuff, so I just give it away for free. That's the first thing I'm going to change.

fear

I put good stuff in this blog, instead of selling it, because that's the easy thing to do. And I admit, it feels good to help people without expecting anything in return, but I can't do that forever, if I want to make money. I might try advertising on the blog, but for that I'd need to build tons of traffic. Selling stuff, and I don't need that much traffic (and there's bigger potential for making enough money to make all of this worthwhile the time I invest in it).

So why I'm not already selling things? Well, publishing blog posts is easy and care-free. Putting things on sale is SCARY. Fear you must not, as say Yoda would...

I need to start a mailing list, I need a way to get money and deliver the goods (e-junkie or Clickbank for example) and I need to create the actual product I want to sell. Nothing too hard, very easy in fact, but still I haven't been able to get myself into it...

When selling stuff, I need to start worrying (or taking care of) taxes, customer support, and all that good stuff. I should probably start a company, business or whateverthatiscalled to cover my own ass. I'm scared shitless that someone will sue me (yes, I watch way too much US-based TV), take all my money and my house...

I'm afraid that 5 years from now, I will receive a notice from the IRS that I need to pay 1 million dollars of US taxes, even that I've only made a 5000 or so...

Yes, I'm very good at making excuses. I have the eternal ability to not take action, so I waste my time on stupid shit I shouldn't even be doing. I'm lazy. I look for the easy way out and procrastinate the hell out of it.

And it doesn't help when are not really certain what direction you should go, what action to take...

(un-)clarity

I need to walk the walk, and get my fat ass moving and start doing stuff. Start doing the right stuff. Increase my productivity for real and not just write about it.

With all that said, I'm still not sure where I'm going with this blog. With the lack of focus, a blog name that doesn't mean anything, I'm fighting an uphill battle. So I might branch out to other domains, keeping Zemalf.com as a playground, place to share the experiences and stuff I learn, just I have done so far.

I feel most connected to the SEO stuff, I enjoy learning about that stuff. And I love WordPress, so it'll be here. So perhaps it'll be something along those lines, not too different from what it's been already when I think about it.

no fate

The good news is that it's all in my own hands. I can make this happen.

The future's not set. There's no fate but what we make for ourselves. - John Connor, The Terminator 2

The bad news is that it's all in my own hands. I'm my own worst enemy.

I'm getting there. Slow, but steady.

future

What will the rest of 2010 bring to me and this blog? Good things I'm sure, but I'm still working on how I'll go about it...

p.s. This post is bit of a mess, I'm sorry about that. But I won't edit it. I'll leave it as it is, even that I was rambling a lot. I thank you for reading this, I thank you for helping me out. I could not have done any of this without you.

p.p.s. I'll be doing report on the highlights of the first year, telling what posts did well, what didn't. And I have another post with lessons learned coming, stuff I'd do different if I started now and stuff I wish I knew a year ago, etc.

p.p.p.s. I wanted to add the third PS to a post for the first time in this blog because it would be awesome if you would tell why you are here, reading my blog? (have you been here long? how did you find the blog? What have you liked, what has sucked?)

Original post from Zemalf's Website optimization blog:
Look Back on the First 365 Days of Zemalf.com

Summary: Link baiting means creating content that naturally attracts links. This post shares 3 effective techniques for creating link bait content.

This is a guest post by Andreas Horch.

Many Internet marketers speak endlessly about the best ways to create links. It is often said by most of these people that the best way to build links is to create a good, competitive and quality content regularly, aiming to constantly maintain a level of uniqueness.

Though promising, this method has one loophole: Even the best content relies heavily on external factors. Simply said, quality content alone does not get you any attention; it still needs other sites to link to it.

This method is not at all appealing as it seems to be. There should be better ways of enticing other webmasters to your site and eventually link to your content.

Link building generally takes a lot of time when you only rely on getting links through regular content you publish on your website and if you don't post something innovative that would almost win you the Nobel prize you may wait in vain for even a single link, because of the vast amount of content and information published on the Internet every second.

However, there is a way where you can "lure" webmasters to link to your site. This is what is commonly known as "Link Bait." Link baiting strategies are growing in popularity, especially with the vast amount of content and information on the Internet. Here are 3 effective content techniques that you can use to do this strategy properly.

1. Write an article reviewing or comparing services or products of companies or individuals and publish it on your site

Companies just can't resist the idea of free publicity, in whatever medium or channel. Try to give emphasis in creating content that promotes these companies, and you'll eventually see some or even all of these companies linking back to your site from their own.

Do not just go about and post anything for the company without proper preparation though. You have to let the companies of the products or services that you are reviewing know about what you will do for them. Give them a set of questions for them to answer and to serve as your reference when you write the article.

If you become an expert in this format over time, you can now start giving out "seals of approval" and having those seals would mean that you reviewed or ranked the company under your most scrutinizing eyes.

2. Catch the reader's interest using a well documented controversy

A controversy always sparks intrigue to whoever hears it. Likewise, in the world of the Internet, a controversy can also be used to create disputes and thus gaining better exposure. If you have something interesting to say, webmasters would most likely link back to your site. The recent controversy about the "4G iPhone" that was written by Gizmodo literally rake lots of exposure and thus created numerous back links to their site.

Go ahead and speak up information or words that can bring you well out of the comfort zone. From an SEO's point of view, stirring up controversies is a better exposure and may be effective link bait.

3. Get ahead and be the very first to report a particular news or story in your industry

Any breaking news can give a critical impact especially if you are the first one who's going to tell the story. Anybody who is into SEO would strongly agree with you. Just one word of advice: Report news that would have been reported by others within your industry. You can definitely find other members of your industry that would get interested and would automatically link to your site.

Blogs can also be a regular medium for any news. It is a form of media after all; just don't forget that you are doing this partly for the links that you will receive in return for the effort.

The best thing about link bait content is that it is well supported by Google. So you don't have to restrain your own creativity, and enjoy creating good content by setting a goal of getting links for each and every article that you provide in your website.

About the author: Andreas Horch is a professional search engine marketing consultant with over 10 years experience in the Internet marketing industry and CEO Linknami.com, which offers link building and blog advertising tools for individuals and small businesses.

If you are interested in writing a guest post to Zemalf.com, go ahead and contact me. Check the guest post guidelines for more information.

Original post from Zemalf's Website optimization blog:
3 Tips for Writing Effective Link Bait Content

Summary: Faster Internet connection does not equal faster loading websites. You might not realize it, but you are losing money with your slow blog every day.

When my post about how to optimize images for web was featured at Holy Kaw!, here's one comment that was posted there:

Doesn't everyone have broadband anyway? Okay, I'm kidding. Good tips for accommodating those with small pipes. - Siddhartha Herdegen

Kidding or not, this is the way many bloggers and webmasters (mistakenly) think. I was leaving a response there on Holy Kaw! when, ironically, posting the comment took so long (and eventually failed) that I decided to make a post about this here instead...

"Doesn't everyone have broadband anyway?"

Indeed, why would you bother optimizing your website, blog and images for speed? Everyone has a lightning-fast Internet connections and all the pages load so fast that there is no need for optimization...

Is it really so?

When was the last time you thought:

• "Why this site is so slow?", or
• "If this page doesn't load soon, I'll go check that other site instead.".

I don't know about you, but I run into slow websites every day, and my connection moves hundreds of Gigabytes Megabytes in matter of seconds. And the chances are, I leave when I do run into those slow websites...

Has it occurred to you, that people might think that way when they visit YOUR blog?

Benefits of faster page loading

Let's look at this simple example:

• Downloading 1 Megabytes on T1 (1.5Mbps) takes 5.43 seconds.
• Downloading 60 Kilobytes on on T1 (1.5Mbps) takes 0.32 seconds.

This is the difference between posting an uncompressed bitmap image (BMP) vs. some-what compressed JPG from the same image.

Of course, page loading speed is affected by a lot of things, not just optimized images, and when the width and height are defined in the HTML img-tag, images don't even block the loading of the page.

Website performance is not just about small pipes and "we need to optimize so people with modems can access the site".

It's about saving money & resources, avoiding waste & clutter and when applicable, more revenue & money. And if we think long-term, publishing optimized images means we need less electricity to power the servers that deliver our images and onwards to greener planet. These things add up.

Faster website means more revenue

For Amazon 100ms (that's 0.1 seconds) meant 1% less sales. For Google, half a second delay means 20% drop in traffic. (Source: Greg Linden -- Marissa Mayer at Web 2.0). According to Wikipedia, Amazon.com's revenue was about $24.5 billion on 2009. If their website was 100 milliseconds slower on average, they might have made 250 millions less revenue.

Amazon.com: 0.1 seconds slower. 250 million less profits.

From the Velocity and the Bottom Line -post at O'Reilly Radar I learned that:

• 5 second speed up can lead into results like
  • 25% increase in page views,
  • 7-12% increase in revenue, and
  • a 50% reduction in hardware.
• 2 second slowdown can decrease revenue by 5%.

And Google Research's studies took their studies into the millisecond level...

Our experiments demonstrate that slowing down the search results page by 100 to 400 milliseconds has a measurable impact on the number of searches per user of -0.2% to -0.6% (averaged over four or six weeks depending on the experiment). That's 0.2% to 0.6% fewer searches for changes under half a second! - Speed matters, Official Google Research Blog

And there are numerous other studies with similar results. To this day, I am not aware that making website slower would have any positive impacts on the metrics or business.

Would you do simple WordPress optimization ONCE, if it would potentially increase your revenue FOREVER by 5%? If it would make more readers stay on your blog and not leave because it's so slow? If it would save you money on your hosting expences?

Speed = Kick-ass design and engineering

Too many overlook the fact that speed matters and overemphasize design and looks of their website. Skilled designer knows this and creates equally breathtaking design while making it load fast too. (sadly, there are many Photoshop-handicapped monkeys out there who really shouldn't call themselves Web Designers).

With performance engineering, we can overcome some of the deficiencies in the design, and the good news is that those first steps towards a faster blog are easy to take. As shown on the previous posts, start by optimizing the images you upload and setting speed-optimized .htaccess rules in place.

Conclusion

With simple steps you can make your blog significantly faster, which can then lead for lower bounce rate, more page views and even more sales and revenue. And in addition to making more money, you'll also save money, because you don't have to pay so much for hosting and/or bandwidth (e.g. with Content Delivery Network).

Naturally, results vary based on the website, service and the products on sale. But even it's just a little improvement, I take higher page views, increased conversion and lower bounce rate for one-time effort any day.

Would you spend very little, if any, extra time to optimize your website, when it means that more visitors, will stay on your site longer, more people will subscribe to your email list and more people will buy your stuff?

If you read my posts on image optimization and .htaccess rules for speed, and shrugged it off as something you don't need to pay attention to, think again.

See how 7 easy steps saves you money on hosting expences and makes your blog faster to keep your readers happy and revenue rolling - do the WordPress Speed Challenge!

Original post from Zemalf's Website optimization blog:
You are losing money with your slow blog! (and how to fix it)

Summary: With these image optimization tips, you will ensure the maximum search engine optimization for images and ensure the images load fast without losing the quality.

Intro

On the previous post, I showed how to optimize images for web, using free and easy-to-use tools like Smush.it for WordPress and Shrink O'Matic.

In the comments section of the post, Patty asked: "do you have any suggestions for photographers who post images on their blogs since this is their primary focus".

I answered the question on the comments, but I thought it would be useful to turn those tips into standalone post, and not just for photographers with blogs, but anyone using images on their blogs as well. So here we go, the top tips for optimizing images for your blog (or any website you upload them to)...

1. Use the HTML img-tag the right way

• Always add height and width to the image
• Always add an Alt-attribute to the IMG-tag
• Always add a Title-attribute to the IMG-tag

The Alt text and the image title

The Alt-text is used when the image cannot be displayed, thus Alt-tag should provide alternative information about the image, something that can be displayed when the image itself is not shown. Image-title should provide additional information on the image.

• Alt-attribute is important for accessibility and mobile usage, in case the browser uses doesn't display images.
• Alt-text is also important for search engine optimization.
  • Alt-text is used by the search engines when trying to understand what the image is about.
• If the image is linked, Alt-text will also be the "anchor-text" of the image.
• Alt-text for the image should describe the image with good keyphrase.
  • Think of how would you like the image to be found if someone was searching for images like yours.
• Use the title text to add additional and advisory information about the image.
• The title-text of an image has little effect for SEO, but it will be shown as tool-tip on most browsers.

The height- and width-attributes of an image

Adding height and width is important for faster loading. When you define the height and width of an image, browser can continue loading the rest of the page, while "filling" the space defined with height and width with the actual image. This is essential for speed when you have images on a webpage.

WordPress does this automatically, but if you add the HTML tag yourself, make sure you add the height and width in (matching the actual size of the image, see the next tip.).

Using all the attributes of the img-tag

The end result of a good img-tag, using all the attributes, would look something like this:

<img src="descriptive-image-name.jpg" width="200" height="150" alt="img-tag example" title="Good example of a proper img-tag usage" />

Source, references and further reading on IMG Alt-tags:

• Daniel Scocco's Speed Up Your Site -series at Daily Blog Tips:
  • Use the height and the width tags
• Dave Doolin's two part series on the subject at Website in a Weekend:
  • Advanced SEO IMG Element Handling For WordPress (Part I)
  • Advanced SEO IMG Element Handling For WordPress (Part II)
• Ann Smarty's post at Search Engine Journal:
  • Image Alt Text Vs. Image Title : Whatâ€s the Difference?

2. Don't scale the image via HTML

Making an image smaller or bigger by using height and width different from the image size is bad for website performance (and image quality too). Create separate files for different sizes of the image instead.

• Using the height and width for the image is good, but it's even better for the image to actually be the size you define.
• If you need higher quality images to go with the fast-loading preview images, create multiple versions of the image.
• Use a tool like Shrink O'Matic to create optimized preview images fast.

Sources, references and further reading:

• Don't scale images in HTML, Yahoo's expectional performance rules.
• Specify image dimensions, Google's Best Performance Practices

3. Use descriptive image filenames

Never ever upload images with names that don't mean anything. For example, name a photo of a yellow flower as yellow-flower.png, instead of IMG004586.png.

• Always use descriptive filenames for the images, whether it's a photo you took or an image you downloaded to be used in your blog.
• For a half a second of work, you boost the chances of getting search engine traffic from image searches by 42000% if you do this. (Yes, that much).

4. Use the right format

PNG is great for high quality web-images, but PNG grows fast in size when you add colors, thus for web:

• Use .JPG for the larger full-color images, and
• .PNG for the other images.

Use tool like RIOT to see what format both looks good, but is small in size as well.

Sources, reference and further reading:

• WebSiteOptimization.com -- Graphics: Choose the Right Image Format
• Daily Blog Tips -- Image Formats

5. Optimize the image for fast loading

To ensure webpages load fast, optimize all the images you upload to your blog or elsewhere in the web. Optimizing images for web means making the images smaller (in size, not necessarily quality) so they load faster. See the previous post, how to optimize images for web, for details.

6. Link the image

People like to click on images. Unless you specifically don't want people to click links on the page you post the image to, make the image a link.

• If you have a larger or full version of the image uploaded as well, link to that from the smaller image.
• If the purpose of the page is to make people click a link, e.g. to buy a product via review you posted, link the image to the target page.

As a bonus tip for sales letters or sales pages, try adding a screenshot-image of the shopping cart below the "Add to cart" -button, showing what the next page (the shopping cart) will look like and link that image to the cart as well.

As mentioned in the first tip, the Alt-text will be equivalent for anchor-text in a normal link for SEO factoring (in addition to the Alt-attribute being important for accessibility as well).

7. Make image optimization a habit

Optimize all the images you upload and use on the web, whether the image goes to your own blog or another website. Use tools to automate the image optimization.

When you make it a habit to optimize images for both SEO and speed, you will use very little time to optimize images, but reap the rewards as long as the image is online (YEARS!). Maximum impact, minimum effort - just the way I like it.

Summary

• Make it a habit to resize, optimize and rename every image you put on the web.
• Use the right format and optimize the image for fast loading
• Use the image optimization tools to automate the process
• Create separate files for the different sizes of the images
• Always add Alt-attribute, height and width to the HTML img-tag
• If applicable, use the image as a link

What image optimization tip would you add to the list?

Original post from Zemalf's Website optimization blog:
Top 7 image optimization tips for SEO and site speed

Summary: Here's how to optimize images for web, with quick and easy-to-use, free tools. Hint: Optimizing images for your blog is very simple, it can even be automatic.

Optimizing images for fast loading is one of the image optimization tips every blogger should put into action. When you know this stuff, and make it a part of your image uploading process, it doesn't take any extra time on your part, but it'll improve your blog in more ways than one.

Intro

This post is a part of my WordPress Speed -series, helping to make blogs load faster. However, these image optimization tools can and should be used for any blog and any image you upload to the web.

If you have tested how fast your blog is, you might have noticed that the images on your blog take a decent chunk from the loading time. Luckily, making images load faster is one of the easiest thing you can do to increase your page loading speed.

Image optimization for web

Image optimization was very important on the early days of the WWW, when people didn't have broadband connections. BUT unlike many think, it is EQUALLY important today. Why waste resources and time, when you can make the images load faster by making the images smaller, without losing the quality?

Optimizing images for web means making the images smaller (in size, not necessarily quality) so they load faster. This can be done losslessly (without losing the quality), by:

• stripping meta data from JPEGs
• optimizing JPEG compression
• converting certain GIFs to indexed PNGs
• stripping the un-used colours from indexed images

(Source: optimizing images at Yahoo's Exceptional Performance series).

Why image optimization is important?

1. Slower means less traffic and sales:

• 500 ms slower = 20% drop in traffic (Google)
• 400 ms slower = 5-9% in full-page traffic (Yahoo)
• 100 ms slower = 1% in sales (Amazon)

2. Web has a lot of images:

• On average, 45,6% of page weight is images

(Based on the top 10 websites, e.g. Google, Yahoo, YouTube, etc.).

Source, references and further reading:

• After YSlow "A" (Slides by Nicole Sullivan, Yahoo! Exceptional Performance Team)
• Slow website cost you money (another post by me)

How to optimize images for your blog

Optimizing the images you upload to your blog means two things

• Resizing the image to the size you're gonna display it
• Optimizing the size of the image without losing the image quality

In more detail, this means using PNG and JPG instead of GIF, and crushing and compressing the PNG- and JPEG- files. With optimizing, the average lossless savings are:

• Gif-to-PNG: 20.42%
• Crush PNG: 16.05%
• Stripping JPEG metadata: 11.85%

For the optimization (convertion, crushing and compressing), you need tools...

Image optimization tools

Image optimizing for web needs to be fast and as easy as possible, because no-one of us wants to sit on a computer, clicking away to just shrink images to be uploaded into the web. I think an image optimization tool must be...

• quick and easy to use
• free
• fast
• as automatic as possible

...while not losing image quality in the process. And here are such tools for you I'm using myself:

Shrink O'Matic: Image resize tool

It doesn't get much easier than this. Shrink O'Matic is an Adobe AIR program (like TweetDeck for example), where you can drag and drop images for resizing (you can browse and select them too), and it resizes them all to the size you want automatically. The tool optimizes the images while resizing and renames the files when it exports them into a directory of your choosing. Plus it looks cool :)

For resizing, it doesn't get easier and more simpler than that. But for optimization, here's one that is even better. Especially for WordPress bloggers...

Smush.it: Integrated image optimization tool

Smush.it optimizes the images without changing their look or visual quality. Optimized images load faster and make your blog faster. Smush.It has been included in Yahoo's YSlow-plugin, but for WordPress bloggers, it gets even better.

Smush.it gives you automatic image compression for WordPress.

There's a reason this plugin is part of my carefully chosen list of recommended WP plugins. If you're a WordPress blogger, you MUST install the WP Smush.it -plugin.

When you do, and use the WordPress media upload to add images to your blog, you don't have to manually optimize the images AT ALL (apart from resizing beforehand, so you don't have to scale the images via height and width on the HTML img-tag). WP Smush.it does all the optimization behind the scenes (and you only have to manually click through the images already uploaded to your blog).

To see what Smush.it does (in real time), you can try Smush.it out via the webpage, giving it a couple of URLs to images on your blog.

Smush.it algorithms (aka under-the-hood details for tech-geeks who want more than just the optimization results)

In case you are interested in details on what Smush.it does, Smush.it FAQ has the details. In short Smush.it automatically crushes (optimizes) images using the best open source algorithms available. Currently these are the algorithms in use:

1. ImageMagick: to identify the image type and to convert GIF files to PNG files.
2. pngcrush: to strip unneeded chunks from PNGs. We are also experimenting with other PNG reduction tools such as pngout, optipng, pngrewrite. Hopefully these tools will provide improved optimization of PNG files.
3. jpegtran: to strip all metadata from JPEGs (currently disabled) and try progressive JPEGs.
4. gifsicle: to optimize GIF animations by stripping repeating pixels in different frames.

Source: Smush.it FAQ: Tools Smush.it uses to smush images

Other image optimization and editing tools

I suggest that you use Smush.It and Shrink O'Matic, but if you're looking for full control of the process and more advanced image manipulation, get GIMP for free image editing program (which kicks PhotoShop's ass any day) and get RIOT for awesome side-by-side image optimization.

Add IfranView into the mix for ultimate image viewing tool (and also simple editing and manipulation) and you're set. To make things smooth, RIOT plugs-in into both the GIMP and IfranView (adding automatic "Save for Web" to the tool).

GIMP does not fall into the "easy to use" category until you get used to it, but otherwise, it's awesome, free and open source. RIOT offers full control to the image optimization process, letting you compare the original and optimized image side-by-side, which is important if the quality of the image matters, e.g. you're a photographer or otherwise need to show quality images. With RIOT you can also over-compress the image, if losing quality is OK, to make the images as small as possible (since normal optimization means maintaining the quality).

For the advanced users looking for automated scripting, more manual control, integration into all imaginable programming and scripting languages, and other sweet possibilities, get ImageMagick and other individual open-source tools like pngcrush or jpegtran. Via command line interface of these tools, scripting possibilities are endless, it's totally free, source code and all.

Test how much optimized images speed up your site

• Take a post in your blog with multiple images, or at least one
• Test how fast that page loads, e.g. with Pingdom Tools
  • For in-depth speed testing, check the tools for testing site speed.
• Take the images in that post, run them through Smush.it (see below for instructions)
• Re-test your page speed now with the optimized images

See the difference?

How to optimize images with Smush.it on WordPress

You only have to do this ONCE (for existing images):

• Install the WP Smush.it plugin.
• Go to (Dashboard >>) Media.
• Click re-smush for all the images in your posts.
• DONE. (for new images you upload, they are smushed automatically)

How to optimize images for web manually

For non-WordPress users, optimizing the existing images in your blog takes a bit more work, but it is still worth it. And in the future, optimize before you upload and you don't have to through this:

• (If optimizing existing images in your blog, download the images to your local drive for processing)
• Install Shrink O'Matic or use the Smush.it integrated in the Yahoo's YSlow
• (Resize if needed and) Optimize the images using the tools
• Upload the optimized images to your website
• (if you renamed the images in the manual process, update the image URLs to the post)

Summary

Optimize all the images you upload to your blog, or elsewhere in the web.

• Resize to proper size
• Optimize using the free tools, like Smush.it
• Enjoy faster loading images, which still look the same
• Enjoy faster loading blog or website

Your images will load faster and still look great. Remember to use good filenames, always add an Alt-text and, if it's not done automatically for you, always define the height and width to the image HTML-code (it affects the speed too!).

p.s. Read my image optimization tips -article for the full list of best practices for using images on your blog. Taking those tips to heart will help you with both site speed and search engine optimization.

Version info:

• 12th of May 2010: Post published
• 18th of May 2010: Added links to individual tools used by Smush.it, e.g. pngcrush and jpegtran. Added information and references on why image optimization is important.

Original post from Zemalf's Website optimization blog:
How to optimize images for web

Summary: Speeding up WordPress begins with analysis and data collection. Check how fast your WordPress blog is now and I'll show you how you can make it load faster

This is a post in my WordPress speed -series. You'll learn what tools to use to analyze how fast your WordPress blog is now (Save the data and loading times, so you can tell me if these tips made your blog faster). As an example, I'll show you some data from one of my blogs.

Tools to test your WordPress speed

Here are the tools you can use to check how fast your site is now, and also get some tips on how to make your WordPress blog faster. At this point however, all you need is the current data (= how fast is your WordPress blog).

Free website performance analysis tools:

• WebPageTest.org
• Pingdom
• Web Page Analyzer

Firefox plugins (optional, for the advanced):

• Firebug
• YSlow
• Page Speed

Example test: My RC hobby blog

I tested some simple ways to speed up WordPress with my experimental RC Aeroplanes -blog.

• WordPress 2.9.2
• Theme: Affiliate Theme (not my favorite theme, and definitely not optimized for speed, making it great for speed test :) Check out my resource page for more info on this and other WordPress Premium Themes.)
• Active plugins that loaded css- and/or js-files:
  • Sexy Bookmarks
  • WP-PostRatings
  • Contact Form 7

Speed test #1

I removed all optimized settings and speed-increasing plugins from the blog, thus simulating a fresh WordPress installation (with plenty of plugins slowing it down however):

Plugins:

• Page Speed Score: 79/100
• YSlow Grade D: Overall performance score 60

Web Page Analyzer:

• Total HTTP Requests: 25
• Total Size: 454589 bytes
• Download time (T1 1.44Mbps): 7.41 seconds

WebPageTest.org:

• First view: 5.218s
• Repeat view: 3.548s

Speed test #2

And here's what happens when we speed up WordPress a bit (same blog as above, now with good, basic WordPress htaccess rules in place and W3 Total Cache in place). I also removed Facebook sidebar widget, which caused a lot of HTTP requests and images to load.

Plugins:

• Page Speed Score: 87/100 (+8)
• Grade B: Overall performance score 86 (+26, D to B)

Web Page Analyzer:

• Total HTTP Requests: 17
• Total Size: 340133 bytes (~25% less data)
• Download time (T1 1.44Mbps): 5.20 seconds (~30% faster)

WebPageTest.org:

• First view: 2.303s (~56% faster)
• Repeat view: 1.985s (~44% faster)

All the non-compressed images were external, thus the F. Otherwise, the analysis looks pretty good with such a small tweaks. I got 30-55% speed increase, even that I didn't go and remove unnecessary plugins (some plugins are very bad for site speed).

I didn't minify HTML with W3 Total Cache, and I don't use CDN. All this on shared hosting, no extra acceleration for VPS or PHP opcode cache or any of that advanced stuff. Sadly, the loading time went up a bit again, when I added the Facebook fan widget back in. Those things need some optimization :)

How fast is your WordPress blog?

I'd love to know how fast, or slow, your WordPress blog loads (non-WP blogs are welcome too, but remember to mention it in the comment)

• Go to Pingdom and run a speed test for your blog.
• Write down how fast your site loaded according to Pingdrom.
  • (Pingdom can give random results occasionally, you might want to run it twice)
• Go to WebPageTest.org and run a speed analysis for your blog.
• Run the WebPageTest.org with these settings:
  • Dulles, VA - 1.5Mbps ADSL IE8, 5 times (to get an average result)
• Write down the times for the first view and the repeat view (after all runs are finished). If you want, save the whole report and the load-breakdown images for later analysis.

Save the results, and come back here and leave a comment:

• Tell me how fast your blog was on Pingdrom.
• Tell me the loading time for first view and repeat view at WebPageTest.org.
• Tell me if you'd like your blog to load faster

After you've left a comment, so we know your baseline times, start the WordPress optimization process by adding the WordPress .htaccess rules in place and optimize images for your blog. WordPress bloggers should also go and install the WP Smush.it -plugin right away.

p.s. If you're comfortable with advanced analysis and using the Firefox plugins, throw the YSlow grade, YSlow performance score and the Page Speed score into your comment as well.

p.p.s. If you've followed me and my blog, you know I've hinted that I'm creating my first product. This is where it begins.

Update: Join the WordPress Speed Challenge to do this yourself - speed up your WordPress blog and make it load a lot faster!

Original post from Zemalf's Website optimization blog:
WordPress Speed: How fast is your blog?