Módulo 2: Aumentar la velocidad de los sitios web móviles

2.3.2 Optimización de la codificación y del tamaño de transferencia

Después de eliminar las descargas de recursos innecesarios, lo mejor que puedes hacer para acelerar la velocidad de carga de la página es reducir el tamaño de descarga general. Por lo tanto, debes optimizar y comprimir los recursos restantes.

Después de haber eliminado los recursos innecesarios, el siguiente paso es comprimir el resto de recursos que el navegador tiene que descargar. En función del tipo de recurso (texto, imágenes, fuentes, etc.), hay muchas técnicas diferentes entre las que elegir: herramientas generales que se pueden habilitar en el servidor, optimizaciones previas al procesamiento para tipos de contenido específicos y optimizaciones específicas de recursos (que requieren que el desarrollador introduzca información).

Para ofrecer el máximo rendimiento posible, es necesaria una combinación de todas estas técnicas.

  • La compresión es el proceso de codificar información con menos bits.
  • Al eliminar datos innecesarios, se obtienen los mejores resultados.
  • Hay muchos algoritmos y técnicas de compresión diferentes.
  • Necesitarás varias técnicas para conseguir la mejor compresión posible.

La compresión de datos consiste en reducir el tamaño de los datos. Hay muchas personas que han aportado algoritmos, técnicas y optimizaciones para mejorar las relaciones de compresión, la velocidad y los requisitos de memoria de diversos compresores. Es este artículo no se incluye un análisis completo de la compresión de datos. Sin embargo, es importante entender, a grandes rasgos, cómo funciona la compresión y las técnicas que puedes usar para reducir el tamaño de diversos recursos que requieren las páginas.

Para entender los principios básicos de estas técnicas, observa el proceso de optimización del formato de un mensaje de texto que hemos inventado a modo de ejemplo:

# A continuación aparece un mensaje secreto, que consta de un conjunto de encabezados

# con el formato clave-valor seguido de una nueva línea y el mensaje cifrado.

format: secret-cipher

fecha: 25/08/16

AAAZZBBBBEEEMMM EEETTTAAA

  1. Los mensajes pueden contener anotaciones arbitrarias, que se indican con el prefijo "#". Las anotaciones no afectan al significado ni a ningún otro comportamiento del mensaje.
  2. Los mensajes pueden contener encabezados, que consisten en pares clave-valor (separados por ":") que aparecen al comienzo del mensaje.
  3. Los mensajes pueden incluir cargas útiles de texto.

¿Qué es lo que puedes hacer para reducir el tamaño del mensaje anterior de 200 caracteres?

  1. Aunque el comentario es interesante, no afecta al significado del mensaje. Elimínalo al transmitir el mensaje.
  2. Existen excelentes técnicas para codificar encabezados de forma eficaz. Por ejemplo, si sabes que todos los mensajes tienen "formato" y "fecha", puedes convertirlos en ID con números enteros breves y enviarlos. Sin embargo, es posible que no tengas esta información y que no puedas hacerlo.
  3. La carga útil solo es texto y, aunque no sepamos cuál es el contenido (aparentemente, utiliza un "mensaje secreto"), con solo observar el texto, podemos ver que contiene mucha redundancia. Tal vez, en lugar de enviar letras repetidas, puedes contar el número de letras repetidas y codificarlas de forma eficaz. Por ejemplo, "AAA" se convierte en "3A", que representa una secuencia de tres "A".

Al combinar estas técnicas, se obtiene el siguiente resultado:

format: secret-cipher

fecha: 25/08/16

3A2Z4B3E3M 3E3T3A

El nuevo mensaje contiene 56 caracteres, lo que significa que se ha comprimido el mensaje original en un impresionante 72%.

Esto es fantástico, pero ¿cómo nos ayuda a optimizar las páginas web? No vamos a inventar algoritmos de compresión pero, como verás, podemos usar las mismas técnicas y razonamientos al optimizar diversos recursos en las páginas: procesamiento previo, optimizaciones específicas del contexto y diferentes algoritmos para diversos contenidos.

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

  • Las optimizaciones específicas del contenido pueden reducir considerablemente el tamaño de los recursos proporcionados.
  • Las optimizaciones específicas del contenido se aplican mejor como parte del ciclo de compilación/publicación.

La mejor forma de comprimir datos redundantes o innecesarios es eliminarlos totalmente. No podemos eliminar datos de forma arbitraria. En algunos contextos en los que disponemos de conocimientos específicos sobre el contenido y relativos al formato de los datos y sus propiedades, podemos reducir considerablemente el tamaño de la carga útil sin que el significado se vea afectado.

<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>…</div>
   <!-- awesome container content: END -->
   <script>
     awesomeAnalytics(); // beacon conversion metrics
   </script>
 </body>
</html>

Observa la página HTML anterior y los tres tipos diferentes de contenido que incluye: marcado HTML, estilos CSS y JavaScript. Cada tipo de contenido tiene diferentes reglas sobre lo que constituye contenido válido, diferentes reglas para indicar comentarios, etc. ¿Cómo podemos reducir el tamaño de esta página?

  • Los comentarios de código son el mejor aliado de los desarrolladores, pero no es necesario que el navegador los vea. Si suprimimos los comentarios de CSS (/* … */), HTML (<!-- … -->) y JavaScript (// …), reduciremos considerablemente el tamaño total de la página.
  • Un compresor de CSS inteligente detectaría que estamos usando un método ineficaz de definir reglas para ".awesome-container" y fusionaría las dos declaraciones en una sin que el resto de estilos se vea afectado. A su vez, esto supondría un ahorro de más bytes.
  • Los desarrolladores suelen utilizar espacios en blanco (espacios y tabulaciones) en HTML, CSS y JavaScript. Otro compresor eliminaría todos los espacios y tabulaciones.

<html><head><style>.awesome-container{font-size:120%;width: 50%}
</style></head><body><div>…</div><script>awesomeAnalytics();
</script></body></html>

Tras aplicar los pasos anteriores, la página pasa de 406 a 150 caracteres, lo que supone una reducción del 63%. No es muy legible, pero tampoco tiene por qué serlo: puedes conservar la página original como la "versión de desarrollo" y, a continuación, aplicar los pasos anteriores cuando desees publicarla en tu sitio web.

El ejemplo anterior ilustra un punto importante: puede que un compresor de uso general (por ejemplo, uno diseñado para comprimir texto de forma arbitraria) comprima bastante bien la página anterior, pero nunca sabrá eliminar comentarios, contraer reglas de CSS o realizar decenas de optimizaciones específicas del contenido. Este es el motivo por el que el procesamiento previo, la reducción o la optimización contextual son tan importantes.

Nota: Un ejemplo, la versión de desarrollo sin comprimir de la biblioteca JQuery tiene un tamaño de aproximadamente 300 kB. La misma biblioteca, pero reducida (comentarios eliminados, etc.), es casi 3 veces más pequeña: su tamaño es de 100 kB, aproximadamente.

Del mismo modo, las técnicas descritas anteriormente se pueden aplicar a otros recursos, no solo a los que se basan en texto. Las imágenes, vídeos y otros tipos de contenido contienen sus propios formularios de metadatos y diversas cargas útiles. Por ejemplo, cuando obtienes una imagen con una cámara, la foto también integra mucha información adicional: configuración de la cámara, ubicación, etc. En función de la aplicación, estos datos pueden ser fundamentales (por ejemplo, un sitio para compartir fotos) o completamente inservibles, y tendrás que plantearte si merece la pena eliminarlos. En la práctica, estos metadatos pueden añadir decenas de kilobytes a cada imagen.

En resumen, para empezar a optimizar la eficacia de tus recursos, genera un inventario de diferentes tipos de contenido y plantéate los tipos de optimizaciones específicas del contenido que puedes aplicar para reducir el tamaño. Una vez que determines cuáles son, automatiza dichas optimizaciones añadiéndolas a los procesos de compilación y publicación para asegurarte garantizar su aplicación.

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?