Cómo habilitar el almacenamiento en caché del navegador en WordPress

Ofertas de WordPress


La velocidad de su sitio web juega un papel vital para proporcionar una experiencia de usuario óptima. (Nota: si está interesado en aprender cómo verificar la velocidad de su sitio, consulte nuestro artículo sobre el uso de GTmetrix.) Un sitio lento puede causar una interrupción de las ventas, una disminución de las conversiones y, a largo plazo, puede afectar seriamente tanto la satisfacción del cliente como el número general de visitantes.

En resumen: todo lo que puede hacer para reducir los tiempos de carga contará. A continuación, cubriremos almacenamiento en caché del navegador, incluyendo lo que es, lo que significa para WordPress y cómo puedes habilitarlo en tu sitio.

Empecemos…

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

Un sitio web consiste esencialmente en una serie de archivos que se unen para crear una serie de páginas web. Algunos de estos contendrán texto (como el cuerpo principal de una publicación de blog), algunos contendrán información de estilo para los elementos de la página (encabezado, pie de página, barra lateral, etc.), algunos serán imágenes, etc..

Ahora, cada vez que navega por un sitio web, es probable que observe muchos elementos comunes: todas las páginas tienen un estilo similar (todas comparten colores y elementos de diseño similares), el logotipo siempre es el mismo, los menús desplegables siempre están disponibles y similares. Entonces, si hay elementos comunes, ¿por qué descargarlos todos cada vez que alguien carga una nueva página? Una idea mucho mejor sería cargar tales elementos comunes una vez, almacenarlos dentro del navegador y luego simplemente reutilícelos según sea necesario – como cuando alguien va de una página a otra dentro del sitio, o cuando alguien vuelve a visitar el sitio en una fecha posterior.

Esta es la esencia del almacenamiento en caché del navegador. Esencialmente, el almacenamiento en caché del navegador analiza los archivos que ha definido como archivos que no cambian con mucha frecuencia (más sobre esto a continuación) y los descarga al navegador del visitante solo una vez. Una vez descargados en la memoria caché del navegador, estos archivos no se volverán a descargar. Esto significa que, en lugar de tener que descargarse varias veces, estarán listos para usar en cualquier momento, lo que reduce la carga en los servidores de su sitio Y, lo que es más importante, reduce significativamente el tiempo que lleva cargar las páginas posteriores.

Nota: cuando un nuevo visitante llega a su sitio, la velocidad a la que se carga la primera página que visita será realmente la misma si el almacenamiento en caché del navegador está habilitado o no, ya que, como nunca antes han visitado su sitio, su navegador puede ” Posiblemente no haya tenido la oportunidad de almacenar ninguno de los archivos de su sitio. Los beneficios del almacenamiento en caché del navegador, por lo tanto, solo se sentirán cuando un visitante cargue más de una página y / o vuelva a visitar su sitio web.

Cómo aprovechar el almacenamiento en caché del navegador en WordPress

Habilitar el almacenamiento en caché del navegador no es difícil, pero, dado que requiere editar un archivo de sitio un poco complicado (el archivo .htaccess de su sitio, requiere algunos conocimientos preliminares.

Nota: el almacenamiento en caché del navegador no es específico de WordPress, la forma de habilitarlo es la misma sin importar el sistema que use.

Hay esencialmente dos formas de hacerlo.

La manera súper fácil: hable con su anfitrión

Para habilitar el almacenamiento en caché del navegador, deberá editar, o tal vez incluso crear, un archivo llamado archivo .htaccess. Lea más. Un error tipográfico en este archivo podría hacer que todo su sitio web se vuelva temporalmente inaccesible, por lo que, si tienes alguna duda sobre qué hacer, puede ser mejor pregúntale a tu anfitrión para hacerlo por ti Solo para estar seguros. Si está utilizando una gran empresa de hosting, ¿necesita un mejor host ?, seguramente podrán configurarlo en unos minutos (si aún no lo han hecho).

Edición del archivo .htaccess por su cuenta

El archivo .htaccess puede ser un lugar aterrador; Es un ejemplo clásico de “con gran poder viene una gran responsabilidad”, que le permite acelerar su sitio, crear redirecciones y hacer cosas increíbles. Sin embargo, todo este poder tiene un precio: un error en este archivo probablemente hará que todo su sitio se caiga.

Arreglarlo es una cuestión de deshacer lo que ha agregado, pero, para un principiante, puede ser una experiencia desalentadora. Recomiendo experimentar en un sitio de prueba antes de ensuciarse las manos con un sitio importante en vivo.

Lo primero que necesitará es una forma de acceder a los archivos de su servidor. La forma más común de hacerlo es a través de FTP (protocolo de transferencia de archivos, lea más. El archivo puede ser un poco difícil de encontrar porque es un archivo de puntos, un archivo oculto en un sistema basado en Linux, ¿qué es un archivo de puntos? Los editores FTP tienen la opción ‘mostrar archivos ocultos’ que debería permitirle ver estos archivos. (Nota: si está utilizando una Mac, lea nuestro artículo sobre cómo descargar, editar y volver a cargar un archivo htaccess sin tener que cambiarlo). cualquiera de las configuraciones de su computadora.)

El archivo .htaccess debe estar en su carpeta principal de WordPress, la misma carpeta que contiene las carpetas wp-content, wp-includes y wp-admin. Si no puede encontrarlo, está bien, puede que no exista, en cuyo caso necesitará crearlo (algo que no está cubierto aquí, me temo). Una vez encontrado (o creado), querrá agregar el siguiente código usando un editor de texto plano, NO un procesador de textos!

ExpiresActive On
ExpiresByType image / jpg "acceso más 1 año"
ExpiresByType image / jpeg "acceso más 1 año"
ExpiresByType image / gif "acceso más 1 año"
ExpiresByType image / x-icon "acceso más 1 año"
ExpiresByType image / png "acceso más 1 año"
ExpiresByType text / css "acceso más 1 mes"
ExpiresByType text / x-javascript "acceso más 1 mes"
Aplicación ExpiresByType / x-shockwave-flash "acceso más 1 mes"
ExpiresDefault "acceso más 2 días"

Estas líneas le indican al navegador de un usuario cómo almacenar en caché cada tipo de archivo. Arriba, configuré las imágenes jpg, jpeg, gif, iconos e png para almacenarlas en la memoria caché durante un año (ya que casi nunca cambian), y los archivos CSS, JavaScript y Flash se almacenarán en la memoria caché todos los meses (ya que es más probable que cambien) ) También configuré el valor predeterminado en dos días para cualquier archivo que no se especifique de otra manera.

Deshabilitar para el desarrollo

Dado que estos archivos se almacenarán en caché durante bastante tiempo (en cualquier momento que haya decidido definir para cada tipo de archivo), el desarrollo puede ser difícil, por lo que le recomiendo encarecidamente no utilizar el almacenamiento en caché del navegador para sitios web que todavía están en desarrollo activo. Puede ir a la configuración de su navegador y borrar el caché manualmente cada vez, por supuesto, pero esto pronto se volverá agotador (además, no es tan fácil borrar el caché de otra persona, consejos a continuación).

Si comienza a cambiar las cosas, primero querrá cambiar el caché a algo mucho más corto, como un solo día, en cuyo caso, los usuarios verán los nuevos recursos cuando hayan pasado 24 horas.

Otro método que usan los desarrolladores para actualizar los archivos en caché es agregar parámetros de consulta a sus recursos. Si está cargando script.js, por ejemplo, una vez en caché, los cambios que realice en él solo se descargarán después de un año (o el tiempo que lo haya configurado). Para evitar esto, los desarrolladores a menudo agregarán la versión del recurso a la URL. Entonces, en lugar de “http://mysite.com/scripts.js”, la URL se convierte en algo así como “http://mysite.com/scripts.js?version=1.0”, y cuando el script cambia nuevamente, el desarrollador vuelve a aparecer. reemplaza la URL del recurso, por lo que es “http://mysite.com/scripts.js?version=1.1”, por ejemplo.

En lo que respecta al navegador, técnicamente se trata de un recurso nuevo, por lo que se descargará y almacenará en la memoria caché de nuevo, por un año más..

Comprobando tu trabajo

Hay varias maneras de verificar si un sitio tiene o no habilitado el almacenamiento en caché del navegador, siendo una de las más fáciles (y más interesantes) mediante el uso de una herramienta gratuita de prueba de velocidad del sitio llamada GTmetrix, algo que ya hemos cubierto en profundidad. un artículo anterior: Cómo usar GTmetrix para probar la velocidad de un sitio web – Efectivamente

Prueba de caché del navegador GTMetrix

Si su sitio obtiene una “A”, entonces el almacenamiento en caché del navegador está bien, y está listo para un buen aumento de velocidad!

Pensamientos finales

El almacenamiento en caché del navegador puede conducir a aumentos significativos de la velocidad y, dado que esencialmente significa simplemente copiar y pegar unas pocas líneas de código (y no tiene desventajas de ningún tipo, suponiendo que no tenga la intención de cambiar ninguno de los archivos definidos antes de configurarlos en expirar), habilitarlo es definitivamente algo que vale la pena hacer.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me