Foros del Web » Creando para Internet » HTML »

Compactar nuestra pagina web, recomendaciones

Estas en el tema de Compactar nuestra pagina web, recomendaciones en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/05/2008, 12:24
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Compactar nuestra pagina web, recomendaciones

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
Cita:
<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.
Cita:
<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.

Última edición por salvador86; 29/05/2008 a las 13:13 Razón: especificar
  #2 (permalink)  
Antiguo 29/05/2008, 12:32
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 9 años, 8 meses
Puntos: 2526
Respuesta: Compactar nuestra pagina web, recomendaciones

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!
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #3 (permalink)  
Antiguo 29/05/2008, 17:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Compactar nuestra pagina web, recomendaciones

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.
  #4 (permalink)  
Antiguo 30/05/2008, 00:54
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Compactar nuestra pagina web, recomendaciones

Cita:
Iniciado por Mikmoro Ver Mensaje
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!
  #5 (permalink)  
Antiguo 30/05/2008, 02:39
 
Fecha de Ingreso: marzo-2008
Mensajes: 306
Antigüedad: 9 años, 8 meses
Puntos: 6
Respuesta: Compactar nuestra pagina web, recomendaciones

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.
__________________
Pop & Rock Bands
Pop Music Stars
  #6 (permalink)  
Antiguo 30/05/2008, 07:15
 
Fecha de Ingreso: mayo-2008
Ubicación: Andalucía
Mensajes: 78
Antigüedad: 9 años, 6 meses
Puntos: 8
Respuesta: Compactar nuestra pagina web, recomendaciones

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.
  #7 (permalink)  
Antiguo 30/05/2008, 08:57
 
Fecha de Ingreso: abril-2008
Ubicación: -
Mensajes: 156
Antigüedad: 9 años, 8 meses
Puntos: 5
Respuesta: Compactar nuestra pagina web, recomendaciones

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.

Cita:
Iniciado por Mikmoro Ver Mensaje
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..

Última edición por nedrek; 30/05/2008 a las 09:21
  #8 (permalink)  
Antiguo 30/05/2008, 10:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Compactar nuestra pagina web, recomendaciones

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.
  #9 (permalink)  
Antiguo 30/05/2008, 11:07
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Compactar nuestra pagina web, recomendaciones

Hola Nedrek quieres de decir que si por ejemplo tengo las siguientes 4 intrucciones:
Cita:
.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:
Cita:
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.
  #10 (permalink)  
Antiguo 30/05/2008, 11:10
Avatar de salvador86  
Fecha de Ingreso: enero-2008
Ubicación: Guadalajara- Mexico
Mensajes: 467
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Compactar nuestra pagina web, recomendaciones

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
  #11 (permalink)  
Antiguo 30/05/2008, 11:28
 
Fecha de Ingreso: marzo-2008
Mensajes: 306
Antigüedad: 9 años, 8 meses
Puntos: 6
Respuesta: Compactar nuestra pagina web, recomendaciones

Cita:
Iniciado por salvador86 Ver Mensaje
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
__________________
Pop & Rock Bands
Pop Music Stars
  #12 (permalink)  
Antiguo 30/05/2008, 19:06
Avatar de asinox  
Fecha de Ingreso: enero-2002
Ubicación: Santo Domingo
Mensajes: 2.712
Antigüedad: 15 años, 10 meses
Puntos: 6
Respuesta: Compactar nuestra pagina web, recomendaciones

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
__________________
www.dataautos.com
  #13 (permalink)  
Antiguo 31/05/2008, 01:48
 
Fecha de Ingreso: marzo-2008
Mensajes: 306
Antigüedad: 9 años, 8 meses
Puntos: 6
Respuesta: Compactar nuestra pagina web, recomendaciones

Cita:
Iniciado por asinox Ver Mensaje
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.
__________________
Pop & Rock Bands
Pop Music Stars
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 11:03.