Optimiza la codificación y el tamaño de transferencia de los recursos de texto

Ilya Grigorik

Jeremy Wagner

Además de eliminar las descargas de recursos innecesarias, lo mejor que puede hacer para para mejorar la velocidad de carga de la página es minimizar el tamaño de descarga total mediante la optimización y comprimiendo los recursos restantes.

Introducción a la compresión de datos

Una vez que hayas configurado tu sitio web para evitar la descarga de recursos no utilizados, El siguiente paso es comprimir los recursos aptos restantes que tenga el navegador para descargarlo. Según el tipo de recurso (texto, imágenes, fuentes, etc.) hay muchas técnicas diferentes para elegir: herramientas genéricas que se pueden habilitado en el servidor web, optimizaciones de procesamiento previo para contenido específico de aplicaciones y optimizaciones específicas de recursos que requieren la entrada desarrollador.

A fin de obtener el mejor rendimiento posible, se requiere una combinación de todo lo siguiente: técnicas:

• La compresión es el proceso de codificar información con menos bits.
• La eliminación de datos innecesarios siempre proporciona los mejores resultados.
• Existe una gran variedad de técnicas y algoritmos de compresión.
• Necesitarás diferentes técnicas para lograr la mejor compresión.

El proceso de reducción del tamaño de los datos se denomina compresión de datos. Muchas personas tienen contribuyó con algoritmos, técnicas y optimizaciones para mejorar la compresión la velocidad de compresión y la memoria que requieren varios con algoritmos criptográficos eficaces.

El análisis completo de la compresión de datos está más allá del alcance de esta guía. Sin embargo, es importante comprender, en términos generales, cómo funciona la compresión las técnicas que puedes utilizar para reducir el tamaño de diversos recursos que tus páginas que necesitan.

Para ilustrar los principios centrales de estas técnicas, considera el proceso de optimizar un formato simple de mensaje de texto que se inventó para este ejemplo:

# Below is a secret message, which consists of a set of headers in
# key-value format followed by a newline and the encrypted message.
format: secret-cipher
date: 08/25/16
AAAZZBBBBEEEMMM EEETTTAAA

1. Los mensajes pueden contener anotaciones arbitrarias, a veces denominadas comentarios, que se indican con el signo "#" . Las anotaciones no afectan el significado del mensaje o sus comportamientos.
2. Los mensajes pueden contener encabezados, que son pares clave-valor (separados por ":" en el ejemplo anterior) que aparecen al comienzo del mensaje.
3. Los mensajes pueden presentar cargas útiles de texto.

¿Qué se puede hacer para reducir el tamaño del mensaje anterior, que comienza en ¿200 caracteres?

1. El comentario es interesante, pero no afecta el significado del mensaje. Elimínalo cuando transmites el mensaje.
2. Existen buenas técnicas para codificar los encabezados de manera eficaz. Para ejemplo, si sabes que todos los mensajes tienen "formato" y "fecha", podrías los conviertes en IDs de números enteros cortos y solo los envías. Sin embargo, eso podría ser cierto, así que es mejor que lo dejemos a un lado por el momento.
3. La carga útil es solo de texto. Si bien no sabemos cuál es su contenido, están (aparentemente, usa un "secret-cipher"), solo viendo el texto muestra que hay mucha redundancia. Quizás, en lugar de enviar letras repetidas, puedes contar el número de letras repetidas y codificarlos de forma más eficiente. Por ejemplo, "AAA" se convierte en "3A", lo que representa una secuencia de tres A.

La combinación de estas técnicas produce el siguiente resultado:

format: secret-cipher
date: 08/25/16
3A2Z4B3E3M 3E3T3A

El nuevo mensaje tiene 56 caracteres, lo que significa que comprimiste la mensaje original en un 72%. Es una reducción significativa.

Este es un ejemplo de cómo los algoritmos de compresión pueden ser eficaces para reduce el tamaño de transferencia de los recursos basados en texto. En la práctica, la compresión son mucho más sofisticados que lo que ilustra el ejemplo anterior. en la Web, se pueden usar algoritmos de compresión para reducir significativamente los tiempos para los recursos. Al aplicar la compresión a recursos basados en texto, una página web pueden pasar menos tiempo cargando recursos, para que los usuarios puedan ver los efectos de esos recursos antes de lo que lo harían sin comprimirlos.

Reducción: procesamiento previo y optimizaciones específicas del contexto

La primera técnica que se analiza aquí es la minificación. Si bien la reducción no es estrictamente un algoritmo de compresión, es una forma de quitar elementos caracteres redundantes utilizados en el código fuente para que los recursos sean más legibles para a los humanos. Sin embargo, esa legibilidad no es necesaria para mantener la funcionalidad. de ese código fuente en sitios web de producción y puede retrasar la carga del recursos en la Web.

La reducción es un tipo de optimización específica del contenido que puede reducen el tamaño de los recursos entregados y qué optimizaciones se aplican mejor como parte del proceso de compilación e implementación. Por ejemplo, los agrupadores son un tipo de software de uso general que puede reducir automáticamente los recursos con solo antes de implementar un nuevo código de producción en un sitio web.

La mejor manera de comprimir datos redundantes o innecesarios es eliminarlos. Sin embargo, no puedes simplemente borrar datos arbitrarios. Sin embargo, en algunos contextos en los que tienes conocimiento específico del contenido del formato de los datos y sus propiedades, es posible reducir significativamente el tamaño de la carga útil sin afectar su el significado o las capacidades reales.

<html>
  <head>
    <style>
      /* awesome-container is only used on the landing page */
      .awesome-container {
        font-size: 120%;
      }

      .awesome-container {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <!-- awesome container content: START -->
    <div>
      This is my awesome container, and it is <em>so</em> awesome.
    </div>
    <!-- awesome container content: END -->
    <script>
      awesomeAnalytics(); // Beacon conversion metrics
    </script>
  </body>
</html>

Ten en cuenta el fragmento HTML anterior y los tres tipos de contenido diferentes que contiene:

1. lenguaje de marcado HTML
2. CSS para personalizar la presentación de una página
3. JavaScript para potenciar las interacciones y otras capacidades avanzadas de la página

Cada uno de estos tipos de contenido tiene diferentes reglas sobre lo que se considera válido contenido, diferentes reglas para especificar comentarios, etc. La pregunta pero que aún queda, ¿cómo se puede reducir el tamaño de esta página?

• Los comentarios de código son el mejor amigo del desarrollador, pero el navegador no necesita con ellos. Quita CSS (/* ... */), HTML (<!-- ... -->) y JavaScript (// ...) comentarios reduce el tamaño de transferencia total de la página y su subrecursos.
• Un enfoque "inteligente" el compresor de CSS podrían notar que usamos una forma ineficaz definir reglas para .awesome-container y contraer las dos declaraciones en uno sin afectar otros estilos, lo que ahorra más bytes. En un tamaño grande un conjunto de reglas de CSS, quitar este tipo de redundancia puede sumar, pero tal vez puede ser algo que se pueda aplicar de manera agresiva, ya que los selectores a menudo son necesariamente duplicados en diferentes contextos, como dentro de consultas de medios.
• Los espacios y las pestañas son servicios para desarrolladores en HTML, CSS y JavaScript. Un compresor adicional podría quitar todas las tabulaciones y los espacios. A diferencia de otros técnicas de anulación de duplicación, este tipo de optimización puede aplicarse de manera uniforme de forma agresiva, siempre que estos espacios o pestañas no sean necesarios para la presentación. Por ejemplo, querrás conservar los espacios en distintas franjas texto en un documento HTML, ya que garantizan la legibilidad del contenido al que los usuarios realmente verán.

<html><head><style>.awesome-container{font-size:120%;width:50%}</style></head><body><div>This is my awesome container, and it is <em>so</em> awesome.</div><script>awesomeAnalytics()</script></body></html>

Después de aplicar los pasos anteriores, la página pasa de 516 a 204 caracteres, lo que representa un ahorro de aproximadamente el 60%. Concedido. No es muy legible, pero no es necesario para que se puedan usar. Las prácticas de desarrollo moderno también te permiten mantener las versiones del código fuente con un formato adecuado y legibles por separado del código optimizado que se envía a producción. Combinado con mapas de fuentes, que proporcionan una representación legible de tu transformación código de producción te permite solucionar con más facilidad errores en producción; puedes tienen una buena experiencia de desarrollador y, al mismo tiempo, optimizan el rendimiento de la experiencia del usuario.

Nota: Si bien no se representa en el ejemplo anterior, el formato SVG las imágenes son otro recurso basado en texto. Los SVG se pueden minificar y, de lo contrario, optimizar con pérdidas mediante herramientas como SVGO

El ejemplo anterior ilustra un punto importante: un modelo de uso compresor (por ejemplo, uno diseñado para comprimir texto arbitrario) podría de comprimir la página en el ejemplo anterior, pero nunca sabría eliminar los comentarios, contraer las reglas de CSS o decenas de otros formatos optimizaciones. Por eso el procesamiento previo, la reducción y otras las optimizaciones son importantes.

Nota: Por ejemplo, el desarrollo sin comprimir de frameworks populares son mucho más grandes que sus equivalentes previstos que se usará en la producción. Por ejemplo, el desarrollo Angular 1.8.3 es de casi 1.4 megabytes. El producción versión es de 177 kilobytes. Esto demuestra claramente el potencial de estos optimizaciones.

De manera similar, las técnicas descritas anteriormente se pueden extender más allá de las prácticas activos de datos de una empresa. Las imágenes, los videos y otros tipos de contenido contienen sus propias formas de metadatos y varias cargas útiles. Por ejemplo, siempre que tomes una foto con una cámara, el archivo generalmente incorpora mucha información adicional: configuración de la cámara, ubicación, etcétera. Según tu aplicación, estos datos pueden ser fundamentales (por ejemplo, un sitio para compartir fotos) o podría resultar completamente inútil. Tú debes considerar si vale la pena quitarlos. En la práctica, estos metadatos pueden agregar hasta decenas de kilobytes por cada imagen.

En resumen, como primer paso para optimizar la eficiencia de tus recursos, crea un inventario de los diferentes tipos de contenido y considerar en qué tipo de optimizaciones específicas del contenido que puedes aplicar para reducir su tamaño. Luego, después hayas descubierto cuáles son, automatiza esas optimizaciones agregándolas a los pasos de compilación y lanzamiento para garantizar que se apliquen de forma coherente en cada lanzamiento nuevo a producción.

Compresión de texto con algoritmos de compresión

El siguiente paso para reducir el tamaño de los recursos de texto es aplicar un algoritmo de compresión. Esto va un paso más allá buscar patrones repetibles en cargas útiles basadas en texto antes de enviarlos al usuario y descomprimirlos una vez que llega al navegador del usuario. El resultado es una reducción aún mayor de esos recursos, y la posterior tiempos de descarga más rápidos.

• gzip y Brotli son algoritmos de compresión de uso general que tienen un mejor rendimiento recursos basados en texto: CSS, JavaScript y HTML
• Todos los navegadores modernos son compatibles con la compresión gzip y Brotli, y publicarán sus anuncios compatibilidad con ambos en el encabezado de la solicitud HTTP Accept-Encoding.
• Tu servidor debe estar configurado para habilitar la compresión. Software del servidor web a menudo habilitará los módulos para comprimir los recursos basados en texto de forma predeterminada.
• Tanto gzip como Brotli pueden ajustarse para mejorar las proporciones de compresión ajustando el nivel de compresión. Para gzip, la configuración de compresión varía de Del 1 al 9, donde 9 es el mejor. Para Brotli, este rango es de 0 a 11, con 11 son los mejores. Sin embargo, los parámetros de configuración de compresión más altos requieren más tiempo. Para recursos que están comprimidos dinámicamente, es decir, en el momento de la los parámetros de configuración en el medio del rango tienden a ofrecer la mejor compensación. entre el índice de compresión y la velocidad. Sin embargo, la compresión estática es posible, que ocurre cuando la respuesta se comprime antes de tiempo, y puede por lo tanto, usa la configuración de compresión más agresiva disponible para cada de compresión.
• Las redes de distribución de contenidos (CDN) suelen ofrecer compresión automática de que cumplen con los requisitos. Las CDN también pueden administrar la compresión dinámica y estática lo que te brinda un aspecto menos de compresión del que debes preocuparte.

gzip y Brotli son compresores comunes que se pueden aplicar a cualquier transmisión de bytes. En la memoria, recuerdan algunos de los contenidos examinados anteriormente de un archivo y, luego, intentará buscar y reemplazar fragmentos de datos duplicados en de forma eficiente.

Nota: Si deseas obtener información más detallada sobre cómo funciona la compresión, mira excelente Explicación de bajo nivel de gzip Si quieres experimentar con texto compresión, prueba nuestro gzip y Codelabs de Brotli.

En la práctica, tanto gzip como Brotli tienen un mejor rendimiento en el contenido basado en texto y, a menudo, logran de compresión de archivos a un 70 o 90% para archivos más grandes. Sin embargo, ejecutar estas recursos de algoritmos que ya están comprimidos con algoritmos alternativos, como que la mayoría de los formatos que usan técnicas de compresión con o sin pérdida, mejora mínima o nula.

Todos los navegadores modernos anuncian la compatibilidad con gzip y Brotli en el Encabezado de la solicitud HTTP Accept-Encoding. Sin embargo, es el proveedor de hosting responsabilidad de asegurarse de que el servidor web esté configurado correctamente para entregar el recurso comprimido cuando el cliente lo solicita.

Archivo	Algoritmo	Tamaño sin comprimir	Tamaño comprimido	Índice de compresión
angular-1.8.3.js	Brótli	1,346 KiB	256 KiB	El 81%
angular-1.8.3.js	gzip	1,346 KiB	329 KiB	El 76%
angular-1.8.3.min.js	Brótli	173 KiB	53 KiB	El 69%
angular-1.8.3.min.js	gzip	173 KiB	60 KiB	65%
jquery-3.7.1.js	Brótli	302 KiB	69 KiB	El 77%
jquery-3.7.1.js	gzip	302 KiB	83 KiB	El 73%
jquery-3.7.1.min.js	Brótli	85 KiB	27 KiB	El 68%
jquery-3.7.1.min.js	gzip	85 KiB	30 KiB	65%
lodash-4.17.21.js	Brótli	531 KiB	73 KiB	86%
lodash-4.17.21.js	gzip	531 KiB	94 KiB	82%
lodash-4.17.21.min.js	Brótli	71 KiB	23 KiB	El 68%
lodash-4.17.21.min.js	gzip	71 KiB	25 KiB	65%

En la tabla anterior, se muestran los ahorros que puede ahorrar tanto con la compresión Brotli como con gzip proporcionar algunas bibliotecas de JavaScript conocidas. El rango de ahorro varía entre el 65% y 86% según el archivo y el algoritmo. Como referencia, la longitud máxima Se aplicó el nivel de compresión a cada archivo, tanto para Brotli como para gzip. En cualquier lugar posible, preferimos Brotli en lugar de gzip.

Importante: En la tabla anterior, se demuestra claramente cómo aplicar compresión sobre optimizaciones como la reducción puede proporcionar un ahorro adicional. La compresión no siempre representa los efectos de la reducción no tienen sentido, sino que es un aditivo la optimización de las conversiones.

Habilitar la compresión es una de las optimizaciones más simples y efectivas para implementar. Si tu sitio web no las aprovecha, estás perdiendo una una gran oportunidad para mejorar el rendimiento de los usuarios. Por suerte, muchos sitios web proporcionan configuraciones predeterminadas que permiten esta importante optimización, y, en particular, las CDN son muy eficaces para implementarlos equilibra la velocidad de compresión y la proporción.

Una forma rápida de ver la compresión en acción es abrir las Herramientas para desarrolladores de Chrome, abrir la Network, carga la página que desees y observa la parte inferior de el panel de red.

Una representación del tamaño de transferencia (es decir, comprimido) de todos los recursos de la página en comparación con su tamaño real tal como se muestra en la red de Herramientas para desarrolladores de Chrome.

Al igual que en la imagen anterior, deberías ver un desglose de lo siguiente:

• El número de solicitudes, que es el número de recursos cargados para el .
• El tamaño de transferencia de todas las solicitudes. Esto refleja la eficacia de la compresión que se aplica a cualquiera de los recursos de una página.
• El tamaño del recurso de todas las solicitudes. Esto refleja el tamaño de los recursos para páginas después de que se hayan descomprimido.

Nota: A veces, los algoritmos de compresión pueden aumentar el el tamaño del recurso. En general, esto ocurre cuando el recurso sin comprimir es muy pequeño, y la sobrecarga del algoritmo es mayor que la de ahorrados o cuando el recurso ya está bien comprimido. Para evitar esto, algunos servidores permiten especificar un umbral de tamaño mínimo de archivo. que por lo general es menos de cuatro o cinco kilobytes.

Efectos en las Métricas web esenciales

Las mejoras en el rendimiento no se pueden medir, a menos que haya métricas que reflejen esas mejoras. La iniciativa de Métricas web esenciales existe para para crear y dar a conocer métricas que reflejen la experiencia real del usuario. Esto contrasta con las métricas, como el tiempo de carga simple de la página, que no se traducen claramente en la calidad de la experiencia del usuario.

Cuando apliques las optimizaciones descritas en esta guía a los recursos de tu sitio web, los efectos en las Métricas web esenciales pueden variar optimizar y las métricas involucradas. Sin embargo, estos son algunos casos en los que la aplicación de estas optimizaciones puede mejorar las Métricas web esenciales de tu sitio web:

• Los recursos HTML reducidos y comprimidos pueden mejorar la carga de ese HTML, la visibilidad de sus subrecursos y, por lo tanto, mejorar el cargarlas. Esto puede ser beneficioso para el Procesamiento de imagen con contenido más grande de una página. (LCP). Si bien las sugerencias de recursos, como rel="preload", se pueden usar para modificar la visibilidad de los recursos, usar demasiados de ellos puede causar problemas la contención de ancho de banda. Garantizando la respuesta HTML para una solicitud de navegación se comprimen, los recursos que contienen se pueden descubrir lo antes posible con el analizador de precarga.
• Algunos candidatos de LCP también se pueden cargar antes mediante compresión. Para Por ejemplo, las imágenes SVG que son candidatos para LCP pueden tener sus recursos de carga duración reducida gracias a la compresión basada en texto. Es diferente de que aplicarías a otros tipos de imágenes, comprimida de forma intrínseca a través de otros métodos de compresión, como la forma usan compresión con pérdida.
• Además, los nodos de texto también pueden ser candidatos de LCP. Cómo las técnicas que se describe en esta guía depende de si usas una fuente web para el texto en tus páginas web. Si utilizas una fuente web, la optimización de fuentes web prácticas recomendadas. Sin embargo, si no usas fuentes web, sino fuentes del sistema que se muestran sin incurrir en ninguna duración de carga de recursos, lo que reduce y comprimir el CSS reduce la duración, lo que significa que la renderización de los posibles nodos de texto LCP pueden ocurrir antes.

Conclusión

La forma de optimizar la codificación y transferencia de recursos basados en texto es un modelo de referencia de rendimiento, pero que tiene un gran impacto. Asegúrate de lo siguiente: hará todo lo posible para garantizar que los recursos aptos para la reducción compresión se benefician de esas optimizaciones.

Lo más importante es que te asegures de que estos procesos se estén automatizados. Para reducción, usa un agrupador para aplicar la reducción a los recursos aptos. Asegúrate de que que la configuración de tu servidor web admite la compresión, pero más que eso, usa la compresión más efectiva disponible. Para que sea lo más simple posible, Usa CDN para automatizar la compresión, ya que no solo pueden comprimir recursos por ti, pero también pueden hacerlo muy rápido.

Si consolidas estos conceptos de rendimiento de referencia en los puede asegurarse de que sus esfuerzos de optimización del rendimiento y que las optimizaciones posteriores pueden basarse en una base sólida. de buenas prácticas de referencia.