{"id":92979,"date":"2021-06-17T16:21:35","date_gmt":"2021-06-17T10:51:35","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&p=92979"},"modified":"2023-05-03T17:07:30","modified_gmt":"2023-05-03T11:37:30","slug":"performance-is-the-key","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/performance-is-the-key\/","title":{"rendered":"Alojar Google Fonts localmente: el rendimiento es la clave"},"content":{"rendered":"

Crear un sitio web atractivo es muy importante, pero tambi\u00e9n lo es su rendimiento. Astra Theme es conocido por ser un tema r\u00e1pido, con un c\u00f3digo limpio y optimizado para el rendimiento, lo que se traduce en una carga r\u00e1pida del sitio web. Sin embargo, hay algunos servicios adicionales de terceros que puedes utilizar en tu sitio web (por ejemplo, Google). Todos estos servicios tendr\u00e1n un impacto en su rendimiento. <\/p>\n\n\n\n

En la opci\u00f3n \"Rendimiento\" del panel de control de Astra (WordPress Dashboard > Astra > Ajustes > Rendimiento<\/em>), encontrar\u00e1 una opci\u00f3n para habilitar esta opci\u00f3n para Cargar Google Fonts Localmente. Puede habilitar esta opci\u00f3n para descargar las fuentes de Google y guardarlas en su servidor. Esto puede ser genial para mejorar la velocidad de su sitio web y cumplir con las leyes GDPR.<\/p>\n\n\n\n

<\/div>
\n
<\/div>\n

Astra Theme Walkthrough Docs:<\/h3>\n\n\n\n
    \n
  1. Astra Theme Tutorial<\/a><\/li>\n\n\n\n
  2. Este es tu personalizador<\/a><\/li>\n\n\n\n
  3. Modele su sitio web con ajustes globales<\/a><\/li>\n\n\n\n
  4. Construya su cabecera<\/a> <\/li>\n\n\n\n
  5. Encontrar el camino con migas de pan<\/a> <\/li>\n\n\n\n
  6. Cree su blog<\/a><\/li>\n\n\n\n
  7. A\u00f1ada sus barras laterales<\/a><\/li>\n\n\n\n
  8. Construya su pie de p\u00e1gina<\/a><\/li>\n\n\n\n
  9. Alojar localmente Google Fonts: el rendimiento es la clave (lectura actual)<\/strong><\/li>\n\n\n\n
  10. Ver otras opciones del personalizador<\/a><\/li>\n\n\n\n
  11. \u00bfC\u00f3mo crear sitios web r\u00e1pidos con Astra?<\/a><\/li>\n\n\n\n
  12. C\u00f3mo sacar el m\u00e1ximo partido a Astra Theme<\/a><\/li>\n<\/ol>\n<\/div>\n<\/div><\/section>\n\n\n\n

    <\/a>Carga local de Google Fonts<\/h2>\n\n\n\n

    Cuando utiliza cualquier fuente de Google en su sitio, es necesario enviar una solicitud a Google para obtener esa fuente cada vez que carga una p\u00e1gina o una entrada. Esto puede perjudicar tus puntos CLS en la puntuaci\u00f3n de Core Web Vitals. Para ayudar a mejorar esta situaci\u00f3n, Astra Theme incorpora la funci\u00f3n Google Fonts autoalojadas. Esta funci\u00f3n se a\u00f1adi\u00f3 con la actualizaci\u00f3n 3.6.0 de Astra Theme. Puede obtener m\u00e1s informaci\u00f3n sobre esta funci\u00f3n en nuestro Art\u00edculo de blog<\/a>. <\/p>\n\n\n\n

    En el panel de control de Astra, encontrar\u00e1s un bot\u00f3n para activar la opci\u00f3n \"Cargar Google Fonts localmente\". <\/p>\n\n\n\n

    \"Host<\/a><\/figure>\n\n\n\n

    Al activar esta funci\u00f3n, s\u00f3lo se enviar\u00e1 una solicitud a la API de fuentes de Google, que recopilar\u00e1 todos los archivos de activos y datos de fuentes de Google y los almacenar\u00e1 localmente en el servidor. A continuaci\u00f3n, para cualquier otra solicitud, las fuentes de Google se cargar\u00e1n utilizando los archivos almacenados localmente (hasta que se active esta opci\u00f3n). <\/p>\n\n\n\n

    <\/a>Precarga de fuentes locales<\/h3>\n\n\n\n

    Una vez habilitados los archivos de fuentes locales, tambi\u00e9n puede precargarlos. Por defecto, un navegador esperar\u00e1 a cargar el archivo de fuentes hasta que empiece a \"pintar\" el contenido visible en la pantalla del usuario (lazy loading). Esto puede provocar una situaci\u00f3n en la que un navegador est\u00e1 listo para cargar el texto de su sitio web pero necesita esperar a que se descargue primero el archivo de fuentes, ya que a\u00fan no est\u00e1 disponible. Esta situaci\u00f3n ralentiza la carga de su p\u00e1gina y crea una mala experiencia para el usuario. <\/p>\n\n\n\n

    La precarga de fuentes \"dir\u00e1\" al navegador que importe la fuente con antelaci\u00f3n, de modo que la fuente est\u00e9 lista para mostrarse en cuanto el navegador empiece a pintar el texto, lo que repercutir\u00e1 positivamente en el rendimiento de su sitio web. <\/p>\n\n\n\n

    \"Host<\/a><\/figure>\n\n\n\n

    Vaciar la cach\u00e9 local de fuentes<\/h3>\n\n\n\n

    Como las fuentes se cargar\u00e1n y guardar\u00e1n localmente, cualquier cambio con Google Fonts no se aplicar\u00e1 autom\u00e1ticamente. Sin embargo, para mantener actualizadas las fuentes de tu sitio web, esta funci\u00f3n actualizar\u00e1 ocasionalmente las fuentes almacenadas localmente. Esto ocurrir\u00e1 con las siguientes acciones: <\/p>\n\n\n\n