Cómo configurar manualmente el almacenamiento en caché del navegador de WordPress

Una introducción al almacenamiento en caché del navegador

Idealmente, cuando alguien visite su sitio web, su navegador guardará parte de su contenido localmente para que no tenga que volver a cargarlo en visitas posteriores. Esta práctica se conoce como «almacenamiento en caché del navegador» y he aquí por qué es una buena idea implementarla en su sitio web:

• Disminuye los tiempos de carga.  Cuantos menos recursos tenga que cargar un usuario, más rápido debería mostrarse su sitio.
• Tasas de rebote potencialmente más bajas.  Existe una correlación directa entre los tiempos de carga y las tasas de rebote . Cuanto más alto sea el primero, mayor será la posibilidad de que los visitantes abandonen su sitio web.
• Reduce la cantidad de trabajo que tiene que hacer su servidor.  Dado que los visitantes repetidos no necesitan cargar contenido de su servidor, no tiene que trabajar tan duro para mantenerse al día con el tráfico.

Es importante comprender que, en la mayoría de los casos, no desea que los navegadores almacenen en caché todos sus sitios web. Muchos sitios ahora incluyen una gran cantidad de contenido interactivo que se actualiza constantemente. Esto significa que si los usuarios almacenan en caché páginas completas, es posible que se pierdan cambios en ellas.

Dado esto, debe ser exigente con el contenido que le dice a los navegadores que almacenen en caché. Por ejemplo, las imágenes, los logotipos y las hojas de estilo en cascada (CSS) no cambian con frecuencia. Esto significa que simplemente puede decirle a los navegadores que los almacenen en caché y especificar un período de tiempo. Idealmente, la configuración de almacenamiento en caché de su sitio web debe hacer distinciones entre los tipos de archivos que reciben (o no reciben) actualizaciones periódicas. De esta manera, los usuarios no tendrán que vaciar sus cachés manualmente para ver los cambios que haya realizado en su sitio.

Cómo verificar si su sitio web de WordPress aprovecha correctamente el almacenamiento en caché del navegador

Cuando hablamos de aprovechar el almacenamiento en caché de WordPress, nos referimos a configurar su sitio web para que los navegadores sepan qué contenido necesitan almacenar localmente y por cuánto tiempo. La forma más fácil de averiguar si un sitio aprovecha correctamente el almacenamiento en caché del navegador es utilizar una herramienta como Google PageSpeed ​​Insights , que analiza esta y otras configuraciones. Para comenzar, ingrese la URL de su sitio web y haga clic en el  botón Analizar  :

PageSpeed ​​Insights calificará la optimización de su sitio web tanto en dispositivos móviles como de escritorio. Para cada ‘versión’ de su sitio, obtendrá una puntuación individual de 0 a 100, junto con sugerencias sobre cómo mejorarlo. Uno de los factores clave que PageSpeed ​​Insights tiene en cuenta cuando calcula su puntaje es si su sitio web aprovecha el almacenamiento en caché del navegador:

Si configura su sitio web de WordPress correctamente, no verá el mensaje anterior y debería obtener una puntuación decente de PageSpeed ​​Insights. Tenga en cuenta que Divi está optimizado en varios aspectos para brindarle un puntaje decente de PageSpeed ​​Insights listo para usar. Sin embargo, hay muchas maneras de mejorar el rendimiento de su sitio web y aprender sobre ellas es una forma fantástica de invertir su tiempo.

Cómo configurar manualmente el almacenamiento en caché del navegador de WordPress (en 2 pasos)

En el pasado, hemos hablado sobre los complementos de almacenamiento en caché y cuáles son las mejores opciones. Este tipo de herramientas son excelentes si no quiere perder el tiempo con la configuración de su sitio de WordPress. Sin embargo, si no le importa agregar algunas líneas de códigos a uno de sus archivos principales , puede obtener un nivel de control mucho mayor sobre la configuración de almacenamiento en caché de su navegador. Antes de continuar, debe tener una copia de seguridad reciente de su sitio web , ¡por si acaso!

Paso #1: Acceda a su sitio web a través de FTP

En la siguiente sección, deberá acceder a su  archivo .htaccess  y editarlo. La mejor manera de hacer esto es usar el Protocolo de transferencia de archivos (FTP) , a través de un cliente dedicado. Somos parciales con FileZilla ya que incluye muchas funciones y es bastante simple de usar.

Para comenzar, instale el cliente y ejecútelo. Verá cuatro campos vacíos en la parte superior de la pantalla, que dicen  Host ,  Nombre de usuario ,  Contraseña y  Puerto :

Necesitará un conjunto específico de credenciales de FTP para iniciar sesión en su sitio web utilizando este protocolo. En la mayoría de los casos, debería haberlos recibido por correo electrónico cuando se registró con su proveedor de alojamiento. Sin embargo, también debería poder encontrarlos en su tablero de alojamiento o a través de cPanel .

Una vez que tenga sus credenciales, ingréselas y haga clic en el  botón Quickconnect  . FileZilla establecerá una conexión a su sitio web, y una o varias carpetas deberían aparecer en el lado inferior derecho de su pantalla. Uno de ellos debería ser su  carpeta raíz  de WordPress (también llamada www , public_html o el nombre de su sitio web), donde residen todos sus archivos:

Una vez que abra el directorio, continúe con el paso número dos.

Paso #2: edite su  archivo .htaccess 

.htaccess  es un archivo central de WordPress que le indica a su servidor cómo debe servir archivos y páginas. Por ejemplo, si está utilizando bonitos enlaces permanentes ,  .htaccess  incluirá instrucciones sobre cómo manejarlos. También puede configurar el archivo para bloquear el acceso a páginas específicas para direcciones IP particulares y mucho más.

En este caso, usaremos  .htaccess  para decirle a su servidor qué archivos almacenar en caché. Para hacerlo, busque el  archivo  .htaccess  dentro de su directorio raíz  . Haga clic derecho sobre él y elija la  opción Ver/Editar  . Esto abrirá el archivo usando su editor de texto local, lo que le permitirá realizar cambios en él:

Antes de agregar cualquier código nuevo a su  archivo .htaccess  , desplácese hacia abajo hasta que encuentre la línea que dice  # END WordPress . En la mayoría de los casos (incluido este), desea agregar un nuevo código al archivo antes de esa línea. Aquí hay un ejemplo de una configuración simple de almacenamiento en caché del navegador que puede implementar de inmediato:

Si está ejecutando un blog de WordPress, por ejemplo, es probable que no realice cambios regulares en las imágenes de su publicación o en el logotipo de su sitio. En este caso, podemos almacenar esos archivos en el caché del navegador de su visitante durante mucho tiempo, digamos un año. En el código anterior, cubrimos todos los tipos de imágenes más populares de una sola vez. La primera mitad de cada línea indica el tipo de archivo con el que estamos tratando, y la segunda establece una fecha de caducidad para el mismo:

Por supuesto, no todo el contenido debe almacenarse en caché durante un año, por lo que podemos jugar con el valor. En este ejemplo, agregamos instrucciones para almacenar en caché archivos HTML, CSS y JavaScript:

Aquí, configuramos nuestro contenido HTML para que se actualice después de un mes desde la primera vez que los visitantes acceden a él, lo cual es un período de tiempo razonable. Los archivos CSS y JavaScript, por otro lado, tienden a variar más a menudo cuando usa temas complejos como Divi o varios complementos. Con eso en mente, establecemos las fechas de caducidad de su caché en una semana después del acceso.

A medida que implemente esas reglas usando su  archivo .htaccess  , tendrá una base sólida de almacenamiento en caché del navegador. Cubramos nuestras bases agregando instrucciones para otros tipos de archivos:

La línea que comienza con  ExpiresDefault  establece un tiempo de caché predeterminado de un mes para todos sus archivos. Sin embargo, puede anularlo agregando instrucciones de almacenamiento en caché para tipos de archivos particulares. El punto aquí es capturar los otros tipos de archivos que podrían no justificar reglas individuales, para aumentar aún más los tiempos de carga de su sitio web.

Ahora, recuerda guardar los cambios en tu  archivo .htaccess  de WordPress y cierra tu editor de texto. FileZilla te preguntará si deseas anular el  archivo .htaccess  en tu servidor con la nueva versión, a lo que debes responder: “Sí”. Ahora continúe y pruebe su sitio web usando PageSpeed ​​Insights una vez más: ¡la sugerencia de optimización del almacenamiento en caché del navegador debería desaparecer!

Conclusión

Habilitar un complemento de almacenamiento en caché de WordPress para su sitio web es fácil. Sin embargo, a menudo no le da control total sobre el tipo de contenido que almacena en las computadoras de sus usuarios, o por cuánto tiempo. El enfoque manual le permite personalizar su configuración de almacenamiento en caché para el contenido de su sitio web y no es difícil de implementar.

Todo lo que se necesita para configurar el almacenamiento en caché del navegador manualmente es hacer algunos cambios en su  archivo .htaccess  a través de FTP. Si no tiene miedo de un pequeño código, debería poder configurarlo rápidamente. Luego, puede probar su sitio web con Google PageSpeed ​​Insights para ver si aprovecha correctamente el almacenamiento en caché del navegador.

¿Tiene alguna pregunta sobre cómo configurar manualmente el almacenamiento en caché del navegador de WordPress? ¡Hablemos de ellos en la sección de comentarios a continuación!

Imagen en miniatura del artículo por Crystal Eye Studio / shutterstock.com.