Ya sea que uses una biblioteca de IU o diseñes manualmente tus estilos, enviar una gran cantidad de retrasos en la representación de CSS, ya que el navegador debe descargar y analizar los archivos CSS antes de poder mostrar la página.
Esta galería de helados responsiva se creó con arranque. Las bibliotecas de la IU, como Bootstrap, aceleran el desarrollo, pero a menudo eso se logra a costa de un CSS innecesario y sobrecargado, lo que puede ralentizar los tiempos de carga. El arranque 4 es de 187 KB, mientras que la IU semántica, otra biblioteca de IU, tiene 730 KB sin comprimir. Incluso cuando se reduce y se comprime en formato Gzip, Bootstrap sigue pesando alrededor de 20 KB, muy por encima del umbral de 14 KB para el primer recorrido.
Critical es una herramienta que extrae, reduce y alinea el CSS de la mitad superior de la página. 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ó el CSS de otras partes de la página. En este codelab, aprenderás a usar el módulo 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úsculas + J` (o `Command + Option + J` en Mac) para abrir Herramientas para desarrolladores.
- Haz clic en la pestaña Lighthouse.
- Haz clic en Dispositivos móviles.
- Selecciona la casilla de verificación Rendimiento.
- Desmarca el resto de las casillas de verificación en la sección Auditorías.
- Haz clic en Red 3G rápida simulada, CPU 4 veces más lenta.
- Selecciona la casilla de verificación Liberar espacio de almacenamiento. Con esta opción seleccionada, Lighthouse no cargará recursos de la caché, lo que simula la forma en que los visitantes nuevos experimentarían la página.
- Haz clic en Run Audits.
Cuando ejecutes 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 renderizar el contenido. Esta es la razón por la que el primer procesamiento de imagen con contenido (FCP) es alto y por la que la puntuación general de rendimiento no es excelente.
Lighthouse está aquí para ayudarte a solucionar problemas de rendimiento, así que busca soluciones en la sección Oportunidades. Eliminar los recursos que bloquean el procesamiento se considera una oportunidad, y ahí es donde se destaca la sección crítica.
Optimizar
- Haz clic en Remix para editar para que el proyecto se pueda editar.
Para acelerar el proceso, la función crítica ya está instalada y se incluye un archivo de configuración vacío en el codelab.
En el archivo de configuración critical.js, agrega una referencia a Critical 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 manera fácil de medir el éxito de la operación en la consola.
Configura Critical
La siguiente tabla contiene algunas opciones de Critical útiles. Puedes consultar todas las opciones disponibles en GitHub.
| Opción | Tipo | Explicación |
|---|---|---|
base |
string | Es el directorio base de tus archivos. |
src |
string | Es el archivo fuente HTML. |
dest |
string | Es el destino del archivo de salida. Si el estilo CSS está intercalado, 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 |
array | Contiene objetos con propiedades de ancho y alto. Estos objetos representan los viewports a los que deseas segmentar con CSS de mitad superior de la página. Si tienes consultas de medios en tu CSS, esto te permite generar CSS críticas que abarcan varios tamaños de viewport. |
inline |
boolean | Cuando se establece en verdadero, el CSS crítico generado se intercala en el archivo fuente HTML. |
minify |
boolean | Cuando se establece en verdadero, Crítico reduce el CSS crítico generado. Se puede omitir cuando se extrae CSS crítico para varias resoluciones porque Crítico lo reduce automáticamente para evitar la inclusión de reglas duplicadas. |
A continuación, se muestra un ejemplo de configuración a fin de extraer CSS crítica para varias resoluciones. Agrégalo a critical.js o prueba 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 está establecida como verdadera. La opción Crítica primero lee el archivo fuente HTML, extrae la CSS crítica y, luego, reemplaza index.html con CSS crítica intercalada 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 Crítico reduce automáticamente el CSS extraído cuando se especifican varios tamaños de viewport.
Ejecutar 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 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 se intercala entre etiquetas <style>, seguidas de una secuencia de comandos que carga el resto del CSS de forma asíncrona.
Volver a medir
Sigue los pasos desde el comienzo del codelab para volver a ejecutar la auditoría de rendimiento de Lighthouse. Los resultados que obtengas se verán de la siguiente manera:
