Pular para o conteúdo principal

​
Verificando o desempenho do seu app

O desempenho do seu app afeta a rapidez com que ele carrega e responde aos usuários. Você pode medir isso usando o Developer Tools do seu navegador. As principais métricas de desempenho incluem: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Interaction to Next Paint (INP).
Sempre verifique seu app publicado, não a prévia do builder. As pontuações de desempenho são mais precisas ao testar a versão ao vivo no desktop e no celular.
Exemplo do Chrome DevTools mostrando métricas de desempenho para LCP, CLS e INP. Exemplo do Chrome DevTools exibindo métricas de desempenho locais para LCP, CLS e INP.

​
Otimizando o desempenho do seu app

Otimize o desempenho do seu app focando nas principais métricas que afetam a rapidez com que ele carrega, executa e responde. Cada uma destaca um aspecto diferente da experiência do usuário, e você pode pedir ao chat de IA da Base44 para otimizá-las diretamente.

​
Largest Contentful Paint (LCP)

O LCP mede o tempo que o maior elemento visível (imagem, texto ou vídeo) acima da dobra leva para aparecer. Para otimizar o LCP:
  • Mantenha o conteúdo visível acima da dobra leve e rápido.
  • Mova elementos pesados (vídeos, iFrames, grades, listas) para abaixo da dobra.
  • Otimize e comprima imagens antes de enviar.
  • Use lazy loading para imagens fora da tela.
Prompt para a IA: “Aplique carregamento lazy para imagens e vídeos abaixo da dobra.”
A IA adicionará automaticamente os atributos corretos ou imports dinâmicos.

​
Cumulative Layout Shift (CLS)

O CLS mede o movimento inesperado no layout do seu app durante o carregamento. Para otimizar o CLS:
  • Adicione definições de tamanho: dê a cada imagem e vídeo altura e largura fixas para evitar deslocamento durante o carregamento.
  • Otimize fontes personalizadas: use a propriedade font-display: swap; no seu CSS para evitar texto invisível durante o carregamento da fonte.
  • Reserve espaço para conteúdo dinâmico: defina espaços fixos para anúncios, pop-ups ou qualquer coisa que carregue após a renderização inicial.
  • Minimize atualizações do DOM: limite as mudanças de layout causadas por scripts automáticos.
Prompt para a IA:
  • “Defina altura e largura fixas para todos os elementos de mídia.”
  • “Evite deslocamentos de layout enquanto as fontes carregam.”
A IA atualizará automaticamente os estilos do componente ou o CSS.

​
Interaction to Next Paint (INP)

O INP mede a rapidez com que seu app responde a cliques, toques ou entrada de teclado. Para otimizar o INP:
  • Evite scripts de longa duração acionados por ações do usuário.
  • Adie ou remova scripts não essenciais do carregamento inicial.
  • Mantenha layouts simples e animações mínimas.
  • Monitore a capacidade de resposta na aba Performance.
Prompt para a IA: “Adie scripts não críticos até depois da interação” ou “Simplifique as animações para melhor capacidade de resposta.” A IA otimizará a ordem de execução do código e as animações durante a geração.

​
Content Delivery Network (CDN) e cache

Uma Content Delivery Network (CDN) entrega cópias do seu app a partir de servidores mais próximos da localização do usuário, melhorando os tempos de carregamento. A Base44 usa automaticamente o Cloudflare CDN para cache e entrega.
Prompt para a IA: “Republique meu app para atualizar os arquivos em cache.”
Republicar aciona a atualização automática do cache do Cloudflare pela Base44.
Atualmente, você não pode limpar o cache da CDN manualmente.

​
Perguntas frequentes

Clique em uma pergunta abaixo para saber mais sobre como otimizar o desempenho do site.
Você pode verificar o desempenho do seu app usando Chrome DevTools ou Google PageSpeed Insights.Para verificar com o Chrome:
  • Verificação rápida:
    1. Abra seu app publicado.
    2. Clique com o botão direito em qualquer lugar e selecione Inspect.
    3. No painel direito, o Chrome exibe métricas locais para Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Interaction to Next Paint (INP).
      Isso dá uma visão instantânea de como sua página ao vivo se comporta.
  • Verificação detalhada:
    1. Abra o Chrome DevTools.
    2. Clique na aba Performance.
    3. Clique em Record, recarregue a página e pare a gravação quando o carregamento terminar.
    4. Revise a linha do tempo de desempenho completa, incluindo First Contentful Paint (FCP), LCP e a atividade da thread principal.
Para verificar com o PageSpeed:
  1. Vá para PageSpeed Insights.
  2. Insira a URL do seu app e clique em Analyze.
  3. Revise as seções Insights e Diagnostics para encontrar formas de melhorar o desempenho do seu app.
Tente atingir ou superar estas pontuações recomendadas para a melhor experiência:
  • Largest Contentful Paint (LCP): 2,5 segundos ou menos.
  • Cumulative Layout Shift (CLS): 0,1 ou menos.
  • Interaction to Next Paint (INP): 200 milissegundos ou menos.
Esses benchmarks seguem os padrões do Google para excelente desempenho de site e ajudam a garantir que seu app seja rápido, estável e responsivo.
Uma pontuação de desempenho baixa geralmente significa que alguns elementos no seu site estão demorando mais para carregar do que o esperado. Conteúdo pesado acima da dobra, scripts grandes ou mídia não otimizada são as causas mais comuns.Para solucionar problemas:
  1. Execute seu app pelo Google PageSpeed Insights e verifique:
    • Recursos que bloqueiam a renderização: mova scripts para async ou defer.
    • Bundles grandes de JavaScript: simplifique ou divida o código de vendor.
    • Imagens não otimizadas: comprima e reenvie.
  2. No Chrome DevTools, abra a aba Network e clique em Reload para ver como seus arquivos carregam em tempo real.
    • Procure arquivos que demoram mais de 1–2 segundos para carregar — esses provavelmente estão tornando seu app mais lento.
Correções rápidas:
  • Mova vídeos, listas de dados ou seções pesadas para abaixo da dobra.
  • Comprima e redimensione imagens antes de enviar.
  • Remova scripts ou CSS não utilizados.
  • Republique seu app para atualizar o cache da CDN.
Prompt para a IA: “Otimize meu app para LCP e INP mais rápidos” ou “Reduza o tamanho de carregamento acima da dobra.” A IA aplicará automaticamente lazy loading e adiamento de scripts onde for relevante.
  • Hospede vídeos externamente (por exemplo, no Vimeo ou YouTube).
  • Adicione loading="lazy" a vídeos ou iframes incorporados.
  • Coloque vídeos abaixo da dobra para priorizar texto e imagens.
  • Desative autoplay ou loop para vídeos de fundo grandes.
Os testes no celular são executados em redes e dispositivos mais lentos, então as pontuações são geralmente menores que no desktop. Foque em otimizar seus LCP e INP primeiro para celular, reduzindo mídia pesada, adiando scripts não críticos e simplificando layouts.
Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a versão em inglês.