Como melhorar o primeiro atraso de entrada (FID) em seu site WordPress

Recentemente, iniciamos uma nova série sobre as métricas do Google Core Web Vitals com uma postagem sobre a maior pintura de conteúdo. Aqui, queremos continuar com o próximo candidato da fila: First Input Delay ou FID para abreviar e como melhorá-lo no WordPress.

A seguir, vamos nos aprofundar no que é o FID e como otimizar seu site WordPress para ele. Você aprenderá a entender e medir o First Input Delay, qual valor você deve buscar e como melhorá-lo, se necessário.

Observe que esta postagem pressupõe que você já esteja familiarizado com o Google Core Web Vitals e seu impacto na experiência do usuário e na otimização do mecanismo de pesquisa. Se você não tiver certeza sobre isso, verifique o primeiro artigo desta série ou nossa postagem independente sobre Core Web Vitals .

O que é atraso na primeira entrada? Uma definição

Assim, como já mencionado, o FID é uma das três métricas para medir a experiência do usuário do site que o Google considera como valores fundamentais para julgar o quão amigável é um site. Também faz parte do algoritmo de pesquisa deles, portanto, se você pontuar mal nisso, sua classificação de pesquisa será prejudicada.

No entanto, o que exatamente é o primeiro atraso de entrada?

Em suma, o FID quantifica o atraso entre o tempo em que um usuário interage com uma página da Web (como clicar em um botão) e o tempo em que o navegador é capaz de responder a essa interação. Isso reflete a capacidade de resposta de uma página da web.

Enquanto o Largest Contentful Paint calcula quanto tempo leva para uma página da Web se tornar útil para um visitante, o FID mede o quão bem ela permanece útil executando qualquer ação que o visitante desejar - mesmo durante o carregamento. Naturalmente, se o seu site for mais responsivo, ele proporcionará uma melhor experiência do usuário.

Você provavelmente sabe disso pelo seu próprio uso da Internet. Já esteve em um site que demorou muito para reagir à sua entrada? Você não gostou disso, não é? Bem, nem os visitantes do seu site.

Como o FID é calculado?

O FID é medido em milissegundos (ms). Para calculá-lo, o navegador rastreia o momento em que ocorre uma interação do usuário em uma página e o tempo que leva para o thread principal do navegador processar essa interação. A pontuação FID representa o atraso entre os dois eventos. Como consequência, uma pontuação FID baixa indica que a página é altamente interativa e responde rapidamente à entrada do usuário.

Neste ponto, você provavelmente deve se questionar: Qual é o “thread principal”? E o que conta como uma interação?

Aqui está a resposta.

O thread principal é basicamente o pipeline de trabalho do navegador. Todos os processos necessários para renderizar e executar um site passam por ele. Se estiver constantemente ocupado, levará mais tempo para reagir a uma nova entrada.

Quanto ao que conta como uma interação, pode ser um clique em um link, um toque em um botão, usando um menu suspenso, campo de texto, caixas de seleção ou botões de opção, bem como pressionando uma tecla em seu teclado (por exemplo Esc para fechar um pop-up).

O que causa FID?

O primeiro atraso de entrada geralmente é maior entre a primeira exibição de conteúdo (quando o primeiro elemento da página aparece na janela do navegador) e o tempo para a interação (quando a página se torna utilizável pela primeira vez e responde à entrada do usuário).

Basicamente, o atraso de entrada ocorre quando o navegador está ocupado com outra coisa enquanto o usuário tenta fazer algo. Nesse caso, ele não pode responder em tempo hábil à entrada, resultando em tempo de espera para o visitante do site.

Do lado técnico, os culpados comuns por isso são:

• Arquivos JavaScript grandes que o navegador precisa analisar e executar
• Recursos de bloqueio de renderização pelos quais ele precisa esperar
• Cálculos pesados, manipulação de DOM ou processos com uso intensivo de recursos
• Conexões de rede lentas ou alta latência que podem levar a atrasos na busca de arquivos de sites e outros recursos
• Atividades que bloqueiam o thread principal, como animações pesadas, transições CSS de longa duração ou processamento de imagem grande

Uma última coisa que é importante observar sobre o primeiro atraso de entrada é que ele será substituído por outra métrica chamada Interação para a próxima pintura (INP) em março de 2024. No entanto, por enquanto, FID é o que estamos trabalhando, então ainda importa que você se familiariza com isso.

Como medir o primeiro atraso de entrada

Você pode testar o FID do seu site com praticamente as mesmas ferramentas que os outros Core Web Vitals:

• PageSpeed ​​Insights — Basta digitar o URL da sua página e receber um relatório incluindo o valor do seu FID.
• Relatório de experiência do usuário do Chrome — o Google coleta e compila dados reais da experiência do usuário de vários sites por meio de seu navegador. Você pode acessar esses dados por meio de diferentes ferramentas, incluindo as mencionadas aqui.
• Search Console — O relatório Web Vitals no Google Search Console informa sobre páginas com leituras de FID ruins.
• biblioteca JavaScript web-vitals — Se você tem mais inclinação técnica, pode criar esta biblioteca JavaScript em seu site e obter as informações sobre o Core Web Vitals a partir daí.

A maioria dessas ferramentas simplesmente mostra o valor FID em seus resultados para que você saiba com o que está lidando.

O que é importante observar é que você precisa de uma interação real do usuário para essa métrica. Não é algo que você possa simular em um ambiente de laboratório. Portanto, suas melhores fontes para isso são dados reais do usuário, como o relatório CrUX.

Se você quiser testar seu site em um ambiente de laboratório com antecedência, sua melhor métrica de proxy é o Tempo total de bloqueio. Você também pode encontrar isso no PageSpeed ​​Insights, por exemplo.

Além disso, concentre-se nos piores casos de FID em seu site, pois isso informará o máximo sobre o que está errado.

O que é um bom atraso de primeira entrada?

Isso só deixa a questão: para qual número você deve atirar? Uma boa pontuação de FID geralmente fica abaixo de 100 milissegundos. Pontuações entre 100 e 300 milissegundos são consideradas como precisando de melhorias. Tudo acima de 300 milissegundos indica uma experiência de usuário insatisfatória.

Portanto, com esses benchmarks em mente, vamos aprender como melhorar o atraso da primeira entrada em seu site.

Como melhorar o atraso da primeira entrada em seu site WordPress

Melhorar o FID envolve principalmente otimizar o desempenho da página da web e reduzir quaisquer tarefas de bloqueio que possam atrasar a resposta do navegador à entrada do usuário. O culpado mais comum para o último é o uso pesado ou incorreto de JavaScript. Por esse motivo, muitas das medidas abaixo se concentrarão nisso. No entanto, também há outras coisas que você pode fazer.

Medidas Gerais de Melhoria de Desempenho

Muitas das técnicas que já abordamos sobre como melhorar o Largest Contentful Paint também se aplicam quando você deseja melhorar seu FID, incluindo:

• Otimize o ambiente do seu site — Quanto mais rápido o seu site em geral, mais rápido os recursos podem ser entregues, reduzindo o tempo de interatividade. Portanto, invista em hospedagem, temas e plugins de qualidade. Além disso, reduza o número de plugins em seu site e mantenha-o atualizado. Além disso, implemente cache e compactação.
• Implemente um CDN — As redes de entrega de conteúdo permitem encurtar a distância entre o servidor e o usuário, resultando também em uma entrega de arquivos mais rápida.
• Elimine os recursos de bloqueio de renderização — Quaisquer partes de um site que interrompam o processo de carregamento afetam negativamente todas as partes da experiência do usuário e os Principais Vitais da Web. Eliminá-los do seu site ajuda a corrigir esse problema. Mais detalhes sobre o JavaScript de bloqueio de renderização abaixo.

Para obter mais dicas, confira nosso artigo sobre como acelerar o WordPress, como reduzir as solicitações do servidor e como testar a velocidade do seu site.

Reduza, adie, assincronize e minifique seu JavaScript

Como mencionado, o JavaScript geralmente é o principal fator para resultados FID ruins. Veja como você pode otimizar a marcação em seu site para que não se torne um problema.

Reduzir a marcação geral

Obviamente, a melhor coisa que você pode fazer é reduzir o JavaScript geral da página. Verifique a guia Cobertura nas ferramentas de desenvolvedor do seu navegador para encontrar o JavaScript não utilizado em uma página da web.

Veja se é necessário para o seu site como um todo ou se você pode remover totalmente o JavaScript não utilizado.

No WordPress, JavaScript excessivo geralmente é resultado de muitos plugins ou temas que vêm com muitos sinos e assobios, causando atraso na primeira entrada. Portanto, se você deseja se livrar dele, verifique se há uma maneira de eliminar alguns deles ou mudar para uma versão mais enxuta.

Scripts assíncronos e adiados

Depois disso, o próximo passo é otimizar a entrega do JavaScript ao navegador. O principal problema aqui é que, a menos que especificado de outra forma, quando o navegador encontra um script JavaScript na marcação do seu site, ele para de renderizar o HTML até que o script seja baixado e executado. Isso também é conhecido como “recursos de bloqueio de renderização” mencionados acima.

No entanto, existem maneiras de contornar isso e elas são baseadas em duas palavras-chave:

• async – Adicionar isso à sua chamada de script permite que o navegador faça o download em segundo plano sem interromper o processamento da página. Ele só será executado uma vez baixado, independentemente do resto da página.
• defer – Muito semelhante ao async . Ele diz ao navegador para não esperar pelo script e, em vez disso, continuar construindo a página. No entanto, neste caso, ele carregará o script por último, quando o restante da página estiver totalmente construído.

Veja como é o uso async e defer na prática:

 <script async src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script> <script defer src="https://mywebsite.com/wp-content/themes/mytheme/analytics.js"></script>

Como você pode imaginar, esses dois métodos podem resultar em uma economia significativa de tempo durante o carregamento da página. Sua principal diferença: defer mantém a ordem relativa dos scripts da maneira como aparecem no documento, enquanto async usa a ordem em que os scripts são baixados.

Você pode usar ambos para carregar JavaScript não utilizado e não crítico posteriormente. Isso inclui scripts de terceiros, como analytics.

Minify JavaScript para download mais rápido

Por fim, para o JavaScript carregado, certifique-se de minimizá-lo. Minificação significa remover todas as marcações e formatações de código que existem apenas para tornar os arquivos legíveis para humanos.

Ele reduz ainda mais o tamanho do arquivo e os torna mais rápidos para o download do navegador. Existem muitas ferramentas disponíveis para fazer isso, incluindo as recomendações de plugins abaixo.

Divida Tarefas Longas

Além de reduzir o JavaScript geral em seu site e melhorar a entrega, você pode otimizar o First Input Delay em seu site WordPress dividindo o que resta em partes menores. Isso é especialmente adequado se você tiver muitas “tarefas longas” em sua página.

O que são tarefas longas, você pergunta?

Qualquer coisa que bloqueie o thread principal por mais de 50ms. Você pode vê-los nas ferramentas de desenvolvedor do Chrome marcadas com bandeiras vermelhas.

Se você cortá-los em partes menores, poderá carregá-los de forma assíncrona, resultando em menos trabalho ininterrupto no thread principal.

Como você faz isso?

Usando a divisão de código. Ele permite que você carregue blocos de JavaScript condicionalmente para que apenas o código extremamente importante seja carregado desde o início. O resto só entra em jogo quando necessário. Você também pode dividir as tarefas em funções separadas menores. Ambas são maneiras de manter suas páginas responsivas.

Para mais dicas muito técnicas sobre como lidar com tarefas longas, verifique este recurso.

Plugins úteis do WordPress para melhorar o FID

Entendemos que a otimização de arquivos JavaScript não é a preferência de todos, especialmente se você não for um desenvolvedor. Por esse motivo, compilamos alguns plug-ins e ferramentas do WordPress que podem ajudá-lo a melhorar os valores do primeiro atraso de entrada.

• Asset Cleanup – Este plug-in permite desativar CSS e JavaScript não utilizados, pré-carregar fontes, reduzir seus arquivos, adiar JavaScript e muito mais.
• Flying Scripts — Permite atrasar a execução de JavaScript não crítico até o momento em que não haja atividade do usuário.
• Organizador de plug-ins — Altere a ordem na qual os plug-ins são carregados em seu site e desative-os seletivamente nas páginas ou tipos de conteúdo escolhidos.
• Autoptimize — Pode combinar e minificar arquivos CSS e JS automaticamente, bem como adicionar async e defer para scripts. Também é super fácil de usar.
• WP Rocket — Um plug-in de cache pago que pode fazer muito do que falamos acima. Geralmente, a maioria dos plug-ins de cache oferece funcionalidade semelhante.

Considerações Finais: Atraso na Primeira Entrada no WordPress

O FID é uma das métricas que compõem o triunvirato de Core Web Vitals e mede a interatividade das páginas da web. Como ninguém gosta de experiências lentas na Web, essa é uma parte importante da experiência do usuário. Ao se concentrar em melhorar o atraso na primeira entrada, os proprietários e desenvolvedores de sites podem fornecer uma experiência de usuário mais responsiva e, por fim, melhorar a satisfação e o envolvimento do usuário.

Acima, abordamos como medir, testar e melhorar o FID em seu site WordPress. Embora otimizar o JavaScript possa parecer um pouco fora do alcance de usuários menos técnicos, ainda há muito que você pode fazer para melhorar o desempenho geral do seu site, incluindo o FID. Espero que você se sinta capaz de fazer isso agora.

Você tem alguma outra dica para melhorar o First Input Delay em sites WordPress? Compartilhe seus pensamentos e recomendações abaixo!