Parede social 
Análise de feeds 
Executaste o PageSpeed Insights. O relatório ficou todo a vermelho. E qual é o culpado? As tuas incorporações de redes sociais, identificadas como o fator que está a prejudicar as tuas pontuações. Agora, todos os artigos que lês dizem a mesma coisa: basta apagá-las.
Já falei com muitos proprietários de sites que se encontram precisamente nesta situação. Adoram o seu feed. É uma prova social que os ajuda a converter. Mas têm receio de que seja essa a razão pela qual o site parece lento e preferem não o remover.
Por isso, fui eu próprio que realizei os testes. Um site WordPress, comparando incorporações diretas com um feed de plugin, medido com o PageSpeed Insights, o Chrome DevTools e o Pingdom.
Os números surpreenderam até a mim. Numa execução, a substituição do código incorporado reduziu o peso da página em quase 90% e diminuiu o tempo de bloqueio de 4 510 ms para zero.
Vou explicar-te por que razão o teu feed foi sinalizado, quanto custa e como o manter enquanto os teus Core Web Vitals estiverem em conformidade. Há uma forma difícil e uma forma fácil, e vou abordar ambas.
- Resposta rápida: É preciso apagar o feed das redes sociais?
- Por que é que o PageSpeed assinalou o seu feed (não é o que pensa)
- Por que razão «basta apagá-lo» não é a solução certa
- Quanto custa realmente o teu feed nas redes sociais (nós medimos)
- A maneira difícil vs. a maneira fácil de resolver isto
- Como as campanhas da Smash Balloon contribuem para cada métrica
- Isto também funciona com outros feeds do Smash Balloon? (Sim — a solução é a mesma)
- Mantém o teu feed. Cumpre os Core Web Vitals. Começa já.
Resposta rápida: É preciso apagar o feed das redes sociais?
Não. Não precisas de apagar nada.
O feed nunca foi o verdadeiro problema. O problema é o código de incorporação bruto que colaste. Esse iframe ou oEmbed de terceiros carrega um leitor completo antes de alguém clicar em qualquer coisa.
Substitua essa incorporação direta por um feed nativo do WordPress. Este carrega as imagens de forma diferida e adia o carregamento do leitor, para que a sua página carregue mais rapidamente, mesmo com as suas incorporações a funcionarem na perfeição.
Eis o que cada correção protege:
- Evite o uso de iframes, recorra ao carregamento diferido de imagens e utilize o formato WebP. Esta é a vantagem comprovada. Reduz o peso da página e acelera o Largest Contentful Paint, precisamente o ponto em que as incorporações diretas ficaram aquém.
- Reserve espaço para cada imagem. Isto mantém o seu layout estável e garante que o Cumulative Layout Shift se mantenha baixo.
- Adiar o reprodutor de terceiros até que alguém clique. Isto evita que o navegador fique sobrecarregado, pelo que a página continua a responder rapidamente e não fica bloqueada enquanto carrega.
Há uma forma difícil e uma forma fácil de fazer isto. Vamos mostrar as duas. A forma fácil leva a melhor.
Por que é que o PageSpeed assinalou o seu feed (não é o que pensa)
Por que é que o PageSpeed assinalou especificamente o teu feed de redes sociais? Porque não te limitaste a adicionar um feed. Adicionaste um leitor multimédia completo.
Eis o que a maioria das pessoas não percebe. Aquele código oEmbed do Instagram ou de incorporação do YouTube não se limita a mostrar discretamente uma fotografia. Carrega o leitor completo da plataforma, os scripts e o iframe assim que a página é carregada.
Não quando alguém clica. Antes de alguém fazer alguma coisa.
Assim, o navegador interrompe a construção da tua página e vai primeiro buscar o código do Instagram ou do YouTube. Essa busca consome muitos recursos. E acontece no pior momento possível.
No meu próprio teste com o Pingdom num site WordPress, nove códigos de incorporação do YouTube, sem processamento, carregaram cerca de 7,5 MB de código do leitor antes de alguém clicar no botão «play».
Isso representava cerca de 92% do peso da página. Eram apenas jogadores ali, a carregar.
É isso que influencia o teu Largest Contentful Paint, que corresponde à rapidez com que o teu conteúdo principal é carregado. O leitor intromete-se à frente do teu conteúdo real e faz com que o visitante tenha de esperar.
Agora imagina uma página com mais do que uma incorporação. Cada uma delas repete tudo de novo.
Todo esse código também ocupa o thread principal, a única via que o seu navegador utiliza para responder a cliques e toques. Quando fica sobrecarregado, há mais duas coisas que são afetadas:
- A sua interação com o «Next Paint», ou seja, a rapidez com que a página reage quando alguém toca no ecrã.
- O seu Cumulative Layout Shift, que corresponde aos elementos que saltam de lugar à medida que o conteúdo tardio vai aparecendo.
Portanto, o PageSpeed não está errado. Ele deteta uma página lenta. Apenas aponta para «o feed», quando o verdadeiro peso é o leitor de terceiros que está integrado nele.
O feed é a parte que te interessa. A carga do jogador é a parte que não te interessa.
Por que razão «basta apagá-lo» não é a solução certa
Eis a parte que está certa. As incorporações em formato Raw são mesmo lentas. O meu próprio teste provou-o, e vou mostrar-vos os números abaixo.
Pensa no que o teu feed faz por ti. É uma prova social. Mostra pessoas reais a utilizar o teu produto, comentários reais, publicações reais. Isso cria confiança, e a confiança impulsiona as vendas.
Apagá-lo só para passar num teste de velocidade é uma má escolha. Ganharias uma pontuação ecológica, mas perderias aquilo que te ajuda a converter.
Portanto, a verdadeira escolha nunca foi «manter» versus «apagar». Essa é uma falsa dicotomia.
A verdadeira escolha é esta:
- Uma incorporação em formato bruto é inserida no reprodutor pesado da plataforma e faz com que as suas métricas desçam.
- Um feed de plug-in nativo mostra as mesmas publicações, mas carrega as imagens de forma diferida e adia a exibição do leitor.
O mesmo feed. A mesma prova social. Uma velocidade muito diferente que proporciona aos seus visitantes uma melhor experiência.
Continua a ler. Todas as correções a partir daqui baseiam-se nessa alteração específica.
Quanto custa realmente o teu feed nas redes sociais (nós medimos)
Já conhecem a teoria. Agora, eis os números.
Fiz um teste real num site público do WordPress, utilizando incorporações diretas numa versão e um feed de plugin na outra. Efetuei as medições com o PageSpeed Insights, o Chrome DevTools e o Pingdom.
Eis o que nove códigos de incorporação do YouTube sem formatação fizeram a essa página e o que o feed do plugin alterou:
| O que medi | Inserções em formato Raw | Feed de plugins |
|---|---|---|
| Código do YouTube carregado | 8,8 MB (92 % do peso da página) | 457 KB (redução de cerca de 95 %) |
| Tempo total de bloqueio | 4 510 ms | 0 ms |
| Índice de Velocidade Móvel | 15.1s | 4.9s |
| Pontuação do PageSpeed para dispositivos móveis | 49 | 72 |
| Pontuação do PageSpeed para computador | 52 | 99 |
Repara na primeira linha. Foram carregados quase 8,8 MB de código do leitor do YouTube antes de alguém clicar no botão «Reproduzir».
Isso correspondia a cerca de 92% da página inteira. O plugin de otimização reduziu o tamanho em cerca de 95%, para 457 KB.
O «Tempo Total de Bloqueio» passou de 4 510 ms para zero. Esse é o tempo durante o qual a sua página fica congelada, incapaz de responder a um toque. Está diretamente relacionado com o seu «Interaction to Next Paint».
Depois, verifiquei a página na íntegra no Pingdom para confirmar. Os resultados coincidiram. A página incorporada, sem processamento, tinha 8,4 MB e envolveu 176 pedidos.
Em comparação, a página de feeds do plugin do WordPress tinha 1,1 MB, distribuídos por 42 pedidos.
Duas ferramentas distintas, testadas na mesma página, que chegaram aos mesmos resultados.
O Instagram apresentou o mesmo cenário, embora em menor escala. Uma incorporação em iframe que funcionava atingiu um tempo de Largest Contentful Paint de 3,2 s num dispositivo móvel. Isso não é aceitável.
No entanto, o mesmo número de publicações do Instagram incorporadas num feed de um plugin demorou 2,3 s.
Vou ser totalmente sincero, para que possam confiar no resto. Há aqui algumas coisas que merecem uma ressalva.
- Algumas incorporações em bruto apresentaram um LCP de vídeo mais baixo em laboratório. Tratava-se de um artefacto. O navegador utilizado no teste não conseguiu apresentar a miniatura. Para os visitantes reais, o LCP seria mais elevado.
- O valor do LCP do Instagram corresponde a um único teste, pelo que deve ser considerado como uma indicação útil, e não como um veredicto definitivo.
- Este é um site de teste. Os teus números irão variar consoante o teu tema, o teu alojamento e o teu conteúdo.
Estou a falar-te dos pontos fracos de propósito. O que importa não é um número perfeito. O que importa é a dimensão da discrepância e o facto de as duas ferramentas chegarem a um consenso sobre ela.
Queres verificar o teu próprio site? Executa o PageSpeed Insights, abre o Chrome DevTools e testa a página no Pingdom. São as mesmas três ferramentas que utilizei. Podes repetir todos os cálculos acima.
A maneira difícil vs. a maneira fácil de resolver isto
Então, queres manter o feed e passar no teste. Há duas formas de o conseguires.
Uma é manual. Faz-se todas as correções manualmente. A outra é um plugin que faz essas correções por si.
Ambas funcionam. Mas não exigem o mesmo esforço. Deixa-me mostrar-te o que cada uma realmente implica.
O método manual: programar manualmente
Queres resolver isto sozinho, manualmente? Podes fazê-lo. Só que é imenso código e nunca acaba mesmo.
Eis uma breve explicação do que significa «fazer por conta própria». Terá de tratar de cada um destes pontos, um de cada vez:
- Elimine o oEmbed. Remova o código de incorporação bruto que carrega o reprodutor pesado.
- Aloja as miniaturas no teu próprio servidor. Descarrega cada imagem e disponibiliza-a a partir do teu próprio site.
- Atribui largura e altura a todas as imagens. Isto reserva o espaço necessário para que o teu layout não fique a saltar.
- Cria uma fachada. Mostra uma imagem falsa do leitor e carrega o leitor real do YouTube apenas quando alguém clicar.
- Carregue as imagens de forma diferida. Indique ao navegador para ignorar as imagens até que estas apareçam na área visível ao deslocar a página.
- Converte cada imagem para o formato WebP manualmente. Este é o formato mais leve que deu bons resultados no meu teste.
Essa é a versão. Agora, eis a parte sobre a qual ninguém te avisa.
Tens de manter tudo isso. Sempre que o Instagram ou o YouTube alteram a sua marcação, o teu código pode deixar de funcionar. E aí tens de voltar lá para corrigir tudo outra vez.
É um trabalho válido. É um trabalho honesto. Mas vais ter de estar sempre a tomar conta disso.
A forma mais fácil: um plugin de feeds nativo do WordPress
Eis a forma mais fácil. Utiliza um plugin de feeds nativo do WordPress, como o Smash Balloon, e ele trata de todos os passos acima por ti.
Não é necessário programar. O plugin remove o código de incorporação, hospeda as imagens no próprio servidor e aplica o carregamento diferido, reserva o espaço, apresenta as imagens no formato WebP e adia a exibição do leitor até que se clique nele. Tudo isto, de forma autónoma.
Esta é toda a lista manual, gerida automaticamente. Mesmo que não sejas um especialista em tecnologia, consegues configurá-la.
E não és o primeiro a experimentá-lo. O Smash Balloon tem mais de 1,75 milhões de utilizadores ativos, com uma classificação de 4,9 estrelas em 5.
Esse tipo de adoção diz-nos algo. Muitos proprietários de sites já optaram pela via mais fácil, e essa opção revelou-se eficaz. A seguir, vou mostrar-lhe exatamente como protege cada métrica.
Como as campanhas da Smash Balloon contribuem para cada métrica
Então, como é que um único plugin consegue proteger estas três métricas ao mesmo tempo? Ele ataca exatamente o que as prejudicava: a carga de peso na parte dianteira.
Cada correção corresponde a uma métrica. Aqui está a versão simplificada.
| Mecanismo | O que faz |
|---|---|
| Não é carregado nenhum reprodutor de terceiros nem iframe inicialmente | Elimina o código pesado do jogador antes de alguém clicar |
| Otimização de imagens WebP | Apresenta imagens mais leves que são descarregadas mais rapidamente |
| Carregamento diferido e armazenamento em cache inteligente | Carrega as imagens apenas quando necessário e, depois, mantém-nas em cache |
Olha para a primeira linha. Essa única alteração resume todo o resultado do meu teste.
Nove códigos de incorporação do YouTube, tal como estavam, carregaram cerca de 8,8 MB de código do leitor antes de alguém clicar no botão «Reproduzir».
O feed do plugin ignorou isso e mostrou miniaturas em vez disso. O tamanho do ficheiro do YouTube diminuiu cerca de 95%, passando para 457 KB.
Menos conteúdo para carregar significa que o teu conteúdo principal ganha a corrida. É assim que se atinge o Largest Contentful Paint.
A segunda parte diz respeito às próprias imagens. O Smash Balloon Instagram Feed Pro apresenta as tuas fotos no formato WebP, que é mais leve. As imagens mais leves carregam mais rapidamente e, mais uma vez, isso ajuda a melhorar o teu LCP.
A terceira parte diz respeito ao tempo de carregamento e à reutilização. As imagens são carregadas à medida que o visitante percorre a página, e não todas de uma só vez. As imagens armazenadas em cache são, então, carregadas rapidamente na visita seguinte.
É por isso que os números do laboratório evoluíram dessa forma. O feed não ficou mais leve por magia. Ficou mais leve porque o leitor nunca carregava o conteúdo até que alguém o solicitasse.
As mesmas publicações que os teus visitantes vêem. A mesma prova social que criaste. Mas com muito menos peso por trás.
Isto também funciona com outros feeds do Smash Balloon? (Sim — a solução é a mesma)
Isto só funciona no Instagram? Não. É a mesma solução para todos os feeds do Smash Balloon.
No caso do YouTube, o plugin semelhante é o YouTube Feed Pro. A mesma função, o mesmo resultado: miniaturas em primeiro lugar, leitor de vídeo quando solicitado.
A causa principal nunca muda. Uma incorporação em formato «raw» carrega logo à partida o pesado reprodutor da plataforma.
Por outro lado, o YouTube Feed Pro mostra miniaturas e adia a abertura do leitor até que alguém clique.
Lembra-te de que, segundo os testes, o YouTube é o que apresenta pior desempenho de todos.
Nove códigos de incorporação do YouTube, sem formatação, carregaram cerca de 8,8 MB de código do leitor antes de alguém premir o botão de reprodução. O tempo total de bloqueio situou-se nos 4 510 ms.
A utilização do YouTube Feed Pro inverteu essa situação. Apresentava os mesmos vídeos como miniaturas e carregava o leitor apenas quando se clicava. A pegada do YouTube diminuiu cerca de 95% e o tempo total de bloqueio caiu para 0 ms.
E não fica por aí. Todos os plugins de feed da Smash Balloon são desenvolvidos a pensar na velocidade e num carregamento rápido. Isso inclui o Facebook, o Instagram, o TikTok, o YouTube e o X (anteriormente Twitter).
Comece já a acelerar o seu feed
Adquira os plugins do Smash Balloon para o teu feed e deixa que eles mantenham os teus Core Web Vitals no verde, enquanto a tua prova social permanece exatamente onde queres que esteja.
Perguntas mais frequentes
Se eu eliminar a incorporação, perco o feed na minha página?
Não, eliminar a incorporação não faz com que se perca o feed na tua página. Basta substituí-lo por um bloco de feed de um plugin ou por um shortcode, utilizando uma ferramenta como o Smash Balloon. As mesmas publicações, no mesmo sítio, mas muito mais leve.
Adicionar um plugin não vai apenas tornar o meu site ainda mais lento?
Nem todos os plugins tornam o site mais lento, pelo que adicionar o plugin certo não o vai tornar ainda mais lento. Uma incorporação direta carrega o leitor completo da plataforma logo à partida. Um plugin carrega as imagens de forma diferida e adia o carregamento desse leitor, razão pela qual o meu teste reduziu o peso da página em quase 87%.
Como posso saber se o meu feed é mesmo o problema?
Podes verificar se o problema está no teu feed em poucos minutos. Executa o PageSpeed Insights e presta atenção a dois aspetos: o elemento LCP e as transferências de rede de maior volume. Se o elemento assinalado for a tua incorporação, ou se os bytes de maior volume corresponderem aos scripts do leitor, esse é o culpado.
Preciso de alterar algum código para ajustar a velocidade dos meus feeds das redes sociais?
Não, não precisas de mexer em nenhum código. Basta instalar o plugin, ligar a tua conta e colar um bloco. Mesmo que não sejas nenhum génio da tecnologia, é só isso que tens de fazer.
Mantém o teu feed. Cumpre os Core Web Vitals. Começa já.
Eis a única coisa a que vale a pena dar importância. O teu feed nunca foi o problema. O problema era a incorporação em bruto, que carregava o leitor completo da plataforma antes de alguém clicar.
Substitua essa incorporação por um plugin de feed de redes sociais, como o Smash Balloon, e veja a velocidade do seu site melhorar, mantendo a prova social exatamente onde deve estar.
Por isso, não há necessidade de eliminar o teu feed. Mantém-no e deixa que seja carregado na versão simplificada.
A opção mais simples é o Pacote All Access. Este inclui todos os plugins de feed do Smash Balloon, pelo que, quer estejas no Instagram, no YouTube, no Facebook, no TikTok ou no X, estás coberto.
Adquira o Pacote All Access, altere o seu código incorporado e veja o seu relatório do PageSpeed ficar verde.
