...


Si, el problema del peso no solo está limitado a las personas. ¿Cuánto tarda su página en cargar? estudios de comportamiento muestran los visitantes abandonan la página si esta no carga en menos de 5 segundos. Otros estudios dicen 4 (Google) , otros 6. El promedio es 5 segundos. Pueden encontrar datos buscando en Internet.

La realidad es que con conexiones cada vez más rápidas y el uso de tablets y celulares con conexiones mas lentas si la página no carga rápido la gente se va. Pero por otro lado los sitios se cargan con mas cosas.

En un mundo en donde todavía los clientes (y muchas veces los diseñadores) no estan educados sobre buenas prácticas con el uso de Flash, imágenes y optimización, sobre todo en la página principal es muy fácil perder el tiempo en detalles, colores y contenido cuando el problema puede estar en el peso.

Si su sitio tarda mas de 6 segundos en cargar y sus programa de estadísticas le marca que las salidas (exit pages) son muy altas en su página de inicio entonces es hora de considerar revisar el código, funcionalidad, imágenes, flash, diseño, etc.

Estos son algunos puntos a tener en cuenta:

  • Uso excesivo de Flash, animaciones, imágenes grandes: las imágenes llaman mucho la atención. Según estudios lo hacen aún mas si hay personas / caras en ellas. Pero si abusamos de este recurso de atención con animaciones gigantes y Flash estamos cometiendo un grave error. No solo son pesadas sino que ocupan espacio importante y también pueden generar un falso sentido de atención ya que en otros estudios se demuestra que captar la atención puede ser algo que la primera vez asombre pero que no haga hincapié en el contenido, productos, que al fin y al cabo es lo principal de un sitio.
  • Uso de HTML viejo / Markup / Código: desde hace muchos años se viene utilizando y promoviendo las buenas prácticas de usar código limpio y mas nuevo, sin tablas. Sin embargo muchos diseñadores aun utilizan prácticas viejas por mantener diseños antiguos o simplemente por mantener la compatibilidad del diseño en varios navegadores. Existen técnicas para que esto sea mas fácil y poder reciclar código.
  • Hojas de estilo grandes y desprolijas: es lo mismo que el punto anterior pero aplicado para el diseño de CSS. Muchas veces se modifican y agregan definiciones redundantes olvidando que la parte de Cascade en CSS significa heredar propiedades de definiciones padre. Un ejemplo clásico es el uso de Margin y Padding por defecto en todos los navegadores y el sobre uso por parte de diseñadores en la definición de estos elementos en casi todas las clases cuando se puede perfectamente quitar todo el margin y padding y solo utilizar excepciones cuando sea necesario o en los bloques principales de cada elemento. Esto nos ahorra mucho código que el navegador puede dejar de cargar.
  • Uso excesivo de Javascript / jQuery / Efectos: lo mismo, las animaciones en las ventanitas y el drag and drop son muy lindos pero si no estan asociados a una funcionalidad y solamente son una cuestión estética pueden quitarnos muchos milisegundos (y segundos) de carga.
  • Uso excesivo de fuentes no estándar: con el reciente boom de Google fonts y otros servicios de alojamiento de fuentes pudimos dejar de usar Arial, Verdana y la infame Times New Roman ademas de mejorar el SEO usando fuentes reales en vez de imágenes en varios navegadores. Sin embargo las fuentes deben ser cargadas y el uso de múltiples fuentes obviamente hace que la carga sea mas lenta sobre todo la primera vez.

¿Qué hacer? Consejos y Herramientas

Estos son algunos enlaces de utilidad para aprender técnicas y medir (y solucionar problemas de peso en las páginas):

  • Loads.in para verificar cuánto tiempo tarda en cargar una página (incluye vista por segundos parciales y gráficos explicando qué elementos retrasan la carga y cuánto tiempo).
  • CSS Sprites: esta técnica utiliza una sola imagen para almacenar íconos / botones y CSS para seleccionar qué área se debe mostrar. Ya que una sola imagen pesa menos que varias por separado.
  • Utilizar Javascripts compactos: muchos scripts como jQuery ofrecen opciones compactas (.min) que son báscicamente scripts con los espacios y líneas borrados. Esto ahorra algunos preciosos Ks de información.
  • Utilizar gzip a nivel de servidor (para usuarios avanzados): esto comprime las páginas antes de enviarlas a un visitante.
  • Eliminar objetos de diseño y declaraciones obsoletas: mantener el diseño y las hojas de estilo actualizadas.
  • Optimizar imágenes: casi todos los CSS / Blogs nuevos como WordPress optimizan un poco las imágenes pero nosotros podemos optimizarlas antes de subirlas. Es tedioso y requiera prueba y error pero se puede ahorrar mucho espacio utilizando imágenes de menos calidad cuando sea necesario.
  • Google Webmasters Tool: contiene varios datos sobre la carga y características del sitio.
  • Google Analytics: es un sitio de estadísticas fácil de configurar para medición de visitas, tendencias y contenidos. Gratis, de Google.