Formação em Core Web Vitals
Duas horas com a sua equipa web, nas páginas do seu site. Preço fixo, sem limite de participantes.
Como é uma masterclass comigo
A masterclass ensina a equipa a encontrar o problema. Pelo caminho, costumamos identificar uma ou duas coisas no site, e os programadores podem pegar nelas logo nessa semana. Se preferir receber todos os fixes por escrito, o que procura é uma auditoria.
-
Feita à medida do seu site e dos seus casos
Envie-me o URL, as páginas em que a equipa mais trabalha e os problemas onde estão bloqueados. Verifico o p75 de LCP, INP e CLS no telemóvel, que grupo de páginas o Search Console assinala e a evolução nos últimos meses. Depois, gravo traces dessas páginas. Leva-me cerca de meio dia.
-
Duas horas com a sua equipa
Na primeira hora, explico como o browser carrega as páginas e responde a um toque, com base nos traces que gravei. A seguir, um dos programadores partilha o ecrã e assume os comandos, e eu digo-lhe onde clicar. Convide toda a gente que constrói o site. Se outra pessoa gere o tag manager, convide-a também.
-
A gravação e as notas
Fica com a gravação e os slides. Passados poucos dias, recebe também notas com o que encontramos, ordenadas por prioridade. Quem tiver faltado à sessão pode pôr-se a par por aí.
-
Um follow-up, um mês depois
Opcional. Por essa altura, a equipa já tentou resolver as coisas sozinha e sabe onde bloqueou. Trazem os seus traces e definem a agenda para mais duas horas.
O que os programadores conseguem fazer após a formação
- Field data
Ler os números que a Google analisa
O Lighthouse dá 95, o Search Console diz que falhou. O Lighthouse é um único telemóvel simulado num único carregamento de página. A Google olha para os utilizadores reais no p75, e no telemóvel. A equipa aprende a interpretar ambos e a perceber que auditorias do PageSpeed Insights não mexem no field data. A regra Use efficient cache lifetimes lista frequentemente scripts de tags da própria Google, e ninguém consegue alterar esses cabeçalhos de cache.
- LCP
Descobrir porque é que o elemento de LCP aparece tarde
Encontramos o marcador de LCP no painel Performance e recuamos até ao request. As subpartes mostram se o browser encontrou a imagem tarde, se demorou a carregá-la ou se já a tinha e mesmo assim não a renderizou. Se foi encontrada tarde, a culpa costuma ser de um background em CSS ou de um slider a inseri-la — e comprimir a imagem não recupera esse tempo.
- INP
Identificar o script por trás de uma interação lenta
O alerta "INP issue: longer than 200ms (mobile)" está no Search Console há meses, e o trace mostra uma call stack cheia de nomes de funções minificados. Pegamos numa interação lenta e dividimo-la em input delay, processing e presentation. Os Long Animation Frames identificam o script. Muitas vezes é um click handler que volta a renderizar metade da página, ou um evento de analytics que corre antes do paint seguinte.
- CLS
Descobrir onde começa um layout shift
Um layout shift é um elemento na página a mexer-se quando ninguém estava à espera. O elemento que se moveu raramente é a causa do shift. Foi outra coisa que o fez mexer: uma imagem sem width e height, um script a inserir conteúdo por cima ou uma web font a fazer swap.
- Third parties
Atribuir um número a cada tag
Os programadores não controlam o tag manager, por isso cada novo pixel vai parar à página sem passar por um ticket. A equipa aprende a medir cada um deles, num trace e no INP dos utilizadores reais. É esse número que leva ao marketing.
- Releases
Verificar uma release no dia seguinte
O LCP foi subindo depois de um deploy e ninguém deu por isso até o Search Console enviar o e-mail. O Search Console mostra os últimos 28 dias, por isso nessa altura a release responsável já tem semanas. O RUM mostra o problema no dia seguinte, no CoreDash ou em qualquer ferramenta que já utilize.
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
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
Jamie Oliver Group
"After the training we finally understood why our INP was failing, and which interactions we had to make cheaper."
Nicole Keep
Quanto custa uma formação de Core Web Vitals?
1.500 € pela masterclass, valor fixo, para toda a equipa. Cinco ou quinze programadores, o preço é o mesmo. O follow-up custa 750 € por mais duas horas. Há menos para preparar, por isso fica mais ou menos à taxa horária de uma power hour.
- Eu, e 17 anos a analisar traces
- O seu p75 no telemóvel verificado antes de começarmos
- Sem limite de participantes
- Um dos seus programadores ao teclado na segunda hora
- A gravação, os slides e as notas
Duas horas, toda a equipa
Preparação incluída.
1.500 € sem IVAfollow-up 750 €
Marcar uma masterclass
Envie-me o URL e duas linhas sobre a equipa.
-
Fale-me da sua equipa
Quantas pessoas são, que tecnologias usam e que problema teima em voltar. Se houver um prazo limite, como uma grande release ou a Black Friday, mencione-o.
-
Escolhemos uma data
Respondo no prazo de um dia com algumas opções de datas. Preciso de cerca de uma semana para preparar tudo, por isso a primeira costuma ser daí a uma ou duas semanas.
-
No dia da sessão
Google Meet, Zoom ou Teams, o que a equipa utilizar. Garanta que um dos programadores tem o site aberto no Chrome. Será ele a assumir os comandos na segunda hora.
Como foi a formação na Speak
Uma agência digital neerlandesa que desenvolve sites para os seus clientes
Os clientes passam a vida a fazer perguntas sobre Core Web Vitals à agência: porque é que o Search Console está vermelho, se o novo tema vai resolver o problema. A Speak queria que os seus programadores soubessem responder, por isso dei formação à equipa nos sites dos próprios clientes.
Um ano depois, Sander Los enviou-me um e-mail: "Graças aos conceitos e às sugestões da formação, a velocidade da página e a experiência do utilizador melhoraram significativamente." A sua equipa tinha reconstruído a loja online de um cliente com o que aprendeu.
Para uma agência, a performance passa a ser um serviço que pode orçamentar — e algumas agências cobram mais por isso.
Perguntas que me costumam fazer
A masterclass
O que é uma masterclass de Core Web Vitals?
Duas horas de formação por videochamada com a sua equipa web, nas páginas do seu site. Na segunda hora, é o seu próprio programador que está a gravar os traces.
Os nossos programadores já precisam de perceber de performance?
Não. Só precisam de saber HTML, CSS e JavaScript e de já ter aberto as DevTools alguma vez. Ler um trace de Performance é o que eu ensino. Um product owner ou um profissional de marketing consegue acompanhar a primeira hora perfeitamente.
Consegue abordar tudo isso em duas horas?
Não com a mesma profundidade. A métrica que estiver a falhar no seu site leva a maior parte das duas horas, e as restantes recebem atenção suficiente para saberem onde procurar. No caso do INP, isso inclui dividir o trabalho de um click handler com scheduler.yield().
Usamos Next.js. Isso faz diferença?
Ao browser é indiferente a tecnologia que gerou a página, pelo que funciona da mesma forma em Next.js, Nuxt, Magento, Shopify ou WordPress. E como os exemplos vêm do seu site, a framework utilizada está lá refletida: a hidratação a bloquear o primeiro toque numa página Next.js, ou uma app Shopify a carregar o seu script em todos os templates.
A sua equipa
Quantas pessoas podem participar?
Tantas quantas quiser. O preço é por equipa. Acima de 20 pessoas, a segunda hora fica demasiado cheia à volta de um só ecrã, por isso alinhamos o formato antes de começar.
Somos uma agência. Isto funciona no nosso caso?
Sim. Escolha o site de cliente que a equipa melhor conhece, ou aquele que está a falhar neste momento. Se houver um site de cliente que a equipa não consiga pôr a verde depois da formação, existe o apoio a agências.
Pode vir ao nosso escritório?
Sim, com uma taxa de deslocação por quilómetro. Online funciona tão bem como presencial, porque toda a gente vê o trace no seu próprio ecrã.
Preço e acompanhamento
Duas horas chegam?
Para aprender a ler um trace, sim. A correção do site acontece depois, nos sprints da equipa, e o follow-up serve para tudo onde ficarem bloqueados.
Podemos marcar uma formação mais longa?
Sim. Meio dia, um dia inteiro ou um ciclo com uma sessão por métrica. Tudo o que for mais longo do que a masterclass recebe uma proposta com âmbito e preço antes de começarmos.
Qual é a diferença em relação a uma auditoria?
Numa auditoria, sou eu que encontro os problemas e os documento por escrito, e a sua equipa implementa os fixes. A masterclass ensina a equipa a encontrar os problemas por si própria, o que compensa muito mais se forem trabalhar no mesmo site durante anos. Se tiver um prazo a aproximar-se, comece pela auditoria.
E se ficarmos bloqueados depois?
Marque o follow-up, ou uma power hour para resolver um problema difícil. Se for algo maior do que isso, opte por uma auditoria ou por consultoria.
