PageSpeed: Serve Static Content From a Cookieless Domain

If you are using Pagespeed to speed up your OScommerce shop, you most likely have this at the top of the Pagespeed Score analysis list:
“Serve Static Content From a Cookieless Domain”

It is at the top of the list because moving the images, CSS files and the Javascript files into a cookieless domain will speed up your page load times, and really raise your Pagespeed Score. The reason your page will load faster is that if you do this 1) cookies for all this stuff are no longer being transferred, and 2) since a sever can only serve 6 items at a time, you will have doubled the speed that items can be downloaded. Now because each page recieves content from 2 servers, your page can load 12 items ‘concurrently’. Note that this is for static content, i.e. stuff that doesn’t change in response to the actions of the website user.

Here is how to set up a cookieless domain for your OSCommerce shop.

  1. Buy a domain name, set up a new website, and put nothing in it but an empty .htaccess file
  2. Buy and install an SSL certificate for this domain. You need to have an SSL certificate because the secure pages on an OSCommerce shop will not request images from a nonsecure site.
  3. Paste the code below into the empty .htaccess file. This will ensure that domain will not serve up cookies.
    # Use Mod_deflate to compress static files
    <ifmodule mod_deflate.c>
    <filesmatch "\.(js|css|ico|txt|htm|html|php)$">
    SetOutputFilter DEFLATE
    </filesmatch>
    </ifmodule>
    # Speed up caching
    FileETag MTime Size
    # Expires
    ExpiresActive On
    ExpiresDefault "access plus 366 days"
    # Future Expires Headers
    <filesmatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Expires "Sat, 27 Dec 2014 23:59:59 GMT"
    </filesmatch>

.htaccess code courtesy of:http://www.kevinworthington.com/set-cookieless-domain/

Move the content from your OSCommmerce shop and reference it:

  1. Copy your css, js files and the images folder to the same folders in your new domain. If your css files are in a folder on your current website called ‘css’, then create a folder called css on the cookieless website for that css file. You need to match the folder relationships of the original site on the cookieless site. For example if the css references in css/styles.css are looking for images in the buttons/images folder, on the original site, they are not going to find the images on cookieless site if you place the images in the images folder, but will find them on the new site in the buttons/images folder.
  2. Open includes/configure.php and add the new reference. Example:
    change:

    define('DIR_WS_IMAGES', 'images/');

    to:

     define('DIR_WS_IMAGES', 'http://www.new-cookieless-website.com/images/');

    note: now each time you change an image in your real site, you will need to manually change it to match on the cookieless site.

  3. Change the references to the stylesheet and javascript files from something like this:
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
    <script type="text/javascript" src="js/javascript.js"></script>

    to this format:

    <link rel="stylesheet" type="text/css" media="screen" href=" '.(isset($_SERVER['HTTPS']) && (strtolower($_SERVER['HTTPS']) == 'on') ? 'https://' : 'http://') . 'www.new-cookieless-website.com/css/mobi-style-minified.css">
    <script type="text/javascript" src=" '.(isset($_SERVER['HTTPS']) && (strtolower($_SERVER['HTTPS']) == 'on') ? 'https://' : 'http://') . 'www.new-cookieless-website.com/js/javascript.js"></script>
    

    note: This format keeps the dreaded Internet Explorer warning about ‘secure and insecure content’ from popping up.

If you have Firebug installed on Firefox, you can see what happens. Open Firebug, click the ‘net’ tab and load your site. You will see 6-12 items lined up under timeline, instead of 1-6 items, and a subsequent shorter load time.