Almacenamiento en caché de páginas del sitio usando .htaccess - Caché

imprimir · Время на чтение: 9мин · por · Publicada · Actualizado

reproducirEscuchar artículo

Almacenamiento en caché de archivos y páginas estáticas.

Almacenamiento en caché de páginas del sitio con .htaccess. Una etapa igualmente importante de optimización técnica, como habilitando la compresión gzip o minificación de CSS. Habilitar las páginas y los archivos de caché le permitirá aumentar significativamente la velocidad del sitio. Y también a veces reducir la carga en el servidor. Gracias a simples manipulaciones, su sitio comenzará a volar.

En este artículo, hablaremos sobre todos los aspectos de este tema. Cuál es la importancia del caché para el sitio y su aplicación. Describiré ejemplos que puede aplicar en la práctica. Además, habrá una breve reseña de algunos complementos de caché bastante buenos para WordPress.

¿Qué es un caché de sitio? ¿Cómo afecta el almacenamiento en caché a un sitio?

En términos simples, el almacenamiento en caché - esto es guardar información sobre el sitio del usuario en el navegador. Por lo tanto, se reduce la carga principal en el servidor. No será necesario cargar una parte importante del sitio, ya que el navegador del usuario cargará la parte guardada. Este es un método extremadamente efectivo para acelerar la carga del sitio.

Cache o caché o Cache es un portapapeles intermedio con acceso rápido. Retener y contener información que se solicita con frecuencia. El acceso a los datos en caché es más rápido que desde fuentes de memoria más lentas. Pero hay un límite de memoria. En lenguaje sencillo, Cache es una memoria corta.

Al mismo tiempo, el almacenamiento en caché no daña al usuario. Pero mejora la visualización de su proyecto en su navegador. ¡Como sucedió esto! Cuando el usuario visita el sitio. Su carga es un poco más lenta de lo que debería ser. Esto se debe al hecho de que el navegador en este momento guarda alguna copia del sitio. En mayor medida esto se aplica a:

  1. a logotipos;
  2. pequeñas imágenes;
  3. archivos css;
  4. Estructura general de la página.

Así, parte del sitio está constantemente en la memoria (caché) del navegador del usuario. Debido a esto, al recargar el sitio, el visitante obtiene la mayor velocidad de respuesta posible. El navegador en este momento descarga algunos de los elementos de su memoria. Y el sitio, no hay necesidad de volver a transmitir una gran cantidad de información.

Cuando el sitio tiene el caché habilitado y configurado. Una cierta parte se guardará durante el período requerido en el caché local del navegador del visitante. Qué páginas web se cargarán mucho más rápido en visitas repetidas.

Cómo habilitar y configurar el almacenamiento en caché del sitio

No es nada difícil hacer esto. Continuaremos trabajando con el archivo htaccess, que establece las reglas para el servidor. Cómo trabajar con él, lo describí en muchos artículos. Así que iré directo al grano. De acuerdo con el estándar, el almacenamiento en caché se establece para los archivos necesarios y durante un cierto período de tiempo. Después de la expiración del tiempo asignado para almacenar el archivo, su versión actual se descargará nuevamente del servidor. Para esto necesitas:

  • Cree una construcción de tipo FilesMatch. En él, especificamos las extensiones de archivo necesarias para el almacenamiento en caché.
  • A continuación, especificamos el encabezado Cache-Control con la variable max-age. Aquí Cache-Control es el encabezado de respuesta del servidor. Max-age es una variable que especifica el tiempo de almacenamiento del archivo en segundos.

Una lista típica de extensiones que se utilizan en la construcción de FilesMatch:

(ico|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)

Los archivos que no desea almacenar en caché no necesitan incluirse en la lista de la construcción FilesMatch.

Ejemplo de código Conjunto de encabezado Cache-Control

Control de caché #

# 30 días

Conjunto de encabezados Cache-Control "max-age=2592000, public"

# 30 días

Conjunto de encabezados Cache-Control "max-age=2592000, public"

# 2 días

Conjunto de encabezado Cache-Control “max-age=172800, public, must-revalidate”

Valor -#- comentario! Como puede ver, los comentarios indican los términos por los cuales se guardarán los archivos. También hay una opción para deshabilitar el caché forzado. Esta opción es adecuada para archivos dinámicos. Más relacionado con guiones y escenarios varios.

Un ejemplo de la construcción "FilesMatch" que deshabilita el almacenamiento en caché forzado


Cabecera no establecida Cache-Control

Como puedes ver, no hay plazos. Por lo tanto, estas extensiones de archivo no se almacenarán en caché. En este diseño, puede agregar sus extensiones de archivo.

También hay otra forma de administrar el caché, que utilizan muchos complementos en WordPrees. En este método, usaremos el módulo mod_expires. Este módulo tiene la capacidad de controlar los encabezados de respuesta HTTP en el lado del servidor. Aquí puede configurar el tiempo principal para almacenar datos en el caché.

Tiene varias configuraciones para la duración del almacenamiento de datos:

  1. por tiempo de acceso del cliente;
  2. o por la última modificación del fichero;
  3. configuracion de hora;

Ejemplo de código de caché simple

# Caduca Encabezados - 2678400s = 31 días

Caduca Activo el
ExpiresDefault "acceso más 1 segundo"
ExpiresByType text/html “acceso más 7200 segundos”
ExpiresByType image/gif “acceso más 2678400 segundos”
ExpiresByType image/jpeg “acceso más 2678400 segundos”
ExpiresByType image/png “acceso más 2678400 segundos”
ExpiresByType text/css "acceso más 518400 segundos"
ExpiresByType texto/javascript "acceso más 2678400 segundos"
Aplicación ExpiresByType/x-javascript "acceso más 2678400 segundos"

Un caso de uso más serio para Cache

Caduca Activo el
ExpiresByType texto/css A31536000
ExpiresByType texto/componente x A31536000
ExpiresByType aplicación/x-javascript A31536000
ExpiresByType aplicación/javascript A31536000
ExpiresByType texto/javascript A31536000
ExpiresByType texto/x-js A31536000
ExpiresByType texto/html A3600
ExpiresByType texto/texto enriquecido A3600
ExpiresByType imagen/svg+xml A3600
ExpiresByType texto/sin formato A3600
ExpiresByType texto/xsd A3600
ExpiresByType texto/xsl A3600
ExpiresByType texto/xml A3600
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType aplicación/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType aplicación/msword A31536000
ExpiresByType application/vnd.ms-fontobject A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType imagen/gif A31536000
Aplicación ExpiresByType/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType imagen/jpeg A31536000
ExpiresByType image/webp A31536000
Aplicación ExpiresByType/json A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
Aplicación ExpiresByType/x-font-otf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
Aplicación ExpiresByType/vnd.oasis.opendocument.database A31536000
Aplicación ExpiresByType/vnd.oasis.opendocument.chart A31536000
Aplicación ExpiresByType/vnd.oasis.opendocument.formula A31536000
Aplicación ExpiresByType/vnd.oasis.opendocument.graphics A31536000
Aplicación ExpiresByType/vnd.oasis.opendocument.presentation A31536000
Aplicación ExpiresByType/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType solicitud/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType imagen/svg+xml A31536000
Aplicación ExpiresByType/x-shockwave-flash A31536000
Aplicación ExpiresByType/x-tar A31536000
ExpiresByType imagen/tiff A31536000
ExpiresByType application/x-font-ttf A31536000
ExpiresByType application/vnd.ms-opentype A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType aplicación/fuente-woff A31536000
Aplicación ExpiresByType/font-woff2 A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType aplicación/zip A31536000

Como podemos ver, aquí se ven afectadas una gran cantidad de extensiones. Con la misma vida útil.

Almacenamiento en caché en el navegador del lado del usuario durante 3 a 7 días o durante un año

Aquí, la mayor parte de las extensiones de archivo se guardarán durante un año. En mayor medida, esto es útil para las imágenes, ya que creo que pocas personas las cambian. Así, se irán cargando en el navegador del visitante durante el año.

Almacenamiento en caché del navegador del lado del usuario #

Caduca Activo el
ExpiresDefault "acceso 7 días"
Aplicación ExpiresByType/javascript “acceso más 1 año”
ExpiresByType text/javascript “acceso más 1 año”
ExpiresByType text/css “acceso más 1 año”
ExpiresByType text/html “acceso más 7 días”
ExpiresByType text/x-javascript "acceso 1 año"
ExpiresByType image/gif “acceso más 1 año”
ExpiresByType image/jpeg “acceso más 1 año”
ExpiresByType image/png “acceso más 1 año”
ExpiresByType image/jpg “acceso más 1 año”
ExpiresByType image/x-icon "acceso 1 año"
Aplicación ExpiresByType/x-shockwave-flash “acceso 1 año”
ExpiresByType js "acceso 3 días"

Almacenamiento en caché de contenido (Flash, CSS, JS, HTML, XML) e imágenes

En este ejemplo, solo estamos usando el caché para ciertos archivos. Y por un período más corto.

Caduca Activo el
Caché de imagen #
ExpiresByType image/x-icon “acceso más 2592000 segundos”
ExpiresByType image/jpeg “acceso más 2592000 segundos”
ExpiresByType image/png “acceso más 2592000 segundos”
ExpiresByType image/gif “acceso más 2592000 segundos”
# Caché de contenido (Flash, CSS, JS, HTML, XML)
Aplicación ExpiresByType/x-shockwave-flash “acceso más 2592000 segundos”
ExpiresByType text/css “acceso más 604800 segundos”
ExpiresByType texto/javascript "acceso más 2592000 segundos"
Aplicación ExpiresByType/javascript “acceso más 2592000 segundos”
Aplicación ExpiresByType/x-javascript "acceso más 2592000 segundos"
ExpiresByType text/html “acceso más 600 segundos”
ExpiresByType application/xhtml+xml “acceso más 600 segundos”

Configurar el almacenamiento en caché de páginas y archivos del sitio no es algo tan difícil. Lo principal es elegir la estrategia correcta. Todos los ejemplos anteriores, puede utilizar a su discreción. Pruebe las estrategias y elija la opción de código correcta. A continuación, hablaré sobre algunos complementos de caché para WordPress.

Configurar el almacenamiento en caché con complementos de WordPress

Para aquellos que usan el CMS, WordPress tiene una gran variedad de complementos de caché. Todos ellos tienen una solución completa y configuración automática. No debería haber ningún problema particular al usar dichos complementos. Después de instalar dicho complemento, solo necesita aplicar la configuración que necesita. El complemento los guardará automáticamente en el archivo htaccess.

Caché más rápido de WP

WP Fastest Cache Complemento de caché premium más rápido.

Un complemento de almacenamiento en caché popular y bastante potente para WP. Tiene una amplia variedad de configuraciones, incluyendo optimización HTML, CSS y Js. Incluso un usuario novato puede resolverlo.

Supercaché de WP

WP Super Cache es un complemento para acelerar la carga de páginas.

Complemento muy popular! Excelente funcionalidad y configuraciones convenientes. Capaz de almacenar en caché una gran cantidad de objetos diferentes. Configurar el complemento es muy simple.

Caché total W3

El mejor complemento de almacenamiento en caché de WordPress es W3 Total Cache.

Potente solución para grandes sitios. El complemento más popular entre su tipo. Hay una gran variedad de configuraciones y funcionalidades. Debe configurarlo con cuidado, ya que puede causar errores críticos. Existe la posibilidad de conflictos con otros complementos o temas. Pero en términos de funcionalidad, un plugin muy bueno y potente.

Estos son los complementos de caché principales y más populares que yo mismo usé. Puedes elegir cualquiera dependiendo de tus preferencias.

Finalmente

En este artículo, traté de cubrir el tema del almacenamiento en caché tanto como sea posible. Especificando ejemplos que se pueden utilizar en función de sus características. Configurar el almacenamiento en caché con esta guía funcionará como un reloj para usted. Espero que este artículo sea relevante durante mucho tiempo. Les agradezco su atención, pero no me despido. Nos vemos en los próximos artículos.

Gracias por leer Nicola Top

¿Qué tan útil es la publicación?

¡Haz clic en el emoticón para calificar!

Puntuación media 4.9 / 5. Número de valoraciones: 25

Aún no hay valoraciones. Califique primero.

También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

quince − 15 =