Aumentar la velocidad de tus páginas web

Si eres desarrollador de páginas web, o administrador de algún sitio web, sin duda una de tus principales preocupaciones es optimizar la carga de las mismas, un tiempo de carga pequeño se traduce en una mejor experiencia de usuario y de cara a los buscadores un sitio de más calidad. Buscando por internet encontré este maravilloso tutorial con unas excelentes y completas técnicas para aumentar la velocidad de una web, aunque para mi lo mejor fueron los enlaces externos al final del mismo y de ellos el más relevante y sobre el que basaré este tutorial es web page test.

Cómo bien dice el nombre Web Page Test es un sitio que examina tu página web y te muestra las recomendaciones necesarias para corregir o mitigar cada uno de los fallos que sus test encuentran. Los test se basan en 6 bloques fundamentales:

1. First Time Byte
2. Keep alive enabled
3. Compress text
4. Compress images
5. Cache static content
6. CDN detected

Sobre el primer punto el Time to First Byte ya he hablado en alguno de mis post por lo que no creo necesario incluirlo nuevamente en este manual por ello me centraré en los restantes 5 puntos.

Keep Alive

Keep Alive, también conocido como HTTP persistent connection, HTTP keep-alive, o HTTP connection reuse, surge con la idea de utilizar la misma conexión TCP para enviar y recibir múltiples peticiones y respuestas HTTP, en lugar de abrir una nueva conexión para todas y cada un par petición / respuesta.

Esta directiva se configura en nuestro servidor web, en mi caso apache:

La extensión Keep-Alive de HTTP/1.0 y la funcionalidad de conexión persistente de HTTP/1.1 facilitan la posibilidad de que se establezcan sesiones HTTP de larga duración que permiten que se puedan enviar múltiples peticiones sobre la misma conexión TCP. En algunos casos, esto tiene como resultado una reducción de casi el 50% en los tiempos de retardo en el caso de documentos con muchas imágenes. Para activar las conexiones Keep-Alive, especifique KeepAlive On.

Comprimir archivos CSS / JS o similares

En la actualidad la mayoría de navegadores soporta la compresión GZIP de los archivos de un sitio web por lo que enviarlos comprimido no reduce la capacidad de ser visto nuestro sitio pero si aumenta la velocidad del mismo al transmitirse la misma información en menos espacio, existe un par de manuales muy interesantes que nos explican cómo hacer esto en nuestro servidor apache: Comprimir con GZIP archivos JS (Javascript) y CSS y Comprimir usando .htaccess [mejorar tiempo de carga].

Los requerimientos para habilitar la compresión de archivos de texto con GZIP es tener instalado en nuestro servidor apache el módulo deflate e incluir estas líneas en nuestro archivo de configuración htaccess:

#Activar la compresión del contenido con GZIP
php_flag zlib.output_compression On
#Nivel de compressión
php_value zlib.output_compression_level 5
#Compresión adicional de archivos js y css

SetOutputFilter DEFLATE

SetOutputFilter DEFLATE

Para comprobar que nuestro sitio se está enviando comprimido tenemos la anterior url.

Cache static content

Todos los sitios web tienen contenido estático, archivos HTML, CSS, JS e imágenes, guardar en caché estos archivos agiliza muchísimos las sucesivas cargas de nuestro sitio en el lado del cliente, para activar esto en apache debemos editar el archivo .htaccess y agregar las siguientes líneas:

Header set Cache-Control "max-age=2592000, proxy-revalidate"

Red de entrega de contenidos (CDN Content delivery network)

Buscando en la Wikipedia:

Una red de entrega de contenidos o red de distribución de contenidos (CDN en inglés) es una red superpuesta de computadoras que contienen copias de datos, colocados en varios puntos de una red con el fin de maximizar el ancho de banda para el acceso a los datos de clientes a través de la red. Un cliente tiene acceso a una copia de los datos cerca del cliente, en contraposición a todos los clientes que acceden al mismo servidor central, a fin de evitar cuellos de botella cerca de ese servidor.

Los tipos de contenido incluyen objetos web, objetos para descargar (archivos multimedia, software, documentos), aplicaciones, medios de comunicación en tiempo real y otros componentes de entrega de Internet (DNS, rutas y consultas de base de datos).

Esta opción es para sitios grandes y en mi caso no la he habilitado porque como vemos depende de una configuración con varios servidores dispuestos por distintas zonas geográficas para que la carga de contenido sea menor y servida de manera más eficiente.

Conclusiones y resultados de aumentar la velocidad de una página web

Con estas optimizaciones se puede llegar a aumentar la velocidad de un sitio web en un 70 %.

¿Alguna optimización adicional que me podáis recomendar?