básicamente un critical CSS lo que es, es que entra a una página y detecta cuál es el CSS crítico que necesita para funcionar.
Mira, vamos a ir a cualquiera, por ejemplo a la mía de Midudev, voy a darle aquí a inspeccionar, voy aquí a la consola,
si le doy a coverage y refresco, si ponemos aquí en CSS, veremos que el CSS que se está cargando, ¿veis?
El de archivo CSS en rojo está lo que no se usa, en azul está lo que sí que se usa.
Pues un critical CSS lo que haría es que el CSS que sí que estás utilizando, que además lo puedes ver aquí,
que es la parte azul, esta parte azul, la pones en línea en el HTML para que vaya más rápida tu página,
o sea que es un tema de performance. Critical CSS Extractor, le vamos a llamar,
critical CSS Extractor, en PMInit-i, empezamos nuestro proyecto, lo primero, yo quiero instalar PlayWrite,
quiero instalar PlayWrite, que es como un Puppetier, pero que a mí me gusta más que Puppetier,
porque da menos problemas, Puppetier nos da muchos problemas últimamente.
Vale, pues venga, vamos a ello.
El index, ¿qué es lo que queremos primero? Pues levantar, ¿no? PlayWrite, pues vamos a ello.
Bueno, si no me equivoco, PlayWrite, aquí nos está exportando Chromium, pues vamos a utilizar Chromium,
y lo que tenemos que levantar para luego es el tema del browser, luego veremos cómo lo hacemos esto.
Vale, ahora que ya tenemos el browser, vamos a levantarlo, PlayWrite Browser.
Ah, mira, ahí había alguna forma de hacerlo.
Esto es para levantar todos, pero yo no quiero levantarlos todos.
Playground Launcher... Esto es el Chromium, esto es básicamente el Chromium.
Vamos a tener Get Browser.
Lo hacemos aquí, así.
No lo vamos a cerrar todavía.
Venga, Linter.
El Linter también.
Utilizo el MPM Install, o sea, el SuiLint, porque este es para mi empresa.
Entonces normalmente utilizo el estándar, pero en nuestro caso, que vamos a utilizarlo para mi empresa,
utilizamos el SuiLint.
La verdad es que esta es una herramienta que al final...
Muy bien.
¿Ves cómo tenía que instalar el Linter?
Mi empresa utiliza un Linter que está basado en estándar,
y cuando lo instalas, ya te pone aquí el SlingConfig, te lo pone todo automáticamente.
Pues vamos a poner esta versión.
Nosotros utilizamos las mayores, así que voy a dejar aquí la mayor.
Esto es PlayWrite.
Perfecto.
Ya va empezando.
Va empezando.
Vamos a hacer...
Claro, esto yo lo que quiero es que se pueda utilizar como módulo exports,
y vamos a hacer aquí sea ExtractCriticalCSS.
La verdad es que no sé por qué utilizo constantes para las funciones.
A mí normalmente me gusta más hacer esto.
Cuando son funciones que están en la raíz,
me gusta más que sean funciones declaradas de esta forma,
que no utilizar las constantes como una expresión.
Este browser al final aquí ya no hace falta.
AsyncFunction, ExtractCriticalCSS.
Y de aquí...
Aquí ahora ya empieza un poco el tema.
A ver, esto que he hecho de Screenshot, esto ya no es necesario.
Esto del GoTo tampoco.
Este NewPage.
GetNewPage.
Venga.
ReturnPage.
Vamos a devolver la página.
Esto no lo necesitamos.
De hecho, podríamos devolver el Browser y el Page,
por si hay que cerrarlos después.
Vale.
Hasta aquí bien.
Hasta aquí yo creo que bien.
Lo que el Launch este ya sé yo,
lo sé yo porque tengo bastante experiencia
haciendo esto de Papeteer y Chrome y Playwright y todo esto,
que tengo aquí una serie de argumentos para pasarle,
para que luego no me dé problemas
cuando lo utilicemos en Continuous Integration y cosas así.
Así que ya me los voy a pagar.
Los tengo por aquí.
Esto lo que hace es optimizar, pues eso,
para Docker, para utilizar la memoria,
que si no, no puedo escribir en Continuous Integration y cosas así.
Así que...
Así que...
Get NewPage.
Get Browser a NewPage.
Voy a hacer esto.
Y esto es lo que vamos a hacer aquí.
Bueno, aquí ya sé que vamos a necesitar la URL.
Page.
Browser y Page.
Await.
Browser y Page.
Perfecto.
Entonces, esto ya tengo el NewPage aquí.
Browser y Page.
Aquí luego...
Todo, SetViewPortSize.
Esto es porque a lo mejor queremos el CriticalCSS para móvil o lo que sea.
Primero voy a ver qué bien funciona el tema del CriticalCSS y luego ya veremos.
Tengo el ViewPortSize.
No sé.
ConfigTimeout.
Maybe.
No sé.
Puede ser.
Vale.
Y ya debería ir a la URL.
Go to URL.
Esto es para visitar la página a la que queremos ir.
Pero aquí está el truco.
De hecho, tengo...
Si veis que estoy mirando mucho una cosa, es que tengo por aquí un artículo.
CriticalCSS.
Tengo un artículo para hacer el CriticalCSS.
Este, ¿cómo extraer el CriticalCSS con Papetier?
Oye, ¿por qué sale primero Medium?
No, Madrigo es parió.
Pero si es mi mismo artículo.
Y encima...
Esto no se puede editar.
Para que la canonical sea la mía.
Lo voy a mirar.
No me da la gana que sea Medium la primera.
Critical...
Publisher.
A ver.
Publish.
Edit Story.
No.
Edit Story no era.
More Settings.
De tema, utilizo OneDark Pro.
Muy buenos tours live.
Gracias, hombre.
El link detecta error para verlo así en editor.
Es una extensión de Visual Code.
Exacto.
Error Lens.
Ahí está.
Vale.
SEO Description.
Promotion.
Content.
Esto.
Esto.
Esto ha sido publicado en mi blog.
Así que...
Nada de salir todo primero Medium.
O sea, ¿qué es esto?
Que salga todo primero.
Me da la gana.
Vale.
Pues eso, que tengo este artículo.
Que aparte de que explica lo que es el CriticalCSS.
Pues tiene...
¿Veis?
Que más o menos está ahí haciendo lo mismo que estaba haciendo aquí.
Esto del Wait until el Load.
Yo creo que esto ya está así por defecto.
Pero esto sí que lo vamos a necesitar.
Esto sí que lo vamos a necesitar.
Espero que esto se pueda copiar.
Vale.
Esto lo que hace es...
Init...
CSS Code Coverage on Chrome Developer Tools.
Bueno.
DevTools.
Total.
Y esto lo tenemos que hacer antes de ir a la página.
Es importante.
Entonces, luego vamos a la página.
Que es el GoTo este.
Al de la URL.
Yo creo que no hace falta, como tal, el Wait.
Pero el error...
Vamos a poner aquí un...
Esto.
Por si nos peta que nos salga el error.
Vale.
Entonces...
Vamos a recuperar la respuesta.
Y aquí el CSS Code Coverage este...
Hay, he puesto Stop y esto al principio es Start.
El Stop viene aquí.
Stop.
CSS Code Coverage.
Console Log.
CSS Coverage.
Vale.
Tengo por aquí Fotocasa levantada.
A ver un momento.
Que no enseñe cosas que no debería.
No la vaya a liar.
Vale.
Voy a ocultar una cosilla.
Get critical CSS.js
Y así me enfoco solo en este archivo.
Ya está.
Vale.
Para no liarla mucho...
Aquí ya tengo el CSS Coverage.
Esto lo que quiero es que me devuelva...
Pues un string, ¿no?
O sea, lo que necesitamos es un string y ya está.
Este CSS Code Coverage, si lo miramos...
De hecho, voy a poner por aquí un archivo...
Bueno, lo puedo hacer en este.
Lo puedo hacer en el que tenía aquí.
Que este es el de...
¿Cómo le he llamado a esto?
Extract critical CSS.
Vamos a hacer un require aquí, pero a saco.
A saco.
Critical CSS Extractor.
Extract critical CSS.
Hemos dicho que hay que pasarle la URL.
La URL.
Tengo levantado un servicio en localhost.
Que debería ser Fotocasa.
Puedo probar primero con mi blog, por si acaso.
Vamos a probar primero con mi blog.
Vale.
Hostia.
Top Level Await.
Tengo Node 15.
Top Level Await.
Node 15.
Y Node.
A partir de la 14.8.
Vamos a ver qué versión tengo.
Bueno.
Venga.
Vamos a probarlo.
Esto me debería devolver el critical CSS.
Hostia.
No le gusta al...
Al linter.
No le gusta al linter.
O sea, mejor esto sí que funciona en Node.
Pero no le gusta al linter.
Bueno.
Node.
Scripts.
Get.
Critical CSS.
Ah, pues no.
Is only valid in async functions and top level bodies of modules.
Vale.
Ya me ha quedado claro.
Me ha quedado claro.
Pues por ahora vamos a hacer así.
¿Qué he hecho?
La ifi.
Que la expliqué el otro día.
Console log del critical CSS.
Ya ha sido declarado.
CSS coverage.
Vale.
Esto es en el otro.
Este es en el otro archivo.
Venga, vamos.
Vamos.
Es que, ah, creo que lo tengo aquí.
Vale.
Esto es que lo he puesto dos veces.
Es que esto aquí no tiene sentido.
Esto es empezar.
Luego lo tienes aquí.
La respuesta tampoco la estamos...
A ver.
La respuesta...
Voy a poner...
La respuesta no es muy importante.
A no ser que esté mal.
Si está, por ejemplo, response.
Si no es ok, entonces...
Something wrong happened with the response.
Vale.
Vamos a ver ahora.
Vale.
Vale, vale.
Esto está bien.
Esto está bien.
Vale.
Ya me ha devuelto a un objeto.
Con el CSS.
Con los rangos de CSS que se están utilizando.
Esto lo tengo en el artículo.
Básicamente hay que...
Este es el CSS code coverage.
Hay que iterarlo.
Hay que recuperar.
Esto es un array, ¿no?
Sí.
Un array de objetos.
Hay que recuperar estos textos.
Y ya está.
Creo que el ranges, como tal, no es necesario.
Solo recuperando los textos.
Ah, no.
Hay que recuperar también los slices.
Claro, porque los rangos son los que te dicen de este texto que es lo que se usa y lo que no se usa.
Ok.
Vamos.
Citical CSS.
Vamos a ver si tenemos aquí calentado.
Vamos a ver si tenemos aquí calentado.
A ver que hay como tal.
Estoy pensando.
Esto no es sin.
Es off.
Pero estoy pensando.
¿Por qué me he dado un undefined al final?
¿De qué está haciendo un console log esto?
Vale.
Lo que vamos a devolver es el critical CSS.
Eso está claro.
Y lo que tenemos que llenar ahí es el critical CSS.
Lo que estoy pensando es realmente si podemos hacer un map y ya está.
Hacemos un map.
Luego le hacemos esto un join de todo esto.
Y este debería ser el critical CSS.
Pero no sé si lo que nos devuelve realmente es un array.
Que ese es el tema.
O sea, no sé si hago esto.
Array.isArray.
No sé si me da un iterable o un array.
Esa es la duda que tengo.
Ahí está.
Si hago esto.
True.
O sea, que sí que es un array.
Vale.
Pues venga, vamos a tratarlo como un array.
Para cada entry.
¿Ves?
Ranges.
Start.
Dice que del 0 al 370 lo estamos utilizando este texto.
O sea, que lo que tenemos que hacer básicamente es primero iterar cada uno de los dos rangos.
Iteramos cada uno de estos rangos.
Que podríamos hacer un poco lo mismo, ¿no?
O sea, hacer ranges.
Entry.ranges.
Esto es el range.
Y esto también hacemos un join.
Del text este.
Tenemos el rango, el start y el end.
Y tenemos el text.
Que esto lo tenemos que sacar de aquí.
Ranges.
Text.
Entry.
Este es ranges.
Ahí tenemos el text.
Pues podríamos devolver el trozo este del texto.
Esto es con slice start end.
Madre mía.
Quedé código en un momento ahí que no...
Vamos a ver si esto funciona.
Y ahora lo arreglamos.
Un poco.
Uy, queda abierto ahí.
Vale.
Ranges is not a function.
Yo también.
Me estoy inventando ahí.
Vale.
Pues esto es el critical CSS, se supone.
Este es el critical CSS.
Para ver si esto funciona...
Me voy a ir a mi web.
Que tengo por aquí los styles.
A ver, hasta dónde llegan los styles.
Pla, pla, pla, pla, pla.
Hasta aquí, más o menos.
¿Dónde está?
Pues que hay tanta cosilla ahora aquí.
Hasta aquí.
Vale.
Estos son los estilos de mi página.
Y esto es el critical CSS.
Bueno, mi página es bastante sencilla.
O sea, es normal que el critical CSS se ha quedado en la mitad.
Porque casi todos los estilos los utilizo ya en la home.
O sea que el critical CSS, bueno, es normal que sea tanto.
Porque en realidad, no sé cuánto será esto.
Un K, dos K.
Vamos a ver.
Character count.
O bytes.
Mejor.
Este.
Este.
Este es buenísimo.
5K.
Bueno, que 5K es todo el cipeado.
No es nada.
No debe llegar a un K.
String es el...
Bueno, dos Ks.
Dos Ks.
Bueno, pero es bastante menos.
Claro.
Aquí hay que hacer cosas.
Hay que hacer cosas.
Podríamos utilizar...
Vamos a hacer otra cosa.
Porque esto lo podemos mejorar.
Lo podemos mejorar un poquito.
Un poquito.
A ver, Sergio decía que cómo sabías si eras módulo.
Si es un módulo es porque tiene que ser de MHS o en el Package JSON deberíamos tener que es de tipo módulo.
Y como no lo tengo, pues por eso.
Vale.
Hostia, es que es súper...
Está súper poco actualizada CSS Purch.
Redonares.
Otro mesecito.
Muchas gracias, Redonares.
Muchas gracias.
Seguro que hay una alternativa a CSS Purch.
Pero es que...
¿Conocéis alguna?
CSS Nano.
¿Puede ser una?
Vamos a ver CSS Nano.
¿Sabéis qué pasa?
Que vale.
Yo he sacado ya el Critical CSS.
Que lo hemos sacado en muy poca línea de código.
En un momentito.
Y...
Hostia.
El Trendy Hype.
José Ángel.
Muchas gracias por suscribirte con Prime.
Gracias, hombre.
Por tu apoyo.
Muchas, muchas gracias.
CSS Nano.
Ya, pero yo lo quiero importar.
No lo quiero...
Alternate Studio S&C.
Config Files.
O sea, CSS Nano.
Programatic.
Ah, Purge.
CSS.
No, CSS Purge.
Igual este es el que quiero yo, ¿eh?
Programatic API.
Esto me gusta.
A ver.
Purgar.
Hostia, pero yo no quiero...
Ah, vale.
Sí que se puede pasar el CSS directamente.
Vale.
Esto me gusta más.
Plugin, React, comparación.
A ver, comparación.
¿Con qué se compara?
Un CSS.
Purify.
Lo de VXL.
Buah.
Hostia.
Hostia.
O sea, hay que pasarle el contenido.
Claro, pero esto yo no quiero.
O sea, yo no necesito que me lo purgue.
En el sentido...
Yo ya lo acabo de hacer.
¿Por qué?
Lo que estamos haciendo es utilizar por detrás esta herramienta ya de Chrome, que justamente
ya me ha purgado el CSS que no usamos, ¿veis?
Me ha dado el 40%, porque este 60% es lo que no uso.
Me ha dado el 40% que sí que uso.
Entonces, yo no necesito purgarlo.
Lo que necesito es, pues, lo que hace...
No CSS Purge.
Es que lo que necesito es que se optimice.
Es optimizar el CSS por si acaso, yo qué sé.
A ver la web de CSS Purge.
O Purge, o cómo se llame.
¿Ves?
Quitar duplicados, cosas así.
Eso es lo que quiero.
Incluso podría quitar CSS, por ejemplo, el hover y cosas así.
No sé cuál...
Si hay alguno que me pueda ayudar en ese sentido.
How to remove all hover...
Bueno, que el hover estará sin usar, obviamente.
Claro, Chrome no lo habrá detectado.
Bueno, voy a probar este, aunque sea bastante antiguo.
Que sé que funciona porque yo lo he utilizado en algún proyecto.
Así que vamos a darle a ese.
Y luego ya me enfoco en lo demás.
Vale.
Venga, aquí.
Entonces es el Purge.
Aquí tenemos el CSS.
Esto es un callback.
Esto es un callback.
Un callback.
Un callback.
Un callback.
A ver si...
Un callback.
Un callback.
Un callback.
Trim.
Shorten.
Result.
Un callback.
Un callback.
Un callback.
y aquí tiene css, aquí tiene como nuevas opciones, stream, true, shorten, true
a ver si esto nos da un mejor
hombre, diferentes, pero tampoco es que se vea una gran diferencia
o sea que no sé hasta qué punto ha valido la pena
433
byte count
100 bytes
he salvado 100 bytes
bueno, algo es algo, 100 bytes, buenos son
habría que ver cuánto tarda ese proceso realmente para que
para comparar, por ahora lo vamos a dejar
vale, ya tenemos el critical, ya tenemos el coverage
pero todavía
por cierto, esto se me queda penchado aquí porque el browser sigue abierto
yo creo que antes de hacer todo esto
de hecho lo podríamos cerrar antes
aquí
no sé si hay que hacer una wait, creo que sí
vale, bueno, no tarda mucho
ay, ahora me ha acordado otra cosa
me ha acordado otra cosa
100 bytes mayor que 99, si no, rascando línea a línea, poco a poco
me ha acordado otra cosa
para mejorar el tiempo
a ver, no sé si se podría mirar cuánto tiempo tarda en ir a la página
claro, es que mi página es muy sencilla
es muy sencilla mi página
vamos a ir a la de fotocasa
por ejemplo, a la de producción
extract from liberal
aquí
aquí yo había puesto esto
voy a poner ya la de fotocasa
y vamos a ver el critical y todo que saca
si es que funciona, si no funciona
¿ves? ahora tarda más
ahora tarda más
vamos a hacer algo con esto
me gustaría
antes de ir a la página
vamos a poner console time
navigation
a ver si esto lo tenemos
ahora la primera línea
¿ves?
un segundo y medio
¿por qué?
porque un segundo y medio es demasiado
yo creo que lo que podríamos hacer
es bloquear
oye, ¿por qué me pone aquí que no utilizo CSS Purge?
si lo estoy usando debajo
Purge CSS
genial, está bien saberlo
lo que vamos a hacer es bloquear recursos
que nos necesitamos
por ejemplo, yo que sé
imágenes, cosas así
no sé si primero saltarnos recursos
estoy seguro que debe haber por ahí una lista de cosas
recursos es fácil
porque los recursos
lo que podemos hacer aquí
a ver si antes de navegar
o después
yo entiendo que antes, ¿no?
sí, antes de navegar
antes de empezar el coverage
a ver
esta es la navegación
navegación
no sé si ya he ido bien la respuesta
vale
play, write
root, block
esto
interception
interception, interception
esto
esto es lo que quiero
lo que pasa es que esta ruta
nos dice todas
la ruta
si es de este tipo
si es una imagen
vale, una imagen tiene sentido
pero debe haber bastante más
por ejemplo
resource types
mira, que ya tenemos todas
bacon
hay unas ricas de bacon
qué grande
nice to meet you
qué lujazo de sesión
gracias, hombre
tiktools
David Mayo
tengo el directo de fondo
y la voz relaja
a ver si me vais a dormir
estoy haciendo en crítica
al CSS Beto
desde cero
que necesitamos en mi empresa
para hacerlo en build time
y estoy ahora bloqueando
requests
para que vaya más rápido
entonces
vamos a hacer
una config
config.js
y vamos a añadir
rocket resources types
bacon está claro
que la queremos quitar
cspr report
también
font
también
mira
interesante
la de la fuente
bueno
la fuente
porque claro
la fuente irá más rápido
pero
vamos a dejar por ahora
imágenes también
image set
también
mainframe
top level
documents loaded
in a tab
no sé qué quiere decir
por ahora vamos a poner
media seguro
object seguro
aunque no
no vamos a tener normalmente
request sends by plugins
seguro
ping
también
script
ves script
ya tengo más dudas
porque script
por ejemplo
si vamos a una spa
y yo me cargo
el script
pues no veremos nada
steel sheet
seguro que no
subframes
pues también
porque si no
nos podría meter
critical css
en un iframe
web manifest
yo creo que tampoco es necesario
web socket
bueno web socket
sí que puede ser
hostias que hay un montón
yo creo que todo esto
lo podemos bloquear
había tardado
esto es un ajax
o sea
eso lo vamos a dejar
por si acaso
y other
yo creo también
entonces
esto van a ser
todos los que tengo
bloqueados
module
.expos
block
sources
voy a ver
el slack
de la compañía
por si alguien me
escribe
entonces cuando se acelta
regalo
debería enviarse
el evento
sí
debería enviarse
el evento
si
segment
está configurado
correctamente
la gente
me escribe
por el chat
pero también
forzar el browser
a chrome
con fotogasa
pero tampoco
le mola
hace script
de esos
y ya lo
creo que ya está
pues lo que vamos a hacer
es bloquear
esta request
de forma que
el critical CSS
debería ir un poquito
más rápido
cuando hacemos esto
esto es la intercepción
de la ruta
le decimos
cualquier ruta
pero si
la root
la request
es de este tipo
claro
aquí en realidad
lo que tenemos que hacer
es
esto
si
block
recursion
no se cuenta
de
incluye
este resource
type
vamos a poner aquí
resource type
es esto
esto
ya sabéis que a mí me gusta
hacer una cosa por línea
así que es esto
este es el resource type
de la ruta
si
bloque
resource types
incluye
el resource type
la abortamos
y si no
continuamos
vamos a ver si esto
mejora un poquito
el tiempo
venga
petao
puede ser que no me gusta
nada de esto
efectivamente
me gusta
un poquito
pero ahora está tardando un montón
hacer crítica
a ceses
porque está entrando aquí
y no estoy diciendo que continúe
ya verás
a ver si al menos entra en uno
resource type
document
bla bla
ah pues ahora sí que ha funcionado
que raro
qué raro
a ver si ahora
me da la sensación que va un pelín más rápido
200 milisegundos
bueno
algo salgo
ahora
lo que puedo hacer
es sacarme una lista de estas
que
porque qué pasa
claro
si vamos a fotocasa
yo ahora
es como un navegador
yo voy a fotocasa
y
me cago en los javascripts
y ya ves tú aquí
aquí hay de todo
analytics
optimizely
beacon
devtools
bueno que esto debe ser
un plugin
no sé si esto lo cargará
de hecho podemos ver
podemos decirles
si el resource type
es script
haz un console
log
de
el
root.request.url
creo que es
sí
punto
url
pero es un método esto
es el resource type
vamos a ver
que está cargando
porque igual
eso es lo que hace
también que tarde más
ya ves
a ver
que ha cargado ahí
ves
gutac pro
analytics
optimizely
beacon
google ad services
vale
vamos a hacer otra cosa
optimizely
optimizely
beacon
google tag manager
vamos a bloquear esas
google ad services
double click
google ad services
google tag manager
este también
puedo poner también analytics
así como
término general
a ver
esto lo que es
es como un
como se diría esto
como un
ublock
así que
que estoy creando
muy por encima
pero yo creo que algo así
aunque parece una tontería
va a dar bastante
retorno
root punto request
punto url
vale ya veo que tengo aquí
la request
esto ya la podemos
reutilizar
si bloque
incluye
roces
type
o
url
no
no
no
o si
claro
si esto
no pero si le digo
incluye
no sé
esto no lo va a hacer
porque
no lo incluye
exactamente igual
o sea tendría que hacer
vale tendría que hacer
un loop
voy a probar
pero esto no va a funcionar
no me lo va a quitar
ahora ya
bloque
resource type
se incluye
resource type
skip it
resources
que incluya la url
no pero esto
no es así
no es así
porque no me va a hacer
la comparación
internamente
eso es un array
otra vez
vale
includes
skip it
script resources
vale
lo estoy
exportando
hostia este error
que pasa
de vez en cuando
eso me lo tengo que mirar
no nos ha bloqueado
no nos ha bloqueado
porque a ver
esto
skip it
resources
esto es un
esto es un array
y no puedes decirle
que incluya la url
porque la url
es la completa
entonces lo que hay que hacer
si skip it
incluye resources
son
block it
script
si algún
block it
script
no
es que es al revés
si la url
incluye
una parte del
block it
script
ahora si
es un block
es un block resource
es un block resource
si incluye esto
o
esto
esto
lo quitamos de aquí
es block resource
ya que se me ha olvidado
esto
cuando tengo
el tipo de letra
tan grande
me parece que tengo
un cañón ahí
de código
y es block resource
vale
el block resource
incluye uno de los resource types
esto tiene sentido
script resource
esto es un array
si alguno
o si alguno
de los que tenemos
este array
la url
incluye
esto
entonces
si está aquí
por lo aborto
y si no
continúo
era un segundo
con dos
lo que tardaba
vamos a ver si ahora
va un poquito mejor
mira
vaya diferencia
800 milisegundos
o sea
hemos quitado
un montón
qué diferencia
este es el tipo
de optimización
que parece una chorrada
y luego no voy a hacer
¿cuál es tu horario de trabajo?
pues de 9 a 5
o así
más o menos
de 9 a 5
de 9 a 6
o a veces de 8 y media
a 5
no sé
un poco
voy haciendo un poco de eso
TikTok
está en la bici estática
ahí dándole
dándole caña
qué grande
¿cuántos conectados somos?
pues ahora veo
que estamos 179
bueno
181 hace un momento
179
buenos días
¿qué andas haciendo?
estaba haciendo un critical CSS
para mi trabajo
es un critical CSS
para mi trabajo
hola cufos
sí nada
en un rato
nos iremos a la
a la react summit
de hecho la tengo por aquí
la tengo en
ay mira
está hablando de internacionalización
está casi que empieza
el primer speaker
mira
acaba de empezar además
bueno mira
vamos a poner esto
tendrías que hacer uno
para hispanohablantes
ya me gustaría a mí
vosotros por pasaros
espero que la disfrutéis mucho
bueno pero se acaba de empezar
además
ojo lenguas
sabe toda lengua
muy importante el mundo
midu subele el volumen
no puedo controlar
el volumen
de la chica
bueno
voy a continuar un poquito más
va
vale
tengo lo de la respuesta
ya hemos mejorado bastante
la navegación
esto lo voy a dejar por aquí
que es interesante
hemos empezado en dos segundos
y lo hemos dejado en 800 milisegundos
no está nada
nada mal
cosas que puedo hacer aquí
si la response
no es ok
si no tengo respuesta
o la response
no es ok
no sé
aquí deberíamos cerrar
page close
browser close
deberíamos cerrar
el navegador
y la página
y ya está
de hecho aquí también deberíamos cerrar
esto
y de hecho vamos a crear una función
close page
and browser
tenemos la browser
la page
hmm
vale
voy a cerrar
closing page
lo voy a poner después mejor
para saber cuándo ocurre
no cuando empiezo
close page
and browser
no cuando empiezo
me lo he
me lo he
me lo he
me lo he
me lo he
me lo he
me lo he
me lo he
me
mmm
hmm
mmm
mmm
me
me
me
mmm
bastante rápido
que más podemos hacerle
esto si esto no es ok
si no tengo respuesta
si la respuesta no es ok
si la respuesta
status
bueno a ver se supone que lo que
este
si status
están de 200 y 299
o response punto status
es mayor
claro
ya es el ok
o sea que está perfecto
no tiene sentido hacerle más
vale
que más necesitamos
yo creo que con esto ya tendríamos
una parte
get browser and end page
vale
vamos a modelar esto un poquito mejor
que lo había dejado aquí en el index
config
vamos a moverlo aquí
vamos a poner que el main
está en source
barra index
vamos a config
el index
y le vamos a llamar esto
extract critical css.js
vamos a mover todo el índice ahí
y el índice lo único que hace es importarlo
vamos a llamar
vamos a llamar from your air
vale
entonces
entonces
si yo ahora esto me voy a mi página
esta que tenía aquí de fotocasa
extract critical css
extractor
barra
source
ahora esto debería ser extractor
from your air
from your air
tenemos aquí fotocasa
voy a probar ya con localhost
localhost
creo que lo tengo ya abierto en localhost
vamos a mirar si esto nos devuelve el critical css
de localhost
vale
claro va un poquito más rápido
normal
y esto ya es localhost
que es justamente lo que queremos
porque
ah no
espérate
pues que ha pasado
un trozo después
what
a ver
vale
vale
si normal que vaya un poco más rápido
porque claro
si lo tengo localhost
continuous integration
nos interesa que vaya localhost
el tema
es que es un poco más complejo que esto
esto es solo el principio
esto es solo el principio
porque
a ver
esto
que pasa
que lo que queremos
en realidad no es sacar de una url
sino lo que vamos a tener
es una lista de urls
vamos a tener un montón de urls
vamos a tener aquí
esto es el principio
ahora puedo sacar
el critical css
de una url
hasta aquí genial
pero ahora lo que quiero es
al siguiente nivel
lo que quiero es tener una lista de urls
que lo pueda hacer
carlos gram dice que se pasa por aquí rápido
para saludarme
que te siga yendo bien
gracias hombre
hola Dani
¿cómo estás?
es el css que necesita la página para cargar solo
sí
crítica
es la css crítico
crítico
para que vaya página
vamos volando
necesito
claro
vamos a necesitar tener
un montón de rutas
un montón de rutas
y en cada ruta
vamos a tener
por ejemplo
en el path
no en la ruta
no en la url
sino en el path
porque vamos a tener
vamos a utilizar
por ejemplo
de la ruta
roots
bueno esto es
bueno esto es
fotocasa
no se lo digas a nadie
pero es
tenemos aquí esta ruta
que es un path
que es dinámico
que es el lang
que eso puede ser español
catalán
lo que sea
por lo tanto
tenemos que crear aquí
un objeto
que de alguna forma
podamos recorrer fácilmente
y ir generando
crítica al css
de cada uno
de esos paths
así que
aquí tendríamos
el lang
lo voy a hacer así
como un diccionario
muchas gracias
por suscribirte
al guio 79
gracias por suscribirte
con prime
muchísimas gracias
gracias por tu apoyo
espero que te esté gustando
el live coding
mientras trabajo
gracias por acompañarme
a todos
mientras trabajo
mientras me gano el sueldo
me gano el pan
además es que
me estaba costando
concentrarme
con el crítica al css
porque
y he pensado
yo creo que si streameo
yo creo que si streameo
lo hago más
me enfoco más
y sí
creo que está funcionando
creo que está funcionando
vale
entonces
tenemos las rutas
así que
esto que hemos hecho
por ahora
ha funcionado
pero ahora necesitamos
que nos saque
el crítica al css
para toda la aplicación
para toda nuestra aplicación
entonces ya no
será tanto
que nos devuelva
este crítica al css
sino que vamos a querer
hacer algo así como
extract
critical css
for
for app
podemos llamar
for app
para una aplicación
que le vamos a pasar
todas las rutas
y una configuración
la configuración
puede ser útil
por si queremos
configurar algo
y esto
nos va a crear archivos
nos va a crear cosas
pero bueno
eso ya lo veremos
por ahora
por ejemplo
lang
pues esto
a que url
tiene que ir
tendría que ir
a barra
es
para que puede ser
la configuración
pues justamente
para el hostname
podemos hacer
que el hostname
le digamos
donde tiene que ir
pues http
barra localhost
de hecho
esto podría ser
process.em
.criticalcss
host
y así se puede configurar
por ahora
voy a dejar así
porque me interesa
luego ya lo
complicaremos
si hace falta
siempre me equivoco
con esto
se me olvida
que tengo que ejecutarla
y este
extract
critical css
for app
es el que sacaré
de aquí
que este es el que
me falta por hacer
claro
entonces tengo
la configuración
aquí tendríamos
para este
tenéis que ir aquí
vale
le pasamos
extract critical css
for app
esto obviamente
todavía no funciona
de hecho si le doy
esto me va a petar
me encantaría
que funcionase
y me dejase fatal
pero no
es imposible
a ver
donde deja ahora
la
aquí
venga
vamos a escribir este
vamos a traer
crítica al css
para la app
enterado
for app
jss
claro
como puedo hacer esto
es que hay que hacer
un montón de cosas
hay que hacer un montón
de cosas
que voy pensando
voy pensando
mientras escribo
voy pensando
y me digo
ostras
claro
tengo que hacer esto
tengo que hacer lo otro
from url
vale
vamos a utilizar el mismo
lo que hemos
lo que hemos creado
hace un momento
el from url
este lo vamos a tener
que utilizar seguro
vamos
cosas que vamos a tener
que hacer
generar
un archivo
con el critical css
o sea que el fs
seguro que lo vamos a necesitar
si necesitamos el fs
seguro que vamos a necesitar
el past
también
esto es como van
casi siempre de la mano
en note
y yo creo que ya está
async function
extract
critical css
for app
el config
y el roots
que es lo que hemos visto
antes
del config
sacamos el
hostname
le llamo hostname
creo que sí
y de cada ruta
a ver cómo hacemos esto
cada ruta
vamos a tener
vamos a tener
vale
path key
y path
info
off
path entries
estos son las rutas
o sea de las rutas
bueno
route entries
le podemos llamar
de la route entry
vamos a hacer esto
y es aquí
esta guay
te está oyendo
ah vale
se está quejando esto
vale
url
sería
el hostname
del paz info
sacamos
que el mismo
esta variable
es una cosa
url
es que claro
no se llama url
a ver
a ver
un momento
claro es que yo he puesto aquí url
esto no parece
en url
path
to extract
css
o path to visit
o static path
como le llamamos a esto
static path
path to extract css
mira por ahora voy a hacer
normalmente cuando no sé
qué variable
qué nombre variable
ponerle
pongo una
un nombre súper descriptivo
que sé que a veces me paso
vale
pero digo
mira por ahora
para mientras no lo tengo claro
voy a ser súper descriptivo
porque luego más adelante
pues nada
ya le cambiaré el nombre
no pasa nada
path to extract critical css
ya está
o sea
ya luego me da tiempo
a cambiárselo
esta es la url
bueno url
y ahora sí
tendríamos el await
extract critical css
from url
le pasamos la url
y en principio
hasta aquí estaría
critical css
vale
vamos a hacer un
console lock
del critical css
vale
se queja del path key
porque aquí es donde
estará la magia potagia
que vamos a tener que hacer
ahora
que va a ser más
más graciosa
por ahora vamos a ver
si esto funciona
vale
no encuentro el módulo
porque
aquí
esto que he hecho
extract
for
for
app
ah
porque no
estoy haciendo un módulo export
del extract
for
app
vale
vale vale
esto pinta bien
esto pinta bien
si
totalmente
totalmente importante
vale
entonces yo tenía ya esto
que era lo del
vale
yo voy a explicar un poco
lo que quiero hacer
¿por qué?
porque aunque esto me saca
el critical css
de la aplicación
me
ves me lo va poniendo
aquí en consola
pero yo no lo quiero
en consola
yo donde lo quiero
realmente
donde me gustaría
tenerlo
es en archivo css
para que sea
el servidor de note
el que detecta
en qué path
estás
y entonces
extraiga
este css
de ahí
¿y cómo vamos a hacer eso?
pues lo vamos a hacer aquí
vamos a ver
qué vamos a hacer
tenemos el hostname
tenemos el router entries
aquí lo que vamos a crear
es
vamos a crear un archivo manifest
donde va a tener un key value
donde la key
sea el path
este path key
o sea
haremos un manifest
y aquí pondremos
el path key
y aquí pues tendremos
que poner
el nombre
el file name
del css
esto sea css
o critical
a ver
critical css
file name
file
file
vale
esto también
¿por qué?
por un montón de motivos
porque necesito
luego en el servidor
cuando venga la request
de un usuario
decir vale
tengo este path
lo tengo en este objeto
voy a ver de dónde tengo que extraer el css
lo leo
y lo devuelvo
entonces
creo que cuando lo termine
se verá un poquito más claro
lo que también vamos a necesitar
es hacer un hash
del archivo
vamos a hacer un hash
del archivo del css
de forma que
tengo el css
tengo el path key
claro es que el path key
además no lo puedo utilizar
para guardar el archivo
porque el path key
como es así
barra
dos puntos lang
no puedo hacer punto s
porque esto no es un archivo válido
que empieza por barra
y ese es el path
entonces
lo que voy a hacer es hashear el path
vamos a utilizar aquí un hash
crypto punto
crypto
hash
create
vamos a buscarlo
yo creo que es
crypto punto
hash
create hash
ahí está
entonces
entonces le tiene que pasar
el algoritmo
que le podemos decir
md5
porque no es importante
tanto el algoritmo
hacemos un update
para pasarle cuál es el string
que queremos hashear
que en este caso
sería el path key
y ahora
tendríamos que poner
write
no
no
no
no
no
write
no es
es
digest
punto
digest
y aquí le decimos
hexagonal
o sea
hexagonal
hexadecimal
o base 64
vamos a decir
ex
y así ya tengo
el nombre del archivo
con un hash
esto
critical
css
file
va a ser
el hash
punto css
y por un lado
aquí en el manifest
le decimos que este path key
va a estar en este css file
esto por un lado
pero por otro lado
el critical css
lo tenemos que guardar
tenemos que hacer un write
de este archivo
write file
donde primero tenemos el path
que esto es
vale
tendríamos que hacer
el path
punto
resolve
del current working directory
y ya está
y el critical css file
vamos a
vamos a escribir esto
esto sería
el
css
critical
css
file
path
vamos a mover esto por aquí
entonces en este path
voy a aumentar un poco la musiquidad
en este path
lo que vamos a hacer ahora
a ver
cuál era la siguiente
la data
la data
claro
pues vamos a escribir la data
es que es lo que necesitamos
escribir la data
critical css
voy a poner css file
file name
y css
path
que me parece que queda un poquito más corto
no
no
esto es css
path
ahí está
y
y el tercero es el content
el encoding
pero bueno
no le vamos a poner que es un vtf8
pues total creo que es por defecto ese
vamos a hacer una wait
para que escriba esto
esto
está en el for await
vale
esto está aquí
pero el manifest
este
que estábamos escribiendo aquí
que lo estábamos
también mutando
este por aquí
esto
también hay que escribirlo
el write file
este
hay que escribirlo en el
path resolve
current working directory
hostia voy a ponerlo dentro de un directorio
porque se me va a ser un percal esto
voy a ponerlo por ahora en crítica css
luego ya buscaré a ver que hago
manifest path
path.resolve
current working directory
critical css
esto me va a petar
me va a petar porque no existe el directorio
pero bueno
luego lo arreglo
manifest path
y aquí sería json.stringify
del manifest
y eso hace una wait
y esto ya estaría
on the tip of this
ay
es que esto es de
barra promises
vale
porque si no no puedo utilizar
el await
en este
hola
mi number es
¿cómo estás?
y hola
Marc López
y gracias
cufos por
chivarme
oh
the real
clouder
muchas gracias
por suscribirte con
prime
muchas muchas muchas gracias
y alguio79
que no me acuerdo
si te lo he dicho antes
pero muchas gracias
a
a ambos
gracias por
suscribiros
muchas gracias
muchas muchas
muchas gracias
que gusto
un canal de programación español
pues si
spanish
totalmente
spanish
totalmente
puedes decirnos
que theme
tienes en vs code
si
además
creo que es algo
que no me
no me pregunta nadie
así que
te lo voy a decir
es
one dark pro
es bastante típico
es one dark pro
y era broma
así que me lo preguntan
pero
es muy mítico
creo que era el
que tenía por defecto
atom
pero me gusta
me gusta un montón
me gusta un montón
o sea
sé que no es el más
trendy
o el más
yo que sé
que está más de moda
pero me gusta mucho
vale
eeeh
ilegal operation
a directory
en un directorio
claro
porque es que esto
este
esto es manifest.json
vale
en manifest path
esto tiene que ser
de manifest
ah es que sí que existe
el directorio
claro es que antes
estaba haciendo pruebas
fíjate
a ver que me ha creado
ojo que esto parece
que funciona
ojo cuidado
ojo cuidado
ojo que parece
que ha funcionado
si encuentro
donde tengo
mi directo
aquí
necesito más monitores
necesito más monitores
vale
esto ya no lo necesitamos
vamos a ver aquí
el critical css
critical json
ah es que lo he llamado
antes critical json
bueno pues en lugar
de manifest
le vamos a llamar
critical json
critical json
vale
lo ejecuto
y ahora
vamos a ver
web server
tenemos aquí
el critical css
aquí ya tenemos
el critical css
bastante largo
también
es que otra cosa
que debería hacer
que esto ya puede ser
bastante más complejo
claro
el critical css
que hace
es de toda la página
en realidad
o sea ni siquiera
es solo del viewport
esto es otra cosa
que deberíamos
trabajar
pero bueno
mira
ves aquí ya tengo
el path
del critical css
y el archivo
donde todo critical css
de este path
así que aquí en este archivo
tendría ese
para que veamos esto
cómo funciona correctamente
que critical css
vale
esto ya lo tenemos
bien
lo que podría hacer
por ejemplo
sería
a ver
otra ruta
otra ruta
que tenga que extraerle
el critical css
catálogo
productos
promoters
new constructions
esta ruta
por ejemplo
claro
veis que las rutas
son
claro
como son muy dinámicas
pues son un poco complejas
entonces
le podemos decir
el path
para extraer
el critical css
de esto
pues puede ser
por ejemplo
vamos a fotocasa
vamos a buscar aquí
esta misma
yo creo que
esta
podría ser una buena
porque
opt type
yo creo que esta es
o es la siguiente
zona
no
creo que es esta
o al final
es que son muy parecidas
entonces
no sé
si son las dos
yo creo que es esta
porque tiene la zona
vale
entonces
path to endro
pues ahí lo tienes
ahora le quitamos esta parte
ay lo que pasa es que esto a lo mejor no funciona
pero esto ya no es culpa de la aplicación
es que no estoy conectado a la vpn
porque claro
streamear y está en la vpn
me reventaría el
ya
me reventaría el stream demasiado
puedo mirar una que sea otra
por ejemplo
catálogo productos
venga
catálogo productos
si vamos aquí
y esto
hostia
eso hay que mirarlo
también
porque esto no
esto supongo que será
barra lang
y luego barra
no sé qué
no sé cuánto
ya lo miraré
por ahora
vale
esto
por ejemplo
para extraer
el critical css
de esta
vamos a ver si lo extrae
o si no lo extrae
de otra url
así tendremos unas cuantas
y veremos
si funciona correctamente
oye
que le pasa a esto
que
donde he dejado
aquí
que me se me ha olvidado
los dos puntos
paz tu crítica
css
paz tu crítica
css
perfecto
vamos a darle
ves
la tercera
ey
mira
ahí está fallando algo
paz tu crítica
la tercera
no funciona
porque está petando
el servidor
porque no está conectada
la vpn
está haciendo una llamada
a la api
y lo que sea
bueno lo importante
es que las otras
sí que
sí que la ha hecho
me ha tenido que hacer
crítica al css
al menos de dos
pero claro
no me ha actualizado
crítica al css
a ver voy a quitar esta
voy a quitar esta
de estas dos
sí que funciona
ves
de catálogo de productos
me ha hecho este archivo
y hombre
tiene
tiene pinta
y tiene pinta
de ser diferentes
este es un poquito
más largo
hay crítica al css
esta es un pelín
más largo
así que
de hecho
voy a ver
cómo es esa página
fotocas
catálogo
productos
es esta página
a ver
vamos a mejorar
un poco
el login
de nuestra
función
crítica al for
app
cuando hacemos
este console log
y antes de hacer
el
este
bueno
lo podríamos hacer
dentro
igual mejor
hostia
faltaría hacer esto
también
cosas
cosas
para hacer
vamos a añadir
crítica al css
extracting
css
for
us
al menos nos ayudará un poco más a ver lo que está haciendo url y esta url vale vamos a ver
si esta url funciona porque mejor ni funciona ves no funciona es que es catálogo productos
claro por eso se parece se parecía tanto lo haga es que me estaba fijando y hostia el crítico al
css se parece mucho y es que catálogo productos si es que lo pone aquí productos
de hecho yo creo que esto está sin kawaii por ahora se puede poner aquí directamente ni siquiera hace falta
vale ahora sí ahora sí pero porque hace esto en el cachet entry y aquí no le pone una barra
esto ahí eso me tiene eso es un tema del servidor pero me tiene un poco aquí sí que parece que
funciona bien de hecho ahora sí que es ahora sí que es totalmente diferente ahora sí nos faltaría la
parte del servidor pero bueno eso igual lo hacemos en otro instante