> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Optimizar el rendimiento de la app

> Revisa las métricas de rendimiento de tu app y optimiza la velocidad de carga y la capacidad de respuesta.

## Comprobar el rendimiento de tu app

El rendimiento de tu app afecta a la rapidez con la que se carga y responde a los usuarios. Puedes medirlo usando las **Herramientas de desarrollador** de tu navegador.

Las métricas clave de rendimiento incluyen: **Largest Contentful Paint (LCP)**, **Cumulative Layout Shift (CLS)** e **Interaction to Next Paint (INP)**.

<Tip>
  Revisa siempre tu **app publicada**, no la vista previa del builder. Las puntuaciones de rendimiento son más precisas al probar la versión en vivo tanto en escritorio como en móvil.
</Tip>

<img src="https://mintcdn.com/base44/7CK83v7HvLGb6fUT/images/DevToolsPerformance.png?fit=max&auto=format&n=7CK83v7HvLGb6fUT&q=85&s=1ec2854bfb0613e1c6acd025eda5552f" alt="Ejemplo de Chrome DevTools mostrando métricas de rendimiento para LCP, CLS e INP." width="1341" height="933" data-path="images/DevToolsPerformance.png" />

*Ejemplo de Chrome DevTools mostrando métricas de rendimiento locales para LCP, CLS e INP.*

## Optimizar el rendimiento de tu app

Optimiza el rendimiento de tu app enfocándote en las métricas clave que afectan a la rapidez con la que carga, se ejecuta y responde. Cada una destaca un aspecto distinto de la experiencia de usuario, y puedes pedir al chat de IA de Base44 que las optimice directamente.

### Largest Contentful Paint (LCP)

LCP mide el tiempo que tarda en aparecer el elemento visible más grande (imagen, texto o vídeo) por encima del pliegue.

**Para optimizar LCP:**

* Mantén el contenido visible por encima del pliegue ligero y rápido.
* Mueve elementos pesados (vídeos, iFrames, cuadrículas, listas) por debajo del pliegue.
* Optimiza y comprime imágenes antes de subirlas.
* Usa **lazy loading** para imágenes fuera de la pantalla.

<Tip>
  *Pídele a la IA:* "Aplica lazy loading a las imágenes y vídeos por debajo del pliegue."\
  La IA añadirá automáticamente los atributos adecuados o imports dinámicos.
</Tip>

### Cumulative Layout Shift (CLS)

CLS mide el movimiento inesperado del diseño de tu app mientras carga.

**Para optimizar CLS:**

* **Añade definiciones de tamaño:** Da a cada imagen y vídeo una altura y anchura fijas para evitar saltos al cargar.
* **Optimiza las fuentes personalizadas:** Usa la propiedad `font-display: swap;` en tu CSS para evitar texto invisible mientras se cargan las fuentes.
* **Reserva espacio para contenido dinámico:** Establece espacios fijos para anuncios, pop-ups o cualquier cosa que cargue tras el render inicial.
* **Minimiza las actualizaciones del DOM:** Limita los cambios de layout causados por scripts automáticos.

<Tip>
  *Pídele a la IA:*

  * "Establece altura y anchura fijas para todos los elementos multimedia."
  * "Evita los saltos de layout mientras se cargan las fuentes."

  La IA actualizará automáticamente los estilos del componente o el CSS.
</Tip>

### Interaction to Next Paint (INP)

INP mide la rapidez con la que tu app responde a clics, toques o entradas de teclado.

**Para optimizar INP:**

* Evita scripts de larga duración activados por acciones del usuario.
* Aplaza o elimina scripts no esenciales de la carga inicial.
* Mantén los layouts simples y las animaciones mínimas.
* Monitoriza la capacidad de respuesta en la pestaña **Performance**.

<Tip>
  *Pídele a la IA:* "Aplaza los scripts no críticos hasta después de la interacción" o "Simplifica las animaciones para mejor capacidad de respuesta." La IA optimizará el orden de ejecución del código y las animaciones durante la generación.
</Tip>

### Red de entrega de contenido (CDN) y caché

Una **red de entrega de contenido (CDN)** entrega copias de tu app desde servidores cercanos a la ubicación del usuario, mejorando los tiempos de carga. Base44 usa automáticamente **Cloudflare CDN** para caché y entrega.

<Tip>
  *Pídele a la IA:* "Vuelve a publicar mi app para refrescar los archivos en caché."\
  Republicar activa la actualización automática de la caché de Cloudflare de Base44.
</Tip>

<Note>
  Actualmente no puedes vaciar la caché del CDN manualmente.
</Note>

***

## Preguntas frecuentes

Haz clic en una pregunta abajo para saber más sobre cómo optimizar el rendimiento del sitio.

<AccordionGroup>
  <Accordion title="¿Cómo compruebo el rendimiento de mi app?">
    Puedes comprobar el rendimiento de tu app usando **Chrome DevTools** o **Google PageSpeed Insights**.

    **Para comprobarlo con Chrome:**

    * **Comprobación rápida:**
      1. Abre tu **app publicada**.
      2. Haz clic derecho en cualquier sitio y selecciona **Inspect**.
      3. En el panel derecho, Chrome muestra métricas locales para **Largest Contentful Paint (LCP)**, **Cumulative Layout Shift (CLS)** e **Interaction to Next Paint (INP)**.\
         Esto te da una vista instantánea del rendimiento de tu página en vivo.
    * **Comprobación detallada:**
      1. Abre **Chrome DevTools**.
      2. Haz clic en la pestaña **Performance**.
      3. Haz clic en **Record**, recarga la página y detén la grabación al terminar la carga.
      4. Revisa la línea de tiempo completa de rendimiento, incluyendo **First Contentful Paint (FCP)**, **LCP** y actividad del hilo principal.

    **Para comprobarlo con PageSpeed:**

    1. Ve a [PageSpeed Insights](https://pagespeed.web.dev).
    2. Introduce la URL de tu app y haz clic en **Analyze**.
    3. Revisa las secciones **Insights** y **Diagnostics** para formas de mejorar el rendimiento de tu app.
  </Accordion>

  <Accordion title="¿Qué puntuación de rendimiento debería buscar?">
    Aspira a alcanzar o superar estas puntuaciones recomendadas para la mejor experiencia:

    * **Largest Contentful Paint (LCP):** 2,5 segundos o menos.
    * **Cumulative Layout Shift (CLS):** 0,1 o menos.
    * **Interaction to Next Paint (INP):** 200 milisegundos o menos.

    Estos puntos de referencia siguen los estándares de Google para un excelente rendimiento del sitio y ayudan a garantizar que tu app sea rápida, estable y responda con fluidez.
  </Accordion>

  <Accordion title="¿Por qué mi app tiene una puntuación baja?">
    Una puntuación baja suele significar que algunos elementos de tu sitio tardan más en cargar de lo esperado. El contenido pesado por encima del pliegue, scripts grandes o medios no optimizados son las causas más comunes.

    **Para solucionarlo:**

    1. Pasa tu app por [Google PageSpeed Insights](https://pagespeed.web.dev) y revisa:
       * **Recursos que bloquean el renderizado:** mueve los scripts a `async` o `defer`.
       * **Bundles JavaScript grandes:** simplifica o divide el código de vendor.
       * **Imágenes no optimizadas:** comprime y vuelve a subir.
    2. En **Chrome DevTools**, abre la pestaña **Network** y haz clic en **Reload** para ver cómo cargan tus archivos en tiempo real.
       * Vigila los archivos que tardan más de 1-2 segundos en cargar; probablemente ralentizan tu app.

    **Soluciones rápidas:**

    * Mueve vídeos, listas de datos o secciones pesadas por debajo del pliegue.
    * Comprime y redimensiona imágenes antes de subirlas.
    * Elimina scripts o CSS no usados.
    * Vuelve a publicar tu app para refrescar la caché del CDN.

    <Tip>
      *Pídele a la IA:* "Optimiza mi app para un LCP e INP más rápidos" o "Reduce el tamaño de carga por encima del pliegue." La IA aplicará automáticamente lazy loading y aplazamiento de scripts donde sea relevante.
    </Tip>
  </Accordion>

  <Accordion title="¿Cómo hago que los vídeos o animaciones carguen más rápido?">
    * Aloja vídeos externamente (p. ej. en **Vimeo** o **YouTube**).
    * Añade `loading="lazy"` a vídeos o iframes incrustados.
    * Coloca los vídeos **por debajo del pliegue** para priorizar texto e imágenes.
    * Desactiva **autoplay** o **loop** para vídeos de fondo grandes.
  </Accordion>

  <Accordion title="¿Por qué mi puntuación de PageSpeed es más baja en móvil?">
    Las pruebas móviles se ejecutan en redes y dispositivos más lentos, así que las puntuaciones suelen ser más bajas que en escritorio. Enfócate en optimizar tu **LCP** e **INP** para móvil primero reduciendo medios pesados, aplazando scripts no críticos y simplificando layouts.
  </Accordion>
</AccordionGroup>

<Note>Esta página se tradujo con IA. Para información más precisa y actualizada, consulta la [versión en inglés](/). </Note>