Core Web Vitals: formación
Dos horas con tu equipo web, en tus propias páginas. Precio fijo, sin límite de asistentes.
Cómo es una masterclass conmigo
Una masterclass enseña a tu equipo a encontrar el problema. Normalmente detectamos uno o dos problemas en tu sitio sobre la marcha, y tus desarrolladores pueden solucionarlos esa misma semana. Si prefieres que te den cada corrección por escrito, eso es una auditoría.
-
Basada en tu sitio y tus casos
Envíame tu URL, las páginas en las que más trabaja tu equipo y los problemas en los que están atascados. Reviso el p75 del LCP, el INP y el CLS en móvil, qué grupo de páginas marca Search Console y la tendencia de los últimos meses. Luego grabo traces de esas páginas. Eso me lleva medio día.
-
Dos horas con tu equipo
En la primera hora explico cómo el navegador carga tus páginas y procesa un toque, usando las traces que grabé. Después, uno de tus desarrolladores comparte su pantalla y toma el control. Yo le digo dónde hacer clic. Invita a todos los que construyen el sitio. Si alguien más maneja el tag manager, invítalo también.
-
La grabación y las notas
Te quedas con la grabación y las diapositivas. En unos días también recibes notas sobre lo que encontramos, lo más importante primero. Quien se haya perdido la sesión puede ponerse al día con ellas.
-
Un seguimiento, un mes después
Opcional. Para entonces, tu equipo lo ha intentado por su cuenta y sabe dónde se atascó. Ellos traen sus traces y definen la agenda para otras dos horas.
Qué pueden hacer tus desarrolladores tras la formación
-
Field data
Leer los números que Google mira
Lighthouse dice 95, Search Console dice que falló. Lighthouse es un teléfono simulado en una sola carga de página. Google mira a tus visitantes reales en el p75, y en móvil. Tu equipo aprende a leer ambos, y a saber qué auditorías de PageSpeed Insights no mejorarán el field data. Use efficient cache lifetimes suele listar los propios scripts de etiquetas de Google, y nadie puede cambiar sus cabeceras de caché.
-
LCP
Descubrir por qué el elemento del LCP aparece tarde
Encontramos el marcador del LCP en el panel Performance y retrocedemos hasta la petición. Las subpartes te dicen si el navegador encontró la imagen tarde, la cargó lento, o si la tenía y aun así no la pintó. Cuando la encuentra tarde, suele ser un fondo CSS o un script de un slider que la añade. Comprimir la imagen no te devolverá ese tiempo.
-
INP
Nombrar el script detrás de una interacción lenta
"Problema de INP: superior a 200 ms (móviles)" lleva meses en Search Console, y la trace muestra un call stack lleno de nombres de funciones minificados. Tomamos una interacción lenta y la dividimos en input delay, procesamiento y presentación. Los Long Animation Frames indican el nombre del script. A menudo es un click handler que vuelve a renderizar media página, o un evento de analítica que se ejecuta antes del siguiente paint.
-
CLS
Encontrar dónde empieza un layout shift
Un layout shift es un elemento de la página que se mueve cuando nadie se lo esperaba. El elemento que se movió rara vez causó el salto. Otra cosa lo hizo moverse, como una imagen sin width y height, un script que añade contenido encima, o una web font que hace swap.
-
Terceros
Ponerle un número a cada etiqueta
Tus desarrolladores no son los dueños del tag manager, así que cada píxel nuevo llega a la página sin un ticket. Tu equipo aprende a medir cada uno, en una trace y en el INP de tus visitantes reales. Ese número es el que le llevas a marketing.
-
Despliegues
Comprobar una release al día siguiente
El LCP subió después de un despliegue y nadie se dio cuenta hasta que Search Console envió el correo. Search Console muestra los últimos 28 días, por lo que para entonces la release que lo causó tiene semanas de antigüedad. El RUM te lo muestra al día siguiente, en CoreDash o en lo que ya estés usando.
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
¿Cuánto cuesta una formación en Core Web Vitals?
1.500 € por la masterclass, precio fijo, para todo el equipo. Cinco desarrolladores o quince, el mismo precio. El seguimiento son 750 € por otras dos horas. Hay menos que preparar, así que sale más o menos a la tarifa de una power hour.
- A mí, y 17 años leyendo traces
- Tu p75 en móvil revisado antes de empezar
- Sin límite de asistentes
- Uno de tus desarrolladores al teclado en la segunda hora
- La grabación, las diapositivas y las notas
Dos horas, todo tu equipo
Preparación incluida.
1.500 € sin IVAseguimiento 750 €
Reserva una masterclass
Envíame tu URL y una línea sobre tu equipo.
-
Háblame de tu equipo
Cuántas personas son, con qué programan y qué problema no para de volver. Si hay una fecha límite, como una gran release o el Black Friday, menciónalo.
-
Elegimos una fecha
Respondo en un día con un par de fechas. Necesito una semana para prepararme, así que la primera suele ser a una o dos semanas vista.
-
El día de la sesión
Google Meet, Zoom o Teams, lo que use tu equipo. Asegúrate de que un desarrollador tenga el sitio abierto en Chrome. Él tomará el control en la segunda hora.
Cómo fue una formación en Speak
Una agencia digital holandesa que construye sitios para sus clientes
Los clientes preguntan a su agencia sobre los Core Web Vitals constantemente: por qué Search Console está en rojo, si el nuevo tema lo arreglará. Speak quería que sus propios desarrolladores tuvieran la respuesta, así que formé al equipo usando los sitios de sus clientes.
Un año después Sander Los me escribió: "Gracias a los conceptos y sugerencias de la formación, nuestra velocidad de página y la UX han mejorado significativamente." Su equipo había reconstruido la tienda de un cliente aplicando lo que aprendieron.
Para una agencia, el rendimiento se convierte entonces en trabajo que puedes presupuestar, y algunas agencias cobran más por él.
Preguntas que me hacen
La masterclass
¿Qué es una masterclass de Core Web Vitals?
Dos horas de formación para tu equipo web por videollamada, usando tus propias páginas. Para la segunda hora, es tu propio desarrollador quien graba las traces.
¿Nuestros desarrolladores ya tienen que saber de rendimiento?
No. Tienen que conocer HTML, CSS y JavaScript, y haber abierto las DevTools alguna vez. Leer una trace de Performance es lo que yo enseño. Un product owner o alguien de marketing pueden seguir bien la primera hora.
¿Puedes cubrir todo eso en dos horas?
No con la misma profundidad. La métrica que falle en tu sitio se lleva la mayor parte de las dos horas, y el resto recibe lo suficiente para saber dónde mirar. Para el INP eso incluye dividir el trabajo en un click handler usando scheduler.yield().
Usamos Next.js. ¿Importa?
Al navegador le da igual con qué se construyó la página, así que funciona igual para Next.js, Nuxt, Magento, Shopify o WordPress. Y como los ejemplos salen de tu sitio, tu framework estará en ellos: la hidratación bloqueando el primer toque en una página de Next.js, o una app de Shopify cargando su script en cada plantilla.
Tu equipo
¿Cuántas personas pueden unirse?
Las que quieras. El precio es por equipo. Con más de 20 personas, la segunda hora se llena demasiado alrededor de una sola pantalla, así que primero hablamos sobre el formato.
Somos una agencia. ¿Esto nos sirve?
Sí. Elige el sitio de un cliente que tu equipo conozca mejor, o el que esté fallando ahora mismo. Para un sitio de cliente que tu equipo no logre poner en verde tras la formación, existe el soporte para agencias.
¿Puedes venir a nuestra oficina?
Sí, con un cargo extra por kilometraje. Online funciona igual de bien, porque cada uno ve la trace en su propia pantalla.
Precio y el después
¿Son suficientes dos horas?
Para aprender a leer una trace, sí. Arreglar el sitio ocurre luego en los sprints de tu equipo, y el seguimiento es para cualquier cosa en la que se atasquen.
¿Podemos reservar una formación más larga?
Sí. Medio día, un día entero o una serie con una sesión por métrica. Cualquier cosa más larga que la masterclass recibe un presupuesto cerrado con el precio antes de empezar.
¿En qué se diferencia esto de una auditoría?
En una auditoría yo encuentro los problemas y los dejo por escrito, y tu equipo implementa las correcciones. La masterclass les enseña a encontrar los problemas ellos mismos, lo que más compensa a un equipo que trabajará en el mismo sitio durante años. Si tienes una fecha límite cerca, empieza con la auditoría.
¿Qué pasa si nos atascamos después?
Reserva el seguimiento, o una power hour para un problema difícil. Si es algo mayor, una auditoría o consultoría.
