Optimización pageload en Apache2

Como comentamos en un post anterior, en el 2010 un factor importante en los resultados del nuevo algoritmo de búsqueda de Google (Caffeine) será la velocidad de carga de una página. Por lo tanto en nuestros sitios, es imprescindible analizar y optimizar varios factores relacionados. Además al optimizar el tiempo de carga de nuestro sitio también reduciremos el ancho de banda y, dependiendo del caso, los costes del alojamiento y mejoramos la experiencia de los usuarios.

Análisis

Para analizar fácilmente la velocidad de carga de nuestro sitio disponemos básicamente de dos extensiones para Firefox/Firebug:

Yslow, creada por Yahoo!
Pagespeed, creada por Google

Estos complementos analizan múltiples factores y nos dan sugerencias para optimizar la página analizada. Las dos extensiones son muy parecidas tanto en las pruebas que ejecutan y las sugerencias que indican, pero en Yslow destaca la integración de Smush.it™, un optimizador de imágenes. En cambio en Pagespeed, es muy destacable la opción de disponer, en caso de sugerencia, de las alternativas minified u optimizadas de las css y los js, como también analizar e indicar los selectores css poco eficientes.

Optimización

Dependiendo de cada servidor y aplicaciones instaladas tendremos que optimizar diferentes factores, pero a modo de ejemplo, en el servidor de este blog era necesario optimizar los Cache-Control Header y la compresión gzip. Tras buscar en Google y leer varios post realice los siguientes pasos para optimizar el servidor:

1. Compresión gzip con mod_deflate

Primero hay que activar mod_deflate desde la linea de comando

a2enmod deflate

Luego editar el archivo deflate.conf que se encuentra en /etc/apache2/mods-available/deflate.conf

        AddOutputFilterByType DEFLATE text/plain
        AddOutputFilterByType DEFLATE text/html
        AddOutputFilterByType DEFLATE text/xml
        AddOutputFilterByType DEFLATE text/css
        AddOutputFilterByType DEFLATE text/javascript
        AddOutputFilterByType DEFLATE image/svg+xml
        AddOutputFilterByType DEFLATE image/x-icon
        AddOutputFilterByType DEFLATE application/xml
        AddOutputFilterByType DEFLATE application/xhtml+xml
        AddOutputFilterByType DEFLATE application/rss+xml
        AddOutputFilterByType DEFLATE application/javascript
        AddOutputFilterByType DEFLATE application/x-javascript
 
        AddOutputFilterByType DEFLATE application/x-httpd-php
        AddOutputFilterByType DEFLATE application/x-httpd-fastphp
        AddOutputFilterByType DEFLATE application/x-httpd-eruby
 
        DeflateCompressionLevel 9
 
# Netscape 4.X tiene ciertas limitaciones
        BrowserMatch ^Mozilla/4 gzip-only-text/html
 
# Netscape 4.06-4.08 tiene limitaciones
        BrowserMatch ^Mozilla/4\.0[678] no-gzip
 
# MSIE enmascarado como Netscape
        BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 
# Las siguientes lineas sirven para probar que la configuración funciona, en producción hay que comentarlas
 DeflateFilterNote Input instream
 DeflateFilterNote Output outstream
 DeflateFilterNote Ratio ratio
 LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%)' deflate
 CustomLog /var/log/apache2/deflate_log deflate

2. Expires headers mediante mod_expires

Primero activamos el modulo

a2enmod expires

Luego editamos o creamos el archivo expires.conf en el directorio /etc/apache2/mods-available/expires.conf

#        ExpiresDefault "access plus 2 months"
 
        ExpiresByType image/x-icon "access plus 1 month"
        ExpiresByType image/png "access plus 1 month"
        ExpiresByType image/jpg "access plus 1 month"
        ExpiresByType image/gif "access plus 1 month"
        ExpiresByType image/jpeg "access plus 1 month"
        ExpiresByType application/pdf "access plus 1 month"
        ExpiresByType audio/x-wav "access plus 1 month"
        ExpiresByType audio/mpeg "access plus 1 month"
        ExpiresByType video/mpeg "access plus 1 month"
        ExpiresByType video/mp4 "access plus 1 month"
        ExpiresByType video/quicktime "access plus 1 month"
        ExpiresByType video/x-ms-wmv "access plus 1 month"
        ExpiresByType application/x-shockwave-flash "access 1 month"
 
        ExpiresByType text/css "access plus 1 hour"
        ExpiresByType text/javascript "access plus 1 hour"

3. Desactivar ETags

Añadir las siguientes lienas al archivo /etc/apache2/apache2.conf

Header unset ETag
FileETag None

4. Reiniciar Apache para activar los cambios

/etc/init.d/apache2 restart

Ya solo queda volver a comprobar la página con las extensiones de Firebug y comparar los resultados.

Enlaces de interes

Recomendaciones sobre rendimiento web de Google
Recomendaciones de Yahoo!
Tutorial sobre Apache2, mod_deflate, mod_expires y ETag
Tutorial sobre ETag (Esta web tiene otros posts relacionados con optimización de Apache)

Rafael Garcia

enero 1, 2010 a las 9:45 pm

Genial tu blog. Se está conviertiendo en uno de los imprescindibles para el nuevo curso.
Por cierto, me he quedado loco con la secuencia de la matanza de civiles en el COD6.

Andy Kaiser
enero 2, 2010 a las 11:19 am
Gracias 🙂 Esa secuencia es para quedarse loco y es, quizás, la que más publicidad y controversia ha generado al juego. En cualquier caso, es posible saltarse esa fase y en algunos países, como Alemania y Japón, si matas civiles pierdes la partida. Como curiosidad en la siguiente fase, en las favelas de Brasil, también hay civiles, y si los matas pierdes… http://en.wikipedia.org/wiki/Controversies_surrounding_Call_of_Duty:_Modern_Warfare_2