Minimice y comprima las cargas útiles de la red

Nov 5, 2018

Available in: English, Português, 中文 y 한국어

Appears in: Tiempos de carga rápidos

Houssein Djirdeh

TwitterGitHubGlitchHomepage

Hay dos técnicas útiles que se pueden utilizar para mejorar el rendimiento de su página web:

• Minificación
• Compresión de datos

La incorporación de estas dos técnicas reduce el tamaño de la carga útil y, a su vez, mejora los tiempos de carga de la página.

Medir #

Lighthouse muestra una auditoría fallida si detecta algún recurso CSS o JS en su página que se pueda minificar.

También audita los activos sin comprimir.

Minificación #

La minificación es el proceso de eliminar los espacios en blanco y cualquier código que no sea necesario para crear un archivo de código más pequeño pero perfectamente válido. Terser es una herramienta popular de compresión de JavaScript y el webpack v4 incluye un complemento para esta biblioteca de forma predeterminada para crear archivos de compilación minificados.

• Si está utilizando webpack v4 o superior, debería estar listo para comenzar sin hacer ningún trabajo adicional. 👍
• Si está utilizando una versión anterior de webpack, instale e incluya el TerserWebpackPlugin en los ajustes de configuración de su webpack. Siga la documentación para aprender cómo.
• Si no está utilizando un paquete de módulos, use Terser como herramienta CLI o inclúyalo directamente como una dependencia de su aplicación. La documentación del proyecto proporciona instrucciones.

Compresión de datos #

La compresión es el proceso de modificar datos mediante un algoritmo de compresión.Gzip es el formato de compresión más utilizado para las interacciones entre el servidor y el cliente. Brotli es un algoritmo de compresión más nuevo que puede proporcionar resultados de compresión incluso mejores que Gzip.

Hay dos formas diferentes de comprimir archivos enviados a un navegador:

• Dinamicamente
• Estáticamente

Ambos enfoques tienen sus propias ventajas y desventajas, que se tratan en la siguiente sección. Utilice el que funcione mejor para su aplicación.

Compresión dinámica #

Este proceso implica comprimir los activos sobre la marcha a medida que los solicita el navegador. Esto puede ser más simple que comprimir archivos manualmente o con un proceso de compilación, pero puede causar retrasos si se utilizan niveles de compresión altos.

Express es un marco web popular para Node y proporciona una biblioteca middleware de compresión. Úselo para comprimir cualquier activo a medida que se solicite. Aquí hay un ejemplo de un archivo de servidor completo que lo usa correctamente:

const express = require('express');
const compression = require('compression');

const app = express();

app.use(compression());

app.use(express.static('public'));

const listener = app.listen(process.env.PORT, function() {
	console.log('Your app is listening on port ' + listener.address().port);
});

Esto comprime sus activos usando gzip. Si su servidor web lo admite, considere usar un módulo separado como shrink-ray para comprimir a través de Brotli para obtener mejores relaciones de compresión.

Compresión estática #

La compresión estática implica comprimir y guardar activos de forma anticipada. Esto puede hacer que el proceso de compilación demore más, especialmente si se utilizan niveles de compresión altos, pero garantiza que no se produzcan retrasos cuando el navegador recupera el recurso comprimido.

Si su servidor web es compatible con Brotli, use un complemento como BrotliWebpackPlugin con webpack para comprimir sus activos como parte de su paso de compilación. De lo contrario, use CompressionPlugin para comprimir sus activos con gzip. Se puede incluir como cualquier otro complemento en el archivo de configuración del webpack:

module.exports = {
	//...
	plugins: [
		//...
		new CompressionPlugin()
	]
}

Una vez que los archivos comprimidos sean parte de la carpeta de compilación, cree una ruta en su servidor para manejar todos los endpoints JS para servir los archivos comprimidos. A continuación, se muestra un ejemplo de cómo se puede hacer esto con Node y Express para contenido comprimido con gzip.

const express = require('express');
const app = express();

<strong>app.get('*.js', (req, res, next) => {
	req.url = req.url + '.gz';
	res.set('Content-Encoding', 'gzip');
	next();
});</strong>

app.use(express.static('public'));