Compactar nuestra pagina web, recomendaciones

[salvador86]

Hola, en algunas páginas he leido que para ganar velocidad en nuestra página debemos "Compactar" nuestro código: tanto sea XHTML, CSS o Script, sospecho que se refieren a una técnica que observe en algunos script, por ejemplo cuando baje el SWFObject (libreria para mostrar archivos swf) su script esta todo juntado en una sola línea, y también algunos diseñadores de páginas web se toman el tiempo de hacer eso con su código html, pues, no creo que un editor lo haga ejemplo:

Normal

<table cellspacing="0">
<tr>
<td colspan="3">
<p>Tour en la ciudad de Lima, Visitas guiadas al Ca&ntilde;&oacute;n del Colca, visita a la Reserva de Agua Blanca, avistamiento de Vicu&ntilde;as y Alpacas. </p></td>
</tr>
<tr>
<th width="25%">Duraci&oacute;n </th>
<th width="4%">:</th>
<th width="71%">9 D&iacute;as </th>
</tr>
</table>

Y este seria un código compactado, todo en una línea.

<table cellspacing="0"><tr><td colspan="3"><p>Tour en la ciudad de Lima, Visitas guiadas al Ca&ntilde;&oacute;n del Colca, visita a la Reserva de Agua Blanca, avistamiento de Vicu&ntilde;as y Alpacas. Visita a laCruz del Condor, visita al pueblito de Chivay y aguas termales. </p></td></tr><tr><th width="25%">Duraci&oacute;n </th><th width="4%">:</th><th width="71%">9 D&iacute;as </th></tr></table>

Un ejemplo de esto es www.nedrek.net alli observe ese código.

Quisiera que me ayuden a comprender que si hago eso tanto con mis páginas htnl, hojas de estilo css, y script ganaré velocidad, o si tiene alguna importante función que por el momento no entiendo. Muchas gracias por todo.

[pateketrueke]

la verdad ganas "feosidad" ya ke no es claro entender el codigo final... de echo, la compresion de la ke tu hablas usa GZIP.... y no se ke mas, investigale... suerte!

[Mikmoro]

Hazlo y luego mira el tamaño real que se ha reducido el archivo, que supongo que será casi imperceptible, dependiendo del tamaño del archivo.

Personalmente no me gusta nada esto porque no hay forma de leerlo ni siquiera para quien lo ha hecho. Y alguien dirá: "es que el desarrollador guarda una copia sin compactar", ah, pues muy astuto, pero cuando actualice algo tendrá que hacerlo dos veces.

¿Si te dijeran que podrías ganar hasta... 0,6 segundos, lo harías?

Mikel.

[neodani]

Iniciado por Mikmoro

Hazlo y luego mira el tamaño real que se ha reducido el archivo, que supongo que será casi imperceptible, dependiendo del tamaño del archivo.

Personalmente no me gusta nada esto porque no hay forma de leerlo ni siquiera para quien lo ha hecho. Y alguien dirá: "es que el desarrollador guarda una copia sin compactar", ah, pues muy astuto, pero cuando actualice algo tendrá que hacerlo dos veces.

¿Si te dijeran que podrías ganar hasta... 0,6 segundos, lo harías?

Mikel.

Además hoy en día practicamente todo el mundo dispone de al menos 1mega de descarga, no era como antes que todas las webs debian ser super ligeras... esto está cambiando.

No se la media de Kb que debe tener una pagina que carga suficientemente rapido (1 , 2 segundos...)

Salu2!

[00siete]

Yo tengo un programa en C que realiza la compactación de que hablas. Pero lo utilizo únicamente para compactar ficheros javascript.
Los ficheros normalmente se reducen a menos de la mitad de su tamaño original y básicamente lo que hace el programa es eliminar comentarios, quitar espacios consecutivos, fines de línea, tabuladores y poco más.
Evidentemente la edición y mantenimiento la hago sobre los originales y al servidor solo subo los compactados.

En los HTML el ahorro no debe ser tanto porque normalmente no se ponen muchos comentarios.

[flai]

En mi humilde opinión veo una tontería preocuparse por la compactación o compresión o como querais llamarlo.

Está bien, consigues reducir los .js y los .css a la mitad de su peso y luego que?. Hoy día lo que realmente hace que una web pese son las imágenes y el resto de elementos multimedia (principalmente flash).

No pretendo quitarle mérito a la gente que sí que lo hace, o a los que desarrollan un programa en C para automatizarlo. Me parece perfecto, pero creo que hay que ser un poco más práctico. Probablemente ni el cliente ni tu jefe sean capaces de apreciar esos detalles y por tanto estais invirtiendo un tiempo precioso en algo que muy pocas personas podrán valorar. Digo este desde la voz de un autónomo que se frusta cada vez que intenta explicarle a un cliente que "que la página tenga un diseño bonito" no es todo.

Me gustaría repetirlo porque no quiere ofender a nadie, de verdad, creo que las personas detallistas y perfeccionistas juegan un papel importante a la hora de desarrollar proyectos de alto nivel, pero creo también que muchas veces no hay que perderse en los detalles.

Un saludo a todos.

[nedrek]

En mi website esa compresion no pasa del 10% de compactacion en (X)HTML y un 20% en CSS.

Ejemplo CSS: Código CSS principal

Ejemplo Java: Código Javascript principal

Una ventaja es que junto literalmente todos mis CSS y Javascript, de manera que en vez de solicitar 13 archivos el explorador sólo solicita 2, y eso SI que es un incremento grande de velocidad.

Mirando la diferencia de carga antes de aplicar este método la carga total eran unos 11 segundos, y ahora no pasa de 4.

La razón principal es que la carga en el navegador, sobretodo en Internet Explorer, no depende del tamaño, sino tambien de la forma de escribir el xhtml y el css (al margen de la complicacion que tengan las paginas) y de la cantidad de solicitudes que haga la página. Por lo tanto, cualquier explorador leerá más rápidamente el código que generan mis páginas. De todas formas, es más bien un capricho personal y un gusto por lo delicado.

Iniciado por Mikmoro

Personalmente no me gusta nada esto porque no hay forma de leerlo ni siquiera para quien lo ha hecho. Y alguien dirá: "es que el desarrollador guarda una copia sin compactar", ah, pues muy astuto, pero cuando actualice algo tendrá que hacerlo dos veces.

¿Si te dijeran que podrías ganar hasta... 0,6 segundos, lo harías?

El desarrollador soy yo:

Se realiza por php automáticamente cuando el cliente solicita la página del servidor. Es un método personalizado que uso en proyectos. Por lo tanto, a nivel programador trabajo con las páginas normalmente y SOLO una vez.

Si alguien desea ver mi codigo "sin limpiar" por alguna razon en especial, que me lo diga, pero el sistema de compresion no es libre.

La compresion gzip es otro aspecto, pero que sólo veo necesario usar en cargas xhtml de más de 20kb..

[Mikmoro]

Tienes razón, si lo realizas con php cada vez me parece bien y efectivamente no tienes el problema de edición que relataba, pero... ¿has ganado 7 segundos con la compresión (de 11 a 4)? Yo diría que tienes que tener otro problema, o tus archivos pasaban de 1 mega antes de comprimir, sino, me parece casi imposible. Yo cojo un html cualquiera, por ejemplo el que he usado para las competencias de css recientemente, que dice tener 9ks. Si usas algún sistema de contar caracteres dice: caracteres con espacios: 4.779 b; sin espacios: 4.007 b (no uso comentarios), es decir, en un archivo que ocupa en disco 9ks pero en realidad tiene 4,7 en caracteres, el ahorro es de 772 bytes, es decir, menos de 1kb, por lo que la diferencia de carga no la mide ni la nasa .

Imagino que tienes unos archivos y scripts gigantes, porque si no, no me explico esos 7 segundos, a no ser que tu aplicación php haga alguna otra optimización que desconozco.
Tendría que acceder vía ping al archivo comprimido y sin comprimir para comprobar que puedes ahorrar 7 segundos quitando comentarios y espacios en blanco.

Pero en fin, sólo era una apreciación personal. Si tú lo has conseguido, enhorabuena. Quizá un día cambies de opinión y liberes ese código.

Mikel.

[salvador86]

Hola Nedrek quieres de decir que si por ejemplo tengo las siguientes 4 intrucciones:

.contenedor {
margin:0px 0px;
padding:0px 0px;
width:780px;
background:url(../imagenes/borde-der1.gif) right repeat-y;
}
#est-programas {
background: url(../imagenes/img-programas.gif);
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
width:780px;
height:44px;
text-align:right;
}
#js-idioma {
margin:0 0;
padding:0px 0px;
text-align:left;
float:left;
width:220px;
}
#js-programa {
margin-right:5px;
text-align:right;
padding-top:12px;
}

Al compactarlo según tu ejemplo "Código CSS principal" en vez de llamar 4 instrucciones, ¿los va a llamar a los 4 como si fueran solo 1? por que estaran en una sola línea.

Entiendo que "compactas" tus css y js como producto final una vez terminado tus proyectos, pero hay una manera o un programa que te genere esa compresión de caracteres pues tu dices:

Se realiza por php automáticamente cuando el cliente solicita la página del servidor

O ¿solo recomiendas hacerlo cuando las paginas son PHP?

Y a que te refieres que "el sistema de compresión no es libre".

Y ¿me recomiendas utilizar La compresion gzip cuando mis XHTML pesen más de 20kb?

Si deseo hacer esta compresión basta con juntar las líneas de código en una sola o ¿utilizas algo más que desconocemos?

Gracias por contestar esta duda.

[salvador86]

hola OOsiete me podrias decir el nombre de ese programa que genera esta compresión, para probarlo, muchas gracias y si tienes un link para bajarlo si es de licencia libre. Gracias

[00siete]

Iniciado por salvador86

hola OOsiete me podrias decir el nombre de ese programa que genera esta compresión, para probarlo, muchas gracias y si tienes un link para bajarlo si es de licencia libre. Gracias

Si. El programa se llama JSMIN, y debo aclarar que yo principalmente lo uso para ofuscar (aunque se que es una ofuscación muy simple) el código javascript, más que para comprimirlo; y como comentaba nedrek, yo también junto el contenido de varios ficheros .js sin comprimir en un sólo fichero .js ofuscado y comprimido.

En la siguiente página puedes encontrar versiones del mismo, en C, en Perl, Javascript, Java, Python, PHP, ... -> JSMIN

[asinox]

no voy a leer todos los post

pero empieza por maquetar con CSS + xHTML sin tablas y si puedes colocar un texto no uses una imagen, usa las etiquetas que estan para eso como <h1> etc.

Saludos

[00siete]

Iniciado por asinox

no voy a leer todos los post

pero empieza por maquetar con CSS + xHTML sin tablas y si puedes colocar un texto no uses una imagen, usa las etiquetas que estan para eso como <h1> etc.

Saludos

Pues deberías, pues aunque tengas razón, tu mensaje se aparta de lo que se está discutiendo.
Se puede maquetar con CSS sin tablas y aún así querer comprimir los ficheros .css, etc.