Porque você não deve usar slider no WordPress

Os sliders de imagem podem ser um recurso bastante popular entre os sites WordPress, mas seu valor agregado é próximo a nenhum. Na verdade, quer você pergunte a um desenvolvedor da web que se preocupa com o desempenho, a um especialista em SEO ou a um especialista em taxa de conversão, a maioria dirá que os sliders – ou carrosséis – não são uma boa ideia. E não poderíamos estar mais de acordo.

Por que um slide não é bom para o desempenho

Os sliders e o desempenho na web estão longe de ser uma combinação perfeita. Com sliders, seu site pode ser bonito, mas também muito lento

Para que um slide funcione no seu site, você precisará de mais códigos:

• Estilos CSS
• JavaScript extra

Na maioria das vezes, isso leva a:

• Aumento do tamanho da página
• Aumento do tempo de carregamento da página
• Maior número de solicitações HTTP

Tudo isso causa desempenho inferior, métricas de Core Web Vitals piores e páginas mais lentas, mesmo quando um plugin de otimização está sendo executado em seu site (mais sobre isso mais tarde).

Mais especificamente, os carrosséis podem afetar o seu Core Web Vitals das seguintes maneiras:

• LCP – O elemento LCP de uma página pode frequentemente ser encontrado em sliders de imagem acima da dobra. Se esses sliders não forem otimizados corretamente, isso pode afetar negativamente o seu LCP.
• FID – Se seus sliders contiverem arquivos JavaScript pesados, o será mais longo. Como resultado, o thread principal pode ficar ocupado e bloqueado, e a página pode não ser capaz de responder às interações do usuário.

• CLS – Muitos sliders são, infelizmente, visualmente instáveis, o que pode levar a uma nota CLS baixa.

Obviamente, nem todos os sliders de imagem terão o mesmo impacto em seu site, dependendo da quantidade de personalização, do tamanho da biblioteca e assim por diante. Mas mesmo no caso dos chamados plugins  de sliders “rápidos” , os efeitos serão prejudiciais ao seu desempenho:

Outras práticas inadequadas de desempenho

Em geral, as animações colocadas acima da dobra não são as melhores opções para o seu site. Isso inclui animações de texto também, que carregam as mesmas armadilhas dos sliders de imagem. As animações presentes no topo da página não são apenas irrelevantes para as conversões, mas também empurram o seu conteúdo para baixo. A menos que eles desempenhem um papel importante na transmissão da imagem de sua marca, lembre-se de que é seu conteúdo que vende, classifica e converte, não suas animações.

Também não recomendamos os pré-carregadores de página (ou seja, o botão giratório ou a barra de carregamento de alguns sites antes de o conteúdo real aparecer). Se você estiver usando um ao mesmo tempo que está atrasando os arquivos JavaScript, isso fará com que o pré-carregador seja exibido até que haja interação do usuário. E se não houver interação do usuário, o botão giratório simplesmente girará indefinidamente. Os pré-carregadores evitam que os usuários vejam o conteúdo imediatamente, o que não é bom para a experiência do usuário. Sem mencionar que são contraproducentes porque tornam os sites mais lentos. Por que adicionar um segundo de botão giratório quando você poderia apenas ter um site de carregamento mais rápido?

Por que você não aproveitará ao máximo o recurso Delay JS

Uma pergunta que se pode fazer é a seguinte: Executar um plugin de otimização em seu site não deveria compensar o impacto negativo dos sliders (ou outras práticas ruins) no desempenho? Infelizmente, não é tão simples. Se você estiver usando sliders em seu site, não será capaz de experimentar o ganho de performance em toda a sua extensão.

Por exemplo, o recurso Delay JavaScript Execution . A ideia por trás desse recurso é que nem todos os arquivos são relevantes para a renderização inicial de uma página, e atrasá-los pode melhorar o tempo de carregamento e a pontuação do PageSpeed.

Atrasar a execução do JavaScript melhora o desempenho, atrasando o carregamento dos arquivos JavaScript até que haja uma interação do usuário. Quando este recurso está ativo, todos os arquivos JavaScript são atrasados ​​e carregados apenas quando os usuários precisam deles, ou seja, quando uma interação do usuário é detectada (por exemplo, rolagem, clique em um botão).

Porém, se você tiver um slide no topo de uma página e o recurso Atrasar JS estiver habilitado, o conteúdo do slide será atrasado e o conteúdo não será mostrado durante a renderização inicial da página. Inútil, certo? A solução alternativa é, infelizmente, desativar o recurso para os arquivos JavaScript relacionados ao slide.

Sliders e desempenho na web

Para ver exatamente como os sliders podem afetar negativamente o desempenho do WP Rocket, foi realizada uma série de testes neste site com e sem um slide.

Cobrimos 4 cenários:

• Auditoria nº 1: medimos o desempenho de nosso site com o Revolution Slider, mas sem o recurso Delay JavaScript Execution habilitado.

• Auditoria nº 2: medimos o desempenho de nosso site com Revolution Slider e com o recurso Delay JavaScript Execution habilitado.

• Auditoria nº 3: medimos o desempenho de nosso website com Revolution Slider e com o recurso Delay JavaScript Execution habilitado. O script relacionado ao slide foi excluído.

• Auditoria nº 4: medimos o desempenho de nosso website com uma imagem estática e com o recurso Delay JavaScript Execution habilitado.

Vamos ver os resultados:

Auditoria nº 1 : Revolution Slider sem atrasar a execução do JavaScript

Como você pode ver, a pontuação é laranja (55/100) e o Core Web Vitals não está muito saudável.

Existem também alguns problemas relacionados a recursos não utilizados.

Auditoria nº 2 : Revolution Slider com Delay JavaScript Execution

Como você pode ver, a pontuação está no verde (90/100) e obtivemos resultados muito melhores no geral.

O problema era que o slide não aparecia antes da interação do usuário.

Auditoria nº 3: slide Revolution com Delay JavaScript Execution e slide excluídos

Como você pode ver, a pontuação também é verde, mas não tão boa (86/100) e há novamente problemas com recursos e imagens não utilizados.

Auditoria nº 4: Sem slide com execução atrasada de JavaScript

Em vez de usar um slide, adicionamos uma imagem estática desta vez:

Como você pode ver, os resultados foram os melhores de todos os cenários, nossa pontuação estava no verde e nos livramos de problemas de JavaScript não utilizados.

Um slide no cabeçalho apenas mata o desempenho do seu site e até mesmo o plugin de otimização mais poderoso. Não compensará por isso. Nosso conselho? Não use sliders.

Como os sliders podem afetar o SEO

Com o lançamento do Core Web Vitals, otimizar a velocidade da página no WordPress agora é mais importante do que nunca para o SEO. Como acabamos de ver, os sliders tornam as páginas mais lentas, não há como contornar isso. E a pesquisa mostra que o baixo desempenho é apenas um aspecto dos sliders que afeta negativamente o SEO. Outros problemas relatados incluem vários cabeçalhos H1 e uso de flash, por exemplo.

Além disso, a última atualização do Google é sobre a experiência do usuário: para ter uma boa classificação, sua página precisa oferecer a melhor experiência possível aos usuários. Infelizmente, usabilidade e carrosséis não andam de mãos dadas. Os sliders podem confundir os usuários: as ofertas rotativas não deixam claro o que você deseja apresentar. Se você não puder escolher, os visitantes também não poderão! E hoje em dia, UX ruim só pode prejudicar seus esforços de SEO. Os sliders também apresentam problemas de acessibilidade para usuários de teclado e leitor de tela, o que, por sua vez, terá impacto em seu SEO.

Sliders e taxas de conversão

Como acabamos de mostrar, os sliders têm um efeito negativo na experiência geral do usuário. Adicione a isso o fato de que apenas 1% das pessoas realmente clicam em um slide , que quase sempre é o primeiro slide, é fácil chegar à conclusão de que os sliders não convertem.

Dada a pouca interação que eles criam, os sliders são uma forma completamente ineficaz de atingir seu público-alvo. O conteúdo após o primeiro slide será totalmente perdido pelos usuários. Em alguns casos, os visitantes podem pular o slide completamente devido à “cegueira do banner” ou pensando que é um anúncio. De qualquer maneira, você não transmitirá sua mensagem.

Resumindo, se o objetivo do seu site é atrair conversões, será muito melhor tentar melhorar o tempo de carregamento e também as métricas do Core Web Vitals do que adicionar sliders ou qualquer tipo de animação.

As alternativas certas

Acha que não pode viver sem um carrossel? Pense de novo. “Os proprietários de sites podem usar uma única imagem estática no lugar dos sliders”, explica Vasilis. “Uma imagem é algo que vai se destacar e transmitir a mensagem que eles querem passar.” Se você quiser mostrar várias imagens, crie sua própria galeria de fotos .

Os sliders estáticos também podem ser uma alternativa. Eles ainda apresentam problemas de usabilidade e conversão, mas seu impacto no desempenho não é tão ruim. Em qualquer caso, evite animações.