Mejora el tiempo de carga de tu web (II)

El tiempo de carga es un factor muy importante para diferentes aspectos de una web. Por ejemplo, desde un punto de vista SEO está confirmado que es un algo que hay que tener en cuenta, también es importante ser rápidos para una mejor experiencia del usuario y hasta para la carga de tu servidor. Por eso es necesario revisar de vez en cuando como mejorar esa carga, y aunque el problema puede estar dentro de las tripas de tu software, es posible que además estés obviando algunos sencillos pasos que pueden ahorrarte varios segundos y hay utilidades que te pueden ayudar a descubrirlos.

Una de las mejores y más conocidas herramientas para diagnosticar problemas y encontrar soluciones al excesivo tiempo de carga de una web es YSLOW. Se trata de una herramienta adicional que se añade al Firebug de Firefox (creada por Yahoo) y que te advierte sobre incumplimientos de sus ‘Buenas prácticas para acelerar la carga de una web‘. Google enseguida recomendó utilizar esa herramienta a los webmasters, pero como tampoco quería ser menos y aunque también sigue recomendando YSLOW, decidió que tenían que hacer la suya propia (Page Speed) y redactar sus propias prácticas recomendadas.

Así que ahora tenemos dos buenas herramientas y dos buenas guías (coinciden en muchos puntos) a utilizar para mejorar la carga de nuestra web. Aquí os pongo algunos de esos consejos que creo que son bastante fáciles de aplicar, pero lo mejor es que leáis las guías con detenimiento:

• Hacer las menos peticiones HTTP posibles. Para ellos se puede por ejemplo unificar diferentes javascripts u hojas de estilo en una sola, o también unificar las imágenes utilizadas en el CSS en una y mostrar la que necesites utilizando la propiedad ‘background’.
• Minimizar los Javascript y CSS. Si utilizas alguna librería externa seguro que tiene su versión minimizada, y si no lo puedes hacer tu mismo usando herramientas como YUI Compressor (también de Yahoo por cierto)
• Añadir una cabecera de control de caché desde tu .htaccess, para que los navegadores de los usuarios nos echen una mano.
• Comprimir con Gzip. Algunos navegadores aceptan el contenido comprimido y los que usamos Apache2 solo tenemos que habilitar el módulo ‘deflate’ y añadir lo siguiente a nuestro .htaccess para conseguirlo.

  # Hacer GZIP de los JS CSS textos
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript

• Poner todo el CSS lo más comprimido posible y a poder ser en un solo fichero en la parte superior de la página, en el head. En cambio el Javascript es mejor ponerlo en el fondo, justo antes de cerrar la etiqueta </body>
• Reducir el número de DNS Lookups. Es decir, el número de dominios que se tienen que resolver al cargar una página. Aunque a veces cuando hay por ejemplo muchas imágenes se recomienda que se carguen desde diferentes dominios para poder descargarlas en paralelo.
• Usar dominios libres de cookies, y servidores ligeros y a ser posible CDNs para servir el contenido estático.
• …