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

# Otimizando o desempenho do app

> Verifique as métricas de desempenho do seu app e otimize a velocidade de carregamento e a capacidade de resposta.

## 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)**.

<Tip>
  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.
</Tip>

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

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

<Tip>
  *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.
</Tip>

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

<Tip>
  *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.
</Tip>

### 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**.

<Tip>
  *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.
</Tip>

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

<Tip>
  *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.
</Tip>

<Note>
  Atualmente, você não pode limpar o cache da CDN manualmente.
</Note>

***

## Perguntas frequentes

Clique em uma pergunta abaixo para saber mais sobre como otimizar o desempenho do site.

<AccordionGroup>
  <Accordion title="Como verifico o desempenho do meu app?">
    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](https://pagespeed.web.dev).
    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.
  </Accordion>

  <Accordion title="Que pontuação de desempenho devo buscar?">
    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.
  </Accordion>

  <Accordion title="Por que meu app está recebendo uma pontuação baixa?">
    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](https://pagespeed.web.dev) 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.

    <Tip>
      *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.
    </Tip>
  </Accordion>

  <Accordion title="Como faço com que vídeos ou animações carreguem mais rápido?">
    * 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.
  </Accordion>

  <Accordion title="Por que minha pontuação do PageSpeed é menor no celular?">
    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.
  </Accordion>
</AccordionGroup>

<Note>Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a [versão em inglês](/). </Note>