¿Cómo mejorar la proporción de caché de tu sitio web?

¿Qué es la proporción de caché?

Cuando se trata de la velocidad de carga de tu sitio web, uno de los factores más críticos a considerar es cuántas de tus solicitudes se sirven desde la caché. Las solicitudes almacenadas en caché son mucho más rápidas que las que dependen de la potencia del servidor para ser procesadas, lo que significa que cuantas más solicitudes se sirven desde la caché, más rápido carga tu sitio web.

Los servidores web de SiteGround tienen un sistema de almacenamiento en caché integrado (NGINX Direct Delivery, servicio de caché dinámica) y siempre comprueban si el contenido solicitado está presente en los grupos de caché antes de enviarlo por proxy más adelante. Si el contenido se encuentra en la caché, entonces se sirve inmediatamente al cliente (evitando el procesamiento de PHP, consultas MySQL, etc.). Esto se llama cache HIT. Por otro lado, si el contenido no se encuentra en la caché, el servidor web tiene que buscarlo desde el servidor de origen y almacenarlo en caché para futuras solicitudes. Esto se llama cache MISS.

La proporción de caché representa el porcentaje de solicitudes que se sirven desde la caché sin necesidad de acceder al servidor de origen. Una proporción de caché más alta indica que se están atendiendo más solicitudes desde la caché, lo que reduce la carga en el servidor de origen y mejora el rendimiento general del sitio web.

Por ejemplo, si hay 100 líneas en el archivo de registro de acceso de tu sitio web y 80 de ellas contienen “HIT” y 20 de ellas contienen “MISS”, la proporción de caché sería del 80%.

Al medir el índice de “HIT”, puedes determinar qué tan efectiva es tu estrategia de almacenamiento en caché y si necesitas ajustar alguna configuración en tu sitio web para mejorar su rendimiento. Una alta proporción de caché indica que tu estrategia de almacenamiento en caché está funcionando bien y que estás aprovechando efectivamente las características de velocidad del sitio proporcionadas por SiteGround. Una tasa de caché baja, por otro lado, sugiere que tu estrategia de almacenamiento en caché puede no ser efectiva y es posible que debas considerar implementar otras técnicas de optimización.

Para los sitios suscritos a nuestros informes de rendimiento mensuales, medimos el índice de caché e informamos a nuestro cliente. Nuestra recomendación es esforzarse por obtener un resultado superior al 60%.

¿Cómo aumentar la proporción de caché de tu sitio web?

1. Estate atento a los encabezados personalizados de Cache-Control configurados en tus archivos .htaccess

Tener reglas .htaccess para ajustar los encabezados de respuesta es una de las formas más comunes de controlar la eficiencia del almacenamiento en caché. Lamentablemente, hemos notado una gran cantidad de encabezados genéricos de Cache-Control incrustados en los archivos .htaccess que no son específicos de la ubicación y, como resultado, afectan la proporción de cache HIT y el rendimiento de manera negativa.

Ejemplo:

Header set Cache-Control "no-cache,no-store"

Regla #1: Asegúrate de que el encabezado Cache-Control configurado en .htaccess se usa solo para páginas, ubicaciones o archivos en tu sitio web que contienen datos confidenciales del cliente y no deben almacenarse en caché – no para todo el sitio. Ejemplo:

# add Cache-Control header to single contact.php file
<Files contact.php>
Header set Cache-Control "no-cache,no-store"
</Files>

2. Inspecciona con precisión las directivas Expires y max-age

Otro enfoque bien conocido para controlar la eficiencia de los servidores de almacenamiento en caché es incluir encabezados Expires con una fecha y hora que no sean futuras, o un encabezado Cache-Control con la directiva max-age establecida en cero o un valor numérico negativo.

Ejemplo #1:

# Expires headers (for better cache control)
<IfModule mod_expires.c>
...
# Your document html
ExpiresByType text/html                     "access plus 0 seconds"
...
</IfModule>

Esta definición en archivos .htaccess significa que la caché debe caducar inmediatamente para el tipo de contenido text/html (la mayoría de las páginas web se entregan en este tipo) y la solicitud debe ser atendida por el backend, no por la caché.

Ejemplo #2:

Header set Cache-Control "max-age=0"

Tener un encabezado Cache-Control con max-age=0 o -1 (u otro número negativo) significa de nuevo que la solicitud debe ser procesada por el backend y no por la caché.

Regla #2: Asegúrate de que los encabezados Expires y max-age cache-control se usen solo para los tipos de contenido y ubicaciones de tu sitio web que no deben almacenarse en la caché.

3. Evita el uso del encabezado Set-Cookie

Otro enfoque para omitir el almacenamiento en caché es tener un encabezado Set-Cookie. Comúnmente, el encabezado Set-Cookie se usa con la variable “PHPSESID”, una cookie de sesión que se usa para identificar la sesión de un usuario en un sitio web. Sin embargo, generar y usar una cookie de sesión en páginas que no contienen información sensible podría ser una indicación de un plugin o tema no muy bien diseñado. Como resultado, el encabezado existente Set-Cookie evita que las respuestas se almacenen en caché y, en su lugar, cada vez se realiza una ejecución de PHP.

<?php
session_start();

Cuando este es el caso, notarás la siguiente línea en los encabezados de respuesta HTTP de tu sitio web:

set-cookie: PHPSESSID=5eff6b1bc4f7ab78758e112be82f7b9e

Regla #3: En caso de que tu sitio web utilice el encabezado Set-Cookie y el más común “PHPSESID”, asegúrate de que se genere solo para identificar la sesión de un usuario en un sitio web y no en todas las páginas y publicaciones.

4. Evita usar el encabezado Vary: User-Agent

Esta configuración no deshabilita el almacenamiento en caché por completo como se describe en los ejemplos anteriores, pero reduce mucho la proporción de caché. De hecho, el problema es que comúnmente los visitantes de tu sitio web usarán diferentes User-Agent (diferentes navegadores, con diferentes versiones), lo que prácticamente hará que cada primera visita no se almacene en caché. También es un caso común cuando un plugin de WP agrega un encabezado de este tipo. En estos casos, las respuestas se almacenan en caché, pero hay diferentes entradas de caché para los diferentes agentes de usuario, lo que hace que la caché sea drásticamente menos efectiva.

Aquí tienes un ejemplo de encabezado Vary en el .htaccess:

Header set Vary User-Agent

Los encabezados HTTP también se pueden administrar a través de las aplicaciones de la cuenta de hosting. El encabezado Vary, por ejemplo, se puede configurar a través de PHP de la siguiente manera:

?php 
header("Vary: User-Agent");

o en un sitio web de WordPress (desde el archivo functions.php)

function add_vary_header ($headers)
{
$headers['Vary'] = 'User-Agent';
Return $headers;
}
add_filter('wp_headers', 'add_vary_header');

Regla #4: Intenta evitar el uso del encabezado User-Agent Vary si no es absolutamente necesario o requerido por los desarrolladores del tema. Esto te ayudará a mejorar mucho la proporción de almacenamiento en caché y el rendimiento de tu sitio.

Si deseas que nuestros ingenieros de soporte investiguen si la proporción de caché actual de tu sitio se puede mejorar, puedes enviarnos un ticket a través del Centro de ayuda > Otro > Optimización de proporción de caché.