Cómo arreglar el almacenamiento en caché del navegador de apalancamiento en WordPress en 2021

Cómo arreglar el almacenamiento en caché del navegador de apalancamiento en WordPress

Introducción

¿Tu sitio web se carga lentamente? ¿Busca una solución efectiva para resolver la advertencia de almacenamiento en caché del navegador de apalancamiento en WordPress ? La velocidad de la página es un aspecto esencial de la experiencia del usuario. En esta publicación, compartiré puntos básicos para avanzar sobre cómo arreglar el almacenamiento en caché del navegador de apalancamiento en WordPress. Entonces, si también enfrenta este problema, debe leer la publicación completa para una mejor comprensión.

El tiempo que se tarda en cargar la página solicitada en el navegador del usuario influye mucho en el hecho de que el propio usuario permanezca en su sitio, por ejemplo, para concretar una venta. El tiempo de carga de la página depende de varios factores: la memoria caché del navegador es uno de ellos.

Primero exploraremos qué es el almacenamiento en caché del navegador Leverage y cómo puede ayudar a acelerar su sitio web. Entonces, veremos cómo evaluar si un sitio de WordPress necesita almacenamiento en caché del navegador. Finalmente, veremos varias formas de resolver la advertencia de almacenamiento en caché del navegador de apalancamiento en WordPress, con y sin el uso de un complemento.

¿Qué es el almacenamiento en caché del navegador de apalancamiento?

El caché es un espacio de almacenamiento temporal. Cuando un visitante solicita una página en su sitio web, el servidor recopila la información necesaria de la base de datos, la organiza en un documento HTML y se la proporciona al navegador. El navegador analiza este documento y descarga todos los recursos relevantes para ver la página.

El almacenamiento en caché es el proceso de almacenamiento de una parte de la carga útil de la página en un caché para acelerar la carga de páginas en el futuro. El caché puede estar presente en el servidor o dispositivo del visitante.

En la memoria caché del servidor, puede almacenar las consultas de la base de datos y la respuesta HTML estática para la página solicitada.

El aprovechamiento del almacenamiento en caché del navegador es el proceso de utilización de almacenamiento temporal en el dispositivo del visitante para almacenar recursos como hojas de estilo, secuencias de comandos e imágenes durante un período específico.

Las visitas posteriores a una página hacen que el navegador descargue los mismos recursos repetidamente, cada vez que el usuario solicita la página. Dado que estos recursos estáticos constituyen una cantidad significativa de carga útil para un sitio de WordPress, el almacenamiento en caché del navegador reduce los tiempos de carga de la página.

¿Se requiere el almacenamiento en caché del navegador?

Una revisión del sitio web sobre la distribución del tamaño de los recursos de su carga útil generalmente revela qué tan grandes son sus recursos y cuántas solicitudes debe enviar un navegador para descargarlos antes de mostrar su página. Si nota que una parte importante de su página web está compuesta por archivos estáticos, debería considerar almacenar en caché su navegador para mejorar la velocidad de la página.

Una forma más natural de determinar si se necesita el almacenamiento en caché del navegador es usar una herramienta de prueba de velocidad de página como GTmetrix. Simplemente ingrese la URL de su sitio web para comenzar una prueba detallada. Los resultados de la prueba le mostrarán cómo acelerar su sitio web. Como puede ver, una advertencia común en la sección de resultados es el aprovechamiento del almacenamiento en caché del navegador.

Alternativamente, puede usar Think with Google, una herramienta de prueba de velocidad de página para evaluar su sitio web en dispositivos móviles. Una recomendación clave de esta herramienta es aprovechar el almacenamiento en caché del navegador para su sitio web.

PageSpeed ​​​​Insights, otra herramienta de Google para probar la velocidad de la página de su sitio web, puede sugerirle que cree una política de caché efectiva para mejorar la velocidad de la página. El almacenamiento en caché del navegador es una parte importante de una política de caché efectiva.

Resuelva la advertencia de almacenamiento en caché del navegador de apalancamiento en WordPress sin complementos

Si no desea utilizar un complemento, puede cambiar la configuración del servidor web para corregir el almacenamiento en caché del navegador. En este caso, el servidor web le indicará al navegador del visitante que guarde recursos específicos en el caché del navegador. El navegador almacenará estos archivos localmente durante un período determinado y los utilizará en visitas posteriores a la página.

La configuración del servidor web para indicar a los navegadores de los visitantes que inicien el almacenamiento en caché varía de un servidor a otro. En esta publicación, le mostraremos cómo habilitar el almacenamiento en caché del navegador en los dos servidores web más populares: Apache y Nginx.

Puede corregir el apalancamiento del almacenamiento en caché del navegador siguiendo estos pasos:

1. Adición de encabezados de caducidad: estos encabezados le indican al navegador cuándo solicitar una nueva versión de un recurso del servidor.
2. Cambiar encabezados de verificación de caché: puede usar estos encabezados para establecer los criterios de caché.
3. La configuración de encabezados de etiquetas de entidad (ETags): es posible identificar si un recurso en el servidor ha cambiado en comparación con el archivo local.

Corrija el almacenamiento en caché del navegador de apalancamiento en Apache

1. Crea o edita el archivo .htaccess

En un servidor Apache, puede configurar todos los parámetros necesarios en el archivo .htaccess. Este archivo le permite configurar los ajustes de Apache manualmente. Es un archivo de texto simple que almacena parámetros de Apache y establece permisos y configuraciones para el directorio en el que reside.

Leer más: Lista de verificación de SEO en la página: 10 consejos prácticos de optimización para clasificar mejor

Si coloca un archivo .htaccess en el directorio principal de su sitio web, sus reglas se aplicarán a todas las páginas de su sitio. También puede colocar otro archivo .htaccess en uno de sus subdirectorios para establecer permisos específicos solo para esa ubicación. Tenga en cuenta que los archivos .htaccess de nivel inferior anulan la configuración de los archivos .htaccess en los directorios raíz.

Si tiene acceso de terminal al servidor, puede iniciar sesión de forma remota para crear un archivo .htaccess en la ubicación adecuada (para las reglas de almacenamiento en caché del navegador a nivel de sitio, esta debería ser la carpeta raíz).

Alternativamente, si está utilizando el administrador de archivos cPanel, muévase a la ubicación requerida y cree un archivo .htaccess .

Si ya tiene un archivo .htaccess , simplemente puede agregar las nuevas reglas de almacenamiento en caché del navegador.

2. Agregar encabezados de caducidad

La primera configuración en el archivo .htaccess es habilitar la función de encabezados de vencimiento. Agregue la siguiente línea al archivo:

ExpiresActive On

Después de eso, puede establecer el período para diferentes archivos de texto utilizando la sintaxis que se muestra a continuación:

ExpiresByType texto / CSS "acceso 1 mes"

ExpiresByType texto / HTML "acceso 1 mes"

Para establecer un tiempo de caducidad para las imágenes, use la imagen en lugar de la barra oblicua de texto y la extensión de la imagen en su lugar.

ExpiresByType imagen / jpeg "acceso 1 mes"

ExpiresByType imagen / svg "acceso 1 mes"

Para establecer la fecha límite de la solicitud, use la aplicación y especifique la extensión del archivo.

Aplicación ExpiresByType / pdf “acceso 1 mes”

Para todos los demás archivos que no están cubiertos por ninguna configuración específica, use la definición ExpiresDefault:

ExpiresDefault "acceso 1 mes".

3. Definir una política de caché

A continuación, debe definir los criterios de caché utilizando la configuración de verificación de caché.

Hay tres partes principales de una política de caché:

• cómo se almacena en caché un recurso
• la ubicación del almacenamiento en caché
• el tiempo antes de que caduque el recurso

Un caché público indica al navegador que los recursos se pueden almacenar en caché en cualquier lugar. Por el contrario, un caché privado permite el almacenamiento solo en el dispositivo cliente.

Por ejemplo, la página de perfil de un usuario que inició sesión solo debe almacenarse en caché en el dispositivo cliente.

Por el contrario, la página de inicio de un blog también se puede almacenar en caché en un CDN. Puede configurar una política de caché pública agregando la siguiente regla:

<IfModule mod_headers.c>

Conjunto de encabezado de control de caché público

</SiMódulo>

También puede especificar diferentes criterios para diferentes tipos de archivos agregando los siguientes filtros al módulo de encabezado:

<ifModule mod_headers.c>

<filesMatch “\. (ico | jpeg | jpg | png) $”>

Conjunto de encabezado de control de caché público

</ Partido de archivos>

<filesMatch “\. (php) $”>

Conjunto de encabezado de control de caché privado

</ Partido de archivos>

</SiMódulo>

El código anterior especifica que el navegador puede almacenar archivos de imagen en cualquier lugar, pero los archivos PHP deben almacenarse en el dispositivo cliente.

También puede agregar una configuración de Caducidad a cada regla de coincidencia de archivos. El tiempo de caducidad debe definirse en segundos. Al establecerlo en cero, el navegador debe solicitar el archivo cada vez que se carga la página:

Conjunto de encabezado Caduca 0

4. Deshabilitar etiquetas de entidad en Apache

Finalmente, es necesario deshabilitar las Etiquetas de Entidad usando el siguiente código:

FileETag Ninguno

Deshabilitar ETag requiere que el navegador confíe en los criterios de caché y evite volver a validar archivos cada vez que se carga una página.

Guarde el archivo .htaccess y reinicie Apache para que los cambios surtan efecto.

Resuelva el almacenamiento en caché del navegador de apalancamiento en Nginx

En Nginx, puede encontrar el archivo de configuración nginx.conf en la ubicación / etc / nginx / site-enabled / default.

Puede agregar un encabezado Expires a tipos de archivos específicos usando el siguiente código:

ubicación ~ * \. (ico | jpeg | jpg | png) $ {

expira 30d;

}

También puede agregar un encabezado Cache-Control al mismo bloque de código:

ubicación ~ * \. (ico | jpeg | jpg | png) $ {

expira 30d;

add_header Cache-Control “público”;

}

Guarde el archivo de configuración y reinicie Nginx para que los cambios surtan efecto.

Resuelva el apalancamiento de la memoria caché del navegador con un complemento

Si está utilizando un complemento de almacenamiento en caché para WordPress, es posible que ya tenga soporte para el almacenamiento en caché del navegador.

Ahora veamos cómo resolver el apalancamiento del almacenamiento en caché del navegador con algunos de los complementos de caché más famosos.

1. Cohete WP

WP Rocket es uno de los complementos más rápidos y recomendados para WordPress que puede administrar todas las optimizaciones de velocidad con solo unos pocos clics. WP Rocket no solo le permite resolver el apalancamiento del almacenamiento en caché del navegador, sino que también le permitirá optimizar su sitio utilizando varias técnicas, como:

• compresión de archivos estáticos (GZip) : para reducir el tamaño total de los datos (lea la publicación completa sobre cómo habilitar la compresión GZip en WordPress)
• habilite la memoria caché de archivos (incluida la carga previa de la memoria caché): para ejercer menos presión sobre el servidor (y recuperar una copia escaneada previamente de cada página)
• Optimización de fuentes de Google : para asegurarse de que las fuentes más masivas se carguen rápidamente,
• Lazy loading : para que las imágenes se carguen solo cuando el usuario se desplaza hacia abajo a la sección de una página donde se requiere la imagen
• Minificación y combinación : reducción del tamaño y combinación de recursos de texto para entregarlos más rápidamente al usuario final
• Posponer la carga de JS , para que la página aparezca rápidamente en lugar de esperar a que se descarguen todos los recursos.
• Integre y habilite una red CDN , para que las imágenes más pesadas se entreguen más rápido
• Precarga de DNS : para reducir el tiempo que lleva resolver el origen del contenido de terceros

Todo esto puede parecer incomprensible para cualquiera que no esté directamente involucrado en la optimización de un sitio web. Sin embargo, en realidad, estas son todas las medidas que deberá tomar si desea acelerar WordPress.

Recomendamos encarecidamente leer nuestra revisión de WP Rocket,

2. Caché LiteSpeed

LiteSpeed ​​​​Cache es un complemento de almacenamiento en caché que le permite resolver el apalancamiento del almacenamiento en caché del navegador simplemente habilitando la función. Instale y active el complemento y vaya a la configuración de caché. Cambie a la pestaña Navegador y permita la opción Caché del navegador .

También es posible establecer el tiempo de caducidad. Tenga en cuenta, sin embargo, que esta configuración se aplica a todos los archivos almacenados en caché en el sitio web.

3. Caché más rápido de WP

WP Fastest Cache es otro complemento de caché de WordPress con opciones de personalización simples. La versión gratuita le permite habilitar el almacenamiento en caché del navegador. Vaya a la página de configuración y seleccione la casilla de verificación para el almacenamiento en caché del navegador.

4. Caché total W3

W3 Total Cache es otro complemento de caché de navegador ampliamente utilizado. Le permite personalizar una amplia gama de opciones de almacenamiento en caché. Una vez instalado, vaya a la sección Navegador de caché en la página de configuración.

Este complemento le permite establecer permisos para varias categorías de archivos, como imágenes, scripts y hojas de estilo. Para cada grupo, puede configurar encabezados de Expires, expiraciones de vida y ETags.

Preguntas frecuentes

Conclusión

En esta publicación, exploramos la importancia de la velocidad de la página y por qué debería arreglar el apalancamiento del almacenamiento en caché del navegador en WordPress. Hemos visto herramientas de prueba de velocidad que indican si su sitio de WordPress necesita almacenamiento en caché del navegador. A continuación, discutimos cómo configurar los distintos servidores web para habilitar el almacenamiento en caché del navegador sin usar un complemento. Finalmente, analizamos tres complementos populares que le permiten corregir el almacenamiento en caché del navegador de apalancamiento en WordPress.