Curated by: Luigi Canali De Rossi
 


22 December 2008

Como Mejorar El Tiempo De Carga De Tu Website: Consejos Prácticos Para Acelerar Tu Sitio - El Informe Pingdom

¿Alguna vez te sentiste frustrado al intentar abrir una página web y ver que demora una eternidad en cargar? Esos sitios con toneladas de videos, imágenes y gráficos de fantasía son definitivamente geniales, pero si mi proveedor de Internet no tiene el suficiente ancho de banda para manejarlos, crece mi frustración y rápidamente paso a otra cosa.

Improve_your_web_page_load_id1907961.jpg
Crédito de la foto: mipan

Como editor de una página, el tiempo que le toma a tus lectores cargar por completo una página de tu sitio es de una importancia absolutamente crítica. Más allá de los cinco segundos de espera comienza a crecer la impaciencia, y después de diez segundos o más muchos de sus lectores empezarán a irse.

En el siguiente informe, las páginas de inicio de los blogs más populares que conforman la lista Technorati 100 han sido probadas para establecer su tamaño como archivos y su velocidad de descarga, osea que han pasado un web perfomance test. ¿Cuánto tiempo se tarda para descargar la página de inicio de cualquiera de estos blogs altamente populares? ¿Puedes hacer un test de la perfomance de tu web?

Pingdom, un servicio web que se especializa en el seguimiento de la disponibilidad y el tiempo de respuesta de sitios web, se ha equipado con sistemas precisos de análisis y gran disponibilidad de tiempo para conocer más de cerca los tiempos reales de descarga de estos populares sitios.

He aquí todos los detalles::

Intro de Daniele Bazzano

 




Análisis del Tamaño de los 100 Principales Blogs



Introducción

Este informe presenta un análisis de 100 importantes blogs, tomados de la lista Technorati Top 100. Para cada uno de estos blogs, se analizó la página inicial (homepage) para conocer su tamaño de descarga y qué es lo que más contribuye a ese tamaño.

Hemos optado por no presentar los blogs individualmente en este informe, sino tomarlos como un grupo para obtener datos más generales de este web performance test.




Tamaño Total de la Página Inicial del Blog


Click arriba para agrandar imagen

La diferencia de tamaño entre las páginas iniciales de los diferentes blogs es muy grande. Una página inicial estuvo cerca de los 6 Mb de tamaño, aunque es un caso extremo que no debe ser considerado como representativo. La mayoría de las páginas iniciales, el 93%, se mantuvieron por debajo de 2 Mb de tamaño.

  • El promedio de tamaño total de la portada fue 934 Kb.
  • 35% tenía una portada de más de 1 Mb.
  • 26% tenía una primera página de menos de 500 Kb.
  • 39% (el mayor segmento) tenia una página de entre 500 Kb y 1 Mb.




Imágenes y Scripts - Los Mayores Responsables del Tamaño


Click arriba para agrandar imagen

Cuando se promediaron los 100 blogs incluidos en la encuesta, resultó evidente que lo que más aportó al tamaño de la página inicial fueron las imágenes, lo que de por si no debería ser una sorpresa teniendo en cuenta que hoy en día los blogs suelen ser muy visuales y contienen muchas imágenes.

  • Imágenes: 61.3%
  • Scripts: 17.2%
  • HTML: 15.3%
  • CSS: 5.9%




Número de Imágenes por Página


Click arriba para agrandar imagen

En promedio, había 63 imágenes incluidas en la primera página, aunque el número varía enormemente. Algunas tenían menos de 10 imágenes, mientras que otras tenían más de 100. Puedes ver la distribución en el diagrama.

Además de las imágenes de cada post, las imágenes también son comunes en el diseño de los blogs, lo que puede explicar su abundancia en algunos blogs. Las imágenes incluidas en los códigos HTML y CSS también se incluyen en esta cuenta.




Número de Scripts por Página


Click arriba para agrandar imagen

En promedio hubo 9 scripts incluidos en la primera página, y también en este caso el número varía mucho entre los diferentes blogs. La página con la mayor cantidad de scripts tenía 35.

Frecuentemente los scripts funcionan desde fuentes externas, por ejemplo las estadísticas de visitantes tales como los scripts de Google Analytics y Sitemeter. Otros ejemplos son los plugins de Wordpress, que a menudo incluyen sus propios archivos Javascript en el blog.




Recomendaciones Estratégicas Clave



a) Los Lectores de Blog Que No Tienen Banda Ancha Son Dejados de Lado

Increase_web_page_load_stranded_id3754661_b.jpg

Como este estudio ha demostrado, tres de cada cuatro blogs tienen sus primeras páginas de más de 500 Kb, y más de un tercio tiene una portada de más de 1 Mb.

Con una conexión ideal, perfecta, éste es el tiempo que se tarda en descargar 1 Mb (1048576 bytes) de datos:

  • 56 kbit/s modem: 2 minutos y 30 segundos
  • 256 kbit/s (límite mínimo de la banda ancha): 33 segundos
  • 384 kbit/s (3G "baja velocidad"): 22 segundos
  • 1 mbit/s (baja velocidad): 8.4 segundos
  • 10 mbit/s: 0.84 segundos

Hay que tener en cuenta, sin embargo, que esta lista da por sentado que el ancho de banda se utiliza al 100%, lo que normalmente no sucede. Las cifras sólo muestran el límite máximo teórico.

En resumen, los lectores de blogs con conexiones más lentas tendrán problemas descargando la primera página de muchos de los actuales blogs, por lo menos los que tengan las imágenes habilitadas.




b) Optimización del Tamaño y la Velocidad de los Blogs

Increase_web_page_load_optimize_id159420_b.jpg

Dado que las imágenes constituyen casi dos tercios del tamaño de toda la página, en promedio, parecería lógico iniciar la optimización por allí. Esto puede hacerse de dos maneras (que no son mutuamente excluyentes):

  1. Optimiza el tamaño de las imágenes. Dependiendo de su contenido, el tamaño de imagen puede optimizarse eligiendo el formato adecuado, el nivel de compresión, la profundidad de color y otros ajustes.
  2. Utiliza menos imágenes (muchos blogs tienen un gran número de pequeños elementos de imagen). Esto tendrá también el efecto positivo adicional de un menor número de solicitudes efectuadas al servidor, lo que también es beneficioso para el rendimiento. Una manera de tener un menor número de imágenes es el uso de los llamados sprites, con lo cual varias imágenes se almacenan en una.



Dado que los scripts ocupan el segundo puesto en cuanto al tamaño generado, aquí hay algunos consejos para reducir el impacto de los scripts en el tiempo de carga:

  • Puede ser una buena idea ver si es posible reducir el número de scripts utilizados en un blog. ¿Son todos ellos realmente necesarios? ¿Hay, por ejemplo, scripts incluidos en los plugins de Wordpress que ya no estés utilizando?
  • Dado que la reducción del número de peticiones al servidor web es una buena manera de mejorar el rendimiento, una buena idea es fusionar todos tus scripts (o al menos la mayoría de ellos) en un solo archivo, con lo que se convierten en una única descarga.
  • Otro factor a considerar es que, al incluir scripts externos, el tiempo de descarga de un blog puede verse afectada por problemas de carga con ese script (lo que está fuera del control del propietario del blog).

Estos son sólo algunos consejos en relación con estas áreas específicas. La optimización del sitio web es un tema muy amplio y entrar en detalles aquí estaría fuera del alcance de este informe.




Conclusión

Existen, por supuesto, algunas variaciones de tamaño en función del contenido específico de cada blog, pero en general los datos promedio recogidos por este informe no se modificarían mucho y son muy pertinentes, sobre todo teniendo en cuenta la gran base de la muestra.

Dado que muchos blogs tratan de atraer un gran número de lectores, podrían estar haciéndose un flaco favor si permiten que su blog tenga un tamaño demasiado grande, lo que se traducirá en una menor velocidad de carga. El uso de la memoria caché del lado del navegador mejorará un poco las cosas para los lectores frecuentes, pero cualquier visitante nuevo u ocasional tendrá que cargar la página en su totalidad, y algunos pueden renunciar antes de que se termine el proceso o, al menos, resultarán frustrados. (Y nadie quiere lectores frustrados.)

Incluso los usuarios de banda ancha se beneficiarían de menores tamaños de página y con un menor número de objetos en las mismas. Así se aceleraría la capacidad de respuesta del sitio web también para ellos. En última instancia, también sería beneficioso para el propietario del blog, ya que tendrá menos estrés en su servidor y demandará un ancho de banda menor.

Sospechamos que no todos los propietarios de blogs son realmente conscientes de cómo son de grandes las páginas de su blog, así que espero que este informe resulte útil para inicial un debate en torno a este tema. Algunos blogs están obligados a ser grandes, especialmente si su contenido depende en gran medida de imágenes, pero para muchos otros lo más probable es que podrían reducir significativamente su tamaño de descarga (y la velocidad de descarga), con las pocas y simples medidas que hemos mencionado arriba.



Nota.: Los datos se recogieron con el Full Page Test de Pingdom Tools, que es una herramienta basada en la Web, provista gratuitamente por Pingdom. Esta herramienta recoge y analiza todos los elementos de una página web y presenta los datos de tal forma que pueden ser examinados y filtrados con una interfaz simple. Las pruebas que sirvieron de base para este informe se realizaron el 30 de octubre de 2008.




Sobre el autor
pingdom_logo.gif

Pingdom es un servicio de monitoreo de conexión que controla la disponibilidad y el tiempo de respuesta de sitios web, servidores y servicios en Internet. Pingdom fue creada por Sam Nurmi, fundador y anterior CEO de la empresa sueca de alojamiento web Loopia.



Créditos de las fotos:
Total Blog Front Page Size - Pingdom
Images and Scripts The Largest Contributors to Size - Pingdom
Number of Images Per Page - Pingdom
Number of Scripts Per Page - Pingdom
Blog Readers Without Broadband Left Stranded - Gino Santa Maria
Size and Speed Optimization of Blogs - Lisa F. Young

Pingdom -
Referencia: Royal Pingdom [ Seguir leyendo ]
Si te gustó la nota puedes recibir actualizaciones suscribiéndote via RSS o via email.

O compartirla:
 
 
 
 
Comentar    
blog comments powered by Disqus
 


 

 

 

 

Creative Commons License
This work is licensed under a Creative Commons License.

 

14582


Curated by

Publisher MasterNewMedia.org - New media explorer - Communication designer
Web Analytics