Articulos sobre velocidad web

¿Qué es para Google, una página optimizada?

Google ofrece una serie de prácticas recomendadas que todo web debería cumplir.

Para ello, Google ofrece un test de evaluación, llamado Google Page Speed en diferentes versiones (online y como extensión para los navegadores Firefox y Chrome)

El objetivo común de este conjunto de reglas, es facilitar al máximo la labor de descarga y dibujado de de la página web, por parte del navegador.

Básicamente, lo que persiguen estas reglas es reducir el tamaño de todos los componentes que forman la página web, reducir el número de componentes para reducir latencias, mejorar la forma y el orden de transmisión de esos componentes.

Veamos en que consisten las reglas más importantes de este test:

Especificar cache de navegador
Para componentes estáticos de nuestro web, podemos indicar explícitamente que tiempo de validez tienen para que no vuelvan a recargarlos para páginas sucesivas de nuestro web, y así no dejar al navegador que intuya esto.

Habilitar compresión
Salvo para componentes con un formato ya comprimido (Ejemplo, las imágenes JPG, GIF o PNG), la compresión permite que los componentes tengan un tamaño mucho menor y así reducir el tiempo de descarga de estos.

Aplazar el análisis de Javascript
Cuando el navegador se encuentra con código javascript, debe analizarlo para ver si debe ejecutar algo en ese momento. Con los PCs actuales, esto no afecta demasiado al rendimiento, pero en dispositivos menos potentes (tablets, smartphones,...) esto puede retrasar la carga de otros componentes. Normalmente el código Javascript no comienza a ejecutarse en el cliente hasta que no tenemos cargados todos los componentes iniciales de la página, por lo que no tiene demasiado sentido ·"distraer" al navegador con tareas extra.

Combinar imágenes
Si algunas imágenes de nuestra página son pequeñas, el navegador perderá mas tiempo estableciendo las conexiones para descargarlas, que en la propia descarga. Además, los navegadores no se descargan demasiados componentes en paralelo, por lo que es aconsejable agrupar esas imágenes, para reducir el número de componentes a descargar.

Minimizar Javascript, CSS y XHTML
Este tipo de códigos pueden contener comentarios, espacios en blanco, tabulaciones, etc que no forman parte de lo que va a dibujar el navegador, por lo que es aconsejable eliminarlos cuando la página ya esta en producción.

Optimizar imágenes
Aunque los formatos de imágenes comunes son comprimidos, hay algunos en los que pueden aplicarse distintos niveles de compresión, por lo que dependiendo del tipo y naturaleza de la imagen eligiendo la compresión y formato adecuado, redcue considerablemente el tamaño de estos componentes.

Ofrecer recursos de una misma URL
Si obligamos al navegador a obtener los componentes desde sitios web distintos, para cada uno de estos sitios el navegador deberá averiguar la dirección IP que se corresponde con cada nombre de sitio, y esto tiene un coste temporal

Esta regla puede parecer algo discutible y contradecir otras reglas, ya que obtener componentes de distintos sitios puede aumentar las descargas paralelas y reducir el tamaño de las peticiones. Una buena puntualización sería, no hacer resolver una IP al navegador para pocos componentes o para componentes muy pequeños. O visto de otra forma, no hacer perder mas tiempo resolviendo una IP que el ahorrado por una mayor paralelización de descargas.

Especificar las dimensiones de las imágenes
Si las especificamos, facilitamos la labor de dibujado de la página al navegador, ya que puede dejar el espacio necesario para la imagen incluso antes de que sea descargada. De lo contrario, cuando la imagen sea descargada totalmente, se deberá reajustar cómo se ha dibujado la página.

Especificar un juego de caracteres
Esta regla es similar a la anterior. Si especificamos que juego de caracteres estaos usando el navegador puede dibujar más rápido los textos de la página web.

Evitar la directiva @import en CSS
Esta directiva indica dentro de un fichero CSS que incluya otro fichero. Esto produce descargas anidadas.

Habilitar Keep-alive
Esto es una característica de los servidores y navegadores actuales, que consiste en aprovechar conexiones abiertas cuando se descarga un componente para descargar otro, evitando el coste temporal que supone el establecer una conexión diferente para cada componente.

Ofrecer imágenes a escala
Si las dimensiones de una imagen son mayores que las que tiene que dibujar el navegador, por un lado estamos transfiriendo un componente de un tamaño mayor al necesario y por otro obligamos al navegador a realizar el proceso de escalado a la hora de dibujar la página.

Puede acceder a la totalidad de reglas (prácticas recomendadas) de este test de la página Google Page Speed