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

Configurar en el archivo .htaccess de un servidor Apache, los parámetros Expires y Cache-Control para hacer cacheables las páginas y lograr que carguen con más velocidad y rapidez. Reducir y minimizar las peticiones HTTP. Elevar el rendimiento de un sitio web y reducir el ancho de banda necesario.

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.
Esto permite 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 informarle al navegador del cliente, el tiempo que puede ser cacheado un componente o elemento de la página solicitada.

Agregando solo unas líneas en el archivo de configuración del servidor, puedes hacer que las páginas de tu sitio web carguen un 40% más rápido en el navegador de tus lectores.

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 HTTP o headers, permisos necesarios, etc.
Uno de los datos que devuelve el servidor, es el tiempo de duración que podrán tener 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.

Ventajas de evitar las peticiones HTTP innecesarias

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:

• Se reduce el tiempo de carga de la página web, al reducir la cantidad de peticiones HTTP necesarias.
• Se reduce por lo tanto el tamaño de las peticiones trayendo consigo el consumo de menos ancho de banda y el incremento del rendimiento general.

¿Cómo conocer la configuración actual de mi servidor?

Puede comprobarse facilmente el tiempo que permanece en la cache del navegador, los elementos de una página determinada, para eso haz lo siguiente:

En el navegador Google Chrome introduce en la barra de direcciones:
chrome://view-http-cache/http://norfipc.com/
Sustituye "http://norfipc.com" por la dirección URL de la página solicitada.

Chrome mostrará los encabezados HTTP y entre ellos el valor de "Cache-Control" y de "Expires", si así están configurados en el servidor web que aloja dicha página.
En el navegador Google Chrome también puede usar las herramientas de desarrolladores, que devuelve toda la información necesaria.

Como usar la consola de Chrome para ver los encabezados HTTP

Hazlo de la siguiente forma:

• Da un clic en la esquina superior derecha del navegador y escoge: Herramientas -> Herramientas para desarrolladores.
• Un clic en la pestaña "Network"
• Recarga la página (F5)
• En la lista de archivos escoge la página principal, en este ejemplo: index.html
• Abre la pestaña "Headers" para ver los encabezados.
Se muestra "Request Headers" (encabezados enviados por el navegador) y "Response Headers" (respuestas del servidor web)

En la siguiente imagen que es una captura de pantalla, solo mostramos las respuestas, puede verse los valores de Cache-Control y de Expires que usamos en nuestro sitio.

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.

---

¿Cómo 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.

1- En el archivo httpd.conf, principal herramienta de configuración del servidor, solo el administrador tiene el acceso y los permisos para modificarlo.
2- El archivo .htaccess, archivo individual de cada subdominio en el que se pueden establecer muchos de los parámetros aplicables en este caso solo a los archivos donde se encuentre.
Es el método más práctico y sencillo y el único que podemos usar si alojamos nuestro sitio en un servidor de terceros.

¿Qué es el archivo .htaccess en Apache, 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:

FileETag none

Es necesario esperar por el reinicio del servidor para que los cambios tomen efecto.

---

¿Cómo 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:

◄ Gtmetrix
◄ Page Speed de Google en tu navegador web.
◄ Page Speed Online.

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