Load ads defered (without blocking)
Ads’s scripts are evil, most part of them use document.write to create a new script element, and then it load an other script which make an iframe which load other script which make….and finally your page were blocked, not rendering, until ads are loaded.
We solved this problem using a very stupid defer technic. Steps:
make an empty container where ad has to be showed, ej: <div id=”target”></div>
at bottom page, make second hide container, and put there the ad’s script, ej: <div id=”src” style=”display:none;”> <script> relocateADS(’target’,’src’); //adsense ej </script> </div>
put relocateADS declaration before src div
relocateAds
This function is very simple, It just show the src div, and set the absolute position of target to src. This script use jquery, but it is easy to change if you are not loading jquery
The final result: your page will load all content before ads.
Ads’s scripts are evil, most part of them use document.write to create a new script element, and then it load an other script which make an iframe which load other script which make….and finally your page were blocked, not rendering, until ads are loaded.
We solved this problem using a very stupid defer technic. Steps:
- make an empty container where ad has to be showed, ej: <div id=”target”></div>
- at bottom page, make second hide container, and put there the ad’s script, ej: <div id=”src” style=”display:none;”> <script> relocateADS(’target’,’src’); //adsense ej </script> </div>
- put relocateADS declaration before src div
relocateAds
This function is very simple, It just show the src div, and set the absolute position of target to src. This script use jquery, but it is easy to change if you are not loading jquery
/**
* move all ads dom element from src div to target div now use absolute position
* to iframe banners
*/
function relocateAds(tgt,src) {
try{
//get elements
var $s = $('#' + src);
var $t = $('#' + tgt);
//vars
var last_pos = 0;
var last_height = 0;
//set initial pos and show
$s.css({position:'absolute'}).show();
/**
* set interval to check window/components resize
* on pos change or height change reset
*/
setInterval(function(){
var pos = $t.offset();
if(pos !== last_pos ){
last_pos = pos;
$s.css(pos);
}
var height = $s.height();
if(height !== last_height){
last_height = height;
$t.css({height:last_height});
}
},1000);
}catch(e){}
}
The final result: your page will load all content before ads.
Cargar Javascript sin bloquear
Es sabido que el tag <script> es bloqueante y frena el browser hasta que descarga, compila y ejecuta su contenido, por ende es altamente recomendable poner todos los scripts al final de la pagina para no demorar el rendering de la misma. Adicionalmente, hay algunas técnicas para cargar de manera asincronica (no bloqueante).
De todos los scripts que he probado y utilizado, el que mejor resultado da en todos los browsers es una suma de los estudios de steve souders y un setTimeout que encontre en la home de google, que es muy importante para IE6.
<script>
setTimeout( function(){
var _s = document.createElement(’script’);
_s.src =’script_and_style.js’;
(document.getElementsByTagName (’head’)[0]
|| document.documentElement).appendChild(_s);
},0);
</script>
Lo mas importante que vi usando esta técnica es que la mejor posición para llamar al script no es el final de la pagina, sino un poco antes para paralelizar la carga del js con el rendering de la página