Embeds, mapas e vídeos: como incorporar sem destruir a performance

Um vídeo incorporado do YouTube pode adicionar centenas de quilobytes de JavaScript à página. Um mapa, mais ainda. Widgets de avaliações e chat entram na lista. Somados, os embeds costumam ser uma das maiores causas de lentidão e de layout instável.

Reserve o espaço

Todo embed precisa de um contêiner com proporção definida antes de carregar:

.video { aspect-ratio: 16 / 9; width: 100%; }

Sem isso, a página pula quando o conteúdo chega (CLS: por que o seu site "pula" enquanto carrega e como parar com isso).

Carregue só quando necessário

• Vídeos: mostre uma imagem de capa com botão de play; o player real carrega no clique. A diferença no carregamento é enorme.
• Mapas: imagem estática ou link para abrir o aplicativo de mapas; mapa interativo só se o usuário pedir (Mapas e geolocalização no app sem gastar bateria (nem dinheiro)).
• Widgets e chat: carregue depois que a página estiver pronta ou na primeira interação.

Lazy loading

Embeds abaixo da dobra com loading="lazy" nos iframes.

Privacidade

Muitos embeds instalam cookies de terceiros assim que carregam. Carregar sob demanda também ajuda a cumprir a LGPD (LGPD para desenvolvedores: o que muda no código).

Cuidado com o INP

Scripts de terceiros competem pela thread principal (INP: o que fazer quando cliques e toques demoram para responder).

Veja Performance WPO da We Codex ou fale com a gente.