Tag Archives: script

Google Adsense blocks the page load

The Google Adsense code block

Everyone dealing with Google Adsense knows how it looks like as JavaScript code. When you register, apply and receive the code chunk, you receive actually an inline chunk of js describing the width and height of the code and the key, uniquely identifying the page ad and an included javascript file.

<script type="text/javascript"><!--
google_ad_client = "pub-9858850710257888";
/* 250x250, google ad 09-5-19 */
google_ad_slot = "0062396170";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.co/...">
</script>

Inline scripts and their behavior

The problem with the page load is that inline scripts included somewhere in the page, the case with adsense is just like that, blocks every page load until the script is executed. Of course when you’ve two or three ads somewhere in your page that causes huge delay of page load. Sometimes that may delay the page twice as much as if there were no ads from Google.

The workaround

The simple workaround is to place your ads <script> inline, included or both in a separate .html file and to include it as <iframe>. Such a solution gives the page the ability of render before the iframe is executed and the page load event is fired in an early stage.

<iframe src=”/path_to_the_banner.html”></iframe>

JQuery ajax script call

Many friends are asking me how to they use JQuery AJAX power. However you have two main ways, using:

$(‘#elem’).load(‘url’, ”, function() {});

or

$.ajax({

type : ‘GET’, // or POST

dataType : ‘text’, // or JSON

url : ‘url’,

data : {}, // GET or POST key/value parameters

success : function () {}, // on success callback

error : function () {} // on error callback

});

Note: be careful to miss the comma after the error callback declaration, cause IE is giving some problems with objects with comma after the last key/value pair.

Both methods are useful, but however the second one is more complicated and gives more functionality. It’s important to note that if you’d like to include Html, which will be JavaScript processed after that, there are another two ways. The first one is obvious, you can call the javascript file processing the included Html in your success callback of the first ajax call. After calling the second ajax call, be aware to call it with dataType : ‘script’, which includes de js code and parses it as code. Than you can call whatever function in that .js as you’d do it as it was already included.

That method is obvious and easy, but however on slow nets it’s pretty slow and it’s not useful. Actually you can include your script file as you’d normally do it, with a script tag.

In it you should register all event listeners in methods you can call later. That’s the better way.

In the first case you have:

$.ajax({

type: ‘GET’,

dataType: ‘text’,

url: ‘the_url’,

data: {},

success : function () {

$.ajax({

type: ‘GET’,

dataType: ‘script’,

url : ‘script.js’,

success : function() {

// now do what you want

}

})

},

error : function() {

}

});

In the second case you’d just include your file:

<script src=”script.js”></script>

<script>

$.ajax({

type : ‘GET’,

dataType : ‘text’,

url : ‘url’,

success : function() {

init_script(); // method in script.js

}

});

</script>

Now everything should work OK, good luck!