First Input Delay (FID) – Veja como funciona

Rodrigo Botinhão

In SEO Avançado Posted

Na internet, a primeira impressão poderá fazer com que alguém se torne um visitante recorrente ou nunca mais volte a visitar o site. Por isso, é importante medir o tipo de impressão causada nos visitantes. Para isso, é utilizado o FID.

O FID (First Input Delay) é uma das métricas que o Google utiliza para medir a capacidade de resposta do primeiro elemento de uma página web, quantificando a experiência do usuário ao tentar interagir com páginas que não respondem. Por essa razão, o FID baixo é uma das garantias de que a página será útil.

O que é o FID?

O FID é capaz de medir o tempo entre a primeira interação de um usuário com uma página — quando clica em um link, toca em um botão ou usa um controle personalizado baseado em JavaScript — até o momento em que o navegador pode realmente começar a responder a essa interação.

FID - First Input DelayPara uma experiência satisfatória do usuário, é recomendável que os sites tenham um FID de pelo menos 100 milissegundos.

Detalhando o FID

Os códigos desenvolvidos são baseados na premissa de que serão executados imediatamente, já na abertura da página web — ação que deveria acontecer sempre —, mas é comum que a experiência nem sempre seja assim para os visitantes. Pode acontecer de eles carregarem a página no smartphone, por exemplo, e nada acontecer, gerando frustrações.

Em geral, o atraso ocorre porque o navegador está ocupado com outra ação e ainda não está apto a responder para o visitante. Um motivo bastante comum para essa situação é o fato de o navegador estar ocupado analisando e executando um grande arquivo Javascript carregado pela página. Enquanto está executando esse carregamento, ele não poderá executar nenhum outro evento, porque esse Javascript poderá instruir o navegador a fazer outra ação.

Porque considerar somente a primeira entrada?

Embora um atraso de qualquer entrada possa levar a uma experiência ruim do usuário, a recomendação é medir o primeiro, por alguns motivos:

  • O primeiro atraso de entrada será a primeira impressão do usuário sobre a capacidade de resposta de seu site, que é crítica para moldar a impressão geral da qualidade e confiabilidade de um site;
  • Os maiores problemas de interatividade que há na web atualmente ocorrem durante o carregamento da página. Portanto, o foco inicial no aprimoramento da primeira interação com o usuário do site terá o maior impacto na melhoria da interatividade geral da web,
  • As soluções recomendadas sobre como os sites devem corrigir grandes atrasos na primeira entrada (divisão de código, menos JavaScript inicial e afins) não são necessariamente as mesmas soluções para corrigir lentidão após o carregamento da página. Separando essas métricas, há soluções específicas para o desenvolvimento.

O que pode ser uma primeira entrada?

O FID mede a capacidade de resposta de uma página durante o carregamento. Ele se concentra apenas em eventos de entrada de ações discretas, como cliques, toques e pressionamentos de tecla. Outras interações, como rolagem e zoom, são ações contínuas e têm restrições de desempenho completamente diferentes. Além disso, os navegadores costumam ocultar sua latência, executando-os em separado.

Em outras palavras, o FID se concentra na parte de capacidade de resposta (R – Response) dentro do modelo proposto de desempenho chamado de RAIL (Response, Animation, Idle and Load), enquanto a rolagem e o zoom estão mais relacionados a A (animation), onde suas qualidades de desempenho devem ser avaliadas separadamente.

E se um usuário nunca interagir com seu site?

É preciso entender, antes de mais nada, que nem sempre os visitantes vão interagir com o seu site. Além disso, pode acontecer de as primeiras interações de alguém acontecerem em momentos ruins, como quando o navegador está ocupado por um longo período, por exemplo, causando uma experiência ruim.

Contudo, também pode acontecer de as primeiras impressões do mesmo site serem satisfatórias, como quando o navegador está completamente ocioso. Isso significa que alguns usuários não terão valores de FID, outros terão FID baixo, e alguns, provavelmente, terão valores altos. Por isso, nem todas as interações são relevantes para o First Input Delay.

Quais ferramentas utilizar?

Na Gear SEO, utilizaremos as ferramentas do Google PageSpeed e Google Search Console para realizar o acompanhamento dessas métricas e sugerir adequações técnicas para melhorar a nota do FID.

Para mais técnicas de otimização do LCP, consulte o documento Web.Dev. Abaixo, separamos algumas tarefas técnicas que analisamos e levamos em consideração na Gear SEO, relacionadas com o LCP, de acordo com as ferramentas do Google:

Pré-carregamento de recursos (JavaScript, CSS e afins)

O tempo de carregamento de uma página é definido por diversos fatores, entre eles os recursos solicitados pelos navegadores, como JavaScript, CSS e afins. Eles normalmente são solicitados em fila, quase um a um.

Realizando esse ajuste de pré-carregamento, conseguimos fazer com que o navegador solicite alguns recursos ao mesmo tempo e, assim, ele processará o recurso junto com outros elementos críticos para o carregamento da página.

Eliminação de bloqueios de renderização

Para uma boa experiência do usuário em uma página web, é necessário que o navegador responda rapidamente à sua interação, ou seja, quando ele clica em um link, em um botão ou usa um controle personalizado baseado em JavaScript.

Em geral, o atraso nessa resposta (atraso de entrada ou latência de entrada) acontece porque o carregamento principal do navegador está ocupado, sendo impedido de responder o usuário. Um motivo comum para isso é o navegador estar analisando e executando um grande arquivo JavaScript ou CSS.

Com análises, é possível listar quais recursos estão bloqueando a renderização e, assim, remover aqueles que não são utilizados.

Compactação de arquivos CSS e Javascript

O uso de JavaScript e CSS pode melhorar a experiência do usuário ao navegar pelo site, mas, se mal utilizados, podem ter um efeito contrário, deixando muito lento o carregamento da página a ponto do usuário desistir de navegar pelo site.

Para que a experiência do visitante seja a melhor possível, é recomendável fazer a compactação dos arquivos CSS e JavaScript. Assim, é possível reduzir consideravelmente seu tamanho e o tamanho total da página, melhorando seu tempo de carregamento.

Abaixo, você pode conferir alguns materiais que preparamos e estão relacionados diretamente com os pontos principais do Core Web Vitals, com exemplos de pontos de melhorias:

Otimização de LCP (Largest Contentful Paint)

Otimização de CLS (Cumulative Layout Shift)

0 Comments

Leave a Comment