Sobrepeso (en sitios web, no en personas)

Logotipo de Don Limpio y XHTMLY nos pasamos 5 años gritando a 4 vientos: utilicen estándares web. Es bueno para esto, es bueno para aquello y los sitios pesan menos. Están bien los estándares, en efecto, invitan a realizar sitios muy livianos en peso. Para el lector casual, cuando los autores de sitios web hablamos de “peso” en la web, nos referimos a la cantidad de kilobytes de código que descargamos a nuestra máquina para poder verla, cuantos más kilobytes tenga la página, más tardará en descargarse y ejecutarse. Esto hace que el peso de una página sea uno de los valores más importantes para acelerar la visualización y la utilización de la propia web.

Bien, aunque muchos periódicos se cuelgan medallas por adoptar estándares –y de los cuales felicito por dicha opción– éstos pecan de sobrepeso. Es tal la sorpresa que me llevo, que incluso nunca me lo había imaginado. Todo lo descubrí estudiando y realizando una estadística entre sitios de gran calibre y la cantidad de peticiones HTTP que tienen por página. Es bien sabido –aunque en círculos bastante minoritarios– que los sitios que más rápido van no son aquellos que tienen docenas de peticiones HTTP, aún si están programados con estándares y siguiendo una estricta reserva de elementos, no. Los sitios rápidos son aquellos que, sirven las peticiones HTTP justas, ni de más, ni de menos. Pero éste no es el único factor, pero es uno de los más importantes. Para darles un ejemplo simple: Un sitio estándar que pesa 60KB entre documento HTML y sus 30 iconos tardará más en cargar que el mismo sitio pesando 60KB y una grilla que contiene los 30 iconos todos juntos.

Al realizar las pruebas podemos observar la cantidad de milisegundos que hay en cada petición que hace el usuario al servidor cuando quiere ver una página: el servidor busca y envía imagen por imagen, archivo por archivo, traduciendo todo en una cantidad de tiempo nada despreciable. De hecho, os sorprendería saber el ahorro que habría si supiéramos dónde y cómo podríamos atacar esto. Uno dice: pero mi web pesa 60KB, sí, 60KB no es nada para descargarse, pero si esa insignificante cantidad se realizara con 50 peticiones HTTP que generan un tiempo de espera de unos 5 segundos a unas míseras 5 que se hacen en 450ms encontraríais una prominente mejora.

Este tema me trajo una obsesión, a tal punto que ahora ha cambiado mi forma de ver y emprender el desarrollo de cada proyecto. Analizo bastantes cosas y a partir de ahí comienzo a construir. Busco las mejores formas de, sin perder la semántica que me ofrece el código HTML poder obtener páginas con poquísimas peticiones HTTP, resultando en sitios rápidos que generan poco esfuerzo al servidor.

Volviendo al tema del sobrepeso, me sorprendió que muchos periódicos online descorcharan champagne Pommery por utilizar estándares web, pero a la vez, cayeran en un abuso total de los recursos y de las buenas prácticas siendo así un problema para el usuario final: nosotros.

Para ampliarles el panorama, de los periódicos online que he revisado ninguno se mantiene en un peso inferior al de los 500Kb. La media ronda el megabyte de datos transferidos llegando a casos de 3Mb. Increíble. Mostraré las perlas únicamente.

El listado

Aquí tenéis una lista de los periódicos online de España más conocidos y la relación de peso y peticiones HTTP que tienen:

Periódico Peso total Peticiones HTTP Prom. de carga
El País 970.28Kb 149 11s
El Mundo 549Kb 156* 5s
ABC 563Kb 149 6s
La Vanguardia 1.98MB 181 19s
El Periódico 650Kb 142 10.40s
La Razón 1.59MB 183 33s
Público 1.64MB 199 15.46s
La Voz de Galicia 931Kb 205 27.46s
20minutos 3.300Kb 272 48.43s

Los datos fueron sacados de pruebas personales. Para darles una idea, se visitaron las webs con un script cada 5 minutos, con la caché del navegador desactivada y recopilando todos los datos, desde las peticiones HTTP hasta el tiempo de carga y la transferencia total de datos del servidor original del periódico e incluso, de aquellos CDN que utilizan algunos. También las distribución y uso de recursos: peso en documentos, scripts, hojas de estilo, imágenes y otros. Algunos datos les parecerán raros, por ejemplo, que el periódico La Vanguardia y La Razón vayan más o menos por la misma media pero uno le saque una diferencia notable de segundos al otro. Aquí entran varios factores, como los servidores alternativos para servir contenidos tipo: publicidad, scripts, imágenes que aceleran y distribuyen el trabajo y a la vez sirven como caché. Además, también influye mucho cómo utilizan algunos scripts, éstos retardan la carga de la página, generando la sensación de “espera falsa” en los usuarios. Pero esto no se queda aquí, si esto les parece ya exagerado, vamos a otros países. En la lista número dos, la Argentina:

Periódico Peso total Peticiones HTTP Prom. de carga
Clarín 1.20MB 162 19s
La Nación 874KB 155 52.62s
InfoBAE 647KB 182 39.5s
Ámbito Financiero 714KB 113 32s
Página/12 423KB 98 11.2s

Los usuarios residentes en Argentina tendrán tiempos de respuesta diferentes a los míos, que estoy localizado en España, igualmente la diferencia es notoria. Hablamos de experiencia del usuario, y da igual si está en la China o en Villa Fiorito.

Y si miramos 3 sitios de noticias importantes de los Estados Unidos, podemos encontrar perlas:

Periódico Peso total Peticiones HTTP Prom. de carga
New York Times 2.28MB 164 10s
ABC News 1.06MB 200 19.6s
USA Today 519KB 122 12.5s
CNN 709KB 170 32s

Sitios como Menéame, Fresqui y Digg tienen su caudal de tráfico. En general, este tipo de sitios generan una actividad efervescente en la comunidad, haciendo que se generen miles de peticiones, votaciones, etc. Es también, un buen caldo de información para ver el tema optimización:

Sitio de noticias Peso total Peticiones HTTP Prom. de carga
Meneame.net 174KB 53 2.1s
Digg 448KB 76 7.42s
Fresqui 388KB 69 6.5s

Miramos algunos blogs populares, y nos llevamos sorpresas también. Algunos casos han llegado ya a la señal de “adelgazar”.

Blog Peso total Peticiones HTTP Prom. de carga
Microsiervos.com 481KB 53 4.9s
ALT1040 2.10MB 148 22s
Denken Über 486.65KB 24 8.1s

Resumen

Luego de mirar me doy cuenta de la brutalidad de algunos casos. Incluso mirando de cerca el asunto, hasta se puede detectar qué es lo que hace tardar más a la página. En general, el primer problema es la cantidad de imágenes, la fragmentación que genera una página web. Muchos sitios dan la sensación de ser minimalistas, pero por detrás son todo lo contrario: un enjambre de imágenes y efectos. Estas imágenes son lo que, en general, más milisegundos de trabajo contabilizan en una petición. Los hay con pocas, los hay con muchas. Luego están los scripts y las hojas de estilos. Muchos sitios utilizan 2 o 3 hojas de estilos, pero hay algunos que se van de lo normal, llegando a tener unas 12. Los scripts son lo más grave de todo, algunos scripts generan un tiempo de espera o simplemente cargan más datos al voleo haciendo la espera más larga.

La cantidad de información por página es excesiva. Encuentro las páginas de inicio de muchos sitios de noticia sobrecargada de información no relativa a notas del diario, me recuerdan a los portales del año 97, si me piden opinión. Hay excepciones, claro. Las hay. Pero en una mayoría de casos, se respira el aire “te damos de todo para que estés contento”, cuando yo creo que tanto yo como otros usuarios lo tomamos distinto.

Creo que hay ponerles a dieta.

18 Respuestas a la entrada “Sobrepeso (en sitios web, no en personas)”

Te invito a una comida si haces la misma prueba con el Menéame, me interesaría ver cómo se comparan los números (fuimos muy cuidadosos en eso, además de los estándares, aunque no nos atrevemos a unificar imágenes, mucho curro para poca ganancia relativa :-) )

Tienes razón con la frase: “te damos de todo para que estés contento” Nunca me expliqué porqué esa manía de recargar tanto que luego lo único que genera es una sensación de “me pierdo algo” cuando cambias de página. Debe ser que siguen pensando en papel y que como la tinta cuesta poco –menos que el papel– menjor llenar cada página.

PS: me parece que los sripts/imágenes de estadísticas externas son los que más tardan :-(

Yo también me apunto a que hagas el test en spaniards.es, a ver que tal sale la web parada.

Yo creo que hoy día los periódicos se encuentran en la encrucijada de ofrecer la máxima información posible sin desbordar al lector. Está claro que en los buscadores pueden coexisitir ambas alternativas: portal cargado, como Yahoo, o simple, como Google. Pero un periódico con una página principal como la de Google no tedría mucho futuro (¿o quizá sí?)

Leer el periodico desde el movil es desesperante y eso sin hablar de los interstitial

Ya que estamos puntualizando entonces hay que aclarar que UNA pagina no es, en conjunto, mas pequeña si se siguen los estándares. De hecho todo lo que forma UNA página es más grande si se siguen estándares que si no (ya solo el que se requieran más atributos, las etiquetas suelan ser mas grandes, etc. ya suma). El usar estándares hace que EL CONJUNTO de páginas de un sitio sea mucho menor.

Utilizar estándares facilita la carga (menos quirks, menos esfuerzo del navegador) y aprovecha a enviar parte de la carga adonde puede ser cacheada (javascript, css, etc.). Dependiendo del sitio web a partir de la segunda o tercera página el peso total va a ir disminuyendo comparado con el sitio antes de estandarizar.

Esto es lo que es y no es discutible, son matemáticas puras. “span class=emphasis” es mas largo que “i” y “strong” es mas largo que “b”. Es así por diseño. Se sacrifica tamaño a cambio de unificación y separación de esfuerzos.

Sobre lo que dice Ricardo si, los scripts de estadísticas externos son siempre los que más se pasan. Google Analytics, Mybloglog, Hittail, etc. Esto es porque estos hacen mucho malabarismo para sacar toda la información que recolectan y porque el navegador requiere un cambio de contexto al ir y buscar y ejecutar y responder a un script en otro dominio. En wordpress llevo un tiempo mirando el plugin cystats que a mis ojos guarda tanto o más información que, por ejemplo, google y no me parece una mala alternativa funcional en casi todos los escenarios que requieren estas estadísticas.

totalmente de acuerdo, y con respecto a eso que dices:
“…ahora ha cambiado mi forma de ver y emprender el desarrollo de cada proyecto”
Ha mi también me paso cuando leí un articulo que hablaba sobre como influenciaba cada petición http en la carga de la página.
Pero claro, despues de tener que explicar a mi “jefe” porque juntaba las imagens de fondo y decir que los diseños(de una página que ahora es bastante lenta) no estaban pensados en la magnitud de acceso que tendría esa web, y decirme: “3 megas no es mucho”; ya no he vuelto a hacerles el test con el firebug
gran articulo :(

Ricardo, ahí te puse las pruebas con sitios de votación como el tuyo, digg y fresqui. También puse tres blogs conocidos para que la gente tenga una idea.

Gracias Diego. Se nota la diferencia cuando te preocupas mínimamente en hacer eficiente las descargas (y yo tampoco soy un experto en eso).

Gracias Diego! Nos gusta comentar ese tema, porque le dimos mucha importancia. Es mejor para los visitantes y para nosotros visto el éxito del lugar. Menos ancho de banda, menos carga del servidor permite ahorrar mucho en hosting. Algunos lugares con menos visitas tienen incluso el cuadruple de servidores que nosotros.

La extensión Lori del Firefox dice que 62.43 KB, ahora mismo, para 38 peticiones. Posiblemente Lori cuenta los bits que llegan y no los que pinta el navegador; en menéame comprimimos.

No puedo mirar el tiempo de respuesta en este momento, estoy subiendo un par de videos a Google Video y prefiero no pararlo –Google Video falla más todavía cuando paras la subida :(

Estaría bien ver las estadísticas de los grandes foros españoles:

http://www.media-vida.net, http://www.putalocura.com, http://www.elotrolado.net, http://www.forocoches.com

Tanto en portada como en el foro, claro :P

Me da a mí que más de uno se va a llevar una sorpresa…

Bueno, yo utilice dos herramientas para contrastar. El Webkit que trae Safari te cuenta todo, incluidas las descargas de banners, etc. Te dice lo que está comprimido y lo que no, aparte. Firebug, el que usa Firefox, me dice menos datos pero en algunos casos ayuda a contabilizar.

Igualmente, al segundo clic que haga en menéame.net la descarga es rapidisima, alrededor de los 650ms. Yo creo que, si le dais un toque al tema de las imágenes chutaría todo en un segundo de promedio.Igualmente, lo que apuntó Ricardo es verdad, parte de la tardanza más que nada es de los banners y scripts que vienen fuera del dominio del sitio.

mini-d, para firebug hay una extensión creado por Yahoo: YSlow que te checkea la velocidad, te la puntua, y te dice que puntos flojean y hay que mejorar.
Te pongo un link que puede ser interesante para la optimización de un sitio: http://www.ipsojobs.com/blog/2007/10/15/cache-and-gzip-your-javascripts-and-csss-files-to-speed-up-your-site/

Justo ayer dejé un comentario en 20minutos diciéndoles que me gustaba el nuevo servidor a pedales que habían instalado. (JUASJUAS)

@eduo, tu “span class=’emphasis’” podría reducirse a un em, y aunque strong sea más largo que b, todo el churro que le meterías a un paragraph, o una etiqueta horrorosa font, hace que de por si una página xhtml+css sea mucho más pequeña en tamaño. Básicamente porque, aunque pongas class=”tal” en cada etiqueta, te ahorras todo el código que hubieras puesto duplicado si el código de formato, colores, etc estuviera en-linea.

El análisis que ha hecho Diego está bastante interesante. No ya por el dato de los tiempos de carga, ya que puede depender de mil factores como conexión, saturación del upstream, bla bla, sino por el hecho que señala de que la gente se va colgando medallas por usar estándares, cuando luego no lo hace necesariamente como debiera. El desarrollo de páginas web es algo que se debe planificar tanto como cualquier otra “aplicación”… debería diseñarse teniendo en cuenta estos factores importantísimos. Quizás con más artículos como este se empiece a valorar el trabajo de los profesionales frente al de los “profesionales”.

Y bueno Diego, no he utilizado el Webkit (no uso Safari, aunque por curiosidad, ¿también lo trae la versión Windows?), pero el Firebug de pocos datos nada, échale un vistazo últimamente. Quizás no te ordena los contenidos comprimidos de los no-comprimidos, pero sí te dice si lo está o no. En la pestaña de Net, cada elemento desplegable con sus headers y response, no sé, a mi me parece bastante info. Ten en cuenta que no he visto Webkit, así que puede que por eso me parezca tan bueno firebug ^^.

Claro que la versión para Windows también trae un inspector DOM. Aquí hay un artículo que muestra como activarlo.

Hola, me gustaría saber como poder mirar el tiempo de carga de mi web y dónde se encuentran la mayor parte de los megas de carga.
Considero que tengo una web poco cargada, pero los tiempos de espera me resultan algo largos con respecto a lo que yo creo que debería.

Las web es http://www.herzeleyd.com

Un saludo ;)

Este es un punto que siempre me ha parecido muy importante, porque por más banda ancha que uno tenga, cada archivo que signifique otro “viaje” al servidor incide directamente en el performance y velocidad de carga. Desgraciadamente el concepto de manejar gráficos por medio de una grilla y CSS es un concepto aún alienígeno para la inmensa mayoría de diseñadores del medio. Pero mientras la mentalidad de que todo mundo hoy día tira de banda ancha (falso) y por tanto estas cosas “ya no importan”, no creo que la situación vaya a cambiar mucho. Qué diferente la mentalidad de aquellos tiempos de los módems a 56k en donde cada KB de menos o de más hacía toda una diferencia. El que una página valide con la W3C no significa per se un soporte implícito y total de los estándares web.

ALT1040 es una verguenza, ¡¿como puedes tener una portada de 2MB y no darte cuenta?!

Interesante, lo voy a tener en cuenta.

Escribe tu comentario

Puedes utilizar algunos elementos de XHTML en los comentarios.