LCP de 2,1 s no celular, quatro anos após a auditoria
Três sites em um, cerca de 25 URLs e um blog que só parecia rápido no Lighthouse.
WordPress, um app separado para os perfis e um blog
O site da Voices era, na verdade, três: um site de marketing em WordPress, um app separado para os perfis dos atores de voz e um blog com podcasts. Analisei cerca de 25 URLs entre todos eles.
Layout shifts na página inicial, perfis lentos e um 94 no blog que os visitantes nunca viram
Sentei com os desenvolvedores deles, mostrei o que corrigir primeiro e ensinei algumas coisas no processo. Eles foram com tudo: pouco depois, o gerente de desenvolvimento me mandou a lista do que tinham implementado, até o fetchpriority nas imagens mais importantes.
Tom, o desenvolvedor de marketing deles, implementou boa parte das minhas recomendações antes de sair. Em março de 2022, os perfis já ficavam verdes no PageSpeed com frequência. Depois, um pacote de novas funcionalidades entrou no ar no site todo, e o desempenho dos perfis caiu de novo. Em maio, o gerente de desenvolvimento deles, Jayme Cousins, me mandou um e-mail: eu poderia dar outra olhada? Na segunda-feira seguinte, enviei três ganhos rápidos. Os scripts de login do Google e da Apple tinham virado render-blocking assim que desativaram o Rocket Loader da Cloudflare. Por isso, precisavam ir para o fim do body com defer. O logo precisava de largura e altura. E o LCP era uma imagem de fundo em CSS, que precisava virar uma imagem de verdade com preload. Achamos um horário na quarta-feira, entre o Victoria Day deles e o meu Dia da Ascensão (minha esposa não gostaria nada que eu trabalhasse em um feriado). Nesse mesmo dia, também mandei o código de exemplo, com um pequeno cache de página incluído.
Em agosto, o head de um perfil tinha 40 kB em vez de 251 kB.
- 251 kB
- tamanho do head
- 28
- regras @font-face
- 2
- scripts bloqueantes
- 40 kB
- tamanho do head
- 0
- regras @font-face
- 0
- scripts bloqueantes
No desktop, dá para ver o resultado da segunda rodada. Em abril, depois do lançamento das novas funcionalidades, o Time to First Byte atingiu o pico de 1,1 segundo. Em outubro já estava em 0,8 e no verde, e o LCP tinha caído de 1,8 segundo em março para 1,5.
Quatro anos depois, consultei a Voices no CrUX de novo para esta página e está tudo no verde. No celular, o LCP fica entre 2,0 e 2,3 segundos, o INP entre 150 e 200 ms, e o CLS se mantém em 0 todo mês há um ano. Esse mérito é todo dos desenvolvedores deles.
"O Arjen teve um papel fundamental na correção dos nossos Core Web Vitals. Ele colocou as nossas páginas de perfil críticas de volta no verde no PageSpeed. O que mais valorizo é a postura prática dele: ele não apenas encontra os gargalos, mas trabalha diretamente com a nossa equipe de desenvolvimento até as correções estarem no ar de verdade."
Jayme Cousins, gerente de desenvolvimento, Voices.com
Um plugin que adia scripts engana o Lighthouse
O teste pontua o que vê, e ele nunca viu esses scripts. O celular do visitante continua baixando e executando cada um deles.
Um layout shift na verdade eram três
O relatório trouxe um único número de CLS. O trace mostrou três shifts em sequência, e cada um precisava de uma correção própria.
Ensine os desenvolvedores e tudo continua no verde
A auditoria foi em 2022. Os desenvolvedores mantiveram o resultado no verde, e o CrUX continua passando no celular.
Verde no Lighthouse, vermelho no Search Console?
Descubro o que está lento para os visitantes e por quê, e os desenvolvedores recebem as correções na ordem certa de implementação.
Mais resultados na página de clientes.
