Question

I have a beautifully slick and elegant website that loads in double quick time, until of course the banner ads are enabled! Waiting to retrieve the adds up to 10 seconds on the the page load time which for me is really frustrating as I have spent ages optimising the rest of the site.

I have tried to load the adverts via ajax or similar with mixed success. The flash based banners and the ads which simply get a snippet of html from the ad server work fine. However, there are some (PaddyPower I am talking about you) which return javascript and use document.write() to append the html advert to the DOM. The advert is never displayed.

The affiliate code:

<script type="text/javascript" src="someadserver.com/impression.aspx"></script>

The script returned by someadserver.com

document.write('Normal HTML code')

It must have something to do with cross site scripting and security but I am no expert on this. Is there a way to achieve what I want?

I don’t believe caching is an option as it will skew the impressions/clickthrough statistics.

Also changing any affiliate code is not an option as it is a client’s website and I want a stable and workable solution that does not rely on hacking ad code.

—EDIT—

I modified my advert class to return the advert code surrounded by <noscript> tags and at the same time save the advert code in a static member. Just after my </body> tag I use this code here:

    <?php foreach(Advert::getCachedAds() as $id => $code): ?>
    <div class="advert <?php echo $id ?>" style="visibility:hidden;">
        <?php echo $code ?>
    </div>
    <?php endforeach; ?>
    <script type="text/javascript">
        $(function(){
            $('.adContainer').each(function(index, object){
                var advert = $('div.' + $(object).attr('id')).html();
                $('div.' + $(object).attr('id')).html('');
                $(object).html(advert);
            });
        });
    </script>

This works quite nicely and reminds me of the old-skool image pre-loader scripts we used to use in the days of Netscape and dial-up connections.

Answer 1

You could put place-holder divs where you want your adverts to be, load the adverts after all the actual content has loaded and then move the loaded ads into place.

This will not help with the overall speed of the page but will allow your actual content to be seen without having to wait for the ads to load.