Skip to content
About Blog Aprender Explorar patronas Case studies
En esta página
  • Medir
  • Minificación
  • Compresión de datos
  • Compresión dinámica
  • Compresión estática

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
Houssein Djirdeh
TwitterGitHubGlitchHomepage
En esta página
  • Medir
  • Minificación
  • Compresión de datos
  • Compresión dinámica
  • Compresión estática

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.

Auditoría de CSS de Lighthouse MinifyAuditoría Lighthouse Minify JS

También audita los activos sin comprimir.

Lighthouse: Habilitar compresión de texto

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.

La compresión de archivos puede mejorar significativamente el rendimiento de una página web, pero rara vez es necesario que la haga usted mismo. Muchas plataformas de alojamiento, CDN y servidores proxy inversos codifican activos con compresión de forma predeterminada o le permiten configurarlos fácilmente. Lea la documentación de la herramienta que está utilizando para ver si la compresión ya es soportada antes de intentar implementar su propia solución.

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.

Pruebelo

Use express.js para comprimir activos con gzip y Brotli.

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'));
Rendimiento
Última actualización: Nov 5, 2018 — Mejorar el artículo
Codelabs

See it in action

Learn more and put this guide into action.

  • Minify and compress network payloads with gzip
  • Minify and compress network payloads with brotli
Return to all articles
Compartir
suscribir

Contribute

  • Presentar un error
  • Ver fuente

Contenido relevante

  • developer.chrome.com
  • Chrome Actualizaciones
  • Case studies
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos los productos
  • Condiciones y privacidad
  • Principios de la Comunidad

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.