O guia do profissional de marketing para renderização no lado do servidor
Publicados: 2021-07-26A linguagem de programação não é um conceito fácil de entender, especialmente quando seu trabalho de SEO foi focado principalmente no lado não técnico. Mas aqui está a coisa sobre SEO técnico: o conhecimento dele ajuda você a entender as mudanças que seu site precisa fazer para obter uma melhor classificação nos mecanismos de pesquisa.
Como o Google lançou o Core Web Vitals em junho, que faz parte de sua atualização do Page Experience, todo profissional de marketing que não deu uma olhada mais de perto no SEO técnico vai querer fazer isso agora.
E quando seu site é construído em estruturas JavaScript, uma parte a ser explorada é a renderização do lado do servidor.
O que é renderização do lado do servidor?
A renderização do lado do servidor é quando o processo de recuperar uma página da Web, pegar o código, exibir o conteúdo em uma tela - tudo acontece no servidor.
Em RSS:
- O servidor envia uma resposta pronta para ser renderizada ao navegador;
- O navegador renderiza a página, deixando-a pronta para ser visualizada e então o navegador baixa o JavaScript;
- O navegador então executa o React quando a página está pronta para ser visualizada, e
- A página web está então pronta para interatividade.
A forma como tudo acontece tornou uma opção melhor para outros tipos de renderização: renderização do lado do cliente (onde o JavaScript é renderizado pelo navegador, também conhecido como cliente) e renderização dinâmica (onde os usuários obtêm conteúdo renderizado cliente-servidor e mecanismos de pesquisa obter conteúdo renderizado do lado do servidor). Até o Google incentiva os desenvolvedores da Web a escolher a renderização do lado do servidor.
Por quê?
[Estudo de caso] Gerenciando o rastreamento de bot do Google
Leia o estudo de casoAs vantagens do SSR
- Ajuda a carregar uma página da web quando a conexão com a Internet de um usuário é lenta
- Permite o carregamento rápido das páginas, contribuindo para uma melhor experiência do usuário
- Ele cria uma página HTML completa, evitando o demorado processo de busca de dados
- Ele permite que as páginas carreguem, com todos os seus elementos, mesmo quando o usuário possui um dispositivo com pouca potência, como um smartphone de geração antiga
- Contribui para o desempenho de SEO porque permite que os mecanismos de pesquisa rastreiem e indexem as páginas com precisão; os bots podem rastrear páginas facilmente, pois entendem JS
No geral, o SSR ajuda você a atender melhor os clientes on-line porque os visitantes do seu site não vão esperar que as páginas sejam exibidas em seus dispositivos. Transições de página rápidas também garantem que seus usuários nunca recebam uma página em branco, permitindo que eles usem seu site imediatamente.
Como o Google está ampliando sua campanha para fornecer resultados mais precisos com melhorias de algoritmo construídas em torno da experiência do usuário, o SSR é melhor para seu desempenho de SEO em comparação com a renderização cliente-servidor.
Mas, como tudo no marketing digital, uma abordagem única raramente funciona para todos. Em alguns casos, a renderização do lado do servidor pode ser um problema. Como o Google diz, o SSR “não é uma bala de prata”.
As desvantagens do SSR
- Isso envolve muito trabalho porque está fazendo a mesma aplicação duas vezes: uma vez no cliente e depois no servidor.
- Pode atrasar o tempo para o primeiro byte
- Isso pode afetar os links internos ou a qualidade da página, pois não pode renderizar JS de terceiros (por exemplo, conteúdo gerado pelo usuário, análises de produtos etc.) ou qualquer conteúdo que não esteja em seu HTML estático; os bots não poderão vê-los
- URLs que não são atualizados podem significar que os bots não poderão ver novos artigos, o que pode levar à perda de tráfego
Outro aspecto importante do SSR é que isso significa custos para o negócio, pois a renderização ocorre em seus servidores. Mas é um custo no qual você pode querer investir porque esse tipo de renderização pode contribuir para a otimização do Core Web Vitals.
Por que o SSR é relevante para a CWV?
Desenvolvedores da Web e SEOs trabalham há meses em antecipação ao lançamento do CWV. Cerca de 60% das agências de SEO pesquisadas estão ocupadas melhorando as pontuações CWV dos clientes. Se você estiver usando SSR, talvez não precise fazer um trabalho substancial para atender às expectativas.
Como o SSR facilita a velocidade, seu site já pode se sair bem com uma das métricas: a maior pintura de conteúdo (LCP).
O LCP se concentra na experiência de carregamento percebida. Ele mede o tempo de carregamento da página quando a maior imagem ou texto de uma página da Web está visível na janela de visualização. O que você deseja para obter uma boa pontuação é um carregamento de página de 75% em <2,5 segundos.
Os principais desafios para obter um bom LCP são JS e CSS de bloqueio de renderização; tempos de carregamento de recursos lentos, resposta lenta do servidor e renderização do lado do cliente.
Uma mudança para o SSR é apenas uma solução para melhorar a pontuação do LCP, porque seu problema pode não estar limitado ao CSR. Você vai querer trabalhar com seus desenvolvedores da web para primeiro identificar o que está causando o atraso do seu LCP.
Se a fonte da página revelar um código que não faz sentido (e seu desenvolvedor lhe dirá), o problema pode ser CSR. Se o seu desenvolvedor descobrir que o TTFB é ruim, você pode estar lidando com um tempo de resposta lento do servidor.
As outras métricas CWV são:
- First Input Delay, que se concentra na capacidade de resposta, e
- Mudança de layout cumulativa, que se concentra na estabilidade visual.
Ambos não são relevantes para o SSR, portanto, essas são métricas nas quais você pode se esforçar mais, pois o SSR cuida parcialmente do LCP.
Como saber se o SSR está renderizando as páginas da Web corretamente
A melhor maneira de saber se o SSR está renderizando suas páginas corretamente seria usar ferramentas. Um deles é o Teste de compatibilidade com dispositivos móveis. É uma ferramenta que fornece um instantâneo de como suas páginas da web apareceriam para o Googlebots e mostra erros durante a renderização, se houver.
O Google Search Console também possui uma Ferramenta de inspeção de URL que permite ver se o mecanismo de pesquisa está renderizando suas páginas. Use-o para verificar se há conteúdo ausente ou qualquer erro relacionado a JavaScript ou CSS bloqueado.
Você também pode acessar View Render Source, que é uma extensão gratuita do Chrome. Ele lhe dirá como o navegador renderiza uma página de seu HTML original para um DOM funcional. A extensão ilustrará a diferença entre uma versão bruta e renderizada, com destaques de como o JS modificou as páginas no tempo de renderização.
Outra extensão do Chrome para experimentar é o SiteCrawler. O rastreador compatível com JS rastreia sitemaps, links e imagens e compara páginas somente HTML e páginas habilitadas para JS.
O embrulho
Grande parte do trabalho de SEO envolve a otimização de páginas que já foram “entregues” ao cliente ou ao navegador. Mas quando você examina como essas páginas “chegam” ao cliente e como você pode melhorar como isso acontece, os usuários têm um tempo melhor em seu site.
Os bots rastreiam suas páginas corretamente. Suas páginas são indexadas. Seu site tem uma melhor classificação nos mecanismos de pesquisa.
As atualizações do mecanismo de pesquisa, juntamente com as mudanças no comportamento do consumidor, também exigem alterações no seu site. Com o próximo lançamento do CWV, agora seria um bom momento para analisar o SSR, um aspecto técnico que afetaria seus esforços de SEO.