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 IU como Bootstrap aceleran el desarrollo, pero a menudo se generan a expensas de CSS innecesarias y sobrecargadas, lo que puede ralentizar tus 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 gzip, el bootstrap aún pesa alrededor de 20 KB, muy por encima del umbral de 14 KB para la primera ida y vuelta.
Critical es una herramienta que extrae, reduce y alinea el código CSS de la mitad superior de la página. Esto permite que el contenido de la mitad superior de la página se procese lo antes posible, incluso si todavía no se cargó CSS para 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 Simulación rápida de 3G, 4x Slowdown de CPU.
- 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 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 por un tiempo antes de, finalmente, renderizar el contenido. Esta es la razón por la que el First Contentful Paint (FCP) es alto y la puntuación de rendimiento general no es buena.
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 Crítico 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.
Configurar crítica
La tabla a continuación contiene algunas opciones de elementos críticos que resultan útiles. Puedes consultar todas las opciones disponibles en GitHub.
| Opción | Tipo | Explicación |
|---|---|---|
base |
string | El directorio base para tus archivos. |
src |
string | Archivo fuente HTML. |
dest |
string | El destino del archivo de salida. Si el 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 las viewports que quieres orientar con CSS de la 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 como 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 archivo de destino porque la opción inline está configurada 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.
Ejecución crítica
Agrega elementos críticos a tus secuencias de comandos en package.json:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- Haz clic en Terminal. Nota: Si no ves el botón de la terminal, es posible que debas usar la opción de 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 está intercalado entre etiquetas <style>, seguido 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 obtendrás tendrán un aspecto similar al siguiente:
