Como una compañía fundada hace 100 años, tiene la página más rápida de Internet.
Y es que tenemos esta página McMaster Car.
Y esto se ha hecho muy famoso.
Hay gente que lo ha estado comentando, ¿vale?
De hecho, aquí Kenneth dice, ¿cuándo vamos a tener un template de Next.js, Rauch?
Y Rauch lo ha hecho.
Rauch ha hecho su propia página de este estilo.
Ahora le vamos a echar un vistazo, ¿vale?
A esta página de McMaster Car, porque es muy interesante.
Es un catálogo, obviamente, de piezas de ferretería.
Y bueno, pues ahí un poco de todo.
Esta es la página que veis aquí.
Vamos a ver que tiene su truco.
Ahora veréis, ¿eh?
Tiene su truco.
Por ejemplo, yo le doy aquí.
Hombre, tan rápida no es.
Tan rápida no es.
Le damos otra vez.
Hombre, está bien.
Está bastante bien.
Pero ahora, si vamos para atrás y entras, ahora sí que es rápida.
Ahora sí que es mucho más rápida, ¿vale?
Pero cuando tiene que cargar...
¡Ech! ¡Ech! ¡Ech! ¡Ech! ¡Ech! ¡Ech!
¿Por qué?
Hombre, cuando se ha cacheado, claro, funciona mucho más rápido.
Cuando ya está cacheada, funciona mucho más rápido.
Y luego, además, yo me imagino que hay un problema detrás,
que es la latencia, que seguramente el servidor lo deben tener en Estados Unidos
y no tiene ningún tipo de...
No está bien distribuido, me imagino, ¿vale?
Pero bueno, esta es la página de la que está hablando, la que se ve aquí,
que funciona muy bien, ¿eh?
O sea, no quiero decir que funcione mal, nada...
O sea, me parece que funciona súper bien una vez que está cacheado.
Cuando está cacheado, pues aquí está pidiendo y tal.
Pero fijaos que una vez que está cacheado, pues funciona bastante, bastante bien, ¿eh?
Va muy rápida.
A ver, y aquí podemos ver...
Y eso que no está muy bien optimizada, ¿eh?
Las cosas como son.
Porque mirando un poco por aquí las cosas,
fijaos que tiene aquí un JavaScript de 2,7 megas.
Tiene imágenes que también se podrían optimizar bastante,
porque las tienen en formato PNG, que no las tienen en WebP.
Están cargando un montón de fuentes que estoy seguro que no necesitan.
O sea, se podría mejorar bastante la página web
y aún así no está del todo optimizada.
El problema yo creo que dependiendo del país te puede ir más o menos rápido.
Por ejemplo, yo creo que en Latinoamérica seguramente os va a ir más rápido que a mí.
Porque estáis más cerca, estáis en el mismo continente y ahí va a haber menos latencia.
Pero esto que hace aquí, que se pone...
¿Veis que se pone como a pedir al servidor y devolverlo?
Bueno, le pone un poco de eso.
Bueno, se ha hecho muy famosa esta página justamente por esto,
porque funciona muy bien.
Y mucha gente ya ha estado comentando, por supuesto,
que no, que es que el frontend de hoy en día,
dice, estoy flipando con la cantidad de zoomers
que están flipando con lo que era hace 15, 20 años,
la velocidad y el funcionamiento normal de literalmente cualquier web.
Nenes, esto no es tecnología punta server-side rendering,
hydrated, next.js, no sé cuántos, bit, pro y ultimate con react state, hook, manager, turbo, no sé qué.
Me encanta.
Es un poco de SPX con Razor.
Las respuestas son HTML plano y se cambian con un...
Bueno, con jQuery, pues, el elemento, .html, la respuesta del servidor.
Luego vinisteis con vuestro JavaScript a mejorar la situación y aquí estamos.
Claro, es un poco raro.
La última frase es rara.
Sí, cringe el boomer, un poco boomer.
La verdad es que el pobre diario un poco...
Yo lo tengo bloqueado porque alguna gilipollez me ha soltado de vez en cuando.
Pero creo que tiene algo de razón.
O sea, de verdad, ¿eh?
Creo que tiene algo de razón.
Por más resentido que esté, el pobre,
no sé qué le ha hecho el mundo de la programación web o JavaScript,
seguramente JavaScript se acostó con su mujer o algo, algo le hizo.
Pero aún así, algo de razón tiene.
Pero creo que es un poco raro lo que comenta.
Porque muchas de las cosas que realmente hacen,
si nos ponemos a mirar por aquí,
algo que tiene es que está utilizando un montón de tecnologías interesantes
de la programación web.
Por ejemplo, tiene las cachés, las tiene con Service Workers.
Joder, pues, eso, el turbo caché que comentaba,
pues, está hecho con Service Workers.
Es verdad que en el backend no tiene, pues, no tiene nada de JavaScript,
me imagino, sin que está utilizando ASPX o .NET.
He visto por aquí, ¿ves? MCM.
Aquí lo tenemos.
Aquí tenemos alguna cosa.
MacMasters, Kit Combiner.
Bueno, que todavía se podría mejorar.
Mira, ASPX.
Aquí lo tenéis, ASPX.
Y es verdad que no hace falta,
y en eso yo creo que todos deberíamos estar bastante de acuerdo.
No siempre, y yo soy el primero que lo dice,
no hace falta hacerlo todo con Next.js.
Es verdad que hemos metido como demasiado JavaScript,
pero yo creo que especialmente hemos metido mucho JavaScript en el cliente.
O sea, yo creo que la queja esta de en el servidor no es,
el problema está más en el cliente.
Y esta página, de hecho, se podría mejorar mucho el JavaScript
que tenemos en el cliente de forma innecesaria.
Pero bueno, que esto es lo que ha dicho,
luego viniste con vuestro JavaScript a mejorar la situación.
El tema es que además tiene algunas tecnologías bastante interesantes,
lo que hace, porque por ejemplo, yo qué sé,
nos ponemos aquí y fijaos lo que ha hecho.
Cuando haces hover, ¿veis lo que ha hecho aquí?
Ha hecho como un prefetch.
Ha hecho como un prefetch aquí para tener como información de todo esto.
Y oye, pues está súper bien,
porque al final ahora cuando entras,
pues ya tenía la información que necesitaba.
¿Veis? Hace muchos prefetch cuando estás haciendo por aquí.
Cuando vas metiéndote, pues hace más llamadas.
O sea, está bastante interesante el hecho de cómo hace algunos hover
y saca información.
Que está utilizando Service Workers también para hacer todo esto.
Que luego te puedes poner a mirar,
porque quién sabe, ¿eh?
Te puedes llevar a una sorpresa.
Hay mucha gente que, ah, es que claro,
esto que está utilizando no sé qué, no sé cuánto.
Quién sabe, con todo lo que saca,
fíjate, ¿eh?
Que también parece por aquí, no sé,
y React Component, React DevTools,
o sea, que también está utilizando React.
Que me hace mucha gracia cómo se prejuzga una página solo
y simplemente porque va muy rápida y dice,
no, pues no utiliza React porque está utilizando.
Y fijaos que luego te puedes buscar aquí,
que tiene UseContext, o sea,
que tiene partes que están hechas con React y tal, ¿no?
O sea, dice, esto puede ser tu extensión.
No, pero en este caso, en este caso,
en este, porque fíjate que esto no es mi extensión.
De hecho, no tengo React DevTools,
no tengo la extensión.
Lo que puede ser es que no sea toda la página
y que a lo mejor es una parte en concreto.
Pero esto que veis por aquí,
no sé si tiene React completo,
no tengo ni idea.
Yo creo que tiene pinta,
porque fijaos que tiene aquí el React.creditElement.
Puede ser un widget en concreto,
puede ser una parte de lo que sea,
pero yo creo que tiene bastante de React por aquí metido.
O sea, React.creditElement, React.creditElement.
O sea, que por mucho que mucha gente,
como en el caso este del diario Unpicateclas,
que dice, es que luego viniste con vuestro JavaScript
a mejorar la situación.
Y esto es como funciona.
Es que fíjate que el problema no es React.
Y tú mismo te estás dando cuenta
porque esta página tiene React
y te vas conmigo con patatas fritas
y no te estás enterando.
Porque el tema siempre,
jamás,
el problema es la tecnología,
ni de JavaScript,
ni de PHP,
ni de .NET y tal,
sino que son las implementaciones.
Entonces,
me hace un poco de gracia esto
porque mucha gente se ha metido al cuello
de, no, React y tal,
y luego te puedes admirar
y tienes React por bastantes sitios.
Y dices, bueno,
que obviamente el hecho de que son rápida,
que la página sea rápida,
no es porque utilice React.
Yo no estoy diciendo eso, ¿eh?
Digo que la culpa, ¿no?
O el hecho de que utilice React
no lo hace lento de per se,
sino que se pueden hacer un montón de cosas.
Al final esto
es la importancia de darle cariño
a una página web
independientemente de utilizar React.net,
PHP o lo que sea
y puedes conseguir cosas bastante chulas
porque fijaos que funciona
pues muy, muy, muy, muy bien
las cosas como son, ¿eh?
Luego por aquí,
entrada por aquí,
si abres una aplicación de escritorio
hace 20 años también va así.
Sí, bueno,
yo no recuerdo,
yo creo que la gente también,
os digo una cosa, ¿eh?
Os voy a decir una cosa
porque he visto un montón de gente
con comentarios un poco
de que antiguamente
todo funcionaba así.
A ver,
yo creo que
la nostalgia
gana el criterio
muchas veces, ¿eh?
Me refiero a
que nosotros en nuestra nostalgia
creemos recordar
cómo funcionaban las cosas
a cómo funcionaban realmente
y sí que es verdad
que eran mucho más sencillas
que seguramente
se hacía mucho
serverless rendering
y de nuevo
estoy bastante de acuerdo
con alguna cosa
de la que dice
porque sí que acepto
parte de la crítica
que dice
de que ahora
tenemos un martillo
y lo único que vemos
son clavos, ¿vale?
Y hay veces
que podemos simplificar
un montón nuestras implementaciones
y creo que
en eso tienes razón.
Pero a veces
también es verdad
que quizás
la culpa no es solo
de la tecnología
es de las cosas
que hacemos un poco
de las tecnologías, ¿no?
Y mucha gente
se ha metido por ahí
ya a cuchillo
de decir
no, es que
esta página
a ver
si solo renderizas
por ejemplo
con NextYear
si tú renderizas
solo HTML y CSS
no vas a tener
ningún problema
de rendimiento
el problema
es cuando empiezas
a meterle JavaScript
innecesario
no lo optimizas
y todo esto
y esto está bien optimizado
las cosas como son
de hecho
una cosa que ha ocurrido
que está
me parece
un ejercicio interesante
aunque os voy a decir
que tiene trampa
y es que el bueno
de Guillermo
ha hecho
su versión
con NextYear
para que funcione
lo mejor posible
mucho respeto
al equipo
de MacMaster
por publicar
un buen sitio
e inspirar
a todo el mundo
vamos a compartir
algunos aprendizajes
y áreas
donde podemos mejorar
el rendimiento
y él ha hecho
su versión
con NextYear
¿vale?
y bueno
pues también
funciona bastante bien
el diseño
pues se lo ha dejado
exactamente igual
y ya está
también os digo
que cuál es
cuál es la trampa
de esto
que está
está muy bien
lo que ha hecho
Giche
y habría que ver
aunque está muy bien
también es verdad
que muchas veces
la trampa
que tiene este tipo
de ejemplos
aunque veo que ahora
dice que ha metido
dos millones
de productos
aquí no
dice
hemos escalado
a tener
de dos mil productos
a un millón de productos
el rendimiento
se ha quedado igual
es el mismo
vale
esto puede estar muy bien
pero es verdad
es verdad
y lo tenemos por aquí
que lo podéis echar un vistazo ya
que funciona
bastante bien
aunque a ver aquí
a ver
a ver
a ver
qué ha pasado ahí
un momento
ahí a ver
es que una cosa
que tiene muy bien
una cosa
que tiene muy bien
esta página
aunque a mí no me termina
de gustar mucho
esta página en blanco
ahí se nota
que podría ser
bastante mejor
podría ser un poquito mejor
pero una cosa
que sí que tiene
bien hecha
es el tema este
de que deja
que las imágenes
tengan el hueco
perfecto
para cargar
sabes que
cuando tú cargas
la página
ves
tienes ya el hueco
ahí de la imagen
eso es súper importante
eso es la clave
de hecho
el otro día
estuve discutiendo
sobre esto
con el tema
del aspiratio
en este caso
no sé cómo lo harán
no sé si utiliza
el aspiratio
o utilizará directamente
el width
y el height
da igual
pero hay que utilizar
el correcto
el que sea
ah encima utiliza
a ver
a ver aquí
cómo lo está haciendo
esto
lo está haciendo encima
con una imagen
de fondo
mucho más interesante
una imagen
de fondo
hostia
es que tiene
un montón
de técnicas
para mejorar
el rendimiento
fijaos en esta
esta está muy chula
esto lo que están
haciendo aquí
que esto lo vimos
en un directo
es que están cargando
una imagen
que esto es un sprite
de imágenes
para cargarlas todas
en lugar
de cargar
cada imagen
de forma separada
y tener que hacer
pues 3
4
5
6
7
14
pues casi 28
son 26
request
en lugar de hacer
26 peticiones
de imágenes
lo que hacen
es descargar
una sola imagen
con todas
las imágenes
y luego
utilizando el background
position
lo que hacen
es posicionarlo
de el fondo
dice vale
pues esta parte
del fondo
de aquí
esta
joder
ahora no sé
aquí
vale
dice vale
pues este fondo
este
pues justamente
la posición
de este
S23
está aquí
pero tú esto
lo podrías cambiar
sabes
y podrías decirle
vale
pues no es esto
sino que lo tiene
no sé dónde
bueno
pues lo podrías cambiar
y lo podríamos ver
como
como se mueve
el sprite
a ver
hostia
no sé por qué
ahora hay como
una cosa rara
a ver
aquí
ves
ahí tienes todas
las imágenes
o sea
están todas
de fondo
y lo que haces
es que tú
podrías mover
y ver cada una
de las imágenes
con una imagen
de fondo
esto es una cosa
muy antigua
de hecho
Google
creo que todavía
lo hace
es que es una
de las técnicas
de mejora
de rendimiento
más importantes
para evitarte
hacer peticiones
innecesarias
si vamos aquí
a las imágenes
fijaos
veis
aquí tenemos
tres imágenes
esta de la búsqueda
en lugar de cargar
tres
vamos no
esta búsqueda
veo que es un SVG
o sea
dónde se utilizará
esa imagen
aquí la tiene
no sé para qué
porque realmente
no veo que utilice
esa imagen
pero ahí la hace
o sea
debe ser una cosa
antigua
pero bueno
ya veis
y aquí también
esto sí que lo utilizan
para todos los logos
descargan todos los logos
el de youtube
drive y todo esto
y tiene sentido
porque al final
cargas una imagen
en lugar de cargar
pues 20 imágenes
hacer 20 peticiones
que eso normalmente
es mucho peor
es la lupa del input
no es la lupa del input
porque si le damos
a la lupa del input
fíjate que es un SVG
parece el del input
pero no lo es
en fin que hay un montón
de técnicas
para optimizar
una de estas técnicas
que os recomiendo
un montón
porque es súper simple
es esta
que estuve explicando
el otro día
que uno de los errores
más típicos
es este
el que cuando se carga
una imagen
ves
da este salto
el contenido
vale
que carga
carga la imagen
y aparece ahí
y da un salto
el contenido
eso
lo que le pasa
al usuario
es que lo percibe
como que está cargando
todavía
bueno
aquí me ha dicho
que esto no era una solución
que no sé qué
por muy pequeña
que sea la imagen
por muy pequeñita
que sea la imagen
fijaos aquí
o sea
de que sea
que esté optimizada
veis esto de
la imagen
no está cargada
fíjate
que voy a actualizar
la página
veis
que da un salto
y esa
la sensación
que tiene un usuario
es que está cargando
en cambio
si vosotros le ponéis
el aspect ratio
o utilizáis
el ancho y alto
de la imagen
para reservar
el espacio
fijaos la diferencia
ahora voy a recargar
y es verdad
que sigue cargando
pero no da
tanto
esa sensación
de que se está creando
todavía
el layout
y esto lo hacen
ellos también
y aquí
el de Next.js
pues también funciona
la verdad
que funciona muy
muy bien
y fijaos que también
tiene esa técnica
de que ya tiene
el hueco
totalmente puesto ahí
vale
y hombre
funciona muy bien
o sea
funciona muy bien
¿por qué me imagino
que funciona tan bien?
porque son todo
páginas estáticas
no me extraería
no sé
no sé si son páginas estáticas
a ver
vamos a buscar
por ejemplo
si buscamos
le busco lo que yo quiero
lo que yo quiera
vale
y le digo
panhead
hostia
va muy rápida
va bastante
bastante rápida
bastante rápida
está bastante
bastante bien
la verdad
es que va
muy rápida
bueno
es que al final
las cosas como son
no creo que el de Next.js
utilice sprites
yo creo que todo esto
lo ha hecho a mano
me imagino
ves la imagen aquí
pero es que al final
el problema que muchas veces
tenemos
es que las páginas
van lentas
porque metemos cosas
que no necesitamos
o sea
si tú dejas la página
lo más sencilla posible
va a ir rápida
y ya está
sería buena idea
hacerla con astro
yo creo que sí
oye pues la podríamos
intentar hacer con astro
sería un buen ejercicio
me gustaría
pero bueno
que he visto mucho hate
justamente con ese tweet
y hay gente pues que
lo comentaba
y se ponía ahí
decía
es que las páginas
como han destrozado
bueno yo creo que
se siguen pueden hacer
¿cuál es el verdadero
caso de uso
de muchísimos frameworks
y demás cosas de la web?
porque es que quiero ver
que realmente
que hay algún caso beneficioso
memes aparte
yo creo que esto es
como lo mismo
que mucha gente
podría haber pensado
en su momento
con .net
¿sabes?
pero para qué sirve
.net
para qué vamos a utilizar
.net
si esto lo podemos hacer
directamente con COBOL
yo que sé
es que
o lo podemos hacer
con HTML y CSS
a mano
siempre va a pasar
con los frameworks y tal
yo creo que lo más importante
es utilizar
cada herramienta
cada framework
de la mejor forma posible
y ya está
porque al final
no tiene mucho sentido
el hecho de quejarse
de los frameworks en general
y siempre va a ocurrir
ah pues lo podemos haber hecho
en lenguaje máquina
ah ya está
bueno
y hay muchas técnicas aquí
que tienen sentido
y como hemos visto
incluso puedes utilizar React
y el tema es
ponerse con el rendimiento
.o
Y
.o
.o
.o
.o
.o
.o
.o
.o
.o
.o
.o
.o
.o
.o
.o