Acelerar la carga de una web con banners usando iframes

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

trucos para agilizar la carga de tu web (parte 4)

Reduciendo código de la hoja de estilos CSS

Muchas de las propiedades de los estilos CSS las podemos agrupar en una sola linea, para reducir el código y aligerar la carga de la web

En el siguiente ejemplo agruparemos varias propiedades de background

Sin agrupar:

Agrupado:

trucos para agilizar la carga de tu web (parte 3)

Reducir código de la plantilla CSS
En la web de aNieto2k encontrareis un articulo muy interesante

Hay otras maneras de reducir código automáticamente utilizando herramientas on-line, eso si, no esperes a que te corrijan los errores de validación

Antes de continuar, comprueba tu CSS

Una vez este libre de errores y advertencias, puedes utilizar una de las siguiente herramientas:

• Clean CSS - Reduce el código y además muestra los cambios realizados
• CSS Tweak - El que mejor comprime

Si es que decides comprimir el css al máximo y dejarlo en una sola linea, antes de subir el fichero al ftp, haz una copia del css original no hagas como yo jeje

trucos para agilizar la carga de tu web (parte 2)

separar CSS del codigo HTML

usar menos las etiquetas <style>, si pones los estilos en un fichero .css, el navegador los podra guardar en la cache y te permitira cargar mas rapidamente cada una de las paginas.

por lo contrario, si tienes en cada pagina una etiqueta <style> con los estilos obligaras al usuario a cargar una y otra vez los estilos

caso practico:

si utilizas plugins para wordpress, podras ver que algunos de estos te añaden una etiqueta <style> con los estilos necesarios para el funcionamiento del plugin

solucion:

1. mira el codigo fuente de tu pagina principal
2. busca alguna si hay alguna etiqueta <style>
3. normalmente se muestra el nombre del plugin, apunta el nombre
4. copia los estilos que hay dentro de <style> y los pegas en tu plantilla css principal
5. ahora dirigete a la carpeta:
   /wp-content/plugins
6. busca el fichero correspondiente al plugin, normalmente el nombre del fichero es el mismo que el del plugin
7. abre el fichero y busca la etiqueta <style>, encontraras algo parecido a esto:
   PLAIN TEXT
   PHP:

   1. function wpv_actualizacion_css()
   2. {
   3. //estilo para el plugin
   4. echo ' <style type="text/css" media="screen"> /* estilo plugin ultima modificacion */ .lbl_actualizacion {font-weight:bold;color:green;} </style>';}

8. seguramente estara dentro de una funcion, copia el nombre de la funcion en el ejemplo de arriba wpv_actualizacion_css y buscas el nombre en el mismo fichero, seguramente te saldra algo asi:
   PLAIN TEXT
   PHP:

   1. add_filter('wp_head', 'wpv_actualizacion_css');

9. para desactivarlo solo tienes que poner dos barras // que en PHP significa que es un comentario, quedando asi:
   PLAIN TEXT
   PHP:

   1. //add_filter('wp_head', 'wpv_actualizacion_css');

trucos para agilizar la carga de tu web (parte 1)

sé que de momento viciao2k3 tarda bastante en cargar, pero eso se puede mejorar y segun vaya optimizando el sitio voy a publicar una serie de consejos para que tu sitio se cargue fluidamente

¿porque es importante?

ahora mas a menos casi todo el mundo tiene ADSL, pero eso no significa que todos esten preparados
si tu web tarda mucho en cargar, el usuario impaciente puede cerrar la pagina y seguramente no volvera

agilizar carga de javascripts

normalmente en las paginas web, todo el javascript se pone en la cabecera, exactamente entre las etiquetas <HEAD> y </HEAD>

pienso que esta mal, ya que obligas al usuario a cargar funciones que posiblemente luego no se utilicen.

si tienes muchos javascripts en un fichero, deberías dividir las funciones en 2 grupos:

• primarias: funciones que se ejecutan en el evento onload
• secundarias: las que no necesitan cargarse al principio.
  Por ejemplo, una funcion que muestra un mensaje al hacer clic a un boton

las funciones primarias puedes hacer que se carguen en la cabecera de la pagina y las secundarias antes de la etiqueta </body>

caso practico:
el codigo javascript de Google Analytics, yo recomiendo ponerlo antes de cerrar la etiqueta </body>, ya que si lo pones despues de <body>, estas obligando al usuario a esperar a que se carguen 6,09 KB (6.232 bytes) para luego cargar con el resto del documento