Core Web Vitals: treinamento
Duas horas com a equipe web, nas suas próprias páginas. Preço fixo, sem limite de participantes.
Como é uma masterclass comigo
A masterclass ensina a equipe a encontrar o problema. No caminho, costumamos encontrar uma ou duas coisas no site, e os desenvolvedores já podem resolver isso na mesma semana. Se você prefere receber cada correção por escrito, isso é uma auditoria.
-
Baseada no seu site e nos seus casos
Envie a URL, as páginas em que a equipe mais mexe e os problemas em que ela travou. Analiso o p75 do LCP, do INP e do CLS no celular, qual grupo de páginas o Search Console sinaliza e a tendência dos últimos meses. Depois, gravo traces dessas páginas. Isso leva cerca de meio dia.
-
Duas horas com a equipe
Na primeira hora, explico como o navegador carrega as páginas e processa um toque, usando os traces que gravei. Depois, um desenvolvedor compartilha a tela e assume o comando, enquanto eu digo onde clicar. Convide todo mundo que desenvolve o site. Se outra pessoa cuida do tag manager, traga ela também.
-
A gravação e as anotações
A gravação e os slides ficam com você. Em poucos dias, você também recebe anotações sobre o que encontramos, com o mais importante primeiro. Quem tiver perdido a sessão consegue se atualizar por ali.
-
Um follow-up, um mês depois
Opcional. Até lá, a equipe já tentou aplicar por conta própria e sabe onde travou. Eles trazem os próprios traces e montam a pauta para mais duas horas.
O que seus desenvolvedores conseguem fazer depois do treinamento
- Field data
Ler os números que o Google olha
O Lighthouse dá 95, o Search Console aponta reprovação. O Lighthouse é um celular simulado em um único carregamento de página. O Google analisa os visitantes reais no p75, e no celular. Sua equipe aprende a interpretar ambos e a identificar quais auditorias do PageSpeed Insights não vão mexer no field data. Use efficient cache lifetimes costuma listar scripts de tags do próprio Google, e ninguém consegue alterar esses headers de cache.
- LCP
Descobrir por que o elemento do LCP aparece tarde
Encontramos o marcador do LCP no painel Performance e fazemos o caminho de volta até o request. As subpartes mostram se o navegador encontrou a imagem tarde, se demorou para carregar ou se já tinha o arquivo e ainda assim não renderizou. Quando ela é encontrada tarde, o motivo costuma ser um background CSS ou um script de slider que adiciona a imagem. Comprimir a imagem não recupera esse tempo.
- INP
Identificar o script por trás de uma interação lenta
"INP issue: longer than 200ms (mobile)" está no Search Console há meses, e o trace mostra uma call stack cheia de funções minificadas. Pegamos uma interação lenta e dividimos em input delay, processamento e apresentação. O Long Animation Frames aponta o script. Quase sempre é um click handler que re-renderiza metade da página ou um evento de analytics executando antes do próximo paint.
- CLS
Descobrir onde começa um layout shift
Um layout shift é um elemento da página se movendo sem ninguém esperar. O elemento que se moveu quase nunca é a causa do shift. Outra coisa fez ele sair do lugar: uma imagem sem width e height, um script que insere conteúdo acima ou uma web font que faz swap.
- Scripts de terceiros
Colocar um número em cada tag
Seus desenvolvedores não controlam o tag manager, então todo pixel novo cai na página sem ticket. A equipe aprende a medir cada um deles, no trace e no INP dos visitantes reais. Esse número é o que você leva para o marketing.
- Releases
Avaliar um release no dia seguinte
O LCP subiu depois de um deploy e ninguém percebeu até o Search Console enviar um e-mail. O Search Console mostra os últimos 28 dias, então a essa altura o release responsável já tem semanas. O RUM mostra isso no dia seguinte, no CoreDash ou na ferramenta que você já usa.
What clients say
Loop
"Arjen somehow makes LCP optimization sound simple. We used his approach and our metrics were 40% better within a week."
Nathan Ziarczyk
Jamie Oliver Group
"After the training we finally understood why our INP was failing, and which interactions we had to make cheaper."
Nicole Keep
DPG Media
"Arjen can explain the most complicated performance problems, and you can tell he loves this stuff. It made learning the hard parts fun."
Ashkan Malekloo
Quanto custa um treinamento de Core Web Vitals?
€1.500 pela masterclass, preço fixo, para a equipe inteira. Cinco ou quinze desenvolvedores, o valor é o mesmo. O follow-up custa €750 por mais duas horas. Como exige menos preparação, fica próximo da hora de uma power hour.
- Eu, e 17 anos lendo traces
- Seu p75 no celular analisado antes de começar
- Sem limite de participantes
- Um dos seus desenvolvedores no teclado na segunda hora
- A gravação, os slides e as anotações
Duas horas, a equipe inteira
Preparação inclusa.
€1.500 sem IVAfollow-up €750
Agende uma masterclass
Envie a URL e uma linha sobre a equipe.
-
Conte sobre a sua equipe
Quantas pessoas são, quais tecnologias vocês usam e qual problema vive voltando. Se houver um prazo, como um grande release ou a Black Friday, avise.
-
Escolhemos uma data
Respondo em até um dia com algumas opções de data. Preciso de cerca de uma semana para preparar, então a primeira data costuma ser dali a uma ou duas semanas.
-
No dia
Google Meet, Zoom ou Teams, o que vocês usarem. Garanta que um desenvolvedor esteja com o site aberto no Chrome. Ele assume o comando na segunda hora.
Como foi o treinamento na Speak
Uma agência digital holandesa que cria sites para seus clientes
Clientes perguntam à agência sobre Core Web Vitals o tempo todo: por que o Search Console está vermelho, se o novo tema vai resolver. A Speak queria que seus próprios desenvolvedores soubessem responder, então treinei a equipe nos sites dos próprios clientes deles.
Um ano depois, Sander Los me escreveu: "Graças aos conceitos e sugestões do treinamento, a velocidade das nossas páginas e a experiência do usuário melhoraram significativamente." A equipe dele reconstruiu a loja virtual de um cliente com o que aprendeu.
Para uma agência, performance passa a ser um serviço que você pode orçar — e algumas agências cobram mais por isso.
Perguntas que costumo receber
A masterclass
O que é uma masterclass de Core Web Vitals?
Duas horas de treinamento por chamada de vídeo com a sua equipe web, nas suas próprias páginas. Na segunda hora, o seu próprio desenvolvedor já é quem grava os traces.
Nossos desenvolvedores já precisam entender de performance?
Não. Eles só precisam saber HTML, CSS e JavaScript e já ter aberto o DevTools antes. Ler um trace de Performance é o que eu ensino. Um product owner ou alguém do marketing consegue acompanhar a primeira hora sem problemas.
Dá para cobrir tudo isso em duas horas?
Não com a mesma profundidade. A métrica que estiver reprovando no seu site ganha a maior parte do tempo, e o restante recebe o suficiente para vocês saberem onde olhar. Para o INP, isso inclui quebrar o processamento em um click handler com scheduler.yield().
Nós usamos Next.js. Isso faz diferença?
Para o navegador, não importa o que gerou a página, então funciona do mesmo jeito com Next.js, Nuxt, Magento, Shopify ou WordPress. E como os exemplos vêm do seu site, o framework de vocês vai estar neles: a hidratação bloqueando o primeiro toque em uma página Next.js, ou um app da Shopify carregando script em todo template.
Sua equipe
Quantas pessoas podem participar?
Quantas você quiser. O preço é por equipe. Acima de 20 pessoas, a segunda hora fica cheia demais em volta de uma única tela, então alinhamos o formato antes.
Somos uma agência. Isso funciona para nós?
Sim. Escolha o site de cliente que sua equipe mais domina ou aquele que está reprovando agora. Se houver um site de cliente que a equipe não consiga deixar verde após o treinamento, existe o suporte para agências.
Você pode vir até o nosso escritório?
Sim, com taxa de deslocamento por quilômetro à parte. O formato online funciona tão bem quanto, porque todo mundo enxerga o trace na própria tela.
Preço e o que vem depois
Duas horas são suficientes?
Para aprender a ler um trace, sim. Corrigir o site acontece nas sprints da sua equipe depois, e o follow-up serve para resolver onde eles travarem.
Podemos contratar um treinamento mais longo?
Sim. Meio período, um dia inteiro ou uma série com uma sessão por métrica. Qualquer formato mais longo que a masterclass recebe um escopo com o preço definido antes de começarmos.
Qual é a diferença para uma auditoria?
Na auditoria, eu encontro os problemas e documento tudo por escrito, e a sua equipe desenvolve as correções. A masterclass ensina eles a encontrarem os problemas sozinhos, o que compensa muito mais para uma equipe que vai cuidar do mesmo site por anos. Se o prazo estiver apertado, comece pela auditoria.
E se travarmos depois?
Agende o follow-up ou uma power hour para um problema pontual e difícil. Se for algo maior que isso, escolha uma auditoria ou consultoria.
