Ya sea que uses una biblioteca de IU o tus estilos manualmente, enviar una cantidad significativa de retrasos en la renderización de CSS, ya que el navegador debe descargar y analizar archivos CSS para poder mostrar la página.
Esta galería de helados responsiva está construida con Bootstrap. Las bibliotecas de IU, como Bootstrap, aceleran el desarrollo, pero esto suele suceder a expensas del uso innecesario y amplio de CSS, que pueden ralentizar los tiempos de carga. Bootstrap 4 tiene un tamaño de 187 KB, mientras que la IU semántica, otra biblioteca de IU, es un impresionante archivo de 730 KB sin comprimir. Incluso cuando se reduce y se comprime con gzip, Bootstrap sigue pesando alrededor de 20 KB, muy por encima del umbral de 14 KB para el primer recorrido.
La herramienta Critical, que se encuentra en la mitad superior de la página es una herramienta que extrae, recorta y también intercala en la mitad superior de la CSS. Esto permite que el contenido de la mitad superior de la página se renderice lo antes posible, incluso si aún no se cargó CSS para otras partes de la página. En este codelab, aprenderás a usar el módulo de npm de Critical.
Medir
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
.
Para ejecutar una auditoría de Lighthouse en este sitio, haz lo siguiente:
- Presiona "Control + Mayús + J" (o bien "Comando + Opción + J" en Mac) para abrir Herramientas para desarrolladores.
- Haz clic en la pestaña Lighthouse.
- Haz clic en Dispositivo móvil.
- Selecciona la casilla de verificación Rendimiento.
- Desmarca el resto de las casillas de verificación de la sección Auditorías.
- Haz clic en Simulación rápida de 3G, 4x CPU Slowdown.
- Selecciona la casilla de verificación Liberar espacio de almacenamiento. Si se selecciona esta opción, Lighthouse no cargará recursos de la caché, lo cual simula la forma en que los visitantes nuevos experimentarían la página.
- Haz clic en Ejecutar auditorías.
Cuando ejecutas una auditoría en tu máquina, los resultados exactos pueden variar, pero en la vista de tira de película, notarás que la app tiene una pantalla en blanco durante bastante tiempo antes de que se renderice el contenido. Esta es la razón por la cual el First Contentful Paint (FCP) es alto y la razón por la que la puntuación de rendimiento general no es buena.
Lighthouse está aquí para ayudarte a solucionar problemas de rendimiento. Por lo tanto, busca soluciones en la sección Oportunidades. La eliminación de los recursos que bloquean el procesamiento se presenta como una oportunidad y es ahí donde se destacan los aspectos críticos.
Optimiza
- Haz clic en Remix to Edit para que el proyecto sea editable.
Para agilizar el proceso, Critical ya está instalado y el codelab incluye un archivo de configuración vacío.
En el archivo de configuración critical.js, agrega una referencia a Crítica y, luego, invoca la función critical.generate(). Esta función acepta un objeto que contiene la configuración.
const critical = require('critical');
critical.generate({
// configuration
},(err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
El manejo de errores no es obligatorio, pero es una forma fácil de medir el éxito de la operación en la consola.
Configurar las claves
La siguiente tabla contiene algunas opciones útiles fundamentales. Puedes consultar todas las opciones disponibles en GitHub.
| Opción | Tipo | Explicación |
|---|---|---|
base |
cadena | El directorio base para tus archivos. |
src |
cadena | Archivo fuente HTML. |
dest |
cadena | Es el destino del archivo de salida. Si CSS está insertado, el archivo de salida es HTML. De lo contrario, el resultado es un archivo CSS. |
width, height |
números | Ancho y altura de la vista del puerto en píxeles |
dimensions |
arreglo | Contiene objetos con propiedades de ancho y alto. Estos objetos representan las ventanas de visualización a las que quieres orientar tus anuncios con CSS en la mitad superior de la página. Si tienes consultas de medios en tu CSS, esto te permitirá generar un CSS crítico que abarque varios tamaños de viewports. |
inline |
boolean | Cuando se configura como true, el CSS crítico generado se intercala en el archivo fuente HTML. |
minify |
boolean | Cuando se configura como true, Critical reduce el CSS crítico que se genera. Se puede omitir cuando se extrae código CSS fundamental para varias resoluciones, ya que Critical lo reduce automáticamente para evitar la inclusión de reglas duplicadas. |
A continuación, se muestra un ejemplo de configuración para extraer CSS críticos para varias resoluciones. Agrégala a critical.js o juega y modifica las opciones.
critical.generate({
base: 'public/',
src: './index.html',
dest: './index.html',
inline: true,
dimensions: [
{
height: 500,
width: 300,
},
{
height: 720,
width: 1280,
},
]
}, (err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
En este ejemplo, index.html es el archivo de origen y el de destino porque la opción inline se establece como verdadera. El elemento crítico primero lee el archivo de código fuente HTML, extrae el código CSS crítico y, luego, reemplaza index.html por el CSS crítico intercalado en <head>.
El array dimensions tiene dos tamaños de viewport especificados: 300 x 500 para pantallas extrapequeñas y 1280 x 720 para pantallas de laptops estándar.
Se omite la opción minify porque la función crítica reduce automáticamente el CSS extraído cuando se especifican varios tamaños de viewport.
Ejecución crítica
Agrega Critical a tus secuencias de comandos en package.json:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- Haz clic en Terminal. (Nota: Si no aparece el botón Terminal, es posible que debas usar la opción Pantalla completa).
Para generar un CSS crítico, ejecuta el siguiente comando en la consola:
npm run critical
refresh
Ahora, en la etiqueta <head> de index.html, el CSS crítico generado está entre las etiquetas <style>, seguido de una secuencia de comandos que carga el resto del CSS de forma asíncrona.
Volver a medir
Sigue los pasos que se indican al comienzo del codelab para volver a ejecutar la auditoría de rendimiento de Lighthouse. Los resultados que obtendrás serán similares a los siguientes:
