Monitoramento de desempenho e integridade do site: dicas e práticas recomendadas

Configurar e executar um projeto de site ou comércio eletrônico é ótimo - no entanto, seu trabalho está longe de ser concluído quando seu site está em funcionamento.

Sem o monitoramento adequado de integridade e desempenho, seu site sofrerá as consequências – que podem ser muito maiores do que simplesmente uma velocidade de carregamento lenta.

Vamos voltar nossa atenção para um cenário hipotético e ideal onde todos os sites do mundo estão funcionando como deveriam. Você sabia que, além de aumentar a satisfação do usuário, também contribuiríamos para um ambiente melhor?

Sites com baixo desempenho não apenas impactam quem os cria ou os usa, mas também deixam uma pegada de carbono maior.

De acordo com a Calculadora de Carbono do Site, os sites têm uma pegada de carbono e a página média do site emite 0,5 gramas de dióxido de carbono por visualização. Isso é apenas a mediana.

Ao olhar para a média, que também considera sites altamente poluentes, esse número sobe para 0,9 gramas.

Além de problemas em escala global, um site não saudável e com desempenho inadequado custará tempo, dinheiro e receita. A saúde do site é semelhante à nossa: é fácil negligenciar e difícil de melhorar.

Você precisa estar ciente dos principais componentes que compõem a integridade do site para realizar práticas de monitoramento adequadas para ajudar a economizar tempo de processamento.

Com o surgimento de construtores de sites rápidos e fáceis, a criação de sites tornou-se acessível a todos. Tudo o que você precisa fazer é se inscrever, escolher um domínio, escolher seu modelo e pronto! Você tem um site em segundos.

No entanto, muitos proprietários de sites descartam o fato de que a criação de sites é apenas o primeiro passo. A manutenção adequada do desempenho e o monitoramento da integridade também são cruciais.

E nessa nota, vamos dar uma olhada em alguns indicadores essenciais de saúde e desempenho do site: o que são, como monitorá-los e como fazer melhorias.

Aspectos a serem monitorados para uma alta pontuação de integridade do site

Principais Vitais da Web

Imagem do autor, outubro de 2022

Informações do Google PageSpeed

As primeiras métricas que você deve considerar ao realizar testes de desempenho são os seus Principais Web Vitais. Esses indicadores de desempenho mostram velocidade, estabilidade e capacidade de resposta, ajudando você a entender a qualidade da experiência do usuário do seu site.

Várias ferramentas rastreiam seus Core Web Vitals, mas muitos proprietários de sites gravitam em torno de uma ferramenta simples: Google PageSpeed ​​Insights.

Depois de inserir seu URL na ferramenta, você receberá um relatório mostrando se você passou no teste Core Web Vitals e quaisquer outros aspectos que você precisa ficar de olho. Aqui estão as três principais métricas que você verá:

Maior pintura de conteúdo (LCP)

Apontar para uma pontuação de 2,5 segundos ou menos .

Se sua pontuação for superior a 2,5 segundos, isso pode indicar o seguinte: seu servidor está atrasado, os tempos de carregamento de recursos não estão à altura, você tem um número alto de JavaScript e CSS de bloqueio de renderização ou há renderização lenta no lado do cliente.

Atraso da primeira entrada (FID)

Apontar para uma pontuação de 100 milissegundos ou menos .

Se sua pontuação exceder esse tempo, talvez seja necessário reduzir o impacto do código de terceiros, reduzir o tempo de execução do JavaScript, minimizar o trabalho do thread principal, manter os tamanhos de transferência pequenos e as contagens de solicitações baixas.

Mudança de layout cumulativa (CLS)

Apontar para uma pontuação de 0,1 ou menos .

Se sua pontuação exceder isso, você pode evitar mudanças aleatórias de layout incluindo atributos de tamanho em seu conteúdo visual e de vídeo (ou reserve o espaço com caixas de proporção CSS). Evite sobrepor seu conteúdo e esteja atento ao animar suas transições.

Bloqueadores de velocidade de página

Vários fatores podem afetar a velocidade de carregamento do seu site. No entanto, se você estiver com pouco tempo e quiser se concentrar primeiro nos principais culpados, preste muita atenção aos seguintes fatores:

• JavaScript e código CSS não usados.
• Renderizar JavaScript e código CSS de bloqueio.
• JavaScript não minificado e código CSS.
• Tamanhos de arquivo de imagem grandes (mais sobre isso abaixo).
• Muitas cadeias de redirecionamento.

Para melhorar a carga de arquivos JavaScript e CSS, considere pré-carregá-los.

Outra opção seria habilitar dicas iniciais, que informam ao navegador na resposta do servidor HTTP quais recursos ele deve começar a baixar, aproveitando o “tempo de reflexão do servidor”, acelerando assim o carregamento da página.

Para testar seu site:

1. Navegue até https://pagespeed.web.dev/
2. Digite o URL da página que você deseja verificar.

Eu recomendaria escolher sua página inicial primeiro.

Outra ferramenta útil é o WebPageTest.org, que também mostra seus Core Web Vitals e outras métricas que podem ajudá-lo a melhorar drasticamente o desempenho e a saúde do seu site. Além disso, é grátis!

Basta colar um URL de página na caixa de pesquisa mostrada no site e ele realizará um teste completo a partir de um local padrão.

Você também pode se registrar como usuário e escolher em uma lista de locais para testar seu site em diferentes países, dispositivos e navegadores.

O WebPageTest mostrará exatamente onde seu site está em termos de desempenho e o que pode estar deixando-o lento por meio de um Resumo de desempenho composto de quatro seções principais: Oportunidades e experimentos, Métricas observadas, Medidas reais de usuários e execuções individuais.

Imagem do autor, outubro de 2022

Na UCRAFT, usamos uma combinação de ferramentas como PageSpeed ​​Insights, Chrome Dev Tools, WebPageTest e várias outras, para obter uma compreensão clara do que precisamos trabalhar quando se trata do desempenho do nosso site - especialmente porque o setor de SaaS é já altamente competitivo.

Elementos de design

Captura de tela do autor, outubro de 2022

Quando pensamos no desempenho do site e no monitoramento da integridade, geralmente deixamos isso para a equipe de tecnologia lidar.

Mas e se eu lhe disser como você projeta seu site e os elementos que você escolhe podem melhorar ou prejudicar seu desempenho?

Isso mesmo – é hora de envolver a equipe de design.

Otimização de imagem

As imagens são ótimas, mas podem deixar seu site mais lento se não forem dimensionadas adequadamente. Certifique-se de redimensionar suas imagens e evite fazer upload de arquivos gigantes quando eles não serão exibidos na íntegra.

Da mesma forma, comprima suas imagens e experimente diferentes tipos de arquivos, como WebP, JPEG 2000 e JPEG XR, em vez de optar por arquivos JPEG ou PNG mais pesados.

Considere implementar o carregamento lento nativo para garantir que as imagens sejam carregadas quando o usuário as visualizar, em vez de carregá-las todas de uma vez.

Quase todos os navegadores, incluindo Chrome, Safari e Firefox, suportam o atributo loading=”lazy” em <img> ou <iframe>, que informa ao navegador para carregá-los quando o usuário se aproximar deles.

Certifique-se de não carregar imagens acima da dobra, pois isso degradará a pontuação do LCP da sua página, e o Google recomenda usar o atributo fetchpriority=”high” nas imagens acima da dobra para melhorar o LCP.

Se você usar esse atributo, não será necessário pré-carregar as imagens. Você deve pré-carregar ou definir o atributo “fetchpriority” nas imagens acima da dobra.

Além disso, aproveite a capacidade de resposta do atributo “srcset” para carregar imagens de tamanho adequado com base no tamanho da tela e evite carregar imagens grandes de forma redundante em telas pequenas. Isso ajudará muito a melhorar a pontuação do LCP.

Fontes

Fontes personalizadas extravagantes são muitas vezes difíceis de ler para usuários sem visão 20/20, mas também podem diminuir consideravelmente o seu site.

Troque as fontes hospedadas externamente por fontes mais seguras para a Web e experimente as fontes do Google, desde que sejam hospedadas pela CDN do Google.

Além disso, considere incorporar fontes variáveis ​​na estética geral do seu site, pois essa especificação de fonte pode reduzir significativamente os tamanhos dos arquivos de fonte.

Certifique-se de pré-carregar suas fontes.

Animações/Recursos Adicionais

Isso nem precisa dizer: não exagere com animações, vídeos, efeitos especiais, controles deslizantes ou outros elementos extravagantes.

É bom incluir alguns elementos interativos aqui e ali, mas saturar seu site com muitas “coisas” em movimento pode ser frustrante para os usuários e seus servidores.

Não use animações não compostas, pois elas causam a re-pintura da página, o que aumenta o trabalho do thread principal – e a página da Web pode parecer visualmente instável ao carregar.

Solução PWA para otimização móvel

Por que não seguir todo o caminho otimizado para dispositivos móveis e transformar seu site móvel em um Progressive Web App (PWA)?

Como os PWAs são criados com service workers, eles carregam o conteúdo em cache em uma taxa mais rápida. Não apenas isso, mas os PWAs se assemelham a aplicativos móveis nativos, o que é ótimo para desempenho e UX.

Métricas Adicionais de Desempenho Técnico

Tempo de atividade

Uptime mostra o quão bem seu site está funcionando.

Se o seu site travar ou ficar inativo com frequência, isso prejudicará a experiência do usuário, os rankings do Google e, portanto, sua receita.

Se possível, tente ter um tempo de atividade de 99,999% e teste seu site em diferentes locais.

Ferramentas para monitoramento de tempo de atividade:

• StatusBolo.
• Pingdom.
• Melhor tempo de atividade.
• UptimeRobot.

Desempenho do banco de dados

Se você verificou o básico e seu site ainda está lento para responder, pode ser devido ao baixo desempenho do banco de dados.

Você pode verificar isso monitorando o tempo de resposta de suas consultas e identificando as consultas de banco de dados que estão ocupando mais tempo.

Depois de fazer isso, comece a otimizar! Você pode usar ferramentas como o Blackfire.io para ajudá-lo a identificar facilmente gargalos e encontrar soluções com base em dados precisos.

Hardware do Servidor Web

Seu site pode ficar lento se o espaço em disco estiver cheio de arquivos de log, imagens, vídeos e entradas de banco de dados. Certifique-se de monitorar a carga da unidade de processamento central (CPU) regularmente, especialmente depois de implementar atualizações ou alterações de design.

Ferramentas como o New Relic podem ajudá-lo a melhorar toda a sua pilha por meio de monitoramento e depuração eficientes.

Visibilidade de pesquisa

Muitas das métricas discutidas acima já têm um impacto significativo na visibilidade da pesquisa.

Então, quando você executa as páginas do seu site por meio do Google PageSpeed ​​Insights e as otimiza, você também está fazendo coisas importantes para o seu SEO.

Você também pode optar por ferramentas de rastreamento de sites, como Semrush ou Sitechecker.pro, Screaming Frog, DeepCrawl ou qualquer outra ferramenta que melhor atenda às suas necessidades.

Os rastreadores de sites ajudam a encontrar todos os tipos de problemas, como:

• Links quebrados.
• Imagens quebradas.
• Monitore as principais métricas vitais da web.
• Redes de redirecionamento.
• Erros de dados estruturados.
• Sem páginas indexadas.
• Faltam títulos e meta descrições.
• Conteúdo misto.

Certifique-se de que está tudo pronto quando se trata dos seguintes pontos:

• Sitemap XML – Certifique-se de que seu sitemap esteja formatado corretamente e verifique se é necessário fazer alguma atualização e reenviar seu sitemap via Google Search Console.
• Robots.txt – Certifique-se de utilizar um arquivo robots.txt para suas páginas da web (HTML, PDF ou qualquer outro formato que não seja de mídia que os mecanismos de pesquisa possam ler) para gerenciar melhor o tráfego de rastreamento, especialmente se você suspeitar que seu servidor pode estar sobrecarregado por solicitações do rastreador do Google.

Segurança e cache do site

Obtenha seu certificado SSL!

Um site saudável é um site seguro.

Mesmo que seu site carregue em tempo perfeito e obtenha uma pontuação de 100/100, não há como os usuários (ou mecanismos de pesquisa) confiarem em seu site se ele não começar com https://.

Um certificado SSL é essencialmente um código em seu servidor que cria uma conexão criptografada, garantindo que os dados do usuário permaneçam seguros.

A obtenção de um certificado SSL não é um processo particularmente difícil, mas pode ser demorado quando feito manualmente.

No entanto, se você estiver usando um provedor de hospedagem bem estabelecido, como o BlueHost, na maioria das vezes, seu provedor poderá emitir um SSL gratuito para seu domínio.

Considere usar um CDN

As redes de entrega de conteúdo (CDNs) são servidores distribuídos que trabalham em uníssono para fornecer conteúdo de internet rápido.

Em outras palavras, uma CDN é uma ferramenta que agiliza o desempenho do seu site, mantendo seu conteúdo em servidores próximos aos usuários, independentemente da localização geográfica. Isso também é conhecido como cache.

Se você tem uma presença global, um CDN é obrigatório! Isso aumentará a velocidade de carregamento da sua página, diminuirá seus custos de largura de banda, distribuirá seu tráfego (reduzindo as chances de seu site cair) e aumentará a segurança por meio de recursos como mitigação de DDoS.

Os principais players do setor incluem Cloudflare, Amazon Cloudfront e Google Cloud CDN. No entanto, existem muitas outras opções, então faça sua pesquisa e escolha a melhor CDN para o seu site e requisitos de negócios.

Configurar firewall de aplicativo da web

Um Web Application Firewall (WAF) protege os aplicativos da Web filtrando o tráfego HTTP suspeito. Destina-se a prevenir aplicações de ataques como:

• Falsificação entre sites.
• Script entre sites (XSS).
• Inclusão de arquivo.
• Injeção SQL.

Abaixo está uma lista dos firewalls de aplicativos da Web mais populares e confiáveis:

• Cloudflare WAF.
• Firewall GoDaddy.
• Microsoft Azure.

Ou, se você usa o WordPress, pode considerar a instalação de plugins como:

• WordFence.
• Sucuri.
• Segurança tudo-em-um (AIOS).

Veredito

Isso é um embrulho! Como você pode ver, o desempenho e a saúde do site dependem de vários aspectos.

Se o seu site estiver com atraso, o primeiro passo lógico é verificar seus Core Web Vitals e ver o que você pode melhorar. Você também pode dar uma olhada em outras métricas técnicas e melhorá-las.

O SEO também é vital para a saúde do seu site, portanto, verifique sua visibilidade de pesquisa, links e possíveis bloqueadores de carga para ver o que você pode melhorar.

E não se esqueça do seu certificado SSL e cache também.

O design do seu site também pode afetar sua velocidade de carregamento e desempenho, especialmente se você ou seus designers gostam de usar elementos de design pesados.

Lembre-se de otimizar suas imagens, evitar fontes pesadas e usar animações com moderação.

Mais recursos:

• Como usar o relatório de experiência do usuário do Chrome para melhorar o desempenho do seu site
• 6 dicas para turbinar o desempenho da Rede de Display do Google
• SEO técnico avançado: um guia completo

Imagem em destaque: JulsIst/Shutterstock