Atraso na primeira entrada (FID): o que é e como otimizar seu site para isso

Oferecer uma experiência rápida aos visitantes é fundamental para o sucesso do seu site. No entanto, existem várias maneiras de avaliar o quão bem ele faz isso. Um deles é o First Input Delay (FID), que mede a quantidade de tempo em milissegundos (ms) entre o momento em que um usuário interage pela primeira vez com o seu site e o momento em que o navegador responde a essa ação.

Neste post, vamos explicar o que é FID e como medi-lo. Também discutiremos o que é uma boa pontuação de FID e orientaremos você sobre como otimizar a sua. Por fim, encerraremos com algumas perguntas frequentes. Vamos começar!

Inscreva-se no nosso canal no Youtube

O que é o primeiro atraso de entrada (FID)?

Como mencionamos, FID (também conhecido como "Latência de entrada") é a medição do tempo em ms que ocorre entre o momento em que um visitante interage com seu site e a resposta do navegador. É uma métrica essencial incluída no Relatório de experiência do usuário do Chrome. Além disso, é um dos Core Web Vitals. Essas são as métricas que o Google usa para determinar a qualidade da experiência do usuário do seu site (e, por sua vez, a classificação da página).

Nesse contexto, a entrada ou interação pode se referir a uma ampla gama de ações. Por exemplo, pode incluir clicar em um link, pressionar um botão ou selecionar uma caixa de seleção. No entanto, o FID não se aplica quando um usuário rola ou aumenta o zoom em uma página, uma vez que isso não exige uma nova resposta entre o navegador e o seu site.

Alguns fatores diferentes podem afetar essa métrica. A velocidade e o poder de processamento do dispositivo do usuário podem ter um impacto. Você não pode controlar isso. No entanto, você pode controlar o tamanho e a complexidade da página da web. Mais especificamente, você pode controlar quanto JavaScript seu site usa. Por exemplo, se você tiver muitas imagens ou scripts que carregam em uma ordem aleatória, isso pode desacelerar todo o processo e atrasar a resposta do usuário.

Mesmo se seu site tiver um FCP e LCP sólidos, o primeiro atraso de entrada pode ser longo o suficiente para fazer com que eles saltem. Pode parecer que seu site está lento e sem resposta.

Resumindo, o FID é usado para determinar a capacidade de resposta de uma página durante o carregamento. Obviamente, quanto mais rápido for o processo, melhor. Portanto, é importante saber como medir o FID do seu site e como melhorar sua pontuação.

Como medir o FID

Antes de começar a otimizar sua pontuação FID, é essencial saber onde ela está atualmente. Idealmente, para fornecer uma experiência de usuário (UX) sólida, você deseja que sua pontuação FID seja inferior a 100 ms.

Uma pontuação de 100 ms ou menos é considerada boa , enquanto uma pontuação entre 100 e 300 ms pode ser melhorada. Uma pontuação FID acima de 300 ms é ruim .

Para medir seu FID, você pode usar o Google PageSpeed ​​Insights:

Esta é uma ferramenta gratuita do Google que testa o desempenho do seu site de várias maneiras. Com ele, você pode observar uma variedade de métricas importantes, incluindo FID.

Observe que o FID às vezes pode ser difícil de medir. Isso porque requer a entrada do usuário. No entanto, como você recentemente teve interatividade do usuário em seu site, deve ser capaz de encontrar essa métrica por meio do PageSpeed ​​Insights.

Para começar, insira o URL do seu site no campo de texto e clique no botão Analisar . Assim que a ferramenta terminar de analisar sua página, ela levará você aos resultados e dará a seu site uma pontuação geral:

Você pode encontrar a métrica First Input Delay (FID) na seção Field Data . Na seção Oportunidades , um pouco abaixo, você pode encontrar sugestões para otimizar sua página e suas pontuações.

Também queremos observar que o Google denota essas pontuações como dados de campo . Isso significa que as informações são baseadas na interação real do usuário, não em testes simulados (que são chamados de dados de laboratório ou encontrados por meio de ferramentas de laboratório ). O FID é muito subjetivo e intimamente ligado às interações reais do usuário, portanto, certificar-se de que você está usando os dados de campo é importante. As simulações só podem dar conta de tanto.

Como otimizar sua pontuação FID

Agora que você entende o que é uma pontuação de FID e como pode medi-la, é hora de ver como você pode realmente melhorá-la. Abaixo estão algumas dicas e estratégias que você pode usar para diminuir o tempo de atraso da primeira entrada.

Otimize e reduza seu código CSS e JavaScript

Uma das melhores maneiras de otimizar sua pontuação FID é compactando e otimizando seu código CSS e JavaScript. Isso pode reduzir o tamanho dos arquivos e, por sua vez, melhorar a capacidade de resposta. Ao eliminar caracteres, espaços e quebras de linha desnecessários, você diminui o tamanho do arquivo, o que, por sua vez, aumenta a velocidade da página e reduz o número de processos que um navegador precisa lidar. Portanto, você tem um FID menor.

Os usuários do Divi também devem saber que o tema minimiza automaticamente o HTML, JavaScript e CSS desde o início. A simples ativação do tema compactará todo esse código para que seu FID fique em uma posição melhor do que antes.

Se você não for um usuário Divi, terá algumas opções para reduzir seu código. Uma abordagem rápida e simples para fazer isso é usar uma ferramenta online como Minify Code. Copie seu código em tamanho real, cole-o no site, o site o minimiza e, em seguida, copie / cole os resultados de volta em seu site.

Você também pode reduzir seu código manualmente usando um editor de código, embora isso possa ser um pouco mais complicado. No entanto, se você tiver experiência em trabalhar com código, esse método pode lhe dar mais controle.

Ainda outra estratégia é usar um plugin como Autoptimize ou W3 Total Cache (ou qualquer outro).

Essa pode ser uma solução viável para usuários do WordPress se você não tiver experiência com código e quiser implementar essa modificação em seu site automaticamente. Além disso, esses plug-ins oferecem uma variedade de recursos focados em otimização, como cache de imagem e conteúdo.

Divida tarefas longas de JavaScript em tarefas menores

Tarefas longas tendem a bloquear o thread principal e podem resultar no inchaço do JavaScript, prejudicando a capacidade de resposta do seu site. Para evitar que isso aconteça e melhorar sua pontuação FID no processo, você pode tentar dividir essas tarefas em tarefas menores e assíncronas.

Uma das maneiras mais eficazes de fazer isso é a divisão de código. Em suma, esta é uma técnica usada para quebrar e carregar apenas pedaços de código menores e necessários, em vez de um arquivo grande de uma vez. Você pode fazer isso usando uma ferramenta como o Webpack.

Os usuários do Divi também ganham um benefício nessa área, pois a grande atualização de desempenho separa a grande biblioteca JavaScript de temas e os carrega apenas quando necessário. Isso deve reduzir o FID em quase todos os sites Divi. Os temas do WordPress tendem a vir com suas próprias bibliotecas JS, e os usuários podem não ter o conhecimento ou as permissões para dividir o código e otimizá-lo por conta própria. Queríamos deixar isso um problema com a Divi.

Reduza o impacto de códigos de terceiros e scripts não críticos

Se você tiver muitos scripts de terceiros, isso pode atrasar a execução dos dados do seu próprio site. Portanto, para otimizar sua pontuação FID, também é uma ideia inteligente reduzir o impacto do código de terceiros e remover quaisquer scripts de terceiros não críticos. E para adiar aqueles que você não pode remover.

Ao decidir quais scripts são mais importantes, pergunte-se quais desempenham um papel importante na UX do site. Por exemplo, talvez você possa remover ou atrasar alguns anúncios ou pop-ups que não são muito necessários. Seus usuários precisam ver essa opção de e-mail primeiro, ou você pode adiá-la até que eles interajam com o site de alguma forma?

Você também pode consultar a seção Oportunidades de seus relatórios do PageSpeed ​​Insights para obter mais informações sobre como reduzir JavaScript e CSS não utilizados:

Se você clicar para expandir qualquer uma dessas seções, ela listará arquivos e tarefas específicos que podem estar bloqueando seu tópico principal. Você também pode encontrar JavaScript e CSS não usados ​​usando o Chrome DevTools.

Em muitos casos, esses recursos de “bloqueio de renderização” impedem o carregamento da página mais rápido, o que também afeta seu FID. Removê-los e / ou adiá-los pode não apenas melhorar a interatividade do seu site, mas também a capacidade de resposta e velocidade percebidas.

Divi tem seletores para adiar scripts não críticos como este. Nas opções do tema, você pode escolher adiar scripts jQuery e adotar o adiamento CSS in-line que, quando combinado com o recurso CSS crítico do tema, remove todos os CSS de bloqueio de renderização. Você também pode ativar o Google Fonts e o adiamento da folha de estilo do editor de Gutenberg. Todos esses são vistos como “bloqueio de renderização”, de modo que os membros do Elegant Themes verão uma pontuação FID aprimorada quase que imediatamente.

Perguntas mais frequentes sobre atraso de entrada (FID)

Neste ponto, você provavelmente tem um conhecimento sólido do que é o FID e de sua importância na UX do seu site, bem como de como melhorá-lo. Com isso em mente, queremos garantir que cobrimos todos os pontos-chave. Então, vamos rever algumas perguntas frequentes sobre o FID.

Como o FID se encaixa no desempenho geral do meu site?

Essencialmente, o FID mede a primeira interação dos visitantes com o seu site. É uma métrica quantitativa e percebida, porque afeta a primeira impressão do usuário com o seu site. Você pode ver objetivamente quando o site está respondendo à entrada do usuário, mas com base nas interações do usuário com o site, você pode ver quando eles percebem que isso também é.

O FID mede o tempo entre a primeira interação de um usuário e quanto tempo leva para o navegador responder a essa ação. Em outras palavras, a métrica avalia a capacidade de resposta do seu site enquanto ele ainda está carregando . Quanto mais rápido for, melhor será a experiência que seus visitantes terão.

Além disso, como um Core Web Vital (ao lado de Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS)), o FID desempenha um papel importante em como o Google classifica seu site. Portanto, além da experiência de seus usuários, também pode impactar a Otimização de Mecanismos de Busca (SEO) do seu site. Muitas das mesmas estratégias para melhorar o FID também diminuirão drasticamente o desempenho geral do seu site.

Como posso medir meu FID?

Existem algumas maneiras diferentes de medir sua pontuação FID. O método mais rápido e fácil é executar seu site por meio do Google PageSpeed ​​Insights. O relatório irá detalhar uma série de métricas importantes, incluindo FID. Ele também oferecerá algumas sugestões de como você pode melhorar sua pontuação.

Além disso, você pode usar algumas outras ferramentas para acessar sua pontuação FID. Eles incluem o Relatório de experiência do usuário do Chrome, o relatório Core Web Vitals do Google Search Console e a biblioteca web vitals JavaScript. Você também pode achar que ferramentas como GT Metrix e Pingdom's Speed ​​Test podem ser úteis.

Como faço para melhorar minha pontuação FID?

Melhorar seu FID pode ajudar a melhorar as classificações de UX e SEO de seu site. Normalmente, uma pontuação FID baixa pode ser atribuída a vários fatores, incluindo:

• JavaScript pesado
• Scripts não usados
• Tarefas longas de JavaScript
• Arquivos de script longos

Para aumentar sua pontuação, existem algumas etapas que você pode seguir. Isso inclui minimizar o código do seu site, remover ou atrasar scripts de terceiros não utilizados e dividir tarefas longas de JavaScript (e arquivos CSS) em menores.

Conclusão

Você só tem uma chance de causar uma primeira impressão positiva nos visitantes do seu site. É por isso que é importante garantir que você aproveite todas as oportunidades possíveis para otimizar sua pontuação FID. É imperativo garantir que as primeiras interações dos visitantes sejam rápidas.

Lembre-se de que a pontuação FID ideal é 100 ms ou menos. Se você precisar melhorar o seu e diminuir esse tempo, as várias estratégias que discutimos acima (como adiar JavaScript não utilizado, otimizar seu código CSS e JavaScript e adiar / remover recursos de bloqueio de renderização) sem dúvida reduzirão seu tempo para onde eles precisam ser.

Você tem alguma dúvida sobre o FID? Deixe-nos saber na seção de comentários abaixo!

Imagem em destaque via wan wei / shutterstock