Desde a introdução do Lighthouse, surgiram novos parâmetros relacionados à velocidade da página. Um dos parâmetros mais importantes é o First Contentful Paint (FCP). Na versão 10 do Lighthouse, em vigor a partir de junho de 2024, o impacto do FCP na pontuação geral é de 10%.
Para adotar e compreender o FCP como uma métrica, é essencial primeiro examinar a psicologia por trás dele. O conceito é semelhante ao espelhos instalados em elevadores:
Resumindo brevemente: Na primeira metade da década de 1900, o uso de elevadores em edifícios altos aumentou significativamente, mas os sistemas de elevadores eram primitivos em comparação com os dias de hoje. Por isso, surgiu a ideia de instalar espelhos nos elevadores para diminuir o tempo de permanência no elevador.
Voltando ao nosso tópico: O ponto que perceptualmente faz você esperar durante o carregamento ao tentar acessar uma página é o FCP. A definição de First Contentful Paint é o tempo que leva para o primeiro texto, imagem, tela não branca, etc., ser exibido para o usuário. A unidade do FCP é segundos.
No Lighthouse, a escala de cores do FCP é determinada da seguinte forma:
- 0-2 segundos: Verde => Rápido
- 2-4 segundos: Laranja => Precisa de melhorias
- Mais de 4 segundos: Vermelho => Lento
De acordo com os dados do HTTP Archive, o número de sites que podem ser considerados rápido é 25%, e 50% dos sites existentes são classificados como lentos.
O que pode ser feito para melhorar o FCP?
Reduzir o tempo de resposta do servidor
Geralmente, isso pode ser interpretado como melhorias necessárias no lado do servidor e no software. Para listar os problemas que impactam negativamente o tempo de resposta do servidor:
- O compartilhamento do servidor, a configuração (ou seja, as configurações do servidor) e os recursos do servidor podem ser o problema. A capacidade do seu servidor deve ser aumentada de acordo com o seu tráfego. Em alguns casos, consultas de banco de dados mal escritas e componentes de software altamente complexos podem afetar seriamente o tempo de resposta do servidor.
- A não utilização de CDN (Content Delivery Network) pode causar atrasos no acesso ao conteúdo, afetando o FCP. À medida que o tamanho do conteúdo aumenta, por exemplo, se um grande GIF animado ou vídeo for tentado ser chamado sem um CDN e o servidor principal estiver em um continente diferente, talvez seja necessário considerar soluções de CDN para resolver o FCP.
- Não servir conteúdo estático com uma política de cache adequada e consistente pode sobrecarregar seu servidor desnecessariamente à medida que o número de visitantes aumenta. Por exemplo, se você não mantiver seu logotipo em cache de longo prazo enquanto o carrega em todas as páginas, você prejudicará desnecessariamente o tempo de resposta do seu servidor.
- Redirecionamentos de página desnecessários ao acessar a página pode afetar desnecessariamente o seu FCP.
Por exemplo, no passado, existiam configurações como esta: quando um usuário queria entrar em um site, havia um redirecionamento de HTTP para HTTPS e, se fosse móvel, um redirecionamento de HTTPS para celular (por exemplo, https:// www para https://m), e se a página fosse removida e redirecionada para outro lugar com um 301, parecia que o usuário estava sendo passado de mesa em mesa em uma repartição de finanças. Este é um exemplo extremo para melhor compreensão, mas se você redirecionar uma página para outro URL com redirecionamento 301 e depois redirecionar essa página para outra com 301, poderá estar fazendo a mesma configuração ilógica.
- Se você não use pré-conexão ou pré-busca de DNS prefixos ao conectar-se a serviços de terceiros e conectar-se a muitos serviços de terceiros, você não estará fazendo nada benéfico para o FCP.
Reduza os recursos de bloqueio de renderização
Devo admitir que este único ponto escrito como um item de linha pode levar meses para ser resolvido.
Para conseguir isso, existe um método de solução onde todos JS, CSS e recursos semelhantes que bloqueiam a renderização da página são carregados após o tempo de criação da página, mas a parte inicialmente visível do site é carregada primeiro enquanto o site está carregando. No entanto, para fazer isso, todos os recursos JS, CSS e similares precisam ser examinados e os processos mais demorados precisam ser separados. Além disso, usar o mínimo possível de serviços de terceiros ajuda a otimizar o FCP.
