Linux

Cómo mejorar el tiempo de carga de la página con pngcrush

La mayoría de los usuarios de Internet han dejado los días oscuros del acceso a Internet por marcado, pero con el fin de la neutralidad de la red, los desarrolladores web enfrentan nuevos desafíos.

La necesidad de optimización se mantiene a medida que los principales ISP de EE. UU. pasan del «acceso ilimitado» a la introducción de límites de ancho de banda (anteriormente una práctica exclusiva de los operadores de redes de telefonía móvil). Otros métodos no convencionales de proporcionar acceso a Internet que requieren la protección del rendimiento disponible, como el acceso a Internet por satélite, son cada vez más comunes. Si bien la mayoría de los esfuerzos de optimización se enfocan en reducir el tiempo de generación de páginas y otras operaciones del lado del servidor, la compresión de imágenes estáticas, una tarea simple y efectiva, se ha suspendido.

En una guerra de precios ferozmente competitiva que comenzó a principios de este año, con la caída en picado de los costos de computación en la nube, ofrecer contenido estático, como diseños de páginas globales, no es un esfuerzo particularmente costoso. En general, la carga de ancho de banda reducida ahorra suficiente dinero para comprar al menos una taza de café.

La utilidad pngcrush es un programa gratuito de código abierto que realiza una optimización sin pérdida de archivos de imagen PNG; por lo tanto, la imagen recomprimida o «comprimida» tendrá la misma calidad que el archivo original. Para diseños que usan muchas imágenes, reducir el tamaño de archivo de esas imágenes puede reducir significativamente el tiempo que toma cargar su sitio web.

Una guía de inicio rápido para usar pngcrush

Usar pngcrush es tan fácil como cualquier herramienta de línea de comandos, el uso básico es el siguiente:

Persona especial [options] [infile.png] [outfile.png]

Existen varias opciones para pngcrush, pero para los fines de este artículo, se presentará la opción más centrada en el rendimiento. Puede encontrar una guía más detallada de pngcrush aquí.

LEER  Cómo instalar nextCloud 13 en Ubuntu 18.04
Publicaciones relacionadas

Especificar entrada y salida

Para las operaciones por lotes, es más fácil colocar todos los archivos que desea convertir en una carpeta que administrar cada carpeta individualmente. Es mucho más fácil usar el siguiente formato (donde F:\ es el destino preferido):

Persona especial [options] -d F:\img_out F:\inputdir\*.png

Compresión base por imagen

Para las operaciones por lotes, es más fácil colocar todos los archivos que desea convertir en una carpeta que administrar cada carpeta individualmente. Es mucho más fácil usar el siguiente formato (donde F:\ es el destino preferido):

pngcrush -reduce -brute -d F:\img_out F:\inputdir\*.png

En este ejemplo, el comando «reducir» realizará un tipo de color sin pérdidas o una reducción de la profundidad de bits. Además, «brute» es un comando de fuerza bruta que realizará una búsqueda exhaustiva para encontrar el método de compresión más eficiente, lo que a veces da como resultado un tamaño de archivo más pequeño que la búsqueda predeterminada. Un procesador lo suficientemente rápido no necesita mucho tiempo adicional para procesar el método agregado. Para este artículo, el procesamiento de imágenes en un Phenom II N660 de 3,0 GHz (una computadora portátil barata de dos años) hace que el trabajo de compresión se realice rápidamente.

Escenario 1: uso de formatos de imagen modernos

La página de inicio de Aoyama Gakuin, una institución educativa cristiana privada en Tokio, Japón, utiliza la asombrosa cantidad de 44 GIF en el índice de su sitio web. GIF es un formato de imagen algo obsoleto que se limita al uso de la compresión LZW, que no es tan eficiente como el estándar PNG más nuevo. PNG se creó en respuesta a un reclamo de patente por el uso del algoritmo LZW por parte de CompuServe. Las 44 imágenes suman un total de 79.258 bytes, un número pequeño en comparación con las fotos comprimidas en formato JPEG usadas en la misma página, pero las visitas a la página son altas y pueden sumarse rápidamente. Vale la pena señalar que las fotos digitales no son adecuadas para la compresión PNG, ya que la compresión sin pérdidas no funciona bien para las fotos digitales con pocos datos redundantes.

Para convertir rápidamente el archivo a PNG (una función que pngcrush no tiene), use IrfanView para convertir el archivo a proceso. La conversión de GIF a PNG elimina un total de 29.172 bytes de este conjunto de imágenes. El primer paso, con solo las opciones de reducción y bruto habilitadas, lo redujo a 49,519 bytes, una pequeña diferencia ya que la función de transformación en IrfanView es muy eficiente en la compresión de archivos. Sin embargo, todas las imágenes se convierten en imágenes a todo color.

20 de las 44 imágenes utilizadas aquí son imágenes en escala de grises, no transparentes, generalmente texto (generalmente común en sitios japoneses) o degradados representados dentro de la imagen. La primera ronda de compresión no comprimió estas imágenes a escala de grises; para estas, podemos convertirlas manualmente a PNG en escala de grises y volver a comprimirlas con:

pngcrush -c 0 -brute -d F:\ay_grey2 F:\ay_grey\*.png

Después de mover los 20 archivos con un total de 18 561 bytes a su propia carpeta, la recompresión por lotes de los archivos con esta opción reducirá el tamaño a la mitad a 9161 bytes.

juicio

Tomó menos de cinco minutos volver a comprimir los archivos, incluido el tiempo para organizar los archivos según sea necesario en el Explorador de Windows. El conjunto original era de 79 258 bytes y el total comprimido era de 40 119 bytes, una reducción del tamaño del 49,38 %. Para una página, la reducción de 38 KB es beneficiosa, pero la cantidad de imágenes involucradas aquí es mala para el sitio: reducir la cantidad de imágenes requeridas para el mismo diseño mediante el uso de CSS sin depender de imágenes para colocar texto dará como resultado un diseño más efectivo.

Escenario 2: Hoja de sprites comprimida

El uso de CSS y JavaScript para crear hojas de sprites controlables, lo que en realidad reduce la cantidad de imágenes diferentes cargadas y, por lo tanto, las solicitudes HTTP GET, es una forma muy eficiente de manejar imágenes en un sitio web, que se rediseñó recientemente. Weather obtuvo excelentes resultados bajo tierra. Sin embargo, todavía hay espacio para la optimización de las cuatro hojas de sprites utilizadas en el nuevo diseño.

Estos cuatro archivos componen 64,102 bytes, no es enorme, pero para un sitio web que es el 666º sitio web más visto en el mundo al momento de escribir, estas imágenes se cargan millones de veces al día.

Para la primera pasada con solo reduce y brute habilitados, el archivo se redujo a 48.409 bytes, una reducción del 24,48 %. Sin embargo, los sprites lunares son en escala de grises con un canal alfa; para esto, podemos comprimir aún más el archivo ya comprimido usando el modo de color 4.

pngcrush -c 4 -brute luna-sprite.png luna-sprite2.png

Esto reduce el archivo de sprites de la luna a 3.946 bytes, un 66,8 % más pequeño que el tamaño del archivo original de 11.900 bytes.

juicio

La atención adicional al archivo de sprites de la luna redujo los cuatro grupos de imágenes a 46 416 bytes, una reducción del 27,59 % en el tamaño del archivo. Como un ejemplo simple (pero algo descuidado), si estas cuatro imágenes se descargan 1 millón de veces al día, el ahorro de compresión sería de 16,38 GB de datos transferidos. Ahorre $59.00 por mes durante un mes, a partir de la tarifa base de $0.12 por transferir datos en Amazon S3. Por supuesto, esta estimación no tiene en cuenta el almacenamiento en caché, pero para un sitio muy utilizado como Weather Underground, tiene un punto importante.

pensamientos finales

Si bien centrarse en la compresión de imágenes no es tan importante como limitar las solicitudes HTTP GET o minimizar las consultas para mejorar el tiempo de generación de la página, la inversión de tiempo relativamente pequeña requerida para realizar esta tarea bien vale los resultados obtenidos en archivos fuertemente comprimidos.

Háganos saber cómo puede optimizar su sitio web en la sección de comentarios.

LEER  La Ópera de San Francisco utiliza el software Aloha para la colaboración remota en tiempo real

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba