Trucos y herramientas para optimizar el código de una página web

programacion_gen_sLa velocidad de carga  es uno de los factores que influyen en el posicionamiento en buscadores de una  página web e incluso en la conversión de sus ventas.

En este artículo, recopilamos las técnicas más efectivas para mejorar la velocidad de carga de un sitio y repasamos algunas herramientas que nos ayudarán a hacer un seguimiento y comprobar su optimización.

Herramientas

Aunque exiten numerosas alternativas para medir la velocidad de un sitio web, nos centraremos en las dos más extendida: Yslow y PageSpeed

  • YslowEs una herramienta de Yahoo! que nos permite medir la velocidad del sitio atendiendo a numerosos factores y nos ofrece un grado de optimización. Lo interesante es que nos desglosa los factores y nos ofrece ayudas para encontrar aquellas parcelas que requieren más nuestra atención. Se integra como complemento o extensión en los navegadores más usados.
    yslow
  • PageSpeed es la propuesta de Google en más o menos los mismos términos que Yslow. Además tiene complementos que se integran en el servidor web para optimizar tu página automáticamente.

Consejos para optimizar una web

La lista de aspectos que puedes tener en cuenta para optimizar una web podría ser inacabable, siendo algunos aplicables a nivel de diseño, código fuente en el lado del cliente o en el lado del servidor. Nos vamos a centrar en la parte que nos toca en el navegador, ya que es un área que todos los desarrollos incluyen y en la que cualquier persona puede meter mano.

Reducir el número de solicitudes al servidor

Uno de los detalles que ralentizan una página es el hecho de incluir muchos elementos externos al propio HTML, que están en ficheros separados, por ejemplo imágenes, Javascripts, CSS, etc. En este sentido deberíamos ser muy cuidadosos y eliminar cualquier tipo de llamada a archivos externos que sea evitable. Por ejemplo, si tenemos el CSS dividido en varios archivos y los traemos por separado será mucho peor que si juntamos todo el CSS en un mismo fichero.

Sprites CSS

Dado que queremos reducir el número de solicitudes, es bueno usar técnicas como los Sprites CSS. Esto básicamente se trata de incluir en una sola imagen todas las imágenes sueltas que usas en una página para generar las interfaces de usuario (iconos, logos, fondos, etc.) Luego con CSS somos capaces de decir qué partes de la imagen grande queremos mostrar en cada elemento.

sprites

 

Por ejemplo, esa imagen es un pedazo de los sprites CSS que usa Youtube, como ves, todos los inconos están reunidos en el mismo archivo, que se trae con una única solicitud al servidor.

Minimizar el Javascript / CSS

La minimificación se basa en quitar todo lo que resulta superfluo en un código CSS o Javascript (se puede aplicar incluso al HTML). Así quitamos comentarios, espacios en blanco innecesarios, etc. Eso hace que los archivos tengan menos peso en bytes y por lo tanto se transfieran más rápidamente.

Colocar el CSS en la cabecera

Esto permite que la renderización de los documentos HTML sea más rápida.

Colocar los scripts Javascript antes del </body>

Esto produce que se cargue antes el contenido de una página, para que el usuario vaya leyendo y disfrutando de la web y que el navegador no se entretenga bajando código de librerías Javascript que solo necesita cuando la página ha terminado de cargarse.

Esta lista podría ampliarse mucho más, pero queremos dejaros con un sitio web muy interesante, que explica estos temas con mayor profundidad e incluye muchos más consejos. Se trata de BrowserDiet.