Google Analytics is great. You get lots of amzing graphs and data and it's so much more useful than anything I've been able to get Webalizer or Analog to do. There's just one problem: It loads script from a remote server and sometimes that can be really slow.

Here's how to do Google Analytics right.

Firstly, if you like XHTML and keeping your markup and behaviour separate, you can't use the default code Google gives you. Also you need to get around the effect loading a remote script has on your pages loading and when the dom document ready and window loaded events fire in javascript.

To make the default Google Analytics code XHTML compliant, simply place it in a CDATA tag

<script type="text/javascript">
//<![CDATA[
        var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
        document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
        var pageTracker = _gat._getTracker("UA-nnnnnnn-1");
        pageTracker._trackPageview();
//]]>
</script>

To make sure there's no potential for your visitors to notice any delays, use some simple functions such as these to load Google Analytics (either in an external script served from your web server or directly in a script tag):

<script type="text/javascript">
//<![CDATA[
        var gaId = 'UA-nnnnnnn-1';
        function analytics()
        {
                if (!gaId) return null;
                gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                loadScript(gaJsHost + "google-analytics.com/ga.js", alalyticsLoaded);
        }
        function alalyticsLoaded()
        {
                if (!gaId) return null;
                var pageTracker = _gat._getTracker(gaId);
                pageTracker._trackPageview();
        }
        function loadScript(url, aFunction)
        {
                var e = document.createElement("script");
                e.onreadystatechange= function() 
                {
                        if ((this.readyState == 'completed' || this.readyState == 'loaded') && !this.loadScriptDone) 
                        {
                                this.loadScriptDone = true;
                                aFunction();
                        }
                }
                e.onload= aFunction;
                e.type = "text/javascript";
                e.src = url;
                document.getElementsByTagName("head")[0].appendChild(e);
                return e;
        }
        // The basic way, but this comes very late.
        window.onload = analytics;
        // If you know how, or you're using a framework, make it load as soon as the DOM is ready, e.g:
        // jQuery(document).ready(function(){analytics();});

//]]>
</script>

These functions are part of Kieran's Javascript Utility Class