Ideally, basic placement of those dang AdSense ads should load just fine if it were one ad. But that's not how HTML documents load. Like most compiled languages, it's interpreted line by line. An entire HTML page has to be interpreted before anything is rendered out, meaning if you put a gigando AdSense ad at the beginning of an HTML doc, you'll be seeing a blank page for as long as it loads. Those first 5 to 10 seconds are precious as it determines whether or not the user finds your page "friendly". A user returning to your site is something else, but at the least the user can say, "Wow, this site charges like a bull in heat during mating season."
So, that's my strategy. Load the dang ads at the END of the document. Here's how:
<html>
...
<body>
<div id="visibleAdSenseHolder"></div>
<!-- your content -->
<div id="hiddenAdSense" style="display:none;">
<!-- adsense code -->
</div>
<script type="text/javascript">
function swapAdSense(){
var destinationDiv = document.getElementById("visibleAdSenseHolder");
var sourceDiv = document.getElementById("hiddenAdSense");
destinationDiv.innerHTML = sourceDiv.innerHTML;
sourceDiv.innerHTML = "";
}
</body>
</html>
- In the div "visibleAdSenseHolder", notice that it is empty. You need to define the width and height of the holder, but it is empty so it draws the space right away rather than later. You don't want the entire page to shift/redraw when the ad is transferred into the div. Drawing cycles eat cpu, son.
- The hidden div "hiddenAdSense" will contain your actual AdSense pre-generated code. However, notice that it's style is set so that it isn't visible. The ad is still gathered, but it isn't drawn, which doesn't save much computing but at the least any rendering is delayed.
- The javascript code basically does what we programmers learned in Intro to whatever programming language and that is how to do a basic ABC variable swap. The concept being you want to swap out A and C without losing any of their values, so you'll need a placeholder which is B. In this particular case, we already have B filled. We're just copying it to A or C. The foundation of the swap is in that concept.
ALSO, notice that I empty the source div at the end of the function. You must do this otherwise there will be two instances of this ad on the page and Google AdSense won't like this as they limit the number of ads you can have. I've noticed horrible performance with no ads showing at all until I optimized my function. Imagine that you copied the value of B to A and you didn't empty B, then there would be A and B ads on your page, which is redundant. Therefore, assuming the value of B was safely copied to A, you can remove the value of B, freeing up that space (and the code wouldn't be interpreted after the function executes).
That's basically it. You just need to do this for every ad you place. Theoretically, it's loading the same amount of info, but you will notice a slight perceivable load speed.
0 comments:
Post a Comment