PHP: .htaccess y memoria caché

Esta semana vamos a seguir con nuestro ciclo de tutoriales centrados en el .htaccess. Esta potente herramienta que se comporta como el panel de administración de nuestro servidor PHP.

En el anterior post comentaba que lo siguiente que veríamos sería un tutorial sobre cómo crear un usuario y una contraseña para entrar en diferentes sitios de nuestra web tan solo usando el .htaccess pero como ya fueron varios mensajes los que nos han enviado sobre cómo usar este archivo para optimizar la velocidad de nuestras páginas webs, he decidido seguir con un tutorial sobre los usos del .htaccess para cachear elementos de la página para que rinda más y mejore su optimización de carga.

Vamos a ello

  ExpiresActive on

  # Por defecto 1 mes de caché
  ExpiresDefault                          "access plus 1 month"  # los 

Como se puede observar claramente, estamos introduciendo los parámetros necesarios que regula la velocidad con la que el navegador debe actualizar la caché de su memoria. Nosotros, como ejemplo, ponemos 1 mes por defecto, por lo que cada vez que incorporemos un parámetro sin especificar el tiempo que queremos cachearlo, el sistema tomará esta opción por defecto, un mes.

# Para no cachear algo en concreto, basta con darle 0 segundos al acceso
  ExpiresByType text/html                 "access plus 0 seconds"

En esta línea lo que queremos evitar es que el HTML sea cacheado, ya que es contraproducente a la hora del correcto desarrollo de la web. En general, lo mejor que podemos cachear son archivos de gran tamaño (con respecto al código, que casi no ocupa) como las imágenes, archivos css, javascript, etc.

incorporemos un parámetro sin especificar el tiempo que queremos cachearlo, el sistema tomará esta opción por defecto, un mes.

# Es importante tener cacheados los feeds de la web porque, en general, suelen usarse mucho desde el móvil.
  ExpiresByType application/rss+xml       "access plus 1 hour"
  ExpiresByType application/atom+xml      "access plus 1 hour"

Una hora para actualizar los archivos para el feed es suficiente, así, por ejemplo, si tenemos una lista de noticias que pretendemos mostrar con un feed como rss o atom, lo mejor es hacer este proceso para que cada vez que el usuario entre en una noticia desde el feed y vuelva a la lista no tenga que volver a descargarse el xml entero de las noticias.

 # El Favicon no es que nos produzca mucho retardo, pero es bueno tenerlo optimizado como todos los elementos que se puedan optimizar en nuestra web.
  ExpiresByType image/x-icon              "access plus 1 week"

# Imágenes, vídeo, audio: 1 mes
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"

Y le llega el momento importante de nuestro tutorial. Comenzamos a cachear los elementos que realmente ralentizan una página web si no está debidamente optimizada.

Los elementos que cacheamos en este fragmento son los archivos multimedia que suelen rondar por las webs de todo desarrollador: los diferentes formatos de imágenes, los vídeos, etc.

Con un mes es suficiente, ya que siempre se podrá aumentar o disminuir el tiempo de cacheo a medida que vayan cambiando las necesidades del desarrollador.

 # Fuentes web: 1 mes
  ExpiresByType application/x-font-ttf    "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

Ahora es el turno de las fuentes web de la página. Muchos programadores no tienen en cuenta sus cargas, pero es preferible que estén cacheadas.

 # CSS y JavaScript: 1 año. 

  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"

Si estás seguro de que tu web no va a requerir de más cambios de diseño o funcionalidades de Javascript, es preferible tener cacheados estos archivos ya que son los que más tardan en hacerlo al principio de la carga de la web.

Por último, simplemente recuerda que cada vez que cacheas un archivo, lo mejor es dejarlo tal y como está, por eso, cada vez que hagas un cambio en un archivo js o css que ya están cacheados, mejor será cambiarle el nombre y referirlo debidamente en la parte de la página donde cargabas los archivos viejos. Si intentas hacer el cambio directamente de ese archivo, no se ejecutará puede que se creen conflictos dentro de la web que puedes tardar en detectar.