{"id":60492,"date":"2020-05-27T06:28:47","date_gmt":"2020-05-27T00:58:47","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?p=60492"},"modified":"2023-12-28T16:13:53","modified_gmt":"2023-12-28T10:43:53","slug":"leverage-browser-caching-on-wordpress","status":"publish","type":"post","link":"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/leverage-browser-caching-on-wordpress\/","title":{"rendered":"C\u00f3mo aprovechar la cach\u00e9 del navegador en WordPress para aumentar la velocidad"},"content":{"rendered":"
<\/div>\n

La velocidad de la p\u00e1gina es m\u00e1s importante que nunca para posicionarse en los primeros puestos de las SERPs de Google, as\u00ed como para ofrecer una experiencia de calidad a los usuarios. Si est\u00e1s interesado en superar los 90 puntos en tu puntuaci\u00f3n de Google PageSpeed Insights, necesitas todas las herramientas posibles para conseguirlo, incluido el almacenamiento en cach\u00e9 del navegador. <\/p>\n\n\n\n

Hoy en d\u00eda, encontrar\u00e1 una serie de opciones para aumentar la velocidad de la p\u00e1gina, pero una de las formas m\u00e1s inteligentes de mejore la velocidad de su sitio web<\/a> es aprovechar adecuadamente la cach\u00e9 del navegador. <\/p>\n\n\n\n

\n En este post, vamos a ver c\u00f3mo aprovechar el almacenamiento en cach\u00e9 del navegador y ayudarle a solucionar cualquier advertencia de almacenamiento en cach\u00e9 del navegador que haya encontrado al probar el rendimiento de su sitio. \n<\/p>\n\n\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTabla de contenidos\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. \u00bfQu\u00e9 es el cach\u00e9 de navegador y por qu\u00e9 lo necesitamos?<\/a>
  2. C\u00f3mo aprovechar el cach\u00e9 del navegador<\/a>
  3. Correcci\u00f3n del error de cach\u00e9 del navegador Leverage<\/a>
  4. Uso de plugins para aprovechar el cach\u00e9 del navegador<\/a>
  5. C\u00f3digo (Apache) para aprovechar el cach\u00e9 del navegador<\/a>
  6. C\u00f3digo (Nginx) para aprovechar el cach\u00e9 del navegador<\/a>
  7. Advertencia de Google Analytics sobre el uso del cach\u00e9 del navegador<\/a>
  8. Conclusi\u00f3n<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n

    <\/a>\u00bfQu\u00e9 es el cach\u00e9 de navegador y por qu\u00e9 lo necesitamos?<\/h2>\n\n\n\n

    \n La idea que subyace tras el almacenamiento en cach\u00e9 es \"guardar\" una versi\u00f3n actualizada de su sitio web para que los visitantes puedan acceder a ella m\u00e1s r\u00e1pidamente. \n<\/p>\n\n\n\n

    \n Aqu\u00ed tienes una idea aproximada de c\u00f3mo funciona esto: Si eres artista, el almacenamiento en cach\u00e9 es como la diferencia entre tener una fotograf\u00eda de tu dibujo a mano y tener que volver a dibujar la imagen cada vez que un amigo te la pide. En efecto, la fotograf\u00eda \"recuerda\" lo que ya se ha compartido, guard\u00e1ndolo para futuras visualizaciones. \n<\/p>\n\n\n\n

    \n En t\u00e9rminos m\u00e1s t\u00e9cnicos, lo siguiente es un r\u00e1pido desglose de lo que ocurre entre bastidores cuando un usuario accede a su dominio en su navegador web: \n<\/p>\n\n\n\n

      \n
    1. \n El visitante introduce su URL. \n<\/li>\n\n\n\n
    2. \n Su navegador env\u00eda una solicitud a su servidor.\n<\/li>\n\n\n\n
    3. \n El servidor de su sitio web empaqueta todos los datos y los env\u00eda al navegador del usuario.\n<\/li>\n\n\n\n
    4. \n El navegador muestra la p\u00e1gina del sitio web.\n<\/li>\n<\/ol>\n\n\n\n

      \n Bastante sencillo, \u00bfverdad? \n<\/p>\n\n\n\n

      \n Pero los sitios web modernos son multifac\u00e9ticos y complicados, con todo, desde texto e im\u00e1genes hasta scripts y hojas de estilo ejecut\u00e1ndose al mismo tiempo. Y si usted es como millones de propietarios de sitios web que conf\u00edan en WordPress, todo esto est\u00e1 envuelto en una capa de c\u00f3digo PHP con un mont\u00f3n de procesos adicionales en ejecuci\u00f3n.\n<\/p>\n\n\n\n

      \n Por eso, un sitio web WordPress sin cach\u00e9 de navegador puede tardar mucho en cargarse. El paso 3 anterior puede llevar mucho tiempo cuando el sitio tiene que enviar datos para cada elemento y script de una p\u00e1gina. La raz\u00f3n por la que la mayor\u00eda de las p\u00e1ginas web en l\u00ednea se cargan m\u00e1s r\u00e1pido en visitas posteriores se debe al almacenamiento en cach\u00e9, donde los diferentes elementos de su sitio web se han guardado localmente para un usuario, evitando que el sitio tenga que servir cada elemento desde cero cada vez.\n<\/p>\n\n\n\n

      \n Para evitar una ralentizaci\u00f3n no deseada para los usuarios y una sobrecarga excesiva de su servidor web, repasemos r\u00e1pidamente el almacenamiento en cach\u00e9 del navegador en WordPress, en qu\u00e9 consiste el error de almacenamiento en cach\u00e9 del navegador y c\u00f3mo solucionarlo. \n<\/p>\n\n\n\n

      <\/a>C\u00f3mo aprovechar el cach\u00e9 del navegador <\/h2>\n\n\n\n

      \n Si tiene un sitio web, debe saber que el almacenamiento en cach\u00e9 del servidor se refiere al proceso por el que su sitio web genera p\u00e1ginas web en cach\u00e9 para su sitio web. La cach\u00e9 del navegador es lo que ocurre cuando los usuarios acceden al sitio web desde su navegador. \n<\/p>\n\n\n\n

      \n Esta es la otra cara de la misma moneda. Cuando aprovechas la cach\u00e9 del navegador, est\u00e1s dando instrucciones a tu servidor sobre el tiempo que los recursos deben permanecer en cach\u00e9 en los navegadores de tus visitantes. \n<\/p>\n\n\n\n

      \n Normalmente, para aprovechar el almacenamiento en cach\u00e9 del navegador, necesitas definir cabeceras HTTP para establecer tiempos de caducidad adecuados para los diferentes tipos de archivos de tu sitio web. La forma de hacerlo depender\u00e1 de si tu servidor web funciona con Nginx o Apache, y de si quieres introducir el c\u00f3digo t\u00fa mismo o utilizar un plugin de WordPress. \n<\/p>\n\n\n\n

      \n A continuaci\u00f3n, cubriremos algunas de las formas m\u00e1s comunes de configurar el almacenamiento en cach\u00e9 de su navegador.\n<\/p>\n\n\n\n

      <\/a>Correcci\u00f3n del error de cach\u00e9 del navegador Leverage<\/h2>\n\n\n\n

      \n Tanto si lo est\u00e1s configurando por primera vez como si ya lo tienes activado, el almacenamiento en cach\u00e9 del navegador debe optimizarse para que funcione correctamente. Cuando pruebes el rendimiento de tu sitio, normalmente recibir\u00e1s una advertencia de aprovechamiento de la cach\u00e9 del navegador si no tienes ninguna regla de cach\u00e9 establecida o si los tiempos de caducidad son demasiado bajos. \n<\/p>\n\n\n\n

      \n Por regla general, los recursos est\u00e1ticos deber\u00edan caducar en un a\u00f1o, mientras que los elementos din\u00e1micos deber\u00edan hacerlo en una semana, o incluso menos. Los elementos almacenados en cach\u00e9 se guardan localmente en el navegador del usuario, pero no para siempre: una vez transcurrido un tiempo determinado, el usuario debe volver a cargar estos elementos desde el servidor del sitio. El contenido verdaderamente est\u00e1tico incluye cosas como logotipos o estilos CSS globales, pero pr\u00e1cticamente todo lo dem\u00e1s es din\u00e1mico y debe actualizarse con m\u00e1s frecuencia. \n<\/p>\n\n\n\n

      \n Si alguna vez has pasado tu sitio WordPress por PageSpeed Insights de Google<\/a>o herramientas populares de comprobaci\u00f3n de sitios web como Pingdom<\/a> y GTMetrix<\/a>entonces es posible que ya se haya encontrado con la advertencia de aprovechamiento de la memoria cach\u00e9 del navegador. \n<\/p>\n\n\n\n

      \n Se ve as\u00ed en la herramienta PageSpeed de Google: \n<\/p>\n\n\n\n

      <\/a>\"A<\/h4>\n\n\n\n

      \n La mejor manera de solucionarlo depender\u00e1 de tu sitio web y de tu host, pero vamos a ver algunas formas de aprovechar la cach\u00e9 del navegador.\n<\/p>\n\n\n\n

      <\/a>Uso de plugins para aprovechar el cach\u00e9 del navegador<\/h2>\n\n\n\n

      Si tiene un sitio web en WordPress, puede saltarse los pasos de codificaci\u00f3n m\u00e1s complicados que se describen m\u00e1s adelante en este art\u00edculo y limitarse a utilizar algunos plugins de WordPress de calidad para aprovechar el almacenamiento en cach\u00e9 del navegador. <\/p>\n\n\n\n

      <\/a>W3 Total Cache<\/a><\/h3>\n\n\n\n

      \n Uno de los mejores plugins para el almacenamiento en cach\u00e9 del navegador es W3 Total Cache<\/a>. Se trata de un plugin gratuito que ayuda a mejorar el SEO y la experiencia de usuario de tu sitio reduciendo los tiempos de carga. Se trata de un completo framework de almacenamiento en cach\u00e9, lo que significa que puedes gestionar pr\u00e1cticamente todos los aspectos del almacenamiento en cach\u00e9 desde un \u00fanico lugar.\n<\/p>\n\n\n\n

      \"Backend<\/figure>\n\n\n\n

      \n Entonces, \u00bfest\u00e1 listo para utilizar W3 Total Cache para aprovechar el almacenamiento en cach\u00e9 del navegador? He aqu\u00ed c\u00f3mo se hace \n<\/p>\n\n\n\n

      <\/a>Paso 1: Activar el cach\u00e9 del navegador<\/h4>\n\n\n\n

      \n Despu\u00e9s de instalar y activar W3 Total Cache (W3TC)<\/a>puede empezar a ajustar la configuraci\u00f3n para aprovechar la cach\u00e9 del navegador. \n<\/p>\n\n\n\n

      \n En primer lugar, vaya a Ajustes generales <\/strong>bajo el Rendimiento <\/strong>en la barra lateral del panel de control de WordPress. Aqu\u00ed es donde podr\u00e1s ajustar la configuraci\u00f3n. \n<\/p>\n\n\n\n

      Despl\u00e1cese hasta el Cach\u00e9 del navegador<\/a> y aseg\u00farese de que la casilla Activar cach\u00e9 del navegador est\u00e1 marcada. <\/p>\n\n\n\n

      \"Browser<\/figure>\n\n\n\n

      <\/a>Paso 2: Especificar la pol\u00edtica global de cach\u00e9 del navegador<\/h4>\n\n\n\n

      \n Una vez activada la cach\u00e9 del navegador, haga clic en Cach\u00e9 del navegador<\/strong> en las opciones del plugin para ir a esa p\u00e1gina. All\u00ed encontrar\u00e1s una lista de ajustes para la pol\u00edtica global de cach\u00e9 del navegador que puedes personalizar.\n<\/p>\n\n\n\n

      \n Las casillas de verificaci\u00f3n incluyen varias opciones para aprovechar el almacenamiento en cach\u00e9 del navegador en su sitio web. Es una buena idea marcar todas las casillas superiores.\n<\/p>\n\n\n\n

      \"W3<\/figure>\n\n\n\n