Preloading the right content under the right circumstances, can have a positive impact on your web sites user experience. In this article I’ll provide examples where preloading content will have tangible benefits, and link you to resources that make preloading simple.

Example Usage #1: Predicting Visitor Navigation

When it is possible to “predict”, the next web page a visitor will most likely navigate to next, you can asynchronously load and cache that page and it’s images behind the scenes. When the visitor follows a link to this page, there is zero wait time. On the NYTimes Home Page there are thumbnails and excerpts for it’s most current articles. It places these articles strategically based on their importance. They could also preload these articles in order based on there respective importance. This was when users wants to “read more” than the excerpt, the full article is already loaded and cached, and there is absolutely no waiting.

Example Usage #2: Preloading Secure Content

Let’s analyze a web visit to Hotels.com. A potential customer is interested in taking a vacation to Hawaii. They search Hoteles.com, filtering through pages of hotels, reading reviews, until they finally find the hotel that is in the right place, is the right price, and has availability. They click the checkout button which now takes that visitor to a secure checkout page. This is a very expensive and slow process because of:

• Overhead from the initial SSL handshake
• All Images, JavaScript and CSS must be re-fetched from a secure location
• All content is delivered encrypted adding additional bandwidth overhead

What do you think this visitor is thinking about while they are waiting for the web page to load? If they are anything like me, they might think “Can I get a better deal”, and then jump back to Google and see if their intuition was right. Worse yet, if this was about to be an impulse buy, they might just close their browser and go to bed. The bottom line is if Hotels.com preloaded all their secure content, they would increase their conversion rate.

JavaScript Library

Coming Very Soon!

Snap-O-Meter Home

Key Features

• Install SaaS solution in less than 15 minutes
• Monitor your visitors from their perspective, providing unmatched performance accuracy
• Monitor your entire website, ensuring optimum performance of geographic regions, web pages, and servers
• Break any report into 25% sections based on speed to visualize your visitors’ speed diversity.
• Create custom visitor segments and run a/b tests with Ad-hoc reports
• Use out-of-the-box reports to seperate performance geographic regions, web pages, and servers
  Snap-o-Meter is completely free… no strings attached

Main Benefits

• Web Optimization Without the Guess Work – Run A/B tests when performing web page or server tuning to ensure the success of your optimizations
• Detect Web Server Issues – Detect “bad” Web Servers, that negatively impact your business
• Global Delivery Analysis – Analyze global delivery statistics taken from your actual traffic. Measure your CDN’s performance
• Monitor Every Web Page - Monitor the creation and delivery of every page on your website

WordPress Plugin

I’ve developed a WordPress Plugin, that makes using Snap-O-Meter with your WordPress site simple.

As the web evolves and more and more sites move towards being “web 2.0″ applications, JavaScript is used more and in greater volume. This is a major problem because most browsers including IE and Firefox block loading and rendering elements below script tags, until the script has been downloaded and executed. Steve Sounders wrote a killer blog about preventing blocking of JavaScript calls, but he didn’t address the situation where scripts call document.write() to inject HTML immediately below the script tag. This test page shows that using the Script DOM Element technique causes document.write calls from within the external script to output html at undesirable places. This blog introduces a new technique called “postload dummy replacement”, that specifically addresses loading scripts that rely on document.write().

Who uses External JavaScript

You can pick up external JavaScript from many different sources. It is commonly used by ad agencies, widgets, and third party embeddable objects. For instance, a VeriSign logo that let’s people know your site is secure and a Skype button I recently picked up to allow visitors to see when I’m online and skype me, both use externally loaded JavaScript that rely on document.write(). Ad Agencies can even nest external JavaScript within external JavaScript leaving you at the mercy of multiple third party providers.

Fighting JavaScript with JavaScript

Ever heard the expression fight fire with fire. Well, for this web optimization technique, we will be fighting JavaScript with JavaScript. This technique I call “postload dummy replacement” allows you to load these JavaScript files inside a hidden DIV at the very bottom of your web page, then use JavaScript to swap out the the contents created by document.write calls inside the hidden DIV with contents of a placeholder element where the JavaScript was originally located.

GetSnappy.com Ad Delay

Ad Delay, is a JavaScript module I’ve written that implements “postload dummy replacement”. I’ll introduce you to Ad Delay, by walking through an example. I’ll use the Skype button mentioned above in my example. We’ll start by creating a placeholder DIV and set it’s id to “skypePlaceholder”.

<div><div id="skypeUsPlaceholder"></div></div>

While “skypeUsPlaceholder” is empty, you are free to implement placeholders however you please, and there contents will be replaced by the call to adDelay.swapOut() mentioned in the last step. You might want to set a height and width for the placeholder, to prevent the page from “jumping” when the swapOut occurs, and you could even include an Ajax loading icon, such as the ones available from http://www.ajaxload.info/.

Now let’s jump down to the bottom of our web page, immediately before the closing </body> tag. Here we will include the JavaScript tag within a “hidden” dummy DIV. We will assign this DIV the id “skypeDummy”. When the script executes document.write() calls fill the “hidden” DIV with the intended content.

<div id="skypeUsDummy" style="display: none;">
  <!--
  Externally loaded JavaScript code
  -->
  <script type="text/javascript"
          src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js">
  </script>
  <a href="skype:GetSnappy.com?chat">
  <img src="http://download.skype.com/share/skypebuttons/buttons/chat_green_white_164x52.png"
       style="border: none;" width="164" height="52" alt="Chat with me" />
  </a>
</div>

Next we’ll unveil the source for Ad Delay which should be included at the very bottom of your web page. Ad Delay is a tiny JavaScript module containing one function, adDelay.swapOut.

/*
 * Name: Ad Delay v0.1 
 * License:  GNUv2 (www.gnu.org/licenses/gpl-2.0.txt)
 * Auther: Brian Gardner <getsnappy@ymail.com>
 * Usage:
 *
 * adDelay.swapOut(arg1, arg2)
 *     arg1 - the id of the placeholder div (in our example, skypePlaceholder)
 *     arg2 - the id of the dummy div (in our example, skypeDummy) 
 *
 */
var adDelay = {
  swapOut: function(placeholderId,dummyId) {
    var dummy = document.getElementById(dummyId);
    var placeholder = document.getElementById(placeholderId);
    if (!dummy) {
      alert("element with id " + dummyId + " does not exist");
    }
    if (!placeholder) {
      alert("element with id " + placeholderId + " does not exist");
    }

    /* loop through dummy nodes removing any JS nodes, preventing double execution */
    for (index = dummy.childNodes.length - 1; index >= 0; index--)
    {
      var element = dummy.childNodes[index];
      if ((element.nodeName == 'SCRIPT') || (element.nodeName == 'NOSCRIPT'))
              dummy.removeChild(element);
    }

    dummy.parentNode.removeChild(dummy);
    placeholder.parentNode.replaceChild(dummy, placeholder);
    dummy.style.display = 'block';
  }
};

After we've included the source to Ad Delay, we call adDelay.swapOut to perform the swapOut. Your page now loads faster thanks to Ad Delay : = ).

<script type="text/javascript">
adDelay.swapOut('skypeUsPlaceholder','skypeUsDummy');
</script>

1. Open up a Terminal (Finder -> Applications -> Utilities -> Terminal)
2. Execute the following command from the prompt, notice that the leading # is not part of the command, and that <username> tag should be replaced by the “short name” of the users whose files you want to share.

   find /Users/<username>/ -exec sudo chmod +a# 0 'staff allow add_file,add_subdirectory,list,search,readattr,delete,delete_child, writeattr,writeextattr,file_inherit,directory_inherit' '{}' ';'
   

3. All accounts on the machine should belong to the staff group and have full access to this users files.

You can modify the command to fit your needs, for example lets say you only want to share Pictures change "/Users/<username>/" to "/Users/<username>/Pictures/"

If you only want admins to be able to have permissions change +a# 0 'staff allow to +a# 0 'admin allow