Comprimiendo las hojas de estilo - CSS
El otro día empecé a modificar algunas cosas en el blog para optimizarlo: limpiar el tema, optimizar el javascript y una cosa importante fue optimizar o mejor dicho comprimir el archivo CSS del tema de este blog.
Algunos páginas pueden tener incluso más archivos CSS cosa que no recomiendo porque solo aumentan el número de consultas del servidor web y por lo tanto tardan más en cargar.
Comprimiendo el CSS además ahorra ancho de banda especialmente en sitios donde hay más de 1.000 líneas de código.
Hay varias páginas donde podrás comprimir el archivo CSS, pero el problema puede ser el mantenimiento del archivo después.
Para optimizarlo principalmente hay dos opciones:
• comprimir el archivo CSS simplemente
• crear un script PHP que comprima el archivo cada vez que es solicitado
Cada opción tiene su ventaja e inconveniente.
El script PHP tiene la ventaja de que es muy fácil mantener el archivo CSS para hacer modificaciones, pero cada vez que se cargue la pagina el servidor tendrá que servir el código PHP.
Yo como no suelo modificar el archivo CSS muy a menudo he optado por hacerlo estático - he comprimido el código CSS y lo he subido directamente al servidor.
1. Ambas opciones son bastante simples y eficaces, especialmente la primera.
Para comprimir el archivo CSS he probado varios “servicios” web y finalmente me he
decidido por Ice CSS Compressor.
El resultado es asombroso:
• Tamaño original: 10.65 kB (10,910 B)
• Tamaño final: 5.48 kB (5,608 B)
• Ahorrado: 5.18 kB (5,302 B)
• Reducción: 48.6%
2. La segunda opción es un poco más compleja - además de PHP requiere utilizar el archivo .htaccess.
Así es como funciona:
• El navegador el usuario pide la hoja de estilo (archivo CSS) como siempre
• El servidor comprime la hoja de estilo utilizando PHP
• La hoja de estilo es servida al navegador
Todo esto pasa completamente desapercibido para el usuario.
Además tiene la ventaja de que no hay que modificar el código CSS original.
Primero hay que añadir este código al principio del archivo CSS:
<?php header('Content-type: text/css'); ob_start("compress"); function compress($buffer) { // quita comentarios $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer); // quita tabuladores, espacios, nuevas lineas, etc. $buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer); return $buffer; } ?>
La primera línea informa al navegador de que esto es una hoja de estilos CSS.
La función de comprimir es utilizada para quitar los comentarios y los espacios.
Finalmente, el CSS comprimido es mandado al navegador.
Al final del archivo CSS hay que añadir esta línea:
<?php ob_end_flush();?>
Es para que el script sepa hasta donde tiene que colectar en el buffer la información que tiene que comprimir.
El último paso es necesario para seguir manteniendo la extensión CSS del archivo.
Hay que modificar (o crear) el archivo .htacces y añadir un SetHandler que sirve para procesar otras extensiones como PHP:
<Files style.css> SetHandler application/x-httpd-php </Files>
Puedes descargar desde aquí ambos archivos para utilizarlos directamente.
Antes mi archivo CSS pesaba 10.6 KB (10.910 bytes).
Ahora después de comprimirlo tiene casi la mitad del tamaño 5,47 KB (5.608 bytes).
Nota: las hojas de estilo de los blogs tienen un encabezado para la identificación donde están los detalles como el nombre, el creador, la pagina web…
Se puede añadir después de comprimir el archivo para mantener la información aunque funciona perfectamente sin.
Comentarios
Deja una respuesta
