Posts Recentes:

7 dicas para melhorar a velocidade do seu site em 2024


DebugBear 26 de março de 2024 Imagem de destaqueDebugBear 26 de março de 2024 Imagem de destaque

Um site de carregamento rápido oferece uma boa experiência ao usuário e ajuda a aumentar as taxas de conversão. O Google também atualizou recentemente sua documentação para confirmar que Principais sinais vitais da Web são usados ​​por seus sistemas de classificação.

Pronto para tornar seu site rápido? Aqui estão sete dicas para ajudá-lo a analisar a velocidade do seu site e identificar possíveis otimizações.

1. Analise uma cascata de solicitações de rede para o seu site

A solicitar visualização em cascata pode dizer exatamente o que acontece ao abrir seu site. Por exemplo:

  • Quais recursos são baixados?
  • Quando os recursos começam a ser carregados e quanto tempo leva cada solicitação?
  • Como isso se correlaciona com o que os visitantes podem ver enquanto o site carrega?

Essas informações podem servir de base para identificar as otimizações de maior impacto. Você pode executar um velocidade de página gratuita teste em seu site para gerar uma visualização em cascata.

As cachoeiras de solicitação fornecem muitos detalhes e podem parecer intimidantes. Vamos detalhar exatamente o que você precisa procurar.

Solicitar visualização em cascata para um siteSolicitar visualização em cascata para um site

Para interpretar uma cascata, procure três marcos principais no processo de carregamento de um site:

A menos que haja redirecionamentos, o documento HTML será a primeira solicitação na cascata. Antes do marco TTFB, nenhum outro recurso pode começar a carregar e nenhum conteúdo pode ficar visível. Portanto, o TTFB do seu servidor representa um valor mínimo para as pontuações FCP e LCP.

Solicitação de documento HTML e TTFB em uma cascata de solicitaçõesSolicitação de documento HTML e TTFB em uma cascata de solicitações

A seguir, procuraremos solicitações de bloqueio de renderização. Estas são solicitações de recursos adicionais importantes que precisam ser carregados antes que o conteúdo da página se torne visível.

Neste exemplo, podemos ver que existem quatro solicitações de folha de estilo CSS de bloqueio de renderização. Assim que esses arquivos terminarem de carregar, podemos ver o primeiro conteúdo aparecendo na tira de filme de renderização no canto superior direito.

Solicitações de bloqueio de renderização atrasando a primeira pintura com conteúdoSolicitações de bloqueio de renderização atrasando a primeira pintura com conteúdo

Para otimizar o FCP você pode:

Por exemplo, no exemplo acima podemos ver que o arquivo app.css tem mais de 100 kilobytes. O download pode levar algum tempo, especialmente em conexões de dados móveis mais lentas.

Para acelerar as solicitações, você também vai querer verificar a quais servidores o navegador está se conectando ao abrir a página. Uma nova conexão é necessária para cada novo domínio a partir do qual um recurso é carregado, e cada nova conexão com o servidor leva algum tempo para ser estabelecida.

Você pode identificar as conexões do servidor na cascata procurando três pequenos retângulos na frente da solicitação principal. Esses retângulos representam as viagens de ida e volta da rede necessárias para a pesquisa de DNS, conexão TCP e conexão SSL.

Conexões de servidor sendo feitas para cada novo domínioConexões de servidor sendo feitas para cada novo domínio

Finalmente, veremos o marco do LCP. Se o maior elemento de conteúdo for uma imagem, isso geralmente pode ser visto claramente procurando o emblema “LCP” na visualização em cascata.

Após o download da imagem LCP, o navegador começa rapidamente a atualizar a página e exibir a imagem. Você pode ver a métrica LCP marcada pela linha vermelha na visualização em cascata.

Solicitação de imagem LCP de carregamento lento em uma visualização em cascataSolicitação de imagem LCP de carregamento lento em uma visualização em cascata

Para facilitar a análise dos dados em cascata da solicitação, muitas ferramentas de desempenho, como DebugBear também incluem recomendações automatizadas de velocidade da página.

Recomendações de velocidade da página DebugBearRecomendações de velocidade da página DebugBear

2. Carregue primeiro o conteúdo mais importante

Ao carregar um site, o conteúdo menos importante não deve consumir largura de banda das solicitações mais importantes.

No exemplo acima, carregamento lento é aplicado à imagem LCP. Isso significa que o navegador não priorizará este recurso. Assim que a página começa a ser renderizada, o navegador percebe que a imagem é realmente importante e a prioridade da solicitação é alterada.

Como resultado, a imagem só começa a carregar tarde e outras solicitações também consomem largura de banda da rede nesse ponto. Podemos ver isso observando as linhas azuis escuras na solicitação dentro da cachoeira. As linhas azuis escuras mostram quando os dados de resposta são recebidos para cada solicitação.

Recurso LCP de carregamento lentoRecurso LCP de carregamento lento

Para garantir que uma imagem LCP seja priorizada, você pode:

  • Certifique-se de que não esteja com carregamento lento.
  • Use o buscar prioridade atributo para marcá-lo como de alta importância.
  • Considere usar um etiqueta de pré-carregamento para ajudar o navegador a carregar a imagem antecipadamente.

3. Reduza o tamanho dos downloads das principais solicitações iniciais

Arquivos maiores demoram mais para serem baixados, pois a largura de banda é limitada e o carregamento de uma grande quantidade de dados requer várias viagens de ida e volta de rede entre o cliente e o servidor.

Por exemplo, esta captura de tela mostra um arquivo CSS grande:

Análise de tamanho CSS com uma imagem incorporadaAnálise de tamanho CSS com uma imagem incorporada

AQuando olhamos mais profundamente, podemos ver que contém muitas imagens que foram incorporadas como texto. Isso significa que carregar essas imagens bloqueia a renderização, mesmo que elas não sejam importantes para a página e possam nem ser usadas.

Para reduzir o tamanho dos arquivos, você pode:

  • Usar formatos de imagem modernos como WebP e Avif.
  • Usar Brotli compressão para conteúdo de texto (como HTML, CSS e JavaScript).
  • Analise seu HTML ou CSS código para identificar imagens, fontes e dados incorporados.

4. Compare dados reais do usuário com dados de laboratório

O Google fornece dados reais de usuários para a maioria dos sites como parte de seus Informações do PageSpeed ferramenta. Comparando esses dados com os resultados de seus estudos baseados em laboratório Farol test pode ajudá-lo a entender melhor o que está acontecendo em seu site.

Resultado do PageSpeed ​​​​Insights com dados de campo e dados de laboratórioResultado do PageSpeed ​​​​Insights com dados de campo e dados de laboratório

O resultado do teste de laboratório normalmente relata métricas piores do que os dados reais do usuário. Isso ocorre porque o teste Lighthouse usa uma conexão de rede e CPU mais lenta do que a maioria dos visitantes.

Dois motivos comuns pelos quais os resultados dos seus testes de laboratório são mais rápidos do que os dados reais do usuário:

  • O teste de insights do PageSpeed ​​é relatando dados não confiáveis.
  • O teste de laboratório está atingindo o cache, enquanto a maioria dos usuários reais experimenta respostas lentas do servidor.

5. Verifique como o desempenho do seu site mudou ao longo do tempo

O conjunto de dados de usuários reais que o Google fornece com base no Relatório de experiência do usuário do Chrome (CrUX) também inclui dados históricos, embora não sejam relatados no PageSpeed ​​​​Insights. Ver como o desempenho do seu site mudou ao longo do tempo permite ver quando um problema foi introduzido e identificar a causa raiz.

Para visualizar dados históricos do Core Web Vitals do seu site, você pode executar um DebugBear Teste Core Web Vitals e depois verifique o Sinais vitais da web guia para uma tendência de 25 semanas.

Cada valor de dados CrUX cobre um período contínuo de 28 dias. Se ocorrer um problema, isso afetará gradualmente suas pontuações nas quatro semanas seguintes.

Tendências do Core Web Vitals de 25 semanasTendências do Core Web Vitals de 25 semanas

6. Configure o monitoramento contínuo da velocidade do site

Se você deseja detectar regressões (ou seja, foi implantada uma alteração que teve um impacto negativo na velocidade do site) assim que elas acontecerem, você precisará configurar o monitoramento da velocidade da página para o seu site.

DebugBear é um serviço de monitoramento que fornece dois tipos de monitoramento:

  • Testes baseados em laboratório: Execute testes de velocidade de página de acordo com um cronograma em um ambiente de laboratório controlado.
  • Monitoramento de usuário real: Veja como os visitantes experimentam seu site.

Configurar o monitoramento do seu site irá alertá-lo sempre que houver uma regressão e, em seguida, comparará os dados antes e depois para identificar a causa da desaceleração.

Dashboard com testes agendados de monitoramento do siteDashboard com testes agendados de monitoramento do site

7. Observe as métricas além do tempo de carregamento

O desempenho do site não se trata apenas da velocidade de carregamento inicial medida pela métrica LCP. O Google também considera a rapidez com que um site responde às interações do usuário, medida pelo Interação com a próxima pintura (INP) que se tornou Core Web Vital em 12 de março.

Embora o LCP dependa principalmente do que é carregado na rede, o INP analisa o processamento da CPU e quanto tempo leva para que a página possa processar uma interação e atualizar a UI para estar pronta para a próxima interação.

Medir o INP requer interação do usuário, o que dificulta o teste em ambiente de laboratório. Existem algumas ferramentas de teste INP baseadas em laboratório, como o Depurador INPmas eles não conseguem identificar todas as possíveis interações do usuário nem informar com quais elementos os usuários interagem com mais frequência.

Resultado do teste do depurador INPResultado do teste do depurador INP

Para melhorar a interação com o Next Paint você precisa monitoramento de usuário real (RUM) dados. Esses dados podem dizer a você:

  • Quais páginas têm INP lento?
  • Com quais elementos os usuários estão interagindo?
  • Quais scripts estão contribuindo para atrasos?
Dados reais de monitoramento de usuários do DebugBearDados reais de monitoramento de usuários do DebugBear

Conclusão

Para melhorar a velocidade do seu site, primeiro você deve entender o que o está retardando. Comece executando um teste de velocidade de página gratuito.

Uma ferramenta de monitoramento de sites ajuda você a acompanhar os Core Web Vitals ao longo do tempo e a ser notificado sobre regressões. Você pode comece uma avaliação gratuita de 14 dias do DebugBear aqui.

Últimas

Assine

spot_img

Veja Também

Assista: Os novos modelos Llama 3 da Meta dão um impulso à IA de código aberto

Novo Os modelos de IA da Meta estão...

Webflow adquire Intellimize para adicionar personalização de páginas da web com tecnologia de IA

Fluxo da Webuma plataforma de web design e...

Comarch realiza novo webinar – Principais tendências de fidelidade: ideias específicas do setor para 2024

Estudos mostram que clientes fiéis são responsáveis ​​por...

7 maneiras de elevar seus anúncios responsivos de pesquisa

Embora os anúncios de pesquisa responsivos (RSAs) do...
spot_img

Assista: Os novos modelos Llama 3 da Meta dão um impulso à IA de código aberto

Novo Os modelos de IA da Meta estão causando sucesso nos círculos de tecnologia. Os dois novos modelos, parte da linha Llama...

Webflow adquire Intellimize para adicionar personalização de páginas da web com tecnologia de IA

Fluxo da Webuma plataforma de web design e hospedagem que arrecadou mais de US$ 330 milhões com uma avaliação de US$ 4 bilhões,...