LCP de 2,1 s en móvil, cuatro años después de la auditoría
Tres sitios en uno, unas 25 URL y un blog que solo parecía rápido en Lighthouse.
WordPress, una app independiente para los perfiles y un blog
El sitio de Voices eran en realidad tres webs: una de marketing en WordPress, una app independiente para los perfiles de los locutores, y un blog con podcasts. Revisé unas 25 URL entre todas ellas.
Layout shifts en la página de inicio, perfiles lentos y un 94 en el blog que los visitantes nunca vieron
Me senté con sus desarrolladores, les dije qué corregir primero y les enseñé varias cosas por el camino. Avanzaron a toda velocidad: poco después, su responsable de desarrollo me envió la lista de lo que habían implementado, hasta el fetchpriority en las imágenes importantes.
Tom, su desarrollador de marketing, había aplicado gran parte de mis consejos antes de marcharse, y para marzo de 2022 los perfiles solían estar en verde en PageSpeed. Luego publicaron una tanda de nuevas funcionalidades en toda la web y los perfiles retrocedieron. En mayo, Jayme Cousins, su responsable de desarrollo, me escribió: ¿podía echarle otro vistazo? El lunes siguiente le envié tres mejoras rápidas. Los scripts de inicio de sesión de Google y Apple se habían vuelto render blocking al desactivar Rocket Loader de Cloudflare, así que tenían que ir al final del body con defer. El logo necesitaba width y height. Y el LCP era una imagen de fondo en CSS, que tenía que pasar a ser una imagen real con preload. Encontramos un hueco ese miércoles, entre su Día de la Victoria y mi Día de la Ascensión (a mi mujer no le habría hecho gracia que trabajara en festivo), y ese mismo día les envié código de ejemplo, con una pequeña caché de página incluida.
Para agosto, el head de un perfil ocupaba 40 kB en vez de 251 kB.
- 251 kB
- tamaño del head
- 28
- reglas @font-face
- 2
- scripts bloqueantes
- 40 kB
- tamaño del head
- 0
- reglas @font-face
- 0
- scripts bloqueantes
En desktop se puede ver cómo funcionó esta segunda ronda. En abril, tras publicar las nuevas funcionalidades, el Time to First Byte alcanzó un pico de 1,1 segundos. Para octubre estaba en 0,8 y en verde, y el LCP había bajado de 1,8 segundos en marzo a 1,5.
Cuatro años después, volví a consultar Voices en CrUX para esta página y está todo en verde. En móviles, el LCP se sitúa entre 2,0 y 2,3 segundos, el INP entre 150 y 200 ms, y el CLS se ha mantenido en 0 todos los meses durante un año. Esa parte es todo mérito de sus desarrolladores.
"Arjen fue clave para solucionar nuestras Core Web Vitals. Consiguió que nuestras páginas de perfil críticas volvieran a estar en verde en PageSpeed. Lo que más valoro es su implicación práctica: no se limita a señalar los cuellos de botella, sino que trabaja directamente con nuestro equipo de desarrollo hasta que las soluciones están en producción."
Jayme Cousins, responsable de desarrollo, Voices.com
Un plugin que retrasa scripts engaña a Lighthouse
El test puntúa lo que ve, y nunca llegó a ver esos scripts. El móvil del visitante sigue descargando y ejecutando cada uno de ellos.
Un layout shift eran tres
El informe daba una sola cifra de CLS. La traza mostraba tres layout shifts seguidos, y cada uno necesitaba su propia solución.
Forma a los desarrolladores y se mantendrá en verde
La auditoría fue en 2022. Sus desarrolladores lo mantuvieron en verde y CrUX sigue aprobado en móvil.
¿Verde en Lighthouse, rojo en Search Console?
Descubro qué les va lento a los visitantes y por qué, y tus desarrolladores reciben las soluciones en el orden en que deben implementarlas.
Más resultados en la página de clientes.
