Portada > Artículo > Comentarios

Reduce el peso de tu site

09-02-2003 - César Martín

Resumen: Páginas mas ligeras incrementan el numero de páginas vistas; Elimina las imágenes y los banners de autopromoción; Aprovecha lo que el sistema te ofrece:botones, colores, tablas, fuentes; Se flexible con las limitaciones del html.

Leer artículo »

Comentarios

Hablar, escuchar, debatir... Alzado es un espacio de conversación abierto. Algunos consejos:

Procura que tus comentarios sean relevantes y relacionados con el artículo
Escuchar es una virtud. Lee los comentarios anteriores para no repetirte
Pon un título a tu mensaje aue permita identificar su contenido
Usa un tono respetuoso. Los comentarios inapropiados o en tono ofensivo podrán ser editados o eliminados.

#1 Combinar Por Ricardo

Combinando las hojas de estilo, una adecuada compresión de las imágenes seleccionando el mejor formato, y un servidor web con compresión gzip puede reducirse el tiempo de carga hasta un 80% para una página con la misma riqueza gráfica

Enviado 18-02-2003

#2 el gzip Por cesar (autor del artículo)

Ricardo, creo que tu comentario es muy acertado, pero no se que tiene que ver el gzip con la reducción del peso de cara al usuario. El gzip se puede usar en el back, pero no se como lo aplicarías en el front. Podrías comentar alguna idea?

Enviado 18-02-2003

#3 Bajando de peso Por Zack

Debo admitirlo, soy un fanático a la hora de reducir peso, tanto en imágenes como en código, pero es una satisfacción muy grande ver como un archivo HTML de 16KB pasa a 7KB.

En las imágenes pasa lo mismo, he logrado compresiones realmente excelentes (Image Ready y paciencia por delante) en archivos de 480KB a 50KB, y sin notar diferencia, o la mínima si comparo original y resultado.

Asimismo, un BUEN USO de CSS reduce notablemente el peso final y agiliza la tarea de actualización o rediseño, y mucho más si se combinana varias hojas de estilo.

Enviado 19-02-2003

#4 Gzip no es lo mismo que Zip Por Carlos

Respecto al comentario de Ricardo, no comprendo que pinta Gzip a la hora de servir páginas.

Desde mi punto de vista, Gzip es lo mismo que ARJ, Winrar, y el popular Winzip: comprimen archivos y te lo sirven en un formato comprimido específico.

Me estoy perdiendo algo?

Enviado 21-02-2003

#5 Explicando GZIP Por Jose Moncada

El gzip se puede usar de forma Server-Side (Claro, el host donde hospedemos nuestra pagina tiene que soportarlo). Sirve para comprimir paginas PHP y ser descomprimidas al momento que el usuario accede a ellas. No creo que esto tenga que ver con el articulo, ya que (en mi opinion) esto solo sirve para ahorrarnos espacio en MB en el disco del server, pero no va a ser mas rapida la carga del site para el usuario.

Enviado 25-02-2003

#6 No sería realmente más lenta? Por Carlos

Pregunto porque desconozco este tema: En el caso de la compresión server side de páginas PHP con GZIP, realmente el único beneficio, no sería de ahorro de espacio en servidor?

Es decir, si nadie pide nuestras páginas estamos ahorrando espacio ya que ocupan menos que estando descomprimidas.

La segunda parte, y sigo preguntando,... no estaremos RALENTIZANDO el servicio de páginas al tener que realizar un paso previo al servicio? (DESCOMPRESION)

Enviado 25-02-2003

#7 Velocidad en PHP Por Karl

Para el tema de rapidez y PHP, funciona muy bien Zend Optimizer, se instala en Apache y comprime las páginas PHP en un lenguaje similar al código máquina lo que hace más rápida la ejecución.

Enviado 25-02-2003

#8 Es mejor crear 3 páginas de 10kbs que 1 de 30kbs Por Sal Atxondo

Pienso que el decir "mejor 3 páginas de 10K que una de 30K", es jugar muy fuerte. Recordemos la palabra mágica, "depende" de para que necesites dicha página.
Si quieres un listado de peliculas de cine o de restaurantes, quizá se prefiera un gran listado que ir clicando en la paginación, hasta encontrar lo que buscas (que muchas veces no sabes exctamente que es).
Solo creo que el comentario de "3 de 10K mejor que 1 de 30K" -que ojo, en algunos casos puede ser correcto- como un axioma, es innecesariamente arriesgado.

Enviado 28-02-2003

#9 Profundidad Por Yago

Estoy de acuerdo con Sal Atxondo, "mejor 3 páginas de 10K que una de 30K" es una afirmacion demasiado rotunda y peligrosa. Muchas paginas web necesitan esa pagina de 30K porque hay veces que tienes que presentar la informacion solo de una.

Ademas existe el grave peligro de la profundidad de la pagina web. La gente no tiende a bucear en tu web. A partir del tercer nivel la gente suele ir algo perdida, por muchas "migas de pan" que pongas.

Pero volvemos a lo de siempre depende del publico objetivo de tu web. No es lo mismo una web para programadores de PHP que una web para gente de la tercera edad.

En muchas casos es mejor tener paginas ligeras (por ejemplo que les expliquen eso a marca.com que cada dia es mas lenta) pero no es un dogma de fe.

Enviado 13-03-2003

#10 Me sigue convenciendo la pagina de 10kbs Por Cesar

Otro argumento a favor (a parte del peso, etc..) es que páginas más breves se indexan mejor para usuarios "pro". Quiero decir, el usuario normal busca 1 o 2 terminos, un usuario pro buscará 3 o 4. Si esto lo haces en un site con páginas muy largas te frustras por que casi todas las páginas contienen casi todos los términos siendo bastante dificiles de scanear. Mientras que páginas más breves ofrecen el modulo de información clave sin marear la perdiz. No digo que esa pagina sea corta pero que no metamos mas contenido en paginas que no lo necesitan o que no tiene relación.

Enviado 14-03-2003

#11 Compresión HTTP (gzip explicado) Por Juan Pablo Gil R.

El primero de estos comentarios aún no ha sido explicado. Algunos servidores pueden utilizar una tecnología llamada compresión HTTP, que NO ES lo mismo que la utilidad GZIP para comprimir al estilo WinZip.

La compresión HTTP trabaja básicamente de esta forma:

- toma lo que está por salir de tu servidor hacia el cliente (después de procesar PHP, ASP MySQL o lo que sea)
- lo comprime para su periplo por el ciberespacio
- el navegador es quien lo descomprime y muestra como era originalmente.

Personalmente lo utilizo en servidores Apache con PHP con excelentes resultados, y lo descubrí estudiando el código fuente que viene en el phpBB. Pero también está disponible en otros servidores.

Enlaces que explican mejor esto:

HTTP Compression Speeds up the Web
http://www.serverwatch.com/tutorials/article.php/1127431

Habilitar la compresión HTTP (IIS)
http://www.pmuc.udec.cl/iis/htm/core/iihttpc.htm

Enviado 20-03-2003

#12 Y no olvidemos maquetar con CSS Por Luis Villa

Si nos ponemos a maquetar con CSS como hemos hecho en Alzado, reducimos el peso de cada página casi un 70%.

La solución tradicional, con tablas, es ruidosísima a nivel de código.

Enviado 20-03-2003

#13 ¿maquetas con css? Por Adan

No tengo mucha experiencia diseñando, aunque he hecho alguna paginilla sencilla. No he entendido el comentario último de Luis Villa sobre maquetar con CSS, cuando añade que "La solución tradicional, con tablas, es ruidosísima a nivel de código". ¿Puede usarse CSS para sustituir las tablas? ¿Cómo? Yo creía que tan sólo te permitía crear estilos de texto y similares.

Enviado 21-03-2003

#14 Maquetar con CSS Por Luis Villa

Hola Adán...

Estás ante un ejemplo. Mira el código fuente de este sitio a ver si ves algun "table", "tr" o "td".

La apariencia (Formato, ubicación) está en las CSS.

;-)

Enviado 21-03-2003

#15 CSS para Maquetar páginas web Por Cesar

Si miras la css de alzado.org podrás ver como se usan los atributos de la css para maquetar.

Por ejemplo:
#top2 {
FLOAT : none;
WIDTH : 760px;
BORDER : #000 0px solid;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BACKGROUND: url(../img/logo3.jpg) #ac9221 no-repeat;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
BORDER-BOTTOM: #000 4px solid;
HEIGHT: 124px;
}

es el atributo que define la cabecera de alzado. Como ves al meterlo todo dentro de la CSS te deja un codigo mas limpio y sin tablas.
Alzado.org no presenta ni una tabla para maquetar contenido. Creo que se usa alguna en alguna pagina en concreto, pero la maquetacion global del site es pura CSS.

Te ahorras peso, el site se indexa mejor y es mas facil de mantener ya que puedes cambiar la apariencia global del site desde un solo documento.

Enviado 21-03-2003

#16 Problemas CSS Por Edu

Hasta hace muy poco en mi empresa tenía que elaborar los diseños web 100% compatibles con Netscape 4.x. Un 2% de nuestros usuarios continúan usando esta plataforma. El uso de las tablas no es una manía, sinó una necesidad en muchos casos.

¿Habéis probado esta página (www.alzado.org) en Netscape 4.x?

Las tablas de imágenes (como las que genera ImageReady) bien diseñadas y optimizadas siguen siendo la opción más válida para quien busca un compromiso compatibilidad/peso.

Enviado 24-03-2003

#17 Alzado en Netscape 4 Por Luis

Gracias Edu!!

Sí, lo hemos mirado y descartado. Nos basamos en Mozilla.

Está claro que las Tablas son buenas y seguras para maquetar, de hecho, nos ha traido muchos quebraderos de cabeza.

Es muy complicado lograr el mismo efecto en Mozilla, Explorer, NS6 y 7 y otras plataformas.

De hecho el defectuoso Explorer 5.0 genera sus propios y novedosos problemas.

Lo conservador hubiera sido utilizar tablas a pesar del peso de las páginas y su complejidad de maquetación, pero hay que evolucionar y sobre todo TENIENDO EN CUENTA LOS ESTANDARES.

Te pongo ejemplos de sitios evolucionados hechos con XHTML:

http://www.wired.com/
http://www.37signals.com/
http://www.Alistapart.com/
http://www.zeldman.com/

Validan por seguir estándares generales, no los de un fabricante concreto en una etapa concreta y ya superada como es el caso de Netscape Communicator en su versión 4 de la que han renegado en cuanto han sacado una nueva versión al mercado.

Enviado 24-03-2003

#18 No desarrolles para versiones 4.x Por Cesar

Sencillamente no desarrolles para versiones 4.x No merece la pena, se pierde mucho el tiempo, las limitaciones te pueden pasar una factura muy alta a largo plazo.

Netscape 4.x es muy malo. Mejor tirarlo de la lista de navegadores a soportar.

Enviado 24-03-2003

#19 Full CSS usando tablas (!) Por Juan Pablo Gil R.

Estoy muy de acuerdo con la migración hacia diagramación 100% CSS, de hecho tengo bastantes buenas experiencias con eso. Usando hojas de estilo es posible escapar a muchas más restricciones del HTML que usando tablas anidadas. ¡Me declaro purista y fundamentalista en este sentido!

(como ejemplo de flexibilidad con CSS ver http://www.Jeinstein.com/ )

Sin embargo, no dejo de encontrarle algo de razón a Edu en lo que respecta a la compatibilidad 4.x. Muchas veces esto viene por el lado de los clientes principalmente, más que de los usuarios del sitio. Si tu cliente es una corporación con una Intranet NO PUEDES utilizar la idea de fondo de Zeldman que se resume en la frase oculta de su sitio:

"This site's design is only visible in a graphical browser that supports web standards, but its content is accessible to any browser or Internet device."

La razón es que sería muy ridículo que la corporación reciba un website no compatible con sus propios PC (a veces 486 que no soportan IE5, ni qué hablar de Opera). Los estándares son fundamentales para el desarrollo futuro de la web, pero no olvidemos solucionar los problemas actuales.

Uno de los mayores problemas que surge al ver un sitio con navegadores viejos es la posición de los menús, especialmente los verticales. En alzado.org el maquetador (supongo que César) ubicó el menú al principio.

La mejor solución que he encontrado es una especie de tregua con las tablas, utlizándolas sólo para hacer ciertas maquetaciones fundamentales del sitio web, por ejemplo, 1 encabezado, 2 columnas, 1 pie de página. Así, el empleado del PC más viejo de la empresa ve "cierto" diseño aplicado al sitio que está viendo, pero que le puede ayudar drásticamente en la usabilidad del mismo.

Y todas las tipografías, colores, barroquismos y demases exacerbaciones de artista los hago sólo con CSS, y el que tenga ojos 5.x que vea.

Saludos, Juan Pablo
http://www.huinca.net/

Enviado 24-03-2003

#20 Alzado en version NS4.x Por cesar

Esta claro que te quedas fuera de muchas cosas, pero la solucion de una unica tabla es buena.

Alzado en una version 4.x se ve asi: alzado_ns4.gif

Enviado 24-03-2003

#21 Evolución y compromiso Por Edu

Aunque puse el ejemplo de alzado.org para mostrar la incompatibilidad, esto no quiere decir que sea una decisión equivocada, más bien al contrario, ya que el target de una web como ésta son profesionales multimedia que no tendrán ningún problema en visionarla.

Nosotros, usuarios avanzados, tendemos a pensar que todo el mundo está continuamente actualizando y mejorando sus equipos, cuando muchos ni entienden ni comparten esa necesidad. Por eso veo imprescindible tener claro el perfil de usuario, sin que eso signifique que nuestras webs no puedan evolucionar e incorporarse a los nuevos estándares (sólo que requerirá más trabajo por nuestra parte).

Como comentaba en el anterior mensaje, es ahora cuando en mi empresa hemos dejado de soportar a los usuarios de Netscape 4 y empezamos a incorporar con más libertad maquetación con CSS, aunque, si el resultado es el mismo, ¿debemos renunciar a la compatibilidad?

Enviado 25-03-2003

#22 Netscape 4 es una aborto Por Karl

Los estandares CSS1 en que se basa Alzado son del año 96!! Netscape y Cía tiraron por su cuenta separándose de las recomendaciones.

Hay gente que continúa usando un navegador como NS4, salido al mercado en el año 97. Un software de 5 años!! (Apuesto a que tienen versiones del Office más actuales!!).

La propia gente de Netscape ha reconocido que les ha hecho mucho daño, y ha evolucionado hacia los estándares y entre ellos está un tema básico que el W3C está vigilando, la accesibilidad.

Te recomiendo la lectura de este artículo de Jeff Zeldman, de Alist apart.
To Hell with Old Browsers

Enviado 26-03-2003

#23 Truquillo barato Por Maelmori

Un truquiillo tonto al que quizás podais sacar algún provecho, basado en aprovechar el formato de imagen GIF.
El formato GIF (GIF 89a) utiliza el algoritmo de compresión llamado run length, que se basa en ir tomado los píxeles en filas, horizontalmente. Si encuentra tres del mismo color en fila escribe (3 azules), si despues encuentra seis de color amarillo escribe (6 amarillo) , y así por cada fila. Internamente, su representación sería algo como "3 px azules, 6 px amarillos, 12 px naranjas, 1 negro... siguiente fila... 5 px azules, 8 px rojos, 9 px naranjas... Siguiente fila "... y así.
Esto implica que, al utilizar un gradiente, si este gradiente es horizontal, y no vertical ni diagonal, ante el mismo número de colores y tamaño del gráfico y todo y todo ¡hop! ¡la imagen pesa menos! Y esto es así por que, internamente, en el GIF pone (126 px azules. Siiguiente fila. 126 Px azules más claritos. Siguiente fila.... 126px azules un pelín más claritos....)

Saludetes

Enviado 26-03-2003

#24 Programa requerido Por javierfut

Existe algún programa que permita reducir considerabelmente el peso de las imágenes y html?
Por favor espero respuestas cuanto antes

Gracias de antemano

Enviado 09-02-2004

#25 Ayuda para tener compatibilidad de Fuentes Por ZAC

Necesito conocer como hacer para que todos los usuarios que visiten la pagina web que tengo con un tipo de letra la puedan apreciar, porque al parecer si no tiene ese tipo de letra la cambia por otra difernte a la mia y el diseño se pierde..

Ah tambien como reducir el tamaño de los Applets en Java para una maquina si es recomendable...y las medidas estandar para la resolucion de la pagona...

GRACIAS POR TODO..

Enviado 14-04-2004

#26 Pensemos en la evolución de Internet Por Darwin

Estoy de acuerdo en casi todo lo que se ha dicho sobre aligerar las páginas web. Pero...
La velocidad se ha incrementado mucho y en el futuro se incrementará más. Páginas "pesadas" hoy no lo serán en el futuro. Recuerdo cuando empecé en esto de internet, no hace 8 años, con un moden de 14Kb que no daba ni 2 reales. Hoy dispongo de una conexión de 640Kb. Sé que no todo el mundo los tiene, pero el futuro va por ahí.
Por lo tanto, pienso que una WeB compleja hay que diseñarla con visión de futuro y no obsesionarse con el "peso". Pues "lo pesado hoy será ligero mañana". Cuando esto sea así, nos dará una inmensa pereza rediseñar la web.
Por lo tanto, lo mejor, a la hora de construir la WEB, es buscar un compromiso entre un presente lento y un futuro prometedor.

Enviado 05-04-2005

#27 Miremos hacia atrás Por Fernando Gude

Si nuestros colegas diseñadores del primer mundo (especialmente algunos paises asiáticos) tuvieran en mente esa misma idea ya hace algunos años que nosotros nos desesperaríamos al entrar en sus webs... de igual modo me gusta que mi sitio lo pueda ver del mismo modo yo (que tengo 3MB de conexión) como mi primo que a unos cuantos miles de kms de aquí sigue usando su modem 56KB. Así que mientras haya desigualdades sociales habrá "años de diferencia", tecnológicamente hablando, entre regiones. No olvidemos como estábamos aquí hace unos poquitos años ;)

Enviado 22-06-2005

#28 y si hablamos de macromierda ? Por TÞCaÐÞ157

y si hablamos de macromierda, con su querido flash y las paginas 100% flash con xml, php y mysql a la hora de trabajar sobre estilos ... ?
ahora con el boom del flash 8 y los componentes se puede trabajar sobre plantillas de estilos version "flash"
creo que saber codear en html hace que una web sea sencilla pero impactante visualmente hablando, el ejemplo practico de astalavista.box.sk al contrario de hablar de paginas que pueden llegar a ser igual de impactantes al estar en un 100% flash, tengamos en cuenta que el plugin de flash hoy en dia es soportado por la mayoria de los browsers
comentarios a sromero(at)voie(dot)com(dot)ar

Enviado 23-09-2005