2

I have a website (http://dev2.liquor.com) that loads very quickly when I remove the advertisers and tracking scripts our partners give us. Of course we need to reduce page load time from 6 seconds to 1 second, and I see that it is 100% all of our external js files for partner tracking, ads, etc.

I have been banging my head against the wall trying to find alternate ways to load/compress/serve the multitude of js the user needs to download. I can easily compress/minify mine, but someone else's that is not on our server is becoming hard to do so.

The best I can do is get a C on YSlow, and each suggestion they give me pertains to my stupid tracking js scripts!

I think the main problem is the tracking (http://pastebin.com/faMDGrrs) which I can see in the status bar is causing the site to load very long. Thoughts on how to deal with that?

Is it even possible to manage third party scripts in my website?

Any help would be greatly appreciated.

John Gardeniers
  • 27,458
  • 12
  • 55
  • 109
Zach Smith
  • 278
  • 2
  • 11
  • 1
    Hmm... Some type of content caching system maybe? – joeqwerty Jan 12 '11 at 18:05
  • 1
    @joeqwerty - I agree. I would attempt to tackle this like I was using an api for rss feeds. Cache them and only update when a change occurs on the remote server. You can not manage (to any great degree) the loads times caused by requests to external servers that you don't control. – Patrick R Jan 12 '11 at 18:51
  • do i just wrap code around the external js files to cache them? – Zach Smith Jan 12 '11 at 19:04
  • You'll use your javascript code to (in my case) call php script that does the actual call to the remote server. – Patrick R Jan 12 '11 at 19:06
  • what about lazy loading? what about putting the scripts on a CDN? – Zach Smith Jan 12 '11 at 19:15
  • if you can access it via a javascript you should be fine. I'll do my best to find my code for a customer and post it for you later tonight. It's specific to javascript and php but you could probably adapt it to your environment. The javascript is a one liner and it's used to load a completely formatted badge with images and stats onto any webpage (background process via php). – Patrick R Jan 12 '11 at 19:22
  • i think the main problem is the tracking (http://pastebin.com/faMDGrrs) which i can see in the status bar is causing the site to load very long. thoughts on how to deal with taht? – Zach Smith Jan 12 '11 at 19:25
  • you could reference the pastebin.com javascript at the bottom of your web page so that while your load time wasn't decreased, the rest of the page load would complete quickly. Kind of like waving your hand to distract the website visitor. – Patrick R Jan 12 '11 at 19:43
  • Sorry I didn't mention, but all the tracking is in the footer already. – Zach Smith Jan 12 '11 at 19:50
  • 4
    This may be an obvious answer but how about just trying to cut down on the extraneous crap? Pick just one or two fast tracker/advertisers. Any advantage of cramming more in could just be wiped out by people clicking away before it has even loaded. – JamesRyan Jan 12 '11 at 20:29

2 Answers2

1

Here's some client-side JS I threw together (based upon the Google Analytics asynchronous tracking snippet) which would allow you to load external Javascripts asynchronously:

<script type="text/javascript">
  (function() {
    var scripts = new Array(
        'external.domain.com/script1.js',
        'external.domain.com/script2.js',
        '../script1.js',
        './script2.js',
        '/script3.js'
    );
    if ( scripts.length )
    {
        for ( var i = 0; i < scripts.length; i++ )
        {
            var asynchronous = document.createElement('script');
            asynchronous.type = 'text/javascript';
            asynchronous.async = true;
            if (
                scripts[i].substring(0, 1) != '/' &&
                scripts[i].substring(0, 1) != '.'
            ) {
                // assume external domain (enforce protocol)
                asynchronous.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + scripts[i];
            } else {
                // assume relative URI
                asynchronous.src = scripts[i];
            }
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(asynchronous, s);
        }
    }
  })();
</script>
danlefree
  • 2,923
  • 1
  • 19
  • 20
0

Putting third party scripts into an iframe could be an alternative.

Common sense is that an iframe has a high cost (in terms of load), but if it's cost is less then the cost of loading third party elements, you could give it a try.

You probably you did most of things that are discribed here, but it's a good resource anyway.

Bob Rivers
  • 516
  • 5
  • 13