davidsuarez.es

Aquí tenéis un artículo que me ha encantado para ayudaros a comprimir los ficheros html, css y js por cortesía de de-mas.net que me ha ayudado a optimizar mas el ancho de banda. Yo de momento he seguido sus pasos y con el tiempo veré que tal ha ido.
A medida que aumentan las visitas a nuestro sitio web también aumenta la transferencia consumida. Si queremos evitar que el aumento sea desproporcionado, haciendo que nuestro hosting se quede pequeño, lo podemos evitar comprimiendo los ficheros html, css y js que enviamos al usuario desde el servidor, reduciendo el tamaño en un 60% y también el uso del procesador (el coste de compresión consume menos CPU que el tener una conexión abierta más tiempo para transmitir los ficheros). Si quieres puedes comprobar como quedaría tu web comprimida en esta página: port80.Para hacerlo existen varias maneras y la mejor que he encontrado (más rápida y fácil) es mediante el uso del .htaccess y un pequeño fichero en php. Los pasos son:

Aviso! Si usas wordpress y ya tienes habilitada la opción de compresión, desactivala (Opciones ->Lectura) ya que con el método que usa wordpress no comprime los css ni los js.

Paso 1.-Añadimos estas tres lineas al final del fichero .htaccess


# Activa la compresion en el servidor
php_flag zlib.output_compression On
# Indica el nivel de compresion de 1 a 9 (de menor a mayor compresion)
php_value zlib.output_compression_level 5
# Indica sobre que extensiones se aplica la compresion
AddHandler application/x-httpd-php .css .js

Paso 2.-Con el código anterior ya debería bastar, pero veremos que las páginas webs no se visualizarán correctamente en Firefox, pero si en el Internet Explorer. Esto es debido a que hemos machacado las cabeceras de los ficheros .css y .js y los envia con una cabcera html (”Content-type: text/html”). Para evitar esto deberemos incluir una linea más en el fichero .htaccess y subir un archivo nuevo al servidor: Lee el resto de esta entrada »

En algunas ocasiones al revisar estadísticas sobre nuestra web vemos que el ancho de banda consumido por la descarga de los css es cuando menos sorprendente. Así pues me he puesto a investigar de que manera podría reducir ese gasto optimizando los css hasta el máximo.

Un resultado correcto de la optimización nos puede hacer ahorrar ancho de banda y además las páginas se cargarán mas rápidamente.

Investigando un poco he visto que hay algunas herramientas online para reducir el tamaño del css y después de probar varias me he decidido por el optimizador de CDBurnerXP Pro que ha llegado a comprimirse el máximo.

El css principal tenía un tamaño de 12595 y después de pasarlo por el CDBurnerXP Pro css optimiser se ha reducido hasta 9513, esto supone un ahorro de casi un 25% que espero se vea reflejado en el ahorro del ancho de banda.

El CDBurnerXP te permite ajustar el nivel de compresión en función de lo legible que sea tu archivo final. Sencillo de manejar y rápido.

También tenéis esta opción que os cuento y otras mas para hacer vosotras propias pruebas:

• http://cdburnerxp.se/cssparse/css_optimiser.php
• http://flumpcakes.co.uk/css/optimiser/
• http://icebeat.bitacoras.com/archivo/121/csscompiler-10

 Entre las etiquetas Head

<SCRIPT>
//change the title text below to your own
var titletext=”AQUI EL TEXTO QUE QUIERAS”
var thetext=”"
var started=false
var step=0
var times=1

function welcometext()
{
times–
if (times==0)
{
if (started==false)
{
started = true;
document.title = titletext;
setTimeout(“anim()”,1);
}
thetext = titletext;
}
}

function showstatustext(txt)
{
thetext = txt;
setTimeout(“welcometext()”,4000)
times++
}

function anim()
{
step++
if (step==7) {step=1}
if (step==1) {document.title=’>===’+thetext+’===<’}
if (step==2) {document.title=’=>==’+thetext+’==<=’}
if (step==3) {document.title=’>=>=’+thetext+’=<=<’}
if (step==4) {document.title=’=>=>’+thetext+’<=<=’}
if (step==5) {document.title=’==>=’+thetext+’=<==’}
if (step==6) {document.title=’===>’+thetext+’<===’}
setTimeout(“anim()”,200);
}

if (document.title)
window.onload=onload=welcometext
</SCRIPT>

Entre las etiquetas Body:

<SCRIPT LANGUAGE=”JavaScript”>
var txt=”                              [ TRUCOS PARA TUS PAGINAS ]            -                            CREATUPROPIAWEB”;
var espera=100;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout(“rotulo_title()”,espera);}
rotulo_title();
</SCRIPT>