Saltar al contenido principal

​
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).
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.
Ejemplo de Chrome DevTools mostrando métricas de rendimiento para LCP, CLS e INP. 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.
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.

​
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.
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.

​
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.
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.

​
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.
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.
Actualmente no puedes vaciar la caché del CDN manualmente.

​
Preguntas frecuentes

Haz clic en una pregunta abajo para saber más sobre cómo optimizar el rendimiento del sitio.
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.
  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.
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.
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 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.
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.
  • 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.
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.
Esta página se tradujo con IA. Para información más precisa y actualizada, consulta la versión en inglés.