O que é o atraso da primeira entrada (FID)? Como reduzi-lo no WordPress

Há um nome para aquele momento estranho quando você tenta interagir com uma página pela primeira vez e demora um pouco para responder. Isso se chama First Input Delay (FID) e é uma métrica que dá uma ideia de quão boa é a experiência do usuário (UX) de um site.

Um FID baixo informa que um site está otimizado corretamente. Isso significa que os navegadores de seus visitantes não ficam presos ao carregar elementos e scripts, mesmo depois de parecer que uma página foi renderizada. Se você conseguir que sua pontuação FID seja a mais baixa possível, isso tornará as visitas dos usuários muito mais agradáveis.

Neste artigo, vamos falar sobre o que significa Atraso na Primeira Entrada e por que é uma métrica tão importante. Em seguida, abordaremos quatro maneiras de reduzir as pontuações do FID no WordPress. Vamos lá!

Índice:

• O que é o atraso da primeira entrada?
• Como medir o atraso da primeira entrada para o seu site
• Maneiras de reduzir as pontuações do First Input Delay no WordPress

O que é o atraso na primeira entrada (e por que é uma métrica importante)

Toda vez que você visita um site, muita coisa acontece em segundo plano. Antes que você possa ver uma página, seu navegador precisa consultar seu servidor, enviar e processar solicitações, carregar elementos e assim por diante. Para um site moderno, você pode ter dezenas de solicitações que seu navegador precisa atender antes de ver uma página totalmente renderizada com a qual você possa interagir.

Em alguns casos, acontece que uma página parece pronta, mas seu navegador ainda está processando solicitações e carregando scripts em segundo plano. Ao tentar interagir com essa página, você pode perceber que há um pequeno atraso entre a execução de uma ação e o recebimento de uma resposta.

Por exemplo, se você clicar em um link, seu navegador pode não processar a solicitação instantaneamente. Se você pressionar um botão, ele pode não fazer nada à primeira vista. Isso pode acontecer com basicamente qualquer elemento interativo em seu site, e seu objetivo é reduzir o atraso da primeira entrada o máximo possível.

Idealmente, o atraso da primeira entrada do seu site deve ser inferior a 100 milissegundos. Esse é o padrão que o Google considera aceitável para sites:

Mencionamos o Google especificamente porque o FID é uma das três métricas que ele usa para avaliar as experiências positivas ou negativas do usuário em um site. Essas três métricas são chamadas de Core Web Vitals e também incluem as duas métricas a seguir:

1. Maior exibição de conteúdo (LCP): essa métrica mede quanto tempo leva para o maior elemento de uma página carregar.
2. Deslocamento de layout cumulativo (CLS): mede o quanto uma página “desloca” visualmente à medida que é carregada. Se os elementos se moverem muito durante o carregamento, você terá uma pontuação CLS ruim. Temos um guia sobre como corrigir a mudança de layout cumulativa para WordPress.

Há duas razões principais pelas quais os Core Web Vitals são importantes. A primeira é que eles fornecem uma medida de quão bem otimizado é o seu site. Se o seu site tiver ótimas pontuações, significa que ele carrega rápido, é visualmente estável e os usuários não precisam esperar muito para interagir com ele.

A segunda razão pela qual os Core Web Vitals são importantes é que eles impactam a otimização do mecanismo de busca (SEO) do seu site. O Google usa essas métricas como um pequeno sinal ao determinar as classificações. Na verdade, o gigante dos mecanismos de busca deixou claro que os Core Web Vitals são importantes quando se trata de SEO, embora não no mesmo grau que conteúdo e backlinks.

Como medir o atraso da primeira entrada para o seu site

O atraso na primeira entrada pode ser difícil de medir porque você precisa coletar dados com base nos visitantes reais do seu site, ao contrário de outras métricas de desempenho em que você pode apenas executar testes simulados usando um computador.

A maneira mais fácil de medir o atraso na primeira entrada do seu site é usar o PageSpeed ​​Insights. No entanto, o PageSpeed ​​Insights só mostrará os tempos de atraso da primeira entrada se seu site tiver tráfego suficiente para ser incluído no relatório de experiência do usuário do Chrome.

Vamos falar sobre como o PageSpeed ​​Insights funciona primeiro e, em seguida, compartilharemos algumas alternativas que você pode tentar se o PageSpeed ​​Insights não oferecer métricas de Atraso da Primeira Entrada para seu site:

Para usar o PageSpeed ​​Insights, vá em frente e insira o URL da página que você deseja testar. O PageSpeed ​​Insights levará alguns instantes para analisá-lo e, em seguida, retornará um relatório semelhante a este:

No geral, esse site não possui as melhores pontuações do Core Web Vital. No entanto, você pode ver que ele se sai muito bem quando se trata da métrica First Input Delay, com um tempo médio abaixo de 100 ms.

No entanto, como mencionamos acima, nem todos os sites verão essa métrica. Se você tiver um site com pouco tráfego, poderá ver algo assim:

Nessa situação, você tem duas opções:

1. Simples : você pode usar a métrica do Tempo total de bloqueio da seção Dados do laboratório como um proxy aproximado para o tempo de atraso da primeira entrada. Não é uma representação perfeita, mas a métrica do Tempo total de bloqueio é muito semelhante ao Atraso da primeira entrada. Geralmente, se você melhorar o tempo total de bloqueio, também verá melhorias semelhantes no tempo de atraso da primeira entrada.
2. Avançado : Você pode usar uma ferramenta real de monitoramento de desempenho do usuário, como o Request Metrics. Com essas ferramentas, você precisará adicionar um script de rastreamento ao seu site para coletar dados reais do usuário.

Abaixo, você pode ver onde encontrar a métrica de tempo total de bloqueio no PageSpeed ​​Insights:

Agora que você sabe como medir o FID e outros Core Web Vitals, vamos falar sobre como melhorá-los.

Maneiras de reduzir as pontuações do First Input Delay no WordPress

Para esta seção, vamos nos concentrar nas otimizações do WordPress que melhorarão suas pontuações no First Input Delay. Algumas dessas otimizações também afetarão positivamente outros Core Web Vitals, o que os torna ainda mais úteis.

1. Remova scripts desnecessários do seu site

Uma das principais razões pelas quais seu site WordPress pode demorar muito para carregar é porque ele precisa executar uma grande lista de scripts. Por scripts, queremos dizer JavaScript e CSS, entre outras opções possíveis. Se você usa um tema WordPress “complexo” ou uma ampla variedade de plugins, é provável que você tenha muitos scripts sendo executados em segundo plano.

Descobrir quais scripts são úteis e quais não são pode ser um desafio, mas é aí que entra o PageSpeed ​​Insights. Se você executar um teste para qualquer uma das páginas do seu site, o relatório PageSpeed ​​Insights também incluirá uma seção de oportunidades :

Essa seção indicará quais arquivos JavaScript e CSS seu site não está usando. A remoção desses scripts deve diminuir suas pontuações FID de forma correspondente.

Em muitos casos, esses scripts vêm de plugins. Isso significa que você precisa dar uma boa olhada na sua lista de plugins e descobrir quais ferramentas você realmente não precisa. Escolher seus plugins é uma ótima maneira de manter seu site carregando o mais rápido possível.

2. Adie o código não crítico durante o carregamento

É comum encontrar scripts ou códigos específicos que demoram muito para carregar. O problema é que, em alguns casos, seu navegador não conseguirá terminar de carregar o restante dos elementos de uma página até lidar com esses scripts.

Se esses scripts não forem “críticos”, você pode simplesmente dizer ao seu navegador para deixá-los por último para que eles não atrapalhem as coisas para todos os outros. Isso é o que chamamos de “adiar código não crítico”.

Sua primeira parada ao descobrir quais scripts você pode adiar deve ser o PageSpeed ​​Insights. Depois de gerar um relatório para uma página, o PageSpeed ​​Insights incluirá recomendações sobre como melhorar suas pontuações.

Entre essas recomendações, você encontrará uma opção que diz Eliminar recursos de bloqueio de renderização . Se você clicar nele, ele mostrará uma lista de scripts que você pode adiar:

Existem duas maneiras de lidar com scripts de bloqueio de renderização no WordPress. O primeiro método envolve o uso de async . Isso permite que os navegadores continuem carregando seu site enquanto analisam o script especificado. Como alternativa, você pode adiar o código para que ele seja carregado após os navegadores renderizarem o restante do documento HTML.

Para configurar isso no WordPress, você pode usar o plug-in JavaScript Async gratuito. Ou muitos plugins de desempenho do WordPress incluem recursos para adiar o código. Se você estiver disposto a pagar por um plugin premium, o WP Rocket possui recursos para adiar automaticamente CSS e JavaScript não críticos.

3. Use ferramentas de minificação CSS e JavaScript

Embora sejamos todos a favor da remoção de CSS e JavaScript não utilizados, existem alguns scripts que você não deseja eliminar. Por exemplo, você não gostaria de acabar com a folha de estilo CSS de nenhuma página, a menos que queira um site que pareça ter sido copiado do século passado.

Para aqueles scripts que você não pode remover, sua melhor aposta é minimizá-los. Isso significa remover espaços em branco e caracteres desnecessários do código para reduzir o tamanho de cada script. Existem várias ferramentas que reduzem automaticamente os scripts para você no WordPress, como Autoptimize e Fast Velocity Minify:

De um modo geral, a maioria dos plugins de otimização e cache do WordPress também incluem ferramentas de minificação de script. No entanto, alguns deles exigem muito trabalho de configuração, por isso recomendamos manter opções como Autoptimize quando se trata de minificação.

4. Use uma rede de entrega de conteúdo (CDN)

Usar uma CDN é uma ótima maneira de aumentar o desempenho do seu site. Com uma CDN, você obtém acesso a uma rede de data centers em todo o mundo que podem armazenar em cache o conteúdo do seu site. Quando um visitante tenta acessar seu site, a CDN processará essa solicitação e fornecerá uma versão em cache dela.

Na maioria dos casos, usar um CDN melhorará os tempos de carregamento do seu site e as pontuações do FID. Integrar o WordPress com uma CDN é simples e o maior desafio provavelmente está em decidir qual serviço usar.

Se você estiver procurando por opções gratuitas de CDN, recomendamos optar por uma das seguintes opções:

1. Cloudflare: Esta é uma das CDNs mais populares do mercado. É fácil de integrar com o WordPress e oferece um plano gratuito.
2. Jetpack: O plugin Jetpack oferece um recurso chamado Site Accelerator , que usa os servidores do WordPress.com para armazenar em cache elementos estáticos do seu site. Embora o Jetpack exija uma conta do WordPress.com, você também pode usá-lo em sites WordPress auto-hospedados.

No entanto, para obter o melhor desempenho, você pode considerar uma CDN premium, como KeyCDN, StackPath ou Bunny CDN.

Reduza o Atraso da Primeira Entrada do seu site hoje

Medir algo tão abstrato pode ser complicado, e é por isso que cada núcleo vital se concentra em uma situação específica que pode impactar negativamente as experiências dos visitantes. Todos os Core Web Vitals são essenciais, mas o FID, em particular, pode levar a uma grande frustração se o atraso for muito alto.

Se você está procurando maneiras de melhorar sua pontuação FID no WordPress, aqui está o que você precisa fazer:

1. Remova scripts desnecessários do seu site.
2. Adie CSS e JavaScript não críticos durante o carregamento.
3. Use ferramentas de minimização de CSS e JavaScript, como Autoptimize e Fast Velocity Minify.
4. Use um CDN, como Cloudflare ou Jetpack.

Você tem alguma dúvida sobre como reduzir as pontuações do FID no WordPress? Vamos falar sobre eles na seção de comentários abaixo!