CM’s Website Workout: Trimming the Fat

With Google’s recent announcement that page load time may soon factor into ranking algorithms – and alongside the Google Labs release of the Site Performance tool within Webmaster Tools, internet marketers everywhere are wondering what they can do to improve page load speed for themselves as well as their clients. Well, CM has put together a comprehensive checklist to help internet marketers in their ventures toward a faster web.

  1. Optimize your code
    1. HTML
      • Always validate your HTML against a valid DOCTYPE (and never leave out the DOCTYPE!).
        This can expose issues with your code that can increase page load time, such as unclosed, improperly nested, and orphan tags, among other issues.  (I recommend W3C Markup Validation Service)
      • Avoid tables.
        I know this is hard, but please avoid tables if at all possible, as they take most browsers considerably longer to render.  Avoid nested tables at all costs. Side note: It’s almost 2010.
      • Remove extraneous code as well as code that is no longer being used.
        Take a few minutes of your time to look through your code and remove code that is serving no immediate purpose, and calls to files that are no longer being used.
    2. CSS
      • Always externalize stylesheets.
        Putting styles in the <head> section of each page (internal styles) means the browser has to reload styles for each page that is loaded, thus increasing load time.  Externalizing means that the browser can cache and reuse your styles!
      • When linking to an external stylesheet, always link in the <head> section of your document.
        Linking at the bottom of your document prohibits progressive rendering in most browsers, which means the page will stop rendering until all of the page’s resources have loaded.  Not only does this increase load time, but it also puts the user in front of a white screen in many cases, which is never a good idea.
      • Remove unused styles.
        Whether a style is in use on your website or not, the browser has to digest every bit of your code.  Maintain your stylesheets regularly by removing styles you know you’re no longer using.
      • Minify your code
        Dig through your CSS and remove extra characters, spacing, and comments.  This will make a significant difference, especially if you have large stylesheets.
      • Use shorthand CSS codes.
        Instead of#border-box{
        border-bottom-color:#0F3;
        border-bottom-style: solid;
        border-bottom-width:4px;
        }
        try

        #border-box { border-bottom: #0F3 solid 4px; }

    3. JavaScript
      • Externalize your JavaScript documents whenever possible.
        There are going to be some scripts you can’t possibly externalize, but most you can.  Doing so means the browser can cache and reuse your external scripts, instead of reloading them with every page, thus decreasing page load times.
      • Call scripts at the bottom of your document, if appropriate.
        Contrary to my suggestions with CSS, JavaScript calls should be moved to the bottom of your document, as most scripts are not needed on page load (those that are dependent on page load need to be at the top, obviously).
      • Minify your code
        Remove extra whitespace and comments from your JavaScipt (or use a program that does it for you).  This will cut down on load time, but be careful not to introduce any bugs!
  2. Reduce HTTP requests to the server
    Each resource required by your site sends an HTTP request to the server.  This includes stylesheets, images, scripts, music files, flash, etc.  Each HTTP request, as you may have guessed, delays response time.  Here are some tips to reduce these requests.

    1. Use CSS sprites for image rollovers
      If you don’t know how to do this, here’s a great tutorial.
    2. Combine images and use image maps if needed
      Combining images you plan to put next to each other is a great idea.  It will not reduce file size, but it will reduce HTTP requests.  It’s not recommended to do this for your navigation, as it’s not accessible and definitely not good for SEO.
    3. Combine multiple stylesheets into one CSS file, if possible.
    4. Combine multiple JavaScript files into one file, if possible.
  3. Optimize Images
    1. Preload site resources
      After the page has loaded, you can request resources you will/may need in the future by running a preloader script.   If you want to learn more, here’s an article about it.
    2. Know which image format to use
      • JPEG
        This format is for images with fine variances in color, such as photographs or detailed art work.
      • GIF
        This format is for images with continuous areas of color, such as logos, illustrations, and graphic text and is limited to 256 colors.
      • PNG
        This format supports 24-bit color as well as true alpha transparency.  The catch is that not all browsers support all PNG features – but a PNG can do anything a GIF can do, often with a lower file size.  PNG-24 format should be used for images that require true transparency or require more than 256 colors.
    3. Optimize images to create faster loading graphics
      Get in the habit of using Adobe’s “Save for web” feature, where you can compare different quality images side by side. If you want to learn more, this tutorial might help.
    4. Always specify proper image dimensions in your code
      When you specify image dimensions in your code, the browser will hold a place for the image until it loads.  Leaving out this valuable information means the browser will have to figure out the dimensions and draw the area, which wastes valuable resources.
    5. Never use HTML to resize images
      Resizing images in your code still eats up the same amount of resources, so if you know your 400px by 300px image needs to be 200px by 150px, resize the image in an image editing program and not in your code.
  4. Utilize Web Caching
    Caching stores copies of documents which it can reuse if certain conditions are met, which is intended to reduce latency and bandwidth usage.  Configuring your web cache means that you can specify expiration dates for site resources, such as images, text documents, JavaScript files, and more.  If you’re on an Apache server, this is a super tutorial.
  5. Enable GZIP compression
    GZIP compression allows your web server to serve compressed/zipped content to the user’s browser, which saves bandwidth and speeds up your site considerably.  If you don’t know if your server is GZIP enabled, check it here.  If not, read this.
  6. Host your site with a fast, reputable hosting company
    Most people just don’t realize how much this aspect matters.  Often, people assume that the larger a hosting company, the better and faster it is.  Well we at CM know first hand that this is not true, as evident in our performance overview chart in Webmaster tools.  Yes, we changed hosting around October 12th and had everything switched mid-month.  This caused a decrease in our load times, as you can see, and then decreased even more when we began  these load time trimming excercises!Website Load Time
  7. Avoid excessive redirects
    Redirects are often mission-critical in the SEO world, but here are a couple of issues frequently overlooked:

    1. Always use the trailing slash on links to directories
      For example, the link http://www.customermagnetism.com/directory will return a 301 response and redirect to http://www.customermagnetism.com/directory/.  Because the file path is not explicitly defined, the server has to expend valuable resources to retrieve the closest match and return it to the user.
    2. Always check your redirects.
      This can expose potential problems with your site!

Keep in mind that while rankings are important to us in the SEO world, faster page load times also mean we’re providing a better user experience, which makes it a win for everyone!