Chicago Style SEO

Google’s Need for Speed – Google Analytics Asynchronous Tracking Code

Rod Holmes — Wed, 28 Apr 2010 10:06:09 +0000

This is the sixth post in a series that addresses several different ideas on how to speed up your website. This series was brought about because of Google’s new focus on how quickly webpages and websites load; by focusing, I mean that they are now saying that page load speeds are one of the factors they use to determine the rank of the page in the search results. Google has made it clear that page speeds are not a major factor, but it is one. Google is one reason to speed up your site as much as possible, but another is probably more important: it improves your users’ experience on your site.

In this series we’ve been coving a wide range of topics:

An Overview of Site Speed
How to find out if your web pages are too slow
How to optimize photos for faster loading
How to use caching and htaccess to speed up your site
How to compress your site
How to speed up Google Analytics using asynchronous tracking codes (This post)
How to speed up your JavaScript and CSS (Coming Soon)

This post covers an issue that many web masters encounter: Google Analytics Javascript code slowing down your site.

Google Analytics Slowing Down Your Website?

For most sites, the basic answer to this question is, “Yes, it is.” Analytics works by downloading a fairly large Javascript library that powers the application. And, while this library is downloading, nothing else can happen on the page. That’s why Google recommends you put their code at the bottom of the HTML code because when a browser puts together a page, it literally goes from top to bottom. So, if Analytics’ code is on the bottom it will be the last thing that loads and it won’t slow down the rest of the page.

How To Speed Up Analytics: Asynchronous Tracking Code

Google obviously knew that their code slowed things down. So, they came up with a solution that will speed things along. They call it Asynchronous Tracking and it’s pretty easy to do. Asynchronous Tracking is possible because of the new HTML5 and the fact that modern browsers can download multiple files at the same time.

There is a second way that Asynchronous Tracking speeds up your site: the new code gets all the commands ready before the Javascript finishes loading. Once the Javascript is loaded, the commands are processed and sent to Google.

How to Install the Asynchronous Tracking Code

It’s pretty easy to do.

First, Google recommends that you remove the old code. They don’t recommend having both codes on your pages.

Next you need to copy the code below and paste it just above the tag of your site. I’m assuming that the tag is in the header file of your site which is included on every page of your site; that way you’ll only have to install it once. If that isn’t the case…it’s going to be a bit more work because you have to put the tracking code on every page.

Note: Google recommends that you put the tracking code directly above the tag. ~~However, this will likely break IE6. By placing it below the tag you can still support IE6…if you want. The choice is yours.~~ UPDATE: A Google engineer has informed us that the IE6 problems putting the code in the header were fixed after the beta version. Here’s the code to put where you will:

Once it’s pasted into your code, then make sure to change the UA-XXXXX-X part with your web property ID. Now save everything and you should be fine if your site is pretty basic. However, there are a couple of issues that you might need to address.

Advanced Asynchronous Tracking

619Cloud.com installed the Asynchronous Tracking Code and found that their event tracking and their forms that are submitted by AJAX were no longer being tracked by Analytics. They came up with the solution and even produced a video on how to take care of these problems simply and easily.

Justin Cutroni at Analytics Talk also addresses this issue in his very good post on Asynchronous Tracking. Scroll down to the How to Add Items to the Queue section.

Next up, we talk about how to speed up your Javascript and CSS files other than compressing them.

Google’s Need for Speed – How To Compress Your Site

Rod Holmes — Mon, 26 Apr 2010 09:38:58 +0000

I’ve been writing up some of the best practices I’ve found on speeding up web sites. This was brought about because several months ago Google began talking about page-load speeds might begin to play into page ranking. Their thinking was people prefer pages that load quickly, so pages that “pop” should be rewarded. These rumors and talk was made official a couple of weeks ago when Google officially announced that page loading speeds is now a consideration (one of over 200 ranking factors) on how well a page ranked in the Google search results.

Since then there’s been a flood of posts on tricks to speed up your site. My goal is to have a comprehensive series that will help web developers get all the improvements they need to be thinking about in one fell swoop. In this series we have been talking about/will talk about the following topics:

An Overview of Site Speed
How to find out if your web pages are too slow
How to optimize photos for faster loading
How to use caching and htaccess to speed up your site
How to compress your site (This post)
How to speed up Google Analytics using asynchronous tracking codes
How to speed up your JavaScript and CSS (Coming Soon)

So, we come to the easiest step of them all… implementing compression on the web server so that pages appear more quickly for your readers. As was the case in post #4 about caching, this post will assume that you’re using an Apache server and that you know how to edit the .htaccess files on your site. (See post #4 for instructions.)

How Does Server-Side Compression Work?

The idea is pretty simple—follow along on the image below for a basic explanation. (If you’d like more detailed explanation, here’s a pretty good one.): the server that is sending out the files to make the web site uses compression technology and 1) compresses the file size of all the text files that make up the website, which mainly means the HTML, the CSS, and the JavaScript. Once it compresses a file it 2) sends it out over the Internet to the reader’s browser. When the browser receives the compressed file it 3) decompresses it and uses it to display the page. This works with all modern browsers—you don’t have to worry too much about it breaking.

All this means that your web server will not have to send out as much data, which means the cue of processes that need to be completed will be gotten to more quickly.

How Do I Turn on Compression?

Again, it’s pretty simple. Fire up your FTP client and text editor of choice and edit the .htaccess file in the root directory of your website. (See post #4 for more detailed instructions and warnings…) In the file you’re going to simply paste this code:

# Gzip – To compress much of what leaves the server
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript text/x-javascript text/php

Save the changes, make sure it hasn’t broken your site, and you’re done. If it does break your site, back the changes out and give your hosting company a call and ask them why deflate won’t work. This is definitely something you can push your hosting provider on…deflate should be turned on now more than ever with the push for speed.

Test the Compression

Now that you have compression turned on and your site isn’t broken, you can check and make sure the compression is actually working. GIDNetwork.com has made this easy with this simple tool. Type your URL in, click Check and you’ll hopefully get something that looks like the image to the right. This is the results for our home page. In case you can’t read the numbers, we saved 68.4% with those few lines of code.

If you don’t want to use the site, and you know how to look at the headers of a website, you can just look for a line that says, “Content-encoding: gzip”.

What Are Deflate and GZIP?

The simple answer is deflate is a raw compression format, meaning it doesn’t pass along information like the file name, check values, length, etc. That’s where GZIP comes it. It adds all that missing stuff to the package before sending the compressed file out to the browser.

Next up in our series is how to tackle a service many websites use and don’t know slow their pages down: Google Analytics.

Google’s Need for Speed – Use Cache in .htaccess to Speed Up Your Site

Rod Holmes — Wed, 21 Apr 2010 14:56:04 +0000

This is the fourth in a series of about seven posts (I keep finding more info and may add a couple more posts) on how to speed up your web pages and your website in general. Speeding up sites has been in the news recently because Google has announced that page speed is now a factor in how well that page will rank for keywords. Even though Google has made it clear that page speed isn’t going to move your page from position 38 to position 4 in search results, it is still worth while to consider page speed because of the benefit it gives your readers. It’s simple…people like websites and web pages that load quickly more than those that load slowly. (Yes…people have done studies on this!)

In this series we have been talking about/will talk about the following topics:

An Overview of Site Speed
How to find out if your web pages are too slow
How to optimize photos for faster loading
How to use caching and htaccess to speed up your site (This post)
How to compress your site
How to speed up Google Analytics using asynchronous tracking codes
How to speed up your JavaScript and CSS (Coming Soon)

In this post we’re going to talk about how to use browser caching and htaccess to speed up your site. Caching and htaccess go hand-in-hand because it’s htaccess that best controls the caching. Let’s take a look at what each are and then get into speeding up your site:

Browser Caching

What’s Browser Caching?

In general a cache is a hidden storage space. On the web, browsers have caches (hidden storage areas on the hard disk) that hold files so they can be reused as often as needed. An example is logos: most websites have some type of logo in the header, which means it shows up exactly the same on every page of the site. If the website is made correctly and your browser is set correctly, the first time you come to the page it puts a copy of the logo in the cache for later use. As you click around the website, the browser finds that the logo is supposed to be displayed on the top of each page. Instead of asking the website’s server for a copy of the logo for each page you go to, the browser instead just grabs a copy of the logo out of the cache on the hard disk.

Caching is not just for images however. It’s especially important for our conversation today that CSS and JavaScript files are cached. Basically any type of file that makes up a website can be cached, but as we’ll see below, they are not all cached for the same length of time.

As you’ve probably guessed, there are two reasons browsers use caches:

Speed Up Web Pages
It is much, much faster for the browser to access the files.
Reduce Network Bandwidth Use
Downloading one copy of the website logo instead of one for each of the 10 pages you go to saves a lot of bandwidth.

What Files Should Be Cached and For How Long?

In my example above, I made it pretty clear that it’s a good idea to cache images, especially those that are used repeatedly on the site. However, there are many types of files that benefit the site if they are cached properly. Some files change rarely and other change more often, so it’s important to cache them for different lengths of time. However, for the cache to be useful, it must be at least two hours. Here are some common suggestions:

4 Hours: HTML files
2 Days: XML and TXT files
1 Year: ICO, PDF, FLV, JPG, JPEG, PNG, GIF, JS, CSS, and SWF files

.htaccess

What’s htaccess?

This post assumes your website is hosted on a server that is using Apache to serve webpages. If you aren’t using Apache, much of this post will not apply to you because you can’t use htaccess.

So, what is htaccess? It’s an invisible configuration file that is placed in directories of the website. You put commands in the file and Apache then carries out those commands as it is sending out the webpages. In this post we’re going to be learning commands that control how the Apache server uses HTTP caching to speed up your site and reduce how much bandwidth your site uses.

How to Get to the .htaccess File

As I said above, the htaccess file is an invisible file. This means that unless you know what you’re doing, you can’t even see this file. Most people will be accessing the file via FTP. Most good FTP clients will have an option on them somewhere (often in a “View” pulldown menu or in the applications settings) that says something like “View invisible files” or “Hide/Unhide Invisibles.” You’ll need to find this option and set your FTP client so you can see invisible files. When you arrive at the root directory for your website, you will possibly find a file at the top of the file list named, “.htaccess”. This is the file you want to edit.

If you don’t find one, you’ll need to make one. Using your FTP client, create a new text file and name it, “.htaccess”. NOTE: There is no file extension and the name starts with a dot. Now you can edit that file and make the magic that’s in the rest of this post.

Please note a couple of things:

Not all Apache servers are configured the same by web hosting companies. Hosting companies, for reasons they often can’t explain, don’t have all the features needed for this post turned on. If your hosting company doesn’t have them turned on, I encourage you to call and ask that they be turned on. You are standing on firm ground asking them to turn them on because everything in this post is now needed for a properly functioning website.
Playing with your htaccess file can cause problems. Generally all that will happen is you’ll save your changes, then go refresh your website and find that you’re getting an error. All you need to do is remove the changes you made to the .htaccess file and re-save it and the site will come back. Double check to make sure you’ve put the code in correctly. If you have, this means that your hosting company probably does not support the Apache function you’re trying to use.

How to Use Caching to Speed Up Your Site

1. Do NOT Use HTML Meta Tags To Control Caching

Long, long ago in a web far, far away there was a technique that used an an HTML meta tag that looked something like this:

This is trying to tell the browser that it should not need to get new content about this page until the year 2022, and so it should cache everything. There are many problems with this, the biggest being that most browsers don’t pay any attention to this tag any longer. And, if they happened to read them, you have no control over what types of files should be cached.

2. Use HTTP Future Expire Headers and Cache-Control

There are two options to control caching of your site, the Expires header and the Cache-Control header. What’s the difference? PeterBe explains it quite bluntly here, but in my words, the Expires header works with older HTTP 1.0 browsers; Cache-Control is the more modern system and works with HTTP 1.1 compliant browsers.

So, should you use Expires or Cache-Control? The answer is, use both of them. Older browsers will ignore Cache-Control and use Expires. Modern browsers will override Expires and use Cache-Control.

Setting Up Expire HTTP Headers

Setting Expire headers is quite simple. You open up the .htaccess file in the root directory of your website and paste in the text below:

# Set Expires Headers

Header set Expires "Thu, 15 Jan 2015 20:00:00 GMT"

This is telling the browser to try to use cached copies of all ico, pdf, flv, jpg, jpeg, png, gif, js, css, and swf files until 2015. The expiration date must be a fixed date, so if you don’t expect these files to change you’ll want to set it far into the future or you’ll need to put a reminder in your calendar to update your Expires header before it expires.

Setting Up Cache-Control Headers

The cache-control headers give you a lot more power. They allow you to set when you want particular types of files to expire by changing the number of seconds since the file was first cached until it expires.

# Set the cache-control max-age
# 1 year

Header set Cache-Control "max-age=31449600, public"

# 2 DAYS

Header set Cache-Control "max-age=172800, public, must-revalidate"

# 4 HOURS

Header set Cache-Control "max-age=14400, must-revalidate"

3. Remove ETags and Last Modified

Above we’ve done everything needed to speed up your website by using caching. However, there are a couple of other options to accomplish caching: ETags and Last Modified which basically accomplish the same thing but don’t need to be used. As AskApache said in his fantastic posts on caching:

If you remove the Last-Modified and ETag header, you will totally eliminate If-Modified-Since and If-None-Match requests and their 304 Not Modified Responses, so a file will stay cached without checking for updates until the Expires header indicates new content is available!

Because we’re now using Cache-Control and Expires, there is no need for these other two, except for HTML documents, where one of them should be left on.

Another reason to use Cache-Control and Expires instead of ETags and Last Modified is because more and more hosting companies are using cluster (cloud) servers. ETags and Last Modified only work if the file that is being tagged comes from the exact same server. If your host is using a cluster of servers, the ETags and Last Modified will not work, but Cache-Control and Expires will.

How to Remove ETags and Last Modified

Simply copy and paste the below text into your .htaccess file, save it, and then check to make sure it didn’t break your site (it could depending on the Apache setup). If it breaks anything, simply undo the changes and save the old version again.

# Turn off the ETags
Header unset ETag
FileETag None

# Turn off the Last Modified header except for html docs

Header unset Last-Modified

Use .htaccess to Speed Up WordPress

Since you’re in .htaccess already, you might want to check out a post I wrote a while back about how to speed up the WordPress rewrite engine for optimized URLs. If you’re using WordPress and are using optimized (readable) URLs, this little change to your .htaccess file can speed up your site considerably.

The next post in this series will be much shorter…how to set up .htaccess so text-based files will be compressed on the web server so it will

Google’s Need for Speed – Optimize Photos for Fast Loading

Rod Holmes — Mon, 12 Apr 2010 15:15:43 +0000

This is the third in a series of seven or so (you never know, we might more to write about) posts on how to speed up your web pages and your website in general. A lot more attention has been paid to site speed by the SEO community because Google began talking about how they planned to put more emphasis on it. All of this talk and speculation was confirmed by Google last week when they officially announced that they are including site speed as a ranking factor. So, this series of posts is officially no longer about what might happen and is about what is happening now.

In this series we have been talking about/will talk about the following topics:

An Overview of Site Speed
How to find out if your web pages are too slow
How to optimize photos for faster loading (This post)
How to use caching and htaccess to speed up your site
How to compress your site
How to speed up Google Analytics using asynchronous tracking codes
How to speed up your JavaScript and CSS (Coming Soon)

So, now that we know that a page’s load speed impacts how Google ranks it, let’s look at one of the main culprits in slowing down pages: images, like this flower…

Optimize Photos’ File Size, File Type, and Image Dimensions

Finding Problem Photos?I Like Google Page Speed

In Part 2 of this series, I listed a few tools to help find what factors are slowing down your website: Yahoo’s Yslow and Google’s Page Speed and Speed Tracer. Of these tools, I’ve found that Google’s Page Speed gives you simple and solid diagnosis of a page’s images. Here’s a screen shot of the previous post in this series before I optimized it as seen through Google Page Speed inside Firebug, a Firefox plugin:

If you have images that are not properly sized, you’ll see a red exclamation point with the title, “Serve scaled images.” This is Google Page Speed telling you to serve scaled images rather than the overly large ones you’re serving now. In the example above the original image was 197KB and 720px x 583px. Page Speed shows that the image is being displayed at 504px x 408px. It also shows that just by reducing the size of the image, the image will be 123.2KB smaller. And, there’s probably more savings to be had by optimizing the compressin of the image and the file type.

So…let’s fix it!

Using Photoshop

If you’re lucky enough to have a copy of Photoshop, you have an amazing tool to help you optimize your photos. (If you don’t have Photoshop, skip down to the next section for a free alternative.)

Click on the handy link in Google Page Speed of the first problem image. It pops open a window with just the overly large image in it, making it easy to right click on the image and save it so you can work with it.
Save the image using Photoshop’s “Save for Web & Devices…” option under the “File” menu. This allows you to do everything you need to do in one spot: resize the photo and then optimize it by trying different file types and compression levels:

In the screen shot above you can see in the upper left corner I’ve selected the “4-Up” tab. This displays four different views of the image, each with a different quality levels so it’s easy to see which level will strike the best balance between saving file size and displaying the level of quality needed in the photo.In the lower right corner is the photo resizer. Simply type in the size Google Page Speed indicates is the display size. And, in the upper right corner I have several tools that allow me to try different file types and quality levels. The presets allow you to see what your image will look like in GIF, various JPG levels, PNG etc. There is no harm in playing with these to see what is your best combination.
Click “Save” and then upload the new optimized image to your website.

Using Picnik

Don’t have Photoshop? That’s no problem; there are quite a few online applications that allow you to do basically the same thing but for free. A favorite of mine is Picnik. It’s free and you don’t even have to register if you don’t want to.

After going to Picnik.com, click on the “Upload” button and upload the photo from your hard drive. The image will appear in an editing window where you can crop, resize, remove red eye, and several other normal photo editing operations. You can resize the photo in this Editing tab or in the next step.
Click on the “Save & Share” tab and the below window will be displayed.
In this window you can do everything you need: resize the photo, change the file format with some handy guides for what type of format is best for what type of images, and the compression/quality level if you select JPEG. When you’re done adjusting, you click the “Save Photo” button to save the optimized photo to your computer.

Picnik is amazing for a free online application, but it does have some limitations when compared to Photoshop. The biggest issue I found is that it doesn’t give you a preview for each file format and compression level choice. So, you have to save the photo and open it up on your computer to see if you like the quality or not. However, this is certainly a small problem when compared to the price of Photoshop!

Yahoo Smush It

From the Smush It page:

Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimizes the images without changing their look or visual quality. After Smush.it runs on a web page it reports how many bytes would be saved by optimizing the page’s images and provides a downloadable zip file with the minimized image files.

We have been testing this tool on some of the images on our site and are seeing roughly a 5-10% decrease in file size. That is pretty good considering we have already optimized them using the tools above! Yahoo has made this tool very handy with options to load images from your computer or just use URLs, there is also an option to download them with the original directory structure, very handy for doing large batches all at once.

Use Image Sprites to Reduce the Number of Small Images

In the old, old, old days, to layout a page that had a list of icons like what you see below, developers likely would have had each icon as a separate image inside a cell of a table.

In today’s web development world that old strategy would be considered heresy. All professional web developers now have replaced table-based layout with CSS, but many have not caught on to the problems associated with dozens of small images, like the icons above or as are often used in navigation. The problem is if all the images above are separate files, there is one http call to the server for each image…and those http calls stack up very quickly. The http calls are put into a cue, slowing down the speed at which the page can load…no matter how small the images are.

There is a better way: image sprites.

An image sprite is one image that contains many different images. Using CSS, the image can then be used as a background image and positioned so only one image appears at a time, exactlly where it’s needed. This means that just one image is downloaded so the server and used repeatedly; this leaves the server to move on to other tasks and get the page loaded far more quickly.

Setting Image Expiration

The last important step to consider when optimizing photos is to control the caching of the image: how long the image will be saved in the browser’s cache before it is updated. This speeds up your entire site and for repeat visitors. And, this is the topic we’ll cover in depth the next post.

Wrapping Image Optimization Up

You now have powerful tools to speed the images up on your pages and get the search engines to sing your praises. In the next post I’ll take a look at how caching as much of your page as possible will speed up the whole site.

Google’s Need for Speed – How To Know If Your Site Is Slow

Rod Holmes — Thu, 18 Mar 2010 16:57:48 +0000

This is the second of several posts addressing issues around Google’s announcement that they are releasing a new architecture (called Caffeine) for their web search and their emphasis in conjunction with Caffeine’s release of how quickly web pages load. In the series we will be looking at:

An Overview of Site Speed
How to find out if your web pages are too slow (This post)
How to optimize photos for faster loading
How to use caching and htaccess to speed up your site
How to compress your site
How to speed up Google Analytics using asynchronous tracking codes
How to speed up your JavaScript and CSS (Coming Soon)

A site that loads quickly will have a better chance of ranking toward the top of the search results than a slow site. This leads to an obvious question…

What Does “Slow” Mean For Web Pages?

Google has made it clear that any process that takes more than 100 milliseconds (1/10 of a second) is too long. Each web page can be made up of dozens or even hundreds of processes, so every millisecond counts. Examples of process include: fetching files like the main content of the page, calling for and downloading: 1) any CSS files used to layout the content, 2) any images on the page, 3) any JavaScript on the page, and on and on. There are a lot of processes that go into making any web page; the goal is to make all these processes as optimized as possible so when they are all added together the page is snappy.

How Do You Know If Your Website Is Slow?

Google and other tool makes have made some very easily used tools that not only let you know what problems your pages have, they also point you in the direction of how to fix them. Let’s take a look at a couple of the best, or you can go to the bottom of the page and watch our movie on the topic, then come back here for the details:

YSlow by Yahoo

Yahoo’s YSlow is a simple, elegant tool that will point out speed problems on your pages. To download it you will need to:

Download Firefox browser for free (if you don’t already have it).
Download Firebug extension for Firefox (using Firefox that you just downloaded) for free.
Download YSlow (again using Firefox) for free.

You now have a powerful tool to check out the speed performance of your web pages. Here, in brief, is how you use it.

Load the page you want to test inside your Firefox browser.
Click on the YSlow button in the application tray in the bottom right corner of the Firefox window. (See picture below.)
The bottom part of your browser will display the Firebug environment (in the red box in the picture below) and the YSlow tab will be selected. Click on the “Run Test” button.
YSlow will grind away and then display information on your page. In the upper left corner it gives the page a letter grade A through F. If your site is so bad that it doesn’t even deserve an F, then the score is an E. It also gives you a letter grade on the processes that were necessary to generate the page.
If you click on a process, details of what YSlow found will appear on the right.
There are three other tabs for you to explore as well: Components will give you a breakdown of the how many kilobytes each of the parts of your page is; Statistics will give you a breakdown of how many kilobytes the page is if the cache is empty and how many kilobytes if the cache is primed; Tools gives you recommendations on what tools to use to fix the problems you have.

Google’s Page Speed

Google made a simple tool called Page Speed that is very similar to Yahoo’s YSlow. Like YSlow, it runs inside of Firebug (which runs inside of the Firefox browser). Installation is nearly identical to YSlow:

Download Firefox browser for free (if you don’t already have it).
Download Firebug extension for Firefox (using Firefox that you just downloaded) for free.
Install PageSpeed (while using Firefox) for free.

You now have another very powerful application to diagnose what is causing your pages to lag. Here’s how you use it:

Load the page you want to test inside your Firefox browser.
Click on the Firebug button in the application tray in the bottom right corner of the Firefox window. (See picture below.)
Just like with YSlow, the lower part of your browser window will become the Firebug application. Make sure to click on the “Page Speed” tab (see picture below) and then click on the “Analyze Performance” button.
Page Speed will go out and collect all the data it needs to analyze the page. It will return and give the page a score between 0 and 100 and a list of what it thinks of all the various processes. The problem processes will be at the top of the list with red exclamation points, followed by issues it thinks you should address with yellow warning symbols. The things it thinks you’re doing right will be at the bottom of the page with a green check mark. To see details of the process, simply click on the triangle to the left.
If you click on the “Resources” tab at the top, you will be able to see a lot more information about the items on the page, including the HTTP headers for each of them.
A final comment: Page Speed is also available in Google’s Webmaster Tools if you have signed up for it.

Google Speed Tracer

The two above applications are great for letting you know where you need to spend your time and effort. But if you want even more detailed information on what is happening with your web page, Google has developed Speed Tracer, an amazing, free application that tells you exactly how many milliseconds each process is taking. Unlike the two applications above, it runs in Google’s Chrome browser, not in Firefox.

Visit Google’s Speed Tracer page to download the application, watch videos of it in action, and for all the information you need to make use of it.

How Do I Speed Up My Pages?

That is what we will address in our next post. And we’ll start with images and how to optimize them not only for speed, but also for indexing.

A Video Summary of Three Tools to Measure Web Page Speed

Google’s Need for Speed – An Overview

Rod Holmes — Tue, 16 Mar 2010 14:04:22 +0000

In August of 2009 Google began talking about releasing Caffeine on the world (or at least the world of people that use and count on Google). What’s Caffeine? According to Google it’s their “next-generation architecture for Google?s web search.” This means Google is looking at changing how they index the Internet and they are reevaluating the factors that they use to determine which websites rank for which keywords. Their stated goal is to give better, more relevant search results even faster to their users.

This is not the first time this has happened. Google has to keep up with the changes in how people use the Internet and they have to keep up with spammers. Every time they release a new algorithm, its impact is not only felt by the SEO world, but by everyone who uses Google.

In general Google doesn’t do a lot of talking about how they determine which pages rank for which keywords. However, with Caffeine they have been down right chatty. They have been very frank that some ranking factors will take on a much more important role in results: they are very blunt that they are moving toward personalizing the search results based on the user’s past activity on Google. They have also been clear that activity in the social media world will have an impact on your page’s place on the search engine results page (SERPs).

How Fast is Your Web Page?

A somewhat new factor in determining the SERPs that Google announced is how quickly a page loads. Google is now looking at how quickly the web page appears in the searcher’s browser. The faster it appears in the browser, the better. They have also stated over and over that no single process should take more than 100 milliseconds (1/10 of a second), and the faster the whole page loads, the better its chance of ranking. Their goal is to push people to make the Internet faster.

In a small series of posts we are going to address how to get your arms around this topic and then some of the major areas that impact the speed of your web pages. We plan to talk about how to:

An Overview of Site Speed (This post)
How to find out if your web pages are too slow
How to optimize photos for faster loading
How to use caching and htaccess to speed up your site
How to compress your site
How to speed up Google Analytics using asynchronous tracking codes
How to speed up your JavaScript and CSS (Coming Soon)

So, leave us a comment below if you have any special questions and we’ll try to work them in!

Keywords: The Key to Internet Marketing

Rod Holmes — Fri, 26 Feb 2010 21:23:46 +0000

I was asked to write a guest post on Hostway’s wonderful online business guide : Web Resources.

In my post I talk about the importance of keywords, how to do keyword research, and how to apply what you find.

Take a look and leave a comment either here or on Web Resources. I’d love to hear what you think and hear any suggestions you might have.

Speed Up the Rewrite Engine for WordPress

Rod Holmes — Mon, 15 Feb 2010 16:05:59 +0000

While reading Michael Gray’s post on WordPress’ scalability, I followed this link to a webmasterworld.com forum on WordPress’ default .htaccess code. jdMorgan replied to thread with a whole new set of code to replace the .htaccess file that WordPress installs to optimize the URLs in a blog. jdMorgan had rewritten the .htaccess code in order to,

…fix several performance-affecting problems. Notably, the unnecessary and potentially-problematic container is completely removed, and code is added and re-structured to both prevent completely-unnecessary file- and directory- exists checks and to reduce the number of necessary -exists checks to one-half the original count (due to the way mod_rewrite behaves recursively in .htaccess context).

Without further ado, here is jdMorgan’s new code to completely replace what WordPress automatically installs:

# BEGIN WordPress
#
RewriteEngine on
#
# Unless you have set a different RewriteBase preceding this point,
# you may delete or comment-out the following RewriteBase directive
# RewriteBase /
#
# if this request is for “/” or has already been rewritten to WP
RewriteCond $1 ^(index\.php)?$ [OR]
# or if request is for image, css, or js file
RewriteCond $1 \.(gif|jpg|ico|css|js)$ [NC,OR]
# or if URL resolves to existing file
RewriteCond %{REQUEST_FILENAME} -f [OR]
# or if URL resolves to existing directory
RewriteCond %{REQUEST_FILENAME} -d
# then skip the rewrite to WP
RewriteRule ^(.*)$ – [S=1]
# else rewrite the request to WP
RewriteRule . /index.php [L]
#
# END wordpress

Our Unofficial Results

I’ve been a bit concerned with how quickly a couple of our WordPress installs have been loading, so I was anxious to give this a try. I did some testing on two sites as they are now. Most of the pages were taking about three seconds to load (yes, I took the cache out of the equation). I installed the new code and tried again (cache still turned off) and the pages were installing in somewhere around two seconds. About a 50% increase in load speeds. This is all, of course, very unscientific, but that much of a change was enough for me to write this post.

Of course, your milage may vary! It might even crash your website for all I know?I’m certainly not guaranteeing jdMorgan’s code. All I know is that it seems to have sped up a couple of our WordPress-powered blogs.

How to Change the .htaccess File

If none of the above makes much sense to you, but you want to try to speed up your WordPress blog…here’s what you need to do. You will need an FTP client, FTP access to your WordPress installation, and a text editor. If you aren’t sure if you have these things…it’s time to write to someone who can help you.

Log in to your WordPress install via your FTP client.
Navigate to the root of the install. This usually means inside the “public” folder.
The .htaccess file is an “invisible” file, meaning that unless you work at it, you won’t see the file listed. To see the file, make sure your FTP client has “View Invisibles” turned on. This varies from client to client, but often there is a “View” pulldown menu item that will let you toggle this setting.
Once you can see the .htaccess file, open it up with your text editor. (Depending on your set up, you may have to download it first and then edit it.)
Delete the WordPress generated rewrite code, which is everything from #Begin WordPress to #End WordPress.
Replace it with the code above.
Save the changes. (If you downloaded the file to edit it, remember to upload it and overwrite the old file.)

I hope you have as much luck with this as we did.

Speed is Officially a Factor in Google Rankings

It was recently announced that one of the new factors Google takes into consideration for ranking a website is how quickly the pages load. With this in mind, these types of tweaks can have more impact than just making your readers a bit happier. Take a look at our complete guide to speeding up a website for an expanding list of tips to optimize your load time.

Ben Guest Posts on Hostway.com

Rod Holmes — Tue, 02 Feb 2010 19:02:57 +0000

Chicago Style’s Ben Robinson was recently asked to write a guest post for Hostway’s fantastic Web Resources blog; the post is definitely worth checking out, as is the blog. Web Resources is a complete guide to starting and maintaining a successful web site.

In his post, Ben wrote about Nine Easy Backlinks that you can get from social media sites. Some of the sites will surprise you. Did you know you can get a do-follow backlink from YouTube? How about that you can get multiple backlinks from Propeller.com and you can control the anchor text?

Let us know what you think of the post.

Local Search Volume vs. Global Monthly Search Volume

Rod Holmes — Wed, 13 Jan 2010 15:44:20 +0000

Last spring Google added a new column to their keyword tool inside of AdWords: Local Search Volume. We have added this data to the keyword research data we send to our clients. And, as you would expect our clients ask what the difference is between the Local and Global columns.

Local vs. Global Search Volume in Google's Keyword Tool

What’s the Difference Between Local and Global Search Volume

Local isn’t really all that “local.” It simply takes its data from searches made in your specified country in your specified language. This can be changed easily just above the search box. (See the above image.)

Global Monthly Search Volume means searches for done anywhere in the world in any language.

In the example above, it means that people working in English in the US search for “stuff” less than half as often as everyone else in the world.

Another Example

Am I the only one in the world who hates karaoke?

The word “karaoke” was originally a Japanese word, but has been adopted by many languages to mean, “a past time where drunk people torture each other by pretending they can sing.” In the above example, you can see that “karaoke” is searched for 16.6 million times per month by English speakers in the US, but 30.4 million times globally in all languages.

Why they are searching for it is another question entirely.