Como carregar vídeos e iframes sem travar uma landing page criada por IA

Um vídeo abaixo da primeira tela pode baixar player, fontes, imagens, analytics e o próprio arquivo de mídia antes de a pessoa chegar perto dele. Um mapa ou post incorporado faz algo parecido dentro de um documento separado.

Esse custo compete com CSS, imagem hero e JavaScript da página. Também pode ocupar a thread principal e deslocar o layout quando o embed finalmente aparece.

A correção depende de três perguntas: a mídia está visível no carregamento, precisa tocar sem ação e pertence ao seu servidor ou a um terceiro?

Identifique o tipo de mídia e seu custo

Separe os elementos antes de alterar atributos.

Na aba Network, filtre por Media, JS, Img e Doc. Agrupe por domínio e recarregue com o cache desativado. Depois grave o painel Performance para ver se o player cria tarefas longas.

O material do web.dev sobre lazy loading de imagens e iframes lembra que cada iframe é um documento com seus próprios subrecursos. Adiar o documento também adia boa parte dessa cadeia.

Não aplique a mesma regra acima e abaixo da dobra

Mídia visível na primeira tela faz parte do caminho crítico. Se o poster ou o vídeo define o LCP, loading="lazy" pode atrasar o recurso até o navegador calcular o layout.

Para uma mídia que aparece no topo:

• inclua o elemento no HTML inicial;
• reserve largura e altura;
• use um poster leve e representativo;
• não aplique lazy loading ao candidato de LCP;
• meça se o poster ou outro elemento define a métrica;
• evite autoplay quando ele não é parte essencial da experiência.

O guia de LCP da imagem hero mostra como separar descoberta, download e atraso de renderização. O mesmo raciocínio vale quando um poster é o maior elemento da tela.

Para conteúdo abaixo da dobra, adie a rede. A pessoa não deve baixar um player que talvez nunca veja.

Controle vídeos próprios com preload

O atributo preload é uma pista para o navegador. Ele não é uma ordem e pode variar entre implementações.

<video controls preload="none" poster="/assets/demo-poster.avif" width="1280" height="720">
  <source src="/assets/demo.webm" type="video/webm" />
  <source src="/assets/demo.mp4" type="video/mp4" />
</video>

preload="none" pede que o navegador não antecipe dados do vídeo. O poster ocupa a área até a reprodução. preload="metadata" pode buscar duração e dimensões, mas ainda transfere parte do arquivo.

A referência do elemento video no MDN documenta três valores: none, metadata e auto. Ela também ressalta que autoplay tem precedência sobre preload.

Escolha conforme a intenção:

• use none quando o vídeo está abaixo da dobra ou poucas pessoas dão play;
• avalie metadata quando duração e resposta rápida ao play importam;
• evite auto em vídeos longos sem evidência de reprodução frequente;
• não use autoplay para contornar uma decisão de produto sobre carregamento.

Teste o primeiro play em rede lenta. Economizar o carregamento inicial e criar uma espera sem feedback no clique também é uma regressão.

Use poster com dimensões estáveis

Sem poster, o navegador pode mostrar uma área vazia até receber o primeiro frame. Sem proporção reservada, o conteúdo abaixo se move quando a mídia ganha tamanho.

.demo-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: #171517;
}

Mantenha width e height no HTML e ajuste a largura responsiva no CSS. A proporção deve corresponder ao arquivo e ao poster.

Comprima o poster como qualquer imagem editorial. Não exporte um frame 4K para uma caixa de 640 pixels. O guia de otimização de imagens cobre srcset, formatos e tamanho exibido.

Depois percorra larguras próximas aos breakpoints. O artigo sobre layout shifts mostra como confirmar se a mídia preserva espaço antes e depois do carregamento.

Adie iframes fora da primeira tela

Para um mapa, formulário ou embed abaixo da dobra, comece com o recurso nativo.

<iframe
  src="https://example.com/embed"
  title="Demonstração do produto"
  loading="lazy"
  width="1280"
  height="720"
></iframe>

loading="lazy" adia o documento até ele chegar a uma distância calculada da área visível. O valor padrão é eager, que inicia a carga na abertura da página.

O atributo reduz o custo inicial, mas o embed ainda pode começar antes de entrar na tela. O navegador escolhe a distância para evitar que a pessoa chegue a uma caixa vazia.

Preserve title para identificar o iframe, defina dimensões e teste o fallback. Lazy loading não corrige um player pesado depois que ele entra na região de carga.

Se o iframe executa conteúdo que você não controla, revise também os limites de iframe sandbox. Performance e permissão são problemas diferentes.

Troque players externos por uma fachada

Uma fachada mostra um poster e um botão reais. O iframe só entra no DOM depois do clique.

<button class="video-facade" type="button" aria-label="Reproduzir demonstração">
  <img
    src="/assets/demo-poster.avif"
    alt="Prévia da demonstração do produto"
    width="1280"
    height="720"
  />
  <span aria-hidden="true">▶</span>
</button>

const facade = document.querySelector(".video-facade");

facade?.addEventListener(
  "click",
  () => {
    const frame = document.createElement("iframe");
    frame.src = "https://example.com/embed?autoplay=1";
    frame.title = "Demonstração do produto";
    frame.allow = "autoplay; fullscreen";
    frame.allowFullscreen = true;
    frame.width = "1280";
    frame.height = "720";
    facade.replaceWith(frame);
  },
  { once: true },
);

O botão precisa funcionar com teclado, mostrar foco e ter nome acessível. O poster deve continuar com dimensões iguais às do iframe para evitar movimento.

Se o JavaScript falhar, ofereça um link para abrir o vídeo ou a função em outra página. Não deixe uma imagem que parece clicável sem destino.

A fachada é especialmente útil quando poucas visitas reproduzem o conteúdo. Quem não dá play não baixa o player nem seus subrecursos.

Trate autoplay como custo recorrente

Vídeos decorativos em loop podem parecer leves em uma conexão rápida. Em celular, eles consomem dados, decodificação, bateria e tempo de GPU durante a permanência na página.

Se o movimento for necessário:

• remova a faixa de áudio;
• use muted, loop e playsinline;
• exporte resolução e bitrate próximos ao tamanho exibido;
• pause quando o elemento sair da tela;
• forneça poster;
• respeite prefers-reduced-motion;
• substitua por imagem estática em telas ou redes onde o custo não se paga.

Não esconda controles em um vídeo que transmite informação. Legendas, pausa e alternativa textual fazem parte do conteúdo, não da decoração.

Evite conexões antecipadas sem uso provável

Um embed externo pode abrir várias origens. Não copie todos esses domínios para uma lista de preconnect.

Se o iframe só carrega no clique, antecipar conexões durante o carregamento devolve parte do custo que a fachada removeu. Meça a espera entre clique e player pronto. Só antecipe a origem principal quando o atraso observado justificar a conexão.

Use hints apenas depois de identificar o ponto real do waterfall. Preload e preconnect antecipam trabalhos diferentes e podem disputar rede com o conteúdo principal.

Teste interação, rede e layout

Monte uma matriz com pelo menos estes cenários:

Compare o waterfall antes e depois. Conte quantas requisições desaparecem do carregamento inicial, quanto o documento principal ganha e quando o custo volta depois da interação.

Uma boa mudança não esconde o custo do relatório. Ela move mídia opcional para o momento certo sem prejudicar quem decide usá-la.

Republique todos os arquivos juntos

No Site no Ar, HTML, poster e arquivos de vídeo referenciados precisam existir dentro de public/ na mesma Version.

1. chame get_context no Site existente;
2. localize a rota, os posters e as mídias com as file tools;
3. ajuste markup, estilos e scripts;
4. adicione ou substitua os assets usados pela página;
5. mantenha public/sitemap.xml correto;
6. rode build, teste de teclado e a matriz de rede;
7. use deploy e acompanhe deploy_status;
8. abra a URL final e repita o teste sem cache.

A documentação de Publicação explica o contrato de public/ e Versions. Um poster referenciado fora desse diretório não entra no endereço publicado.

Prompt para revisar vídeos e iframes

Revise vídeos e iframes desta landing page sem publicar ainda.

URL e Version: [URL e commit]
Mídias esperadas: [lista]
Cenários: [celular, desktop, teclado e movimento reduzido]

1. Liste vídeos, iframes, posters, players e origens iniciadas.
2. Meça requisições, bytes e tarefas antes do primeiro scroll.
3. Separe mídia visível no carregamento de conteúdo abaixo da dobra.
4. Aplique preload e lazy loading conforme a posição real.
5. Proponha fachada para embeds que só precisam carregar no clique.
6. Preserve proporção, foco, controles, legendas e fallback.
7. Rode build e compare rede, LCP, INP e CLS na URL final.

Vídeo e iframe não precisam sair da página. Precisam deixar de carregar como se toda visita fosse assistir, abrir o mapa ou usar o widget imediatamente.