Servir activos estáticos con una política de caché eficiente (3 métodos)

Cuando sirve activos estáticos con una política de caché eficiente, el navegador del usuario almacenará estos archivos localmente y se necesitará menos tiempo para cargar la página. Normalmente, tan pronto como se carga una página, se deben descargar todos los recursos de esa página, como HTML, CSS, JavaScript e imágenes.

El almacenamiento en caché del navegador permite que el navegador recupere activos estáticos como CSS, JavaScript e imágenes de su caché local. Como resultado, las páginas se cargan más rápidamente. El contenido en caché significa que las visitas posteriores a una página serán más rápidas que la primera visita de un usuario, pero no en la primera visita.

¿Qué es el caché?

Un caché es una capa de almacenamiento de datos de alta velocidad en informática que guarda una parte de los datos que a menudo son de naturaleza temporal para que las solicitudes posteriores de esos datos se puedan atender más rápido que acceder a la ubicación de almacenamiento principal de los datos. El almacenamiento en caché le permite reutilizar rápidamente los datos que se han recuperado o calculado previamente.

¿Cómo funciona realmente el almacenamiento en caché?

Los datos en un caché generalmente se guardan en hardware de acceso rápido como RAM (memoria de acceso aleatorio), pero también se pueden utilizar junto con un componente de software. El objetivo básico de un caché es acelerar la recuperación de datos eliminando la necesidad de contactar con la capa de almacenamiento más lenta que hay detrás.

A diferencia de las bases de datos, que almacenan datos completos y de larga duración, un caché suele almacenar una parte de los datos de forma transitoria.

Ventajas del almacenamiento en caché

Veamos algunas ventajas del almacenamiento en caché.

Mejore el rendimiento de su aplicación

Leer datos de un caché en memoria es increíblemente rápido porque la memoria es mucho más rápida que un disco (magnético o SSD) (submilisegundos). Este acceso a datos sustancialmente más rápido mejora el rendimiento general de la aplicación.

Se debe reducir la carga de backend

Al cambiar una parte de la carga de lectura de la base de datos back-end a la capa en memoria, el almacenamiento en caché reduce el estrés en su base de datos, lo que evita que sufra un rendimiento débil bajo una carga pesada o incluso que se bloquee bajo picos.

Los puntos de acceso en la base de datos deben eliminarse

Muchas aplicaciones tienden a recuperar un subconjunto de datos con más frecuencia que el resto. Como resultado, pueden ocurrir puntos críticos en la base de datos y es posible que deba sobreaprovisionar sus recursos en función de los requisitos de rendimiento para los datos utilizados con más frecuencia. Para los datos a los que se accede con frecuencia, una memoria caché en memoria reduce los requisitos de aprovisionamiento excesivo y ofrece un rendimiento rápido y predecible.

Reduzca el costo de su base de datos

Las operaciones de entrada/salida por segundo (IOPS) pueden realizarse mediante una sola instancia de caché, lo que le permite reemplazar varias instancias de bases de datos y reducir significativamente los costos. Eso es crucial si la base de datos principal cobra por la cantidad de datos. Podría haber una gran diferencia de precio bajo ciertas condiciones.

Rendimiento que se puede predecir

Lidiar con aumentos repentinos en la utilización de aplicaciones es un problema frecuente en los sistemas modernos. El aumento de la carga de la base de datos provoca tiempos de recuperación de datos más prolongados, lo que hace que el rendimiento general de la aplicación sea impredecible. Este problema se puede resolver mediante el uso de un caché en memoria de alto rendimiento.

Aumentar el número de personas que leen (IOPS)

Los sistemas en memoria tienen tasas de solicitud (IOPS) sustancialmente más altas que una base de datos comparable basada en disco, además de tener una latencia reducida. Cuando se utiliza como caché lateral distribuida, una sola instancia puede cumplir con cientos o incluso miles de solicitudes por segundo.

¿Qué es el almacenamiento en caché de activos?

El almacenamiento en caché es una noción sencilla. Cuando un navegador descarga un activo, utiliza la política del servidor para determinar si debe descargarlo nuevamente o no en visitas posteriores. Si el servidor no proporciona una política, el navegador se establece en forma predeterminada, lo que generalmente significa almacenar en caché los archivos para esa sesión.

¿Qué es el almacenamiento en caché de activos estáticos?

especifique cuánto tiempo el navegador debe retener temporalmente o almacenar en caché el recurso. Cualquier solicitud posterior de ese recurso se atiende desde la copia local del navegador en lugar de desde la red.

Cada vez que un visitante de su sitio obtiene una versión nueva de algo que aún no está almacenado en caché en el navegador o el servidor, está utilizando una política de caché ineficiente. Cuando, en realidad, puede estar sirviéndoles contenido almacenado en caché y listo para usar.

Lea también: Cómo reparar enlaces permanentes rotos en WordPress

¿Qué es una política de caché eficiente?

Si sus archivos estáticos no cambian (o tiene un mecanismo de prevención de caché aceptable), le sugerimos que establezca su política de caché en 6 meses o 1 año.

Elementos como archivos CSS/JS globales, logotipos, gráficos, etc. rara vez cambian en los sitios web terminados, por lo que 6 meses o un año es un vencimiento de caché justo para trabajar.

Por supuesto, si modifica con frecuencia los archivos estáticos anteriores, puede elegir un tiempo de caducidad de caché más corto siempre que sea superior a 3 meses.

Servir activos estáticos con una política de caché eficiente

Hay varias formas en que podemos servir archivos estáticos usando una política de caché eficiente, discutiremos 3 métodos

1. Usando el archivo .htaccess si está usando LiteSpeed ​​Enterprise o Apache
2. Uso de caché LiteSpeed
3. Uso del complemento W3 Total Cache

Servir activos estáticos usando el archivo .htaccess en Apache y LiteSpeed ​​Enterprise

Nota: si está utilizando OpenLiteSpeed ​​o NGINX, este método no funcionará.

Inicie sesión en su panel de WordPress

Haga clic en Complementos -> Agregar nuevo en el menú del lado izquierdo

Busque "Administrador de archivos". Instalar y activar el complemento

Haga clic en "Administrador de archivos" en el menú del lado izquierdo

En la carpeta public_html, haga clic derecho en .htaccess y haga clic en renombrar

Cambiar el nombre del archivo (.htaccess-error)

Haga clic en el icono "nuevo archivo" de la parte superior

Nombra el archivo ".htacess"

Pegue el siguiente código y guarde y cierre

 <IfModule mod_expires.c> ExpiresActive On # CSS, JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" # Fonts ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" # Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" # Video ExpiresByType video/webm "access plus 1 year" ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year" # Others ExpiresByType application/pdf "access plus 1 year" ExpiresByType image/vnd.microsoft.icon "access plus 1 year" </IfModule>

Servir activos estáticos usando LiteSpeed ​​Cache

Debe instalar y activar el complemento LiteSpeed ​​Cache, una vez instalado, siga la guía a continuación:

• Ve a tu Panel de WordPress

• Haga clic en LiteSpeed ​​Cache -> Cache en el menú del lado izquierdo

• Haga clic en la pestaña "Navegador" en la parte superior

• Active la opción "Caché del navegador"

• Haga clic en "Guardar cambios"

Servir activos estáticos usando W3 Total Cache

Primero instale y active el complemento W3 Total Cache y luego siga la guía a continuación.

• Ve a tu Panel de WordPress

• Haga clic en Rendimiento -> Caché del navegador en el menú del lado izquierdo

• Desplácese hacia abajo hasta "Medios y otros archivos". Cambie "Caduca la vida útil del encabezado" a al menos 15552000s (180 días).

• Haga clic en "Guardar todas las configuraciones"

Conclusión

Cuando proporciona activos estáticos con una estrategia de caché eficiente, el navegador del usuario guardará estos archivos localmente, reduciendo la cantidad de tiempo que tarda la página en cargarse. Todos los recursos de una página, como HTML, CSS, JavaScript e imágenes, deben descargarse tan pronto como se cargue.