Implementa o carregamento lento para vídeos
Senior SEO-specialist
Os vídeos tornam o teu conteúdo mais rico, mas também são pesados. As incorporações padrão são carregadas imediatamente após a visita à página, o que torna o tempo de carregamento mais lento e afecta negativamente os teus Core Web Vitals. A solução: carregamento lento. Neste artigo, mostro-te como carregar vídeos apenas assim que são visualizados, sem plug-ins externos ou problemas de desempenho.
1. Porquê o carregamento lento para vídeos?
Uma incorporação padrão do YouTube ou do Vimeo carrega automaticamente vários scripts externos, miniaturas e recursos de iframe nas visitas à página.
Desvantagens:
- Lento LCP (Largest Contentful Paint)
- Pontuação PageSpeed mais baixa
- Desempenho móvel mais fraco
- Consumo de dados desnecessário com vídeos no fundo da página
O carregamento lento garante que o vídeo só é carregado quando o visitante se desloca até ele.
2. Operação: de imagem para iframe no scroll
A técnica de carregamento lento funciona da seguinte forma:
- Apresenta uma miniatura estática (por exemplo, JPG ou WebP)
- Ao deslocar (através da API Intersection Observer), substitui esta miniatura pela iframe <real>
- Resultado: carregamento mais rápido, sem scripts que bloqueiam o processamento, melhor experiência do utilizador
3. Exemplo de HTML + JavaScript (YouTube)
HTML:
html
<div class="video-wrapper" data-video-id="dQw4w9WgXcQ">
<img src="https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Video preview" loading="lazy">
<button class="play-button" aria-label="Video afspelen">▶</button>
</div>
CSS (opcional):
css
.video-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #000;
cursor: pointer;
}
.video-wrapper img {
width: 100%;
display: block;
}
.play-button {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 2rem;
background: none;
border: none;
color: white;
}
JavaScript (Observador de Intersecções):
html
<script>
document.addEventListener('DOMContentLoaded', function () {
const videos = document.querySelectorAll('.video-wrapper');
const loadIframe = (el) => {
const videoId = el.getAttribute('data-video-id');
const iframe = document.createElement('iframe');
iframe.setAttribute('src', 'https://www.youtube.com/embed/' + videoId + '?autoplay=1');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allow', 'autoplay; encrypted-media');
iframe.setAttribute('allowfullscreen', '');
iframe.style.width = '100%';
iframe.style.height = '100%';
el.innerHTML = '';
el.appendChild(iframe);
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadIframe(entry.target);
observer.unobserve(entry.target);
}
});
});
videos.forEach(video => {
observer.observe(video);
});
});
</script>
Aan de slag met SEO? Neem gerust contact op.
4. Alternativa: carregamento lento com plug-ins (com CMS)
Para sites WordPress:
- WP Rocket – Carregamento lento para imagens e vídeos
- Lazy Load for Videos – Plugin específico para vídeo
- LiteSpeed Cache – Otimização tudo-em-um, incluindo carregamento lento de vídeo
Nota: verifica visualmente se os vídeos incorporados continuam a ser carregados corretamente após a instalação.
5. Otimização adicional: comprime as miniaturas
A maioria das miniaturas de vídeo tem 480px ou mais. Optimiza-as com:
- Formato WebP (mais pequeno, com a mesma qualidade)
- Compressão via Squoosh
- loading=”lazy” em <img>
Utiliza também um texto alternativo para contexto e SEO.
Em conclusão
O carregamento lento de vídeos é simples: melhor tempo de carregamento, melhor experiência do utilizador e melhores pontuações no Lighthouse/PageSpeed. Através de uma simples combinação de HTML, CSS e JS, carrega vídeos apenas quando necessário – e evita atrasos desnecessários nas visitas iniciais.
