Mejora el rendimiento de tu web optimizando tu servidor

En el 2010 una de las premisas para mejorar posicionamiento en buscadores va a ser sin duda el rendimiento de la web, tiempos de carga etc.

Esto no solo mejora la experiencia de usuario, si no que tambien nos beneficia a nosotros reduciendo mucho el consumo de ancho de banda de nuestro servidor y
permitiendole al bot Google o cualquier otro buscador tener que descargar menos Kb. para rastrear nuestras paginas facilitandole asi el trabajo.

Algo fundamental para ello es la configuración correcta de nuestro servidor, antes incluso de empezar a optimizar la web (de eso hablare en otros post).

Si tu servidor es Apache lo primero que hay que hacer es asegurarse de que los siguientes modulos estan instalados y habilitados.

  • mod_deflate
  • mod_expires
  • mod_headers

Para comprobar que modulos hay habilitados en apache, nos podemos ayudar de la siguente funcion en php

print_r(apache_get_modules());

Esto devolvera un array similar a este:

Array
(
[0] => core
[1] => http_core
[2] => mod_so
[3] => sapi_apache2
[4] => mod_mime
[5] => mod_rewrite
)

En el caso de que no aparezcan los modulos que comentamos, para apache2 podemos habilitarlos desde consola con el siguiente comando

a2enmod enable [module]

Ejemplo:

a2enmod enable mod_deflate

¿Que hace cada modulo?

El modulo mod_deflate comprime nuestos documentos .html, .css y .js, reduciendolos en algunas ocasiones hasta en un 80%.

El modulo mod_headers nos permite modificar las cabeceras enviadas por el servidor, lo que es bastante util.

El modulo mod_expires se utiliza para enviar en las cabeceras información sobre la caducidad de un contenido, lo que es util para cachear contenido estatico.

Una vez habilitados los tres modulos podemos modificar nuestro .htaccess para poder utilizarlos.

MOD_DEFLATE

Gracias a mod_deflate comprimiremos nuestro contenido.

Para ello hay que añadir las siguientes lineas a el .htaccess :

<IfModule mod_deflate.c>
# Insert filter on selected content types only
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/x-javascript
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>

La linea AddOutputFilterByType… indica que apache debe comprimir el contenido de los formatos indicados.
Debido que en algunos navegadores como el recientemente muerto IE6 daba problemas con la compresion gzip las siguientes lineas son para evitar comprimir
contenido para navegadores antiguos.

Despues utilizando Google Page Speed o Yahoo Yslow podemos comprobar que en realidad esta comprimiendo nuestros ficheros.

Nota: En ocasiones y dependiendo del SO del servidor no se comprimen los js, si esto sucede debemos comprobar que existen las siguientes lineas en el fichero /etc/mime.types

text/javascript                       js
application/javascript              js
application/x-javacript             js

Despues volver a comprobar si comprime los ficheros javascript. En mi caso con debian y fedora funciono correctamente , aunque se que en CentOs ha dado algun problema mas que desconozco.

MODULO MOD_EXPIRES

Gracias al modulo mod_expires podemos cachear el contenido estatico, acelerando la carga de la web por que menos peticiones por pagina a la hora de navegar por nuestra web.

Para ello debemos añadir las siguentes lineas a fichero .htaccess:

<IfModule mod_expires.c>
<filesmatch "\.(gif|GIF|png|jpg|jpeg|JPG|js|css|swf|ico)$">
ExpiresActive On
ExpiresDefault "access plus 30 day"
</filesmatch>
</IfModule>

¿Y eso que hace tio friki? , pues eso cachea todo el contenido estatico que este entre las extensiones que se señalan entre parentesis, y creedme se nota.

MODULO MOD_HEADERS

Aunque el modulo mod_headers se puede utilizar para mas de una cosa en este caso solo lo vamos a utilizar para eliminar las famosas Etags

¿Señor que habla raro que son las Etags?
– Las ETags son unos identificadores que se envían al navegador para identificar el “estado” de una página dinámica o de un archivo estático.

Aunque mucha gente cree que Yahoo dice que hay que habilitarlas lo cierto es que es al contrario… por que? no lo se… eso pa’otro dia , pero asi lo hace Yslow te sube la puntuación al eliminarlas.

Para eliminar dichas etiquetas se añade las siguientes lineas al archivo .htaccess:

#INICIO deshabilitar el famoso ETag
<ifmodule mod_headers.c="">
Header unset ETag
</ifmodule>
FileETag None
# FIN deshabilitar el famoso ETag

Y listo , con esto habremos optimizado la configuración de nuestro servidor y acelerado considerablemente la carga de la web.
Este es mi primer post de los que espero escriba muchos más asi que si te ha gustado y quieres comentar ya sabes.

  • Un post claro y bien explicado.

    Felicidades Pedro por el lanzamiento de tu Blog.

  • Admito que me equivoqué, y dije que no tenías webs de montar el blog…pero algo había que hacer para “pincharte”, ja, ja, ja. M’alegro tiu, ¡felicidades por el blog!

  • Gracias a los 2 por comentar! valientes! xDD

  • Bueno, otro gatuno más con blog. Ahora lo petas de adsense y a vivir del cuento…

    Jeje. Enhorabuena por el post, es de los típicos que van al delicious o al bookmark.

    Un abrazo feo

  • Excelente aporte, yo uso la siguiente formula en el htaccess:

    # Compresion de los contenidos con gzip para mejorar los tiempos de descarga
    php_flag zlib.output_compression On
    php_value zlib.output_compression_level 2
    AddHandler application/x-httpd-php .css .js .html .htm
    php_value auto_prepend_file /home/domains/nombredeldominio.com/web/contentHeader.php

    Y en el contentHeader.php tiene este sencillo código:

    O si lo quieres complicar un poco más y hacerlo más completo:

    Espero vuestras opiniones, serán siempre bien recibidas.

  • Pingback: Zona Bloguismo XIX | Bloguismo()

  • Pingback: Mejora el rendimiento de tu web optimizando tu servidor()

  • El de ETag no me lo sabía, lo probaré a ver que tal va.
    Muchas gracias por estos tips.
    Saludos!.

  • Hola, recientemente he implementado esta solucion en un sitio web, http://www.viajarentreamigos.es, y se ha notado en la velocidad de carga del sitio sobre todo en IE, pero a cambio ha bajado bastante en Firefox… Podrias aconsejarme que hacer para solucionarlo en Firefox ?

  • Pingback: 100 recursos para mejorar tu blog | Bloguismo()

  • Muy buen post sobre optimización del servidor. En mi blog también explico un tema sobre optimación implementando la caché.

    Saludos!!!

  • Interesantisimo aporte, sin duda era logico que se valorase algo tan de sentido comun como el tiempo de respuesta. Debo probarlo en mi host ^

  • Fantástico, utilizado en muchas de mis webs.

  • Que grande eres Pedro!
    No se te escapa una!

  • Muchísimas gracias, llevaba tiempo intentando mejorar la velocidad de la web, cada mñodulo que instalaba me la rompía y con estas simples instrucciones lo he conseguido. Muchas gracias Pedro

  • Pingback: Cómo mejorar la velocidad de carga de una página web()