NorfiPC

Como hacer más rápida la carga de una página web en un servidor Apache

Tweet

Unos de los métodos más prácticos, sencillos y recomendados para lograr que una página web o blog, cargue más rápidamente, es configurar los parámetros necesarios en el servidor web donde está alojada, que permiten hacer cacheables las paginas, o sea mantener en la memoria del navegador los elementos que la componen.
Todos los navegadores poseen una cache (memoria) para reducir el tamaño y la cantidad de peticiones HTTP necesarias. Los servidores pueden usar los parámetros Expires o Cache-Control Header en las respuestas para decirle al navegador del cliente el tiempo que puede ser cacheado un componente o elemento.

Pasos al solicitar una página web a un servidor con el navegador web

Que significa todo esto, al usuario hacer la solicitud al navegador de cargar determinada página web, primeramente se establece una conexión preliminar entre este y el servidor, en la cual se intercambian varios datos como los encabezados o headers, permisos necesarios, etc. Uno de los datos que devuelve el servidor, es el tiempo de duración que tendrán los diferentes archivos en la cache o memoria del navegador, de forma predeterminada este tiempo es corto para asegurar la frescura de lo que se muestra al usuario.

Peticiones HTTP innecesarias realizadas

Un ejemplo, al cargarse una página llamada imágenes-lindas.htm en un sitio web al que nunca se ha accedido con anterioridad, el navegador necesita de un tiempo determinado para mostrarla completamente, este tiempo está en relación con la cantidad de elementos que la componen y la velocidad de la conexión.
Existe gran cantidad de páginas en la red que contienen multitud de elementos, ya sea imágenes, archivos flash, scripts, hojas de estilo css, etc. por lo que es necesario varias peticiones de forma simultánea.
Accedes a la misma página imágenes-lindas.htm, dos días después y el navegador requerirá casi el mismo tiempo, como si fuera la primera vez ya que tendrá que cargar todos los elementos de nuevo.

Evitar las peticiones HTTP innecesarias, ventajas

Estableciendo los parámetros de Expires o de Cache-Control, para que permanezcan más tiempo en la cache, elementos que no se modifican frecuentemente como imágenes, archivos flash y que además requieren de varias peticiones cada vez que se acceda a dicha página, hará que en futuros accesos los elementos citados de cargarán de la cache, por lo que la velocidad de carga casi será instantánea.
Este método ofrece dos ventajas:

Parámetros que definen el tiempo en la cache del navegador de los elementos de las páginas

Los parámetros que definen en un servidor que utilice Apache, el tiempo en que el navegador puede usar los recursos de la cache son: Expires y Cache-Control: max-age.
Especifican el tiempo de frescura (freshness lifetime) que es el tiempo durante el cual el navegador puede usar la cache sin comprobar si existe una nueva versión disponible en el servidor.
Se ha hablado de las ventajas que son indudables, la desventaja es que un cliente puede acceder a una página web que ha sido modificada recientemente y no percatarse ni darse cuenta de los cambios efectuados, ya que el navegador solo mostrará lo que posee guardado en la cache, a no ser que se refresque el navegador mediante el botón correspondiente o la tecla F5.
De los dos parámetros: Expires y Cache-Control: max-age solo es posible utilizar uno de los dos, no se puede emplear los dos simultáneamente.

Como configurar los encabezados Expires y Cache-Control en Apache

En los servidores Apache se pueden configurar los parámetros de su funcionamiento de dos formas.

Que es el archivo .htaccess, como configurarlo

Es solo un sencillo archivo de texto plano que para los usuarios de Windows luce algo diferente, no posee nombre, solo la extensión de archivo .htaccess.
Si tratas de crear un archivo así en Windows lógicamente recibirás un mensaje de error, pero es posible copiar o descargar una a nuestro equipo y modificarlo.
Descarga más abajo un archivo .htaccess de ejemplo.
Puedes emplear un archivo .htaccess en cualquier carpeta o subcarpeta del servidor para especificar los parámetros de ese directorio.
Si lo usas en un servidor local, tienes que asegurarte que en el archivo httpd.conf, esté especificado: "AllowOverride All" en los permisos del directorio raiz donde se va a usar, si no es así no tendrá efecto, por ejemplo:

<Directory "C:/servidor/ejemplo"> 
AllowOverride None
</Directory> 

---

Cómo usar los encabezados Cache-Control para hacer las páginas cacheables

Solo es necesario copiar y pegar el siguiente código en un archivo .htaccess:

# 1 MES
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|js|xml|txt|css)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
 
# 1 SEMANA
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=604800, public, must-revalidate"
</FilesMatch>

El carácter # significa que la línea es un comentario.
En este ejemplo se emplean dos opciones diferentes para un mes y una semana respectivamente.
La primera opción establece para todos los archivos de imágenes, flash y otros archivos auxiliares, un mes la duración de la cache. Todos los archivos que posean las extensiones:
ico|pdf|flv|jpg|jpeg|png|gif|swf|js|xml|txt|css. Puedes agregar cualquier otro a la lista.
La segunda opción se usa solo para los archivos html, htm y php que son los que con más frecuencia se modifican en mi sitio, en este caso especifíca la duración en cache de una semana.
Si deseas especificar para esos u otros tipos de archivo un tiempo superior o inferior, utiliza las siguientes opciones, solo introduce las extensiones de los archivos necesarias.

# 1 AÑO
<FilesMatch "\.()$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
 
# 1 DIA
<FilesMatch "\.()$">
Header set Cache-Control "max-age=86400, must-revalidate"
</FilesMatch>

Descarga un archivo .htaccess de ejemplo y que te servirá de plantilla.

Descargar archivo .htaccess

---

Cómo usar el encabezado Expires para hacer las páginas cacheables

Google recomienda el uso del encabezado Expires en vez de Cache-Control por ser soportado de forma más amplia.
Expires es posible emplearlo en Apache mediante dos directivas: ExpiresDefault y ExpiresByType, el primero define de forma general como debe el navegador cachear los recursos y con el segundo se puede definir, de acuerdo al tipo de archivo.
En ambos casos el tiempo a perdurar el documento en la cache del navegador, se puede establecer con el parámetro "access" y a continuación un intervalo.
Se pueden utilizar los siguientes intervalos:
years, months, weeks, days, hours, minutes, seconds
El uso de ExpiresDefault es sencillo, solo es necesario especificar en el archivo .htaccess dos líneas.

Ejemplo para que perdure por un año (Intervalo máximo para no violar las normas del RFC):

ExpiresActive on
ExpiresDefault "access plus 1 year"

Ejemplo para que perdure por seis meses:

ExpiresActive on
ExpiresDefault "access plus 6 months"

Utilizar ExpiresByType sería similar, pero especificando cada tipo de archivo, por ejemplo:

ExpiresActive on
ExpiresByType image/jpg "access plus 6 months"
ExpiresByType text/css "access plus 2 months"
ExpiresByType text/javascript "access plus 2 weeks"

La solución ideal puede ser combinando ambas directivas.
El siguiente ejemplo (recomendado) es para usarlo en un sitio web, en el que se modifique frecuentemente el contenido de las páginas (solo el texto):

ExpiresActive on
ExpiresDefault "access plus 6 months"
ExpiresByType text/html "access plus 2 weeks"

Otras formas de usar la directiva Expires, utilizando el intervalo en segundos.

ExpiresActive On
ExpiresDefault A0 
# 1 AÑO
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A9030400
</FilesMatch>

# 1 MES
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
ExpiresDefault A2592000
</FilesMatch>
 
# 1 SEMANA
<FilesMatch "\.(txt|xml|js|css|htm|html|php)$">
ExpiresDefault A604800
</FilesMatch>

El tiempo se expresa en AXXX, donde XXX son los segundos que posee el intervalo.

---

Precauciones al hacer cacheables las páginas web

Pero ¡Cuidado!, si se hacen todos los elementos de una página cacheables, se corre el riesgo de que el usuario al solicitarla no la cargue del servidor, vea solo la copia en la cache del navegador, esto trae como consecuencia que no existirá acceso físico a tu sitio y no contará como una visita. Siempre es necesario para evitar lo anterior, que algunos de los elementos de la página tengan un tiempo de expiración corto.
No es nada difícil, para eso puede insertarse un snippet de Facebook o el +1 de Google, expiran en minutos.
Si no sabes como hacerlo lee la siguiente página:
Como insertar los botones Me Gusta y plusone +1 en las páginas web

Desactivar el parámetro ETags

Otro parámetro que de paso podemos configurar en el archivo .htaccess adecuadamente es: ETags.
Para verificar si un archivo en un servidor es el mismo que el que se encuentra en la cache del navegador se usan dos parámetros: Last-Modified y ETags, no se pueden usar simultáneamente, si no de forma alternativa de la misma forma que Expires y Cache-Control.
Para conocer si tu servidor web utiliza Last-Modified o ETags accede a Gtmetrix y haz una simple prueba a cualquier página de tu sitio.
Entity tags (ETags) es un mecanismo creado para determinar cuando el contenido en la cache en el navegador coincide con el que se encuentra en el servidor web, esto ocasiona conflictos en los casos de una misma información almacenada en diferentes servidores, con el objetivo de asegurar una efectiva dispersión geográfica, ya que no coinciden exactamente, en estos casos el navegador perderá tiempo haciendo consecutivas peticiones con el objetivo de comprobar y validar las fechas.
Si no necesitas en lo absoluto utilizar las posibilidades de validación que ETags provee, es recomendado desactivarlo por completo, para eso solo es necesario incluir en el archivo .htaccess la siguiente línea:
Es necesario esperar por el reinicio del servidor para que los cambios tomen efecto.

Como comprobar el resultado de los cambios realizados

Para comprobar los efectos en el rendimiento de un sitio web donde se efectúen los cambios, utiliza cualquiera de los servicios para comprobar la velocidad de carga de cualquier página que se encuentre alojada en dicho sitio o subdominio donde se utilice y modifique el archivo .htaccess antes y despues.
Puedes utilizar:
Todos los cambios anteriores también se pueden efectuar en un servidor local previamente.

---

Páginas donde encontrar mas información online

Todas las recomendaciones anteriores son aconsejadas y han sido tomadas de las siguientes páginas, en las que puedes encontrar más información útil para mejorar e incrementar la velocidad en tu sitio web.

Best Practices for Speeding Up Your Web Site.
http://developer.yahoo.com/performance/rules.html

Speed Up Sites with htaccess Caching.
http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html

Optimize caching
http://code.google.com/speed/page-speed/docs/caching.html

---

Paginas relacionadas en este sitio