I’ve recently been doing a lot of testing to improve page load times using various different techniques. However, I’ve been finding on my own sites and when I visit others, that social media buttons often cause a lot latency on page loading. When it first launched, there were a lot of complaints about the Google+ button slowing down pages significantly. Some SEOs even claimed a drop in rankings, although it’s difficult to verify this. It’s worth noting that Google released an updated version of the button which does load faster.

In the past I’ve covered Google’s take on Page Speed and search rankings, and whether it is becoming a more important feature of the algorithm remains to be seen. Speeding up page load times is good for users, and with rich-media and other bandwidth intensive features on websites continuing to increase, any SEO-friendly way to speed up your pages is a good thing.

Like many other website owners, I have added social interaction buttons to my blog posts, but I have never been happy with the extra lag this causes on page loads.

There are several methods being used by various sites that delay the loading of the social buttons until needed. This can be via the lazy loading technique or by using Ajax to call in the buttons when needed. With this in mind, I have worked on my own solution which I’m going to share with you today.

The following method uses the jQuery framework, and loads the social buttons using an Ajax request when a user hovers over the buttons with their mouse. I have also added a click function for tablets and smartphones, as a mouse hover event is pretty useless on such devices.

“Page speed” and “site speed” have become buzz phrases in the SEO industry since Google started showing site performance data in Webmaster Tools ¹ in December 2009.

In April 2010 Google stated that site speed would be a part of the ranking algorithm. Although it is worth noting that Matt Cutts reminded webmasters that site speed is only a minor ranking factor, and that relevancy is far more important.

Like us, our users place a lot of value in speed – that’s why we’ve decided to take site speed into account in our search rankings. ²

In 2009, Google performed tests to determine the impact of site page speed on user behaviour. As part of this experiment Google intentionally slowed down the rendering of search engine results pages.

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%. That’s 0.2% to 0.6% fewer searches for changes under half a second! ³

This therefore raises the question, “How important is site page speed as a ranking factor?”

How Important is Site Page Speed

Matt Cutts reminded webmasters that relevancy is more important than page speed, in fact site page speed is a minor ranking factor at this time, and is just one of over 200 signals used in Google’s ranking algorithm. This could change in future, but page speed should not be seen as a major ranking factor at this time.

Tools of the Trade

It is worth noting that there is a lot of opinion on Google’s Page Speed tool in terms of how useful it is for website owners, and how the information can easily be misinterpreted. The same applies to Yahoo’s YSlow tool, as some of the recommendations are simply not feasible for smaller website owners. Therefore, I recommend looking at speed data for your site from a variety of sources, and avoid making drastic changes to your site unless you fully understand the implications of such changes.

• Pingdom.com – Free tool, useful graph feature highlighting problems on pages and slow loading scripts
• Loads.in – Free tool to test site speed in multiple locations
• Site-Perf.com – Free tool for testing with specific browsers and other useful options

In isolation, the above tools have limited scope, but running your site URLs through a number of tools will highlight any problem pages that are taking too long to render. There are other premium tools such as CloudShare for much more detailed testing and monitoring of performance.

The purpose of this article is not to enter the debate as to how good or bad Google’s Page Speed tool is, but rather to provide a robust method for speeding up your website – whether you choose to use Google Page Speed or not.

User-experience is an important consideration that goes beyond simply SEO benefits, especially when considering Google’s studies on page load time. Therefore, it is good practice to consider site performance as long as page speed improvements are implemented correctly, and never at the expense of providing good-quality, relevant content.

The old rule “test and test again” comes to mind when tweaking your sites performance.

GZIP Content for Improved Page Speed

I’ve been experimenting with a number of different techniques to speed up page load time. My aim was to increase rendering time for mobile and tablet devices rather than as a specific SEO consideration. The tweak that had the biggest impact in my experiments was GZIP compression of content. Any small SEO benefit from a fast website is welcome but not a large factor in my experiments, whereas a fast loading site is pleasing to users.

Before implementing any of the following techniques, I recommend running your pages through Google Page Speed, Yahoo YSlow and some of the tools mentioned above, as well as this GZIP testing tool, (to check whether GZIP is already implemented and give you page size details as shown below). Keep a spreadsheet of performance data to act as a benchmark. This is useful for seeing what changes have an impact on your page load times.

A Page with no GZIP compression

A Page with GZIP compression

As you can see in the images above, GZIP compression drastically reduces the size of a page if it is enabled. In the lower image, a reduction of 65% has been achieved.

The following tips will not work for every website, and it is assumed you are using PHP on an Apache server, with the ability to create .htaccess files. It is possible to implement compression on other servers, but this is beyond the scope of this article.

I personally enjoy reading articles that provoke the thought–process, encouraging the reader to try something new, or to look at an SEO challenge from a different angle. You could say—challenging age–old techniques and methods to see what works now.

Reading thoughts from other SEOs can help to keep you sharp, but knowing how to filter out the dross is equally important—and in my opinion, only comes with knowledge and experience.

The following post lists some of my favourite SEO articles (and one presentation) from the past few months. Some of the articles provide actionable recommendations that can be tested and tweaked by other SEO professionals.

Local Link Building Strategies linkbuildr.com

I agree with the importance of local, good–quality citations for local search optimisation. Ryan listed some useful directories for submitting your local business too, as well as a legitimate technique for getting .edu and .gov links.

How to Avoid the 5 Most Common Backlinking Mistakes singlegrain.com

Anyone who is new or less–experienced when it comes to link building should read this article. I agree with the points highlighted in this article, especially when it comes to link velocity and anchor text overload.

SEO Tools That Rock seomoz.org

This article highlights some useful tools for SEOs. Tools such as Screaming Frog and Xenu Link Sleuth are invaluable, but there are some other gems including Shared Count and URI Valet that are worth adding to your SEO Toolbox.

SEO for Local Search – The Complete Guide coconutheadphones.com

An excellent guide taking you from keyword research through to getting directory listing pages, citations and creating local search optimised pages on your website. Ted has also written a really useful follow–up article covering advanced techniques which I thoroughly recommend reading: SEO for Local Search Advanced Tricks coconutheadphones.com.

Google Analytics Visits Metric Change Implications & Opportunities kaushik.net

I strongly recommend acquainting yourself with the recent Visit metric change in Google Analytics, as it has likely had an impact on your clients. Avinash provides a fantastic 30 minute video with examples and a clear explanation of the changes, in his ever–enthusiastic style. I’m a big fan Sir!

How to Earn the Links the Lazy Link Builders Buy raventools.com, presentation by Wil Reynolds at MozCon 2011

Wil highlighted three ways to get quality .edu links, and featured an excellent competitor backlink analysis tool available from Seer.

Past, Present & Future of Personas in Search presentation on SlideShare by iPullRank

Categorising keywords into persona groups, rather than just informational, navigational and transactional groups. Use social media to identify need states, define personas and identify opportunities.

I recommend viewing the full presentation for all the details, and I like the way the presentation challenges SEOs to take a much broader approach to identifying areas of potential.

If possible I like to tweak WordPress installs and avoid adding extraneous plugins. Generally the more plugins you have, the slower your WordPress site loads, and you can have compatibility issues when you upgrade.

One area for consideration is duplicate content, and there are a number of excellent plugins available for handling duplicate content issues. All in One SEO Pack and Joost de Valk’s WordPress SEO Plugin are very good, however, for my personal requirements both these plugins add a lot of unnecessary functionality.

If you prefer full control over your WordPress source code, by making a few slight tweaks you can handle an SEO duplicate content issue using the Meta Robots tag and have more control over page titles. If you are new to SEO or the Meta Robots tag, you can read more about this element here.

Basically, I prefer to noindex,follow category (is_archive()), tag (is_tag()), search (is_search()) and pagination pages (is_paged()). This enables search engines to crawl the pages for links which are subsequently followed. Therefore, the blog homepage and individual posts are indexed as normal, but duplicate content issues with category and tag pages are avoided. Also other unnecessary pages that you wouldn’t want indexed and returned in search results are noindex,follow.

Meta Robots Tag

The code for enabling this feature is as follows, and needs to be included in your header.php file which can be found in your WordPress admin panel under Appearance > Editor > header.php.

<?php if ( is_tag() ) {
    echo "<meta name=\"robots\" content=\"noindex,follow\">";
    } elseif ( is_archive() ) {
    echo "<meta name=\"robots\" content=\"noindex,follow\">";
    } elseif ( is_search() ) {
    echo "<meta name=\"robots\" content=\"noindex,follow\">";
    } elseif ( is_paged() ) {
    echo "<meta name=\"robots\" content=\"noindex,follow\">";
    } else {
    echo "<meta name=\"robots\" content=\"index,follow\">";
    }
?>

You may choose to tweak the above code to enable indexing of category pages (is_archive()) for example. To do this, you would simply delete the line:

elseif ( is_archive() ) {
    echo "<meta name=\"robots\" content=\"noindex,follow\">";
    }

Title Tag

Another area for consideration is the page title. Again, there are a lot of plugins that make it easy to control titles for different pages. However, if you prefer manual control, you can add the following code to your header.php file which can be found in your WordPress admin panel under Appearance > Editor > header.php.

<title>
    <?php wp_title(''); ?><?php if(wp_title('', false)) {
      echo ' | '; } ?><?php bloginfo('name'); if(is_home()) {
      echo ' | '; bloginfo('description'); }
    ?>
</title>

The above code basically includes the blog homepage title at the beginning of the title tag on the homepage, and includes the description taken from Settings > General > Tagline. On individual blog post pages, the post title is included on the left–hand side of the title tag, and the blog name is moved to the right–side of the title.

Title Examples

Homepage:
Robin Parduez | Blog | Front-end Development Tips & Ramblings

Blog post:
WordPress SEO Tweaks Without Plugins | Robin Parduez | Blog

Disclaimer

Please test any code changes that you make to your WordPress installation. Test your blog to ensure the meta robots noindex,follow tag is only applied to category, tag, search, pagination pages and index,follow is applied to the blog homepage and individual post pages. Be sure to test your page titles as well, they should follow the pattern shown in the examples above.

There are of course many more features available if you use an SEO plugin, and for some users a plugin will be suitable. You may also wish to tweak the code examples above to meet your needs.

If you have any comments or suggestions please feel free to give some feedback in the comments section below.

A good compression utility is available at CleanCSS which has a variety of options to choose. CleanCSS can arrange your code to reduce character usage, thus decreasing the file size. As with any type of compression it is advisable to keep a backup copy of your stylesheet just in case you aren’t happy with the results.

I have often made simple mistakes that add unnecessary characters to my style sheets. Below are some shorthand ways to reduce the size of your CSS files. It is worth keeping a backup version of your original style sheet just in-case you want to roll back at some point.

The following example shows how to place the PHP GZIP code at the top of your pages. It is always advisable to test this on a non–important page before rolling out across all pages on your site.

<?php
   // GZIP Compression
   ob_start( 'ob_gzhandler' );
?><!DOCTYPE html>
<html>
<head>
<!-- head content goes here -->
</head>
<body>
<!-- body content goes here -->
</body>
</html>

Copy the above code into your .htaccess file, remembering to change the URL to match your own URL. Save the file and upload it to your root folder. Now test to check that it works correctly. Do this by typing yourdomain.com into the address bar. The URL should change to www.yourdomain.com and load the page. This usually happens in a split second.

If you prefer to display your URL without www. then use the following code:

RewriteEngine On
RewriteCond %{HTTP_HOST} !^yourdomain.com$ [NC]
RewriteRule (.*) http://yourdomain.com/$1 [R=301,L]

As with the previous example, copy the above code into your .htaccess file, remembering to change the URL to match your own URL. Save the file and upload it to your root folder. Test to check that it works correctly. Do this by typing www.yourdomain.com into the address bar. The URL should change to yourdomain.com and load the page.

Additional Options

You can take the above examples further. If you set out your website using a folder structure with index.htm/.html/.php for the file names, then you can make sure that only the folder is displayed like so – rpardz.com/about/ rather than rpardz.com/about/index.php.

To do this you can add the following code to either of the above examples below the coding you have already used.

RewriteCond %{THE_REQUEST} ^GET\ .*/index\.(php|htm|html)\ HTTP
RewriteRule ^(.*)index\.(php|htm|html)$ /$1 [R=301,L]

This will make sure that the folder structure displays the page properly, but ‘index.php’ will not appear in the address bar. You can add additional file extensions by separating them with the pipe symbol | as shown in the above code.

Once you have implemented compression it is important to test the results. The easiest way is by using FireFox coupled with the Web Developer Tools plug-in.

Once the plug-in is installed follow these steps:

1. Load your website homepage in FireFox
2. Click tools menu
3. Navigate to web developer > information > view document size

You should then see a page containing information about your website. This page will contain details about any compression that has been carried out on the web page.

It will give a break-down of the individual elements and scripts as well as a total saving. In my case the result showed: Total 107 KB (138 KB uncompressed) A saving of 31KB.

It may not sound like much, but can certainly add some zip to the rendering of your pages, and reduce bandwidth bills over the course of a month or year. Further details are available at betterexplained.

Official Apache Module mod_deflate information.

UPDATE When testing the compression of my pages, I found that some JS files weren’t being compressed (Use Web Developers Tool – Information > View Document Size). If this is the case for you, you can add the following code to your .htaccess file:

<FilesMatch "\\.(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

Other than duplicate content, this can also cause the splitting of link equity between two versions of the same page.

This can happen when a user navigates to a secure page on your site (‘https’) and then navigates to other areas of the site whilst still remaining on the secure version of the site (which is the default behaviour on most Apache servers with SSL installed).

The rest of this blog psot explains how to handle SSL redirection using at .htaccess file installed on your server.

When JavaScript is disabled, the content is automatically shown and the show and hide buttons are not rendered at all—avoiding the confusion of redundant buttons that do nothing when clicked.

Learn More About jQuery

If this tutorial inspires you to learn more about jQuery, there are a couple of books that I have found incredibly useful to get up-to-speed, Learn jQuery and jQuery – Novie to Ninja are both excellent introductions to the subject.

There will also be follow-up tutorials covering jQuery on this site so be sure to stay tuned for some practical web tutorials. Also feel free to leave a comment if you have a specific jQuery problem and I will aim to write a tutorial on the subject.