O player de áudio usa carregamento adiado por padrão. Ele não carrega seu JavaScript ou CSS até que o visitante role a página próximo a ele. Isso mantém o Largest Contentful Paint (LCP) da sua página rápido.
O que o carregamento adiado faz
- No carregamento da página, um pequeno placeholder é exibido na posição do player
- O JavaScript e o CSS do player completo NÃO são carregados ainda
- Quando o visitante rola a página a até 500px do player, o player completo carrega e substitui o placeholder
- A transição é visualmente suave (geralmente abaixo de 100 ms)
Por que isso ajuda os Core Web Vitals
Sem o carregamento adiado, cada página com um player paga o custo do JS e CSS do player no carregamento inicial. Com o carregamento adiado:
- LCP: sem impacto - o player não está no conteúdo acima da dobra
- INP: sem impacto - nenhum JS pesado é executado no carregamento
- CLS: sem impacto - o placeholder tem a mesma altura que o player final
Quando desativar
O carregamento adiado está ativo por padrão. Desative se:
- Seu player está sempre acima da dobra (raro)
- Você usa autoplay e quer que o player esteja pronto instantaneamente (muito raro)
- Você quer testar sem carregamento adiado para depuração
Como desativar
- Vá em Texto para Voz → Avançado.
- Desative Carregamento adiado do player.
- Salve.
Como funciona tecnicamente
- O plugin usa
IntersectionObserverpara detectar quando o player entra na área visível - Na interseção, ele carrega dinamicamente o JS e o CSS necessários
- Após o carregamento, os scripts ficam em cache no navegador durante toda a sessão
Navegadores sem suporte a IntersectionObserver (muito antigos) carregam os scripts no carregamento da página.
Casos específicos conhecidos
Player dentro de um elemento oculto
Se seu player está dentro de uma seção com display: none (como um acordeão recolhido), o carregamento adiado não é acionado até que a seção fique visível. Normalmente isso é o comportamento esperado - não faz sentido carregar o que não está sendo exibido.
Autoplay de áudio
Se você definir autoplay no player e ele usar carregamento adiado, o áudio não tocará até que o visitante role até ele. O autoplay inicia assim que o player carrega.