Acelerar la carga de una web con banners usando iframes

Optimizacion      11 Febrero, 2009      768 lecturas      5 comentarios

Hoy txarly me ha pedido implementar en nvivo.es este truco que le dijo furilo y me gustaría compartilo con todos ustedes.

El truco consiste en cargar los banners dentro de un iframe, parece una tontería pero no lo es, al meter el banner dentro de un iframe la página se carga al instante sin esperar la respuesta del servidor del anunciante, os dejo un crookies para que capten mejor el concepto:

Como podéis ver en el primer esquema sin iframe la carga de contenido es lineal y consecutiva, en cambio usado un iframe el contenido de la web y el banner se cargan en paralelo sin tener que esperar la respuesta del servidor del anunciante.

Este truco no lo recomiendo para anuncios de texto relacionados de adsense ya que al no haber contenido en la página tan sólo el javascript, a google le va a costar encontrar publicidad relacionada, en cambio si que lo recomiendo para anuncios gráficos y de flash, como los que ofrecen: adconion, tradedoubler…

Para los que no recuerden como es el código HTML de un iframe aquí tienen un ejemplo:
<iframe src =”http://dominio.com/megabanner.html” width=”728″ height=”90″ frameborder=”0″ scrolling=”no”></iframe>

También os dejo un ejemplo de página con el banner en javascript que se carga en el iframe: megabanner.html

Podéis ver el funcionamiento de esta practica en nvivo.es y la coctelera

Compartir   twitter   del.icio.us   webeame   meneame   stumbleupon   mr.wong   ?  



  • Podrian pasarme el codigo para impresiones web, un banner de 160 x 600
  • @dani remeseiro: tranqui ya te lo corrijo :)

    gracias por el truco aunque creo q es mejor no hacerlo al onload mas que nada para no perder impresiones del banner :P
  • dani remeseiro
    vaya, se ha descojonao todo el código, mhmh
  • dani remeseiro
    ya rizando el rizo , si quieres que ese iframe se cargue SOLO despues que ha terminado de cargarse tu página, te haces una función javascript tal que asín y la añades dentro de HEAD:

    <script>
    <!-- //
    function cargaAdsExternos() {
    document.getElementById('ads').innerHTML= '';

    }

    //-->
    </script>

    Ahora creas un div vacio en el body como este:

    <div id="ads"></div>

    Ya solo falta invocar nuestra funcion con un onload en el tag BODY:
  • raul
    eres grande :-), ahora toca implementarlo en minube.com
blog comments powered by Disqus