Es que aparte de Lighthouse, que Lighthouse suele ser la herramienta que suele utilizar mucha gente, pero hay que tener mucho cuidado con Lighthouse, ¿vale? Cuando se utilizan las herramientas de desarrollo y esto suele ser una cosa que la gente se vuelve ahí como loca.
Lighthouse no es fiable, no es fiable. No es fiable en el sentido, a ver, es fiable en muchas cosas, en los consejos que te da, es fiable en las métricas que ves aquí, hombre, si está a 5 segundos, a 12, pues revísatelo, pero no es un mantra en el que puedas compararte.
Por ejemplo, si yo os digo ahora, oye, entra a menea.net y dime qué puntuación tiene, pues a lo mejor seguramente no va a coincidir, ¿vale? No se pueden comparar mis puntuaciones, mis métricas con las métricas que pueden salir en tu máquina.
No tiene ningún tipo de sentido. Son diferentes las condiciones, la red, un montón de cosas, ¿vale? Entonces, lo que yo te diría es que te tienes que tomar toda esta puntuación como algo para accionar, ¿no?
Para hacer cosas, pero no para comparar, no tiene sentido comparar, ¿vale? No lo hagáis para comparar. Una cosa que podéis utilizar para comparar, porque es más externo a vosotros y vuestras máquinas, que puede ser interesante, sería PageSpeed Insights, que también es de Google, ¿vale?
Entonces, vamos a poner menea.net aquí y ahora os explico por qué es más fiable y cómo hacerlo, ¿vale? Vamos a verlo.
Da igual, Humberto. Dice, pero puedes cambiar la ubicación desde donde está viendo la página. No importa. O sea, os voy a contar una cosa, ¿vale?
Entonces, existe una cosa en ciencia que se llama el principio de incertidumbre, que básicamente cuando alguien está observando algo, altera lo que está observando justamente por esa misma persona o por el medio en el que está, en el que se encuentra.
Y esto es lo mismo. Son datos de laboratorio. Entonces tú dices, ah, no, pero es que quiero justamente cambiar la ubicación.
Pero es que estás simulando cosas. No es lo mismo simular algo y no es lo mismo la potencia que tiene mi máquina, cómo simule intentando simular un móvil, cómo simular la ubicación.
No va a ser lo mismo que cómo lo simula otra persona, que esté otra persona en esa ubicación, cómo congestiona la red en ese momento, la hora del día a la que lo haga.
Hay un montón de variantes, ¿vale? Un montón de variables que tú no sabes, que tú no controlas y que pueden tener un impacto.
No tiene sentido comparar la puntuación, ¿vale? Tú no puedes decir, oye, pues a mí me ha tardado segundos.
Ah, pues a mí me ha tardado. No tiene sentido. No se pueden comparar. No tiene sentido.
Una cosa que podéis echar un vistazo es utilizar PageSpeed Insights, ¿vale?
¿Qué hace PageSpeed Insights? ¿Por qué es interesante? ¿Por qué lo recomiendo?
Porque al final PageSpeed Insights, esto funciona no en tu máquina, sino que funciona en una máquina de Google que siempre es la misma,
que siempre se utiliza la misma y que al final vas a poder tirar de ahí para que te diga cuál es la puntuación que tiene.
Y además te da dos datos súper interesantes, ¿vale?
Uno, datos de campo, que los datos de campo son los que se recogen de usuarios reales gracias a que utilizan Google Chrome
o si la página utiliza Google Analytics, cosas así.
¿Qué es lo malo de los datos de campo? Los datos de campo se actualizan cada 28 días, bueno, cada mes, ¿vale?
Yo, los datos que estamos viendo aquí, estos serán seguramente de septiembre, ni siquiera serán de octubre,
porque a lo mejor todavía no se han actualizado.
Entonces, lo que nos quiere decir los datos de campo es, del First Contentful Paint,
el valor más común es 1,1 segundos.
Y el 91% de los usuarios que ven esta página tienen un First Contentful Paint que es inferior al 1,8 segundos.
O sea, el 91% de los usuarios que visitan Meneamea tienen una buena métrica de First Contentful Paint.
¿Qué quiere decir esto? Pues esto, es que claro, cuando tú simulas esto, fíjate,
el First Contentful Paint aquí, para mí, simulándolo, es de dos segundos.
Pero esto es de laboratorio, porque esto yo soy simulando cosas.
En cambio aquí, lo que hemos hecho, estos son datos reales, de usuarios reales.
Es una muestra, no son todos los usuarios de Meneame, ¿vale? No son todos.
Son una muestra de usuarios, tienen que el 91% de los usuarios de esa muestra
tienen un buen First Contentful Paint, que no tiene nada que ver con los datos de experimento,
porque se está haciendo pasar por un móvil y tiene 2,9 segundos.
¿Qué quiere decir? O sea, ¿por qué sería esto, no?
¿Por qué está esta disparidad?
Bueno, pues que puede ser que el 90% de los usuarios de Meneame,
uno, lo hagan por desktop, no utilicen móvil,
dos, tengan conexiones súper buenas, puede ser,
o tengan dispositivos súper modernos, súper buenos ordenadores.
Tu público influye mucho en el rendimiento que perciben.
No es lo mismo, seguramente, si entramos aquí, developers, y miramos Meneamea,
que si miramos, por ejemplo, a ver, ¿cómo es esta tienda?
Indian Shop Online Web Performance.
Hay una que suelen poner bastante de...
No, Geometrics, no.
Hay una página que suelen poner bastante de ejemplo de performance,
Flipkart, Flipkart, eso, me he acordado de golpe, Flipkart.
Vamos a ver Flipkart.
Es una página que está súper bien optimizada, súper bien optimizada, Flipkart.
Vamos a mirar esto.
¿Cómo va la nochesilla? Dice Rote.
Pues muy bien, muy bien.
A mí en Insights me dio móvil 23.
Claro, porque no tiene...
Es que no te puedes fiar de los datos que dé el experimento.
Por eso digo, los datos de experimento son interesantes para sacar acciones,
pero no son interesantes para comparar.
¿Sabes? No tiene sentido...
¿A qué ha salido 35?
No tiene sentido que digamos, ah, ha salido 35.
Pues a mí 23.
¿Sabes? No se puede...
No se puede.
¿Sabes? No se pueden comparar.
Vamos a ver Flipkart, a ver qué sale.
Que esta página, ya os digo, está súper bien optimizada.
Suele ser un ejemplo de...
Cada 2x3 la ponen de ejemplo de lo bien que lo hacen y tal.
Bueno, 28.
Pero fijaos aquí en una cosa.
Mirad qué interesante es esto, ¿vale?
Fíjate, esto es súper interesante.
Aquí tenemos, por un lado, que el experimento nos dice que el First Contentful Paint
tiene un 1,5 segundos.
Pero en cambio, en cambio, podemos ver que la media de los usuarios la tienen 2,1
y el 69% de usuarios sí que la tiene por debajo de 1,8,
pero aquí tenemos usuarios que están sufriendo con el First Contentful Paint, ¿vale?
De hecho, aquí el Largest Contentful Paint, aquí pone que la media es 5,4 y aquí pone 12.
Entonces, hay que tener cuidado a la hora de fiarse mucho de los datos de experimento.
Son súper interesantes y son especialmente interesantes cuando tú haces...
Siempre utilizas la misma máquina, por ejemplo, PageSpeed Insights.
De hecho, PageSpeed Insights tiene una API que podéis utilizar.
Esta.
La podéis utilizar totalmente gratis y podéis justamente extraer métricas, ¿vale?
Vamos a ver si podemos...
Esto te devuelve un JSON.
Y lo que podéis hacer es tener un historial, lo podéis volcar en un datadoc o lo que sea.
Vamos a probar esto si funciona sin API key.
A ver si cuela.
Tiene pinta que sí.
Vale.
¿Veis?
Tenéis aquí un montón de información.
Aquí tenéis los datos de campo, los datos de experimento.
Tenéis un montón de información.
Y a lo mejor esto, cada dos puertes, lo podéis...
Mira, aquí tenéis los screenshots también, por si los queréis utilizar.
Esto es como un Lighthouse, pero es una API.
Es totalmente abierta.
La podéis utilizar, la podéis probar.
Os dejo por ahí la URL, por si la queréis probar, ¿vale?
Entonces, mira, decía por aquí...
¿Qué función cumple lo que estamos viendo?
Dice Santete.
A ver, la función es básicamente mejorar la experiencia de desarrollo...
La experiencia del usuario.
Estamos viendo el tema del rendimiento web.
¿Cómo está, Midu?
Ya por fin pude comprar el libro, pero no tengo mucho tiempo para leerlo.
Bueno, poco a poco.
No te preocupes, RSVMK.
Poco a poco.
Vale.
Alguien decía, por ahí, ¿cómo puede ser que los Cumulative Lighthouse Shift...
Dice, ¿cómo puede ser que los Cumulative Lighthouse Shift varíen de datos de campo a datos de laboratorio?
A ver, es normal también.
Es normal.
Fíjate, bueno, en este caso es bastante pequeño, ¿no?
Pero es normal, porque imagínate que este 5% de los usuarios, por X motivo, ¿vale?
Tienen una conexión a internet muy mala.
Pero muy mala.
O sea, la peor que te puedas imaginar.
Bueno, puede ser que al tardar tanto, pues algunas optimizaciones que tengan, como por ejemplo que la imagen se cargue lo primero, ¿vale?
O que deje el espacio y tal.
Pero ese espacio lo deja porque lee el CSS.
Bueno, pues esta gente tiene tan mala conexión que el CSS les tarda la vida.
Y entonces se cargan mal.
O se carga la...
¿Sabes?
Al final es normal.
Es normal.
O sea, es que puede ser.
Como hemos visto, una imagen, o sea, a lo mejor se carga lo suficientemente pequeñita.
Se puede cargar súper rápido y a lo mejor no afecta al Lighthouse Shift.
Pero si tienes una conexión muy mala, pues sí que puede afectar.
Así que es normal que sea diferente.
Mira, aquí también es diferente.
En el caso del campo, tiene 0,13.
Porque tiene mejor conexión, tiene pinta que les va mucho mejor.
Pero en el experimento tiene 0,359.
O sea, normal.
Aquí tenemos esto también que es bastante interesante.
También lo tenemos en Lighthouse.
Que es el hecho que te dice cada uno de los scripts, ¿no?
El tanto porciento que utiliza y todo esto.
Es una cosa nueva que está bastante chula.
Y aquí, esto es lo mismo que un Lighthouse, solo que lo harías en una máquina externa.
Está bastante interesante, más que nada, para no tirar de la vuestra.
Y además, porque tiene una API.
¿Vale?
Podéis utilizar esta API y tendríais estos datos y sería genial.
¿Los Stadel Components pueden ser más óptimos que el CSS?
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.
Depende.