Centro de Ayuda

Puntos a tener en cuenta para optimizar tu sitio y lograr un mejor rendimiento (Parte 1)

Antes que nada vamos a dejar en claro que optimizar un sitio web para un rendimiento eficiente depende de varios factores y requiere de un conocimiento intermedio en lenguajes y tecnologías web. O paciencia y buena predisposición para aprender 😉

Primero vamos a ocuparnos de verificar cuántos requests hace nuestra página, y el tamaño de los elementos que carga. Las herramientas fundamentales para revisar estos aspectos:

Bien, ya con estas herramientas instaladas en Firefox, podemos tener una idea de cuán optimizado está el sitio en función de la cantidad de elementos que carga. Vamos por pasos:

  1. Abrimos el navegador y desactivamos el caché del navegador utilizando la Web Developer Toolbar (ver imagen 1).
  2. Vamos a nuestro sitio
  3. Habilitamos Firebug (ver imagen 2), maximizamos dicha herramienta y seleccionamos desde el menú Red > Todo (imagen 3)
  4. Recargamos la pagina, dejando la ventana de Firebug abierta.
  5. Verificamos los resultados obtenidos (ver imagen 4) de acuerdo a la siguiente información:

Optimizacion web 1Optimizacion web 1Optimizacion web 1Optimizacion web 1

Url: Nos proporciona datos sobre el pedido http, encabezados del mismo y de la respuesta del servidor que procesó el pedido.
Estado: Resultado del pedido (Código + Estado). Para verificar el significado de los distintos códigos de respuesta del servidor, podés verificar este enlace.
Dominio: Dominio desde el cuál se descarga el contenido. Esto es muy importante, dado que muchos plugins actualmente solicitan datos a otros servicios web (Facebook, Twitter, weather.com, etc)  aumentando el número de elementos a cargar por sitio y como consecuencia de esto, el tiempo de carga del mismo. Tené en cuenta que, si cada elemento solicita datos de otro sevicio web, al tiempo de carga neto de tu página se le va a sumar el tiempo de carga de dichos elementos. Este último siempre va a depender de la rapidez de respuesta del servicio solicitado, y no de tu hosting.
Tamaño: Tamaño del elemento solicitado. Otro factor importante a tener en cuenta al evaluar los tiempos de carga del sitio. A mayor tamaño de los elementos de la página, más se encarecen los tiempos de carga de la misma.
Línea de tiempo: Nos brinda información referida a tiempos de carga del elemento, pasando el cursor sobre la línea de tiempo obtenemos información detallada sobre la composición del tiempo registrado.
Resúmen: Debajo del total de elementos cargados, obtenemos información sobre cantidad de pedidos, total de kb cargados por la página (si volvemos a habilitar la opción desactivada en el punto 1 y recargamos el sitio, veremos el total cargado desde el caché del navegador) y tiempo total de carga.

Esta información nos es de gran utilidad para detectar puntos a optimizar en nuestro sitio y evaluar el impacto sobre los tiempos de carga de nuevas funcionalidades que se agreguen al mismo.

Yslow y Pagespeed

Estos plugins de Firebug elaboran una calificación para nuestro sitio en base al análisis de los distintos factores que intervienen en la respuesta del sitio "del lado del cliente". Estos son, todos los elementos que el visitante del sitio "descarga" al ingresar al mismo y no incluye la gestión sobre las bases de datos (la cuál verificaremos en la segunda parte).
Son más que interesantes las herramientas que nos ofrece Yslow ingresando en la pestaña Tools disponible desde el menú, entre las que se incluyen varios servicios de optimizadores y compresores de archivos .css y .js y la opción de ejecutar con un solo click una mejora respecto al tamaño de las imágenes del sitio (incluso podemos descargarlas ya optimizadas) utilzando la web de Smush.it .

Optimizacion web 1

Te recomendamos instalar estas herramientas y comprobar la calificación otorgada para tu sitio así como los consejos para pulir todos los aspectos involucrados a fin de lograr una óptima performance. Por cualquier duda sobre su uso, podés verificar la ayuda en línea para las mismas disponible en:

  • http://developer.yahoo.com/yslow/help/
     
  • http://code.google.com/intl/es-ES/speed/page-speed/

LAYOUT

SAMPLE COLOR

Please read our documentation file to know how to change colors as you want

BACKGROUND COLOR

BACKGROUND TEXTURE