Cómo almacenar en caché un sitio web para su máximo rendimiento: una guía para principiantes para el almacenamiento en caché web

Aprender a almacenar en caché un sitio web es esencial. El almacenamiento en caché es importante en el rendimiento del sitio web, la experiencia del usuario y el SEO. Hay varias formas de implementarlo, y aprenderá todo sobre esto en esta publicación.

A continuación, discutimos qué es el almacenamiento en caché, cómo funciona, sus beneficios y los diferentes tipos que existen. Después de eso, le mostramos tres métodos diferentes que puede usar para habilitar el almacenamiento en caché de su sitio web y un estudio de caso para señalar su impacto en el rendimiento. Finalmente, cubriremos rápidamente cómo y por qué borrar el caché de un sitio web.

¿Qué es el almacenamiento en caché?

En el nivel más básico, el almacenamiento en caché significa almacenar copias de archivos en un caché, una ubicación de almacenamiento temporal, para ponerlos a disposición de un acceso rápido. Es un método utilizado en muchas áreas de software y tecnología, incluidos navegadores, programas y sistemas operativos.

Dado que los sitios web consisten en diferentes tipos de archivos, también son perfectamente adecuados para almacenar en caché. Puede almacenar los archivos HTML, CSS, JavaScript e Imagen de su sitio para permitir que los navegadores accedan a ellos más rápido y muestren su sitio web más rápido.

Algunos tipos de contenido son más adecuados para el almacenamiento en caché que otros. Por ejemplo, el contenido estático, que significa elementos del sitio que no cambian a menudo, es perfecto para ello. El logotipo de su sitio web es un buen ejemplo porque es poco probable que lo cambie a menudo.

Por otro lado, el contenido que cambia con frecuencia es una historia diferente. Si bien también puede almacenarlo en caché, debe establecer reglas para garantizar que los visitantes no vean una versión obsoleta. Más sobre eso pronto.

Los beneficios del almacenamiento en caché de los sitios web

La razón principal para almacenar en caché un sitio web es mejorar el rendimiento. Si un navegador puede usar más rápidamente los archivos que necesita para mostrar un sitio web, los visitantes ven el sitio más rápido.

Eso lleva a una mejor experiencia de usuario, lo que hace que los visitantes sean más propensos a permanecer en su sitio por más tiempo, toman las medidas deseadas como comprar un producto o regresar más tarde. Todas las buenas noticias para su tasa de conversión y resultado final.

La velocidad del sitio también es algo que les importa a los motores de búsqueda. Google lo ha estado utilizando como factor de clasificación durante más de una década. Además, sus métricas centrales Web vital miden específicamente qué tan rápido aparece una página para los usuarios y qué tan rápido responde a la entrada del usuario.

Además, el almacenamiento en caché quita el estrés de su servidor. Reduce la cantidad de archivos que los visitantes repetidos deben descargar desde su sitio y cuántas solicitudes tiene que tratar su servidor al mismo tiempo. Además, el almacenamiento en caché incluso le permite externalizar parte del trabajo a servidores externos.

Esto es especialmente importante cuando su sitio web se vuelve más popular. El almacenamiento en caché ayuda a evitar que su servidor se sienta abrumado. Además, ahorra ancho de banda y costos si está en un plan de alojamiento limitado.

¿Cuáles son los tipos de almacenamiento en caché?

Es posible almacenar en caché un sitio web en diferentes niveles del proceso de carga. Hay dos tipos principales: almacenamiento en caché del servidor y del lado del cliente.

El almacenamiento en caché del lado del cliente se relaciona con cualquier cosa que suceda en la computadora o en el navegador (es decir, el "cliente") de sus visitantes. El almacenamiento en caché del servidor, por otro lado, ocurre en la máquina que contiene los archivos de su sitio web.

Navegador/almacenamiento en caché del cliente

Cuando los navegadores muestran un sitio web, tienen que descargar muchos datos. Para acortar el tiempo de carga de una visita repetida, almacenan gran parte del contenido en el disco duro del visitante, donde es más rápido acceder.

Un ejemplo de eso es el almacenamiento en caché de DNS. Significa guardar localmente la dirección IP asociada con un sitio web para que el navegador no tenga que buscarla la próxima vez que desee acceder al sitio.

Además, los navegadores siempre verifican su caché primero para ver si los activos requeridos, como las imágenes y otros archivos, ya están allí. De esa manera, no necesitan contactar tanto al servidor.

Almacenamiento en caché del servidor

Hay diferentes formas de almacenamiento en caché del servidor. Principalmente difieren en el tipo y la cantidad de datos guardados en el servidor:

• Golpe de almacenamiento de página: esto significa guardar una versión HTML ya compilada de una página para que no sea necesario crear desde cero para cada visitante.

• Gente de almacenamiento en caché: aquí, el servidor guarda las solicitudes de reutilización de la base de datos, como las búsquedas de productos en una tienda en línea.

• Al almacenamiento en caché del fragmento: describe el almacenamiento de elementos específicos del sitio web, típicamente recursos estáticos como imágenes.

• COCHING CDN: en este caso, las copias de los datos de su sitio web se encuentran en servidores adicionales en diferentes ubicaciones. Permite a los visitantes descargarlo más rápidamente desde el servidor más cercano a ellos.

Cómo funciona el almacenamiento en caché

Eche un vistazo a la siguiente imagen:

De lo anterior, ya es fácil entender cómo funciona el almacenamiento en caché:

1. El usuario escribe en una URL y el navegador web verifica si tiene los datos de la página solicitados en el caché.

2. Si lo hace, envía un mensaje al servidor que declara qué versiones de archivo ha guardado.

3. El servidor verifica si hay versiones más nuevas y, si lo hay, envía los recursos actualizados. Si se han solicitado antes, el servidor puede transmitirlos desde su propio caché sin procesarlos desde cero.

4. El navegador web muestra la página web solicitada utilizando los datos existentes de su caché y cualquier datos enviados desde el servidor.

Ahora es el momento de hablar sobre la tecnología que hace posible el almacenamiento en caché un sitio web: los encabezados en caché.

Comprensión de encabezados de solicitud y respuesta

Los encabezados de solicitud y respuesta son pequeñas piezas de texto intercambiadas por navegadores y servidores. Incluyen información importante e instrucciones para los datos transmitidos entre ellos.

Una cosa que hacen es configurar el comportamiento de almacenamiento en caché y existen varios encabezados para este propósito. Incluyen control de caché, expiras, último modificado y Etag. Los encabezados de almacenamiento en caché básicamente funcionan de dos maneras:

1. Declarar si un archivo de sitio web debe almacenarse en caché en absoluto, por cuánto tiempo y por quién (navegadores y/o servidores).

2. Marque la edad y la "versión" de un archivo, por lo que los navegadores solo vuelven a descargarlo si hay una edición más nueva en el servidor.

Todo esto ayuda a reducir la cantidad de archivos y la cantidad de datos que deben transmitirse para cargar un sitio web, lo que ayuda a acelerar el proceso. Y si bien los encabezados en caché pueden parecer un poco técnicos, es importante tener en cuenta, especialmente si decide configurar el almacenamiento en caché en su servidor a mano.

Cómo almacenar en caché un sitio web: 3 opciones a considerar

Después de toda esta teoría, analicemos cómo almacenar en caché un sitio web en términos prácticos.

1. Habilite el almacenamiento en caché manualmente

Configurar el almacenamiento en caché a mano es el enfoque más complicado porque requiere que configure manualmente los encabezados de almacenamiento en caché en su servidor.

El primer paso es verificar el status quo ya que su proveedor de alojamiento o el software de su sitio web ya podría haber hecho parte del trabajo por usted. Para eso, abra su sitio en un navegador, acceda a las herramientas de desarrollador (CTRL/CMD+Shift+I en la mayoría de los navegadores), Tand Hen Go a la pestaña Network (es posible que tenga que recargar la página para ver algo aquí).

Haga clic en cualquier recurso para ver sus encabezados de solicitud y respuesta.

Después de eso, debe definir su estrategia de almacenamiento en caché. Esto se verá diferente para cada caso de uso. Por ejemplo, un sitio web de noticias necesita intervalos de almacenamiento en caché más cortos que un sitio de folletos. El contenido de los sitios de noticias cambia por minuto, mientras que los folletos permanecen en gran medida igual.

En general, desea intentar equilibrar la duración del caché y la frescura de los datos:

• Activos estáticos de caché más tiempo, por ejemplo, archivos multimedia y contenido descargable. Por ejemplo, es probable que pueda almacenar en caché su logotipo y archivos de fuentes durante la época máxima de un año.

• Use Cache-Control: SIN-SHORE para recursos que nunca deben almacenarse en caché.

• Incluya un validador como el último modificado o ETAG para garantizar la frescura de los recursos sin sacrificar los beneficios del almacenamiento en caché. Algunos cachés web también requieren un encabezado de control de edad y un validador para trabajar.

El siguiente paso es implementar su configuración elegida en su servidor. Cómo hacerlo depende del software en el que se ejecute su servidor. Aquí hay instrucciones para las configuraciones más comunes:

• nginx

• apache

Alternativamente, su proveedor de alojamiento también puede ofrecer almacenamiento en caché y la capacidad de activarlo desde su panel de alojamiento.

2. Use un CDN

Otra forma de almacenar en caché de su sitio web es registrarse en un CDN. Para eso, primero debe elegir un proveedor de CDN. Usaremos CloudFlare como ejemplo aquí porque es uno de los servicios más populares.

Comience por registrarse en su CDN de elección. Vaya a su sitio web y cree una cuenta.

Elija un plan que se adapte a sus necesidades y proporcione la dirección de su sitio web.

Después de eso, debe actualizar su configuración DNS. El proveedor de CDN escaneará sus registros actuales y luego le mostrará sus servidores de nombres.

Con eso en la mano, inicie sesión en su Registrador de Dominio (por ejemplo, Namecheap, GoDaddy o Google Dominios), encuentre la sección Configuración de DNS y reemplace a los servidores de nombres existentes con los que le dieron su CDN.

Guarde sus modificaciones, luego espere. Los cambios de DNS pueden tardar algunas horas en propagarse por completo. Una vez completado, su sitio web se enrutará con éxito a través del CDN. El último paso es asegurarse de que el CDN haya habilitado el almacenamiento en caché.

3. Use un complemento de almacenamiento en caché

Finalmente, si está utilizando un sitio web de WordPress, puede usar un complemento de rendimiento como WP Rocket. Se encarga de todo lo relacionado con el almacenamiento en caché automáticamente, para que no tenga que lidiar con las piezas técnicas. Además, todo lo que necesita hacer es instalar y activar el complemento.

Después de hacer esto, el almacenamiento en caché está inmediatamente activo en su sitio, incluido un caché dedicado para dispositivos móviles. Bajo reglas avanzadas , puede ajustar aún más su caché.

Entre otras opciones, puede determinar la vida útil del almacenamiento en caché y definir páginas, cookies y agentes de usuarios para los que no desea usar el almacenamiento en caché. Encontrará más información en la documentación.

Además del almacenamiento en caché, WP Rocket ofrece muchas más características para acelerar su sitio de WordPress, que incluye:

• Carga perezosa para imágenes y videos

• Diferir recursos de bloqueo de renderizado

• Caché de precarga, enlaces, archivos externos y fuentes

• Fuentes de Google autohostantes

• Optimización de la base de datos

• Capacidad para conectarse fácilmente a un CDN, incluido RocketCDN, es decir, WP Rocket Own CDN.

Además, WP Rocket implementa muchas mejoras de rendimiento adicionales en el fondo. Entre ellos se encuentran la compresión de GZIP, minificando los archivos CSS y JavaScript, y optimizando imágenes sobre el pliegue para mejorar la pintura contenta más grande.

El impacto del rendimiento de almacenar en caché de un sitio web: un estudio de caso

Para examinar el efecto del almacenamiento en caché en la mejora de la velocidad del sitio web en la vida real, configuramos un sitio de prueba con un contenido ficticio y lo ejecutamos a través de PageSpeed ​​Insights antes y después de activar WP Rocket.

Estos son los resultados de los dispositivos móviles sin almacenamiento en caché:

Ahora veamos qué sucede después de que se active el almacenamiento en caché:

Si bien los efectos no son enormes, son notables. Especialmente la mejora del valor del índice de velocidad en tres segundos no es nada para burlarse.

Como hemos discutido a lo largo del artículo, el almacenamiento en caché tiene el mayor impacto en los visitantes repetidos. Dado que PageSpeed ​​Insights a propósito no aprovecha mucho de lo que el almacenamiento en caché tiene para ofrecer, no es de extrañar que los efectos no sean más grandes. Debería ser más notable para los visitantes repetidos de su sitio web.

Si se pregunta, a continuación es lo que sucede cuando enciende algunas mejoras de velocidad más en el cohete WP, como eliminar CSS no utilizada, diferir a JavaScript, una carga perezosa para imágenes y precarga . Todo lo que se necesita es verificar algunas cajas.

Cómo borrar el caché del sitio web

Borrar el caché de su sitio web puede ser necesario para la resolución de problemas, agregar nuevas funciones y garantizar que el contenido más reciente sea visible para los visitantes. Naturalmente, dado que el almacenamiento en caché ocurre en diferentes niveles, también hay diferentes formas de vaciarlo.

Eliminar caché del navegador

El método exacto para vaciar el caché del navegador depende de qué navegador esté utilizando, pero todos tienen opciones en su configuración. En Chrome, lo encuentra bajo privacidad y seguridad> Eliminar datos de navegación .

Borrar caché del servidor

Si el almacenamiento en caché se ha implementado en su servidor, su proveedor de alojamiento probablemente tenga la opción de borrarlo.

Vacío el caché de su CDN

La purga de su caché CDN ocurre naturalmente a través de su proveedor de CDN. Por ejemplo, en CloudFlare, la opción está disponible en caché> Configuración> Purge Cache .

Purgar caché en su sitio web

Si está utilizando un complemento para almacenar en caché su sitio web, generalmente tiene un botón en algún lugar que le permite borrar el caché. WP Rocket purga el caché del sitio web automáticamente en los momentos apropiados, como cuando cambia su configuración, publica nuevo contenido, modifica su sitio web o cuando se agota la vida útil de la memoria caché.

Si desea hacerlo manualmente, puede encontrar esta opción directamente en su tablero en Configuración> Rocket WP en su back -end de WordPress.

También tiene la capacidad de borrar el caché para las páginas individuales, ya sea dentro del editor de WordPress o del menú de páginas o publicaciones , pasando sobre las entradas allí.

¿Cómo se almacena en caché un sitio web? Ahora sabes

El almacenamiento en caché es una de las formas más fundamentales de hacer que su sitio web sea más rápido. Es un método simple para reducir la cantidad de datos que deben transmitirse para los visitantes para ver su sitio web.

El almacenamiento en caché está disponible en diferentes niveles del proceso de carga y puede dirigirse a diferentes elementos del sitio web, aunque los principios siguen siendo los mismos.

Use WP Rocket para implementar el almacenamiento en caché en su sitio de WordPress automáticamente y aproveche docenas de otras características de rendimiento y mejores prácticas para hacer que su sitio web sea más rápido de inmediato. El complemento viene con una garantía de devolución de dinero de 14 días, por lo que puede probarlo completamente libre de riesgos.