Pruebas
A continuación se realizarán una serie de pruebas, estas estarán basadas únicamente en dos parámetros, legibilidad y tamaño de los ficheros generados. Todas las pruebas hechas parten de un mismo fichero CSS, él código mostrado en este fichero presenta gran cantidad de comentarios y precario (adrede) uso de shorthands.
| Herramienta | Característica | Antes | Después | Ahorro |
|---|---|---|---|---|
| CSS Optimiser | Caracteres | 3143 | 601 | 2542 |
| Lineas | 128 | 41 | N/A | |
| Legibilidad | Muy alta | Alta | N/A | |
| Porcentaje | N/A | N/A | 81% | |
| CSS Formatter & Optimiser | Caracteres | 3143 | 802 | 2341 |
| Lineas | 128 | 57 | N/A | |
| Legibilidad | Muy alta | Alta | N/A | |
| Porcentaje | N/A | N/A | 74% | |
| CSS Compressor | Caracteres | 3143 | 1225 | 1918 |
| Lineas | 128 | 1 | N/A | |
| Legibilidad | Muy alta | Muy baja | N/A | |
| Porcentaje | N/A | N/A | 61% | |
| CSScompiler | Caracteres | 3143 | 1230 | 1913 |
| Lineas | 128 | 8 | N/A | |
| Legibilidad | Muy alta | Baja | N/A | |
| Porcentaje | N/A | N/A | 61% | |
| N/A: No aplica | ||||
Observaciones
CSS Optimiser maneja muy bien la reducción de las declaraciones cuando es aplicable el shorthand, algo en lo falla un poco CSS Formatter & Optimiser, aunque éste último ofrece bastantes opciones, por lo que es bueno tomarlo en cuenta a la hora de reducir el tamaño en bytes de nuestras hojas de estilos. Si queremos hacer uso de CSS Optimiser y aún deseamos obtener una mayor compresión, es posible obtenerla si combinamos el resultado obtenido con la herramienta CSS Compressor, el cual eliminará los espacios existentes. Quizás la única falla que percibi en CSS Optimiser fue que aún no maneja adecuadamente las reducciones de aquellas reglas que presentan declaraciones comunes, leyendo ciertas notas del autor, me doy cuenta que está trabajando en ello.
He trabajado con una hoja de estilos bastante comentada y sin utilizar propiedades abreviadas (adrede) para realizar las pruebas, a continuación muestro los enlaces a cada uno de los ficheros de las hojas de estilos.
- Hoja sin ninguna compresión, original
- Hoja de estilos utilizando CSS Optimiser
- Hoja de estilos utilizando CSS Fomatter & Optimiser
- Hoja de estilos utilizando CSS Compressor
- Hoja de estilos utilizando CSScompiler
Si conoces alguna herramienta que permita la reducción del tamaño en bytes de las hojas de estilo en cascada no dudes en comentarlo, de esta manera, podría ampliar la revisión nuevamente.
0 Responses to “Reduciendo el tamaño de tus hojas de estilos, una revisión”