10 herramientas para analizar el peso de nuestro sitio web

Analizar el peso de los recursos que contiene nuestro sitio web es fundamental para saber que tan rápido se descarga nuestra página web y sobre todo si queremos optimizar nuestro ancho de banda de nuestro plan de hosting.

Les comparto unas buenas herramientas para que puedan analizar los recursos que consume su sitio web y aplicar algunas mejoras en base a las recomendaciones que les brinda estas herramientas.

1. Pingdom

pingdom

Pingdom funciona en línea y se destaca por ser la favorita de muchos diseñadores web. Te informa sobre el peso de la página, la velocidad de descarga, análisis de código, los grados de rendimiento, sugerencias de desarrollo e incluso una línea de tiempo histórica para registrar su progreso. Si sólo vas a usar una herramienta de análisis, Pingdom debería ser éste.

2. Firefox Web Developer Add-on

web-developer

La famosa barra de herramientas Web Developer, desarrollado por Chris Pederick, ha existido desde los inicios del lanzamiento de Firefox. Esta herramienta es muy utilizada por la gran cantidad de características que brinda, como ver el tamaño de la pagina comprimida, resaltar los enlaces, código fuente, ocultar imágenes, visualizar el peso de los recursos, resaltar los títulos de las imágenes y enlaces, información de los objetos, estructura del dom de nuestra web, entre muchas otras cosas. Esta disponible para FirefoxChrome Opera.

3. GTmetrix

GTmetrix es un servicio online que te permite detectar los recursos y aspectos que ponen lento tu página web. Genera un informe global  generado a partir de PageSpeed Insights de Google y YSlow.

Gt-metrix

4. Google PageSpeed Insights

google-page

PageSpeed Insights, es una herramienta de Google muy potente para analizar y evaluar la velocidad de carga de una página web, aunque no muestra el peso de los recursos de la página, proporciona una serie de sugerencias para mejorar la velocidad de carga. Para cumplir con su labor, PageSpeed Insight se basa en el documento de buenas prácticas que abarca tanto desde front-end (carga de imágenes, archivos javascript, css, etc) como de configuración del servidor.

5. Yslow

Yslow_Welcome

Yslow, es una herramienta en linea, desarrollada por Yahoo, que evalúa una pagina web y emite una calificación entre A (ha hecho todo lo posible)  y F (que esta fallando estrepitosamente) para una serie de factores. También lo pueden encontrar como plugin para distintos navegadores web.

6. Browser Developers Console

firebug-lite-xhr-json

Hoy en día, muchos de los navegadores web tienen incorporado un browser developer console, pero en caso requiera de una herramienta en particular puede optar por FirebugChrome Inspector,Firefox Web Developer e Internet Explorer Developer, todos ellos ofrecen analizadores de red, tiempo de carga de recursos, código fuente, entre otras cosas.

7. PageScoring Web Site Speed Test

speed-test

Es una de las herramientas mas rápida que se concentra solo en el tiempo de descarga de una página web, ademas de los tamaños de los archivos en forma individual.

8. Upstrends Speed Test

upstrends

Además de las pruebas de velocidad de tamaño y descarga habituales, Upstrends Speed Test es única, ya que permite poner a prueba la capacidad de respuesta desde ubicaciones geográficas específicas. El informe también pone de manifiesto el dominio que cada recurso se sirve de para ayudar a evaluar la eficacia de CDN.

9. Page Speed Tool

page_speed_tool

Page Speed Tool es la herramienta de prueba de velocidad que ayuda a los diseñadores web obtener un análisis completo del tiempo de carga de una página. La prueba de velocidad de sitio web se basa en el tiempo que tarda en cargar a las distintas velocidades de conexión. La prueba de velocidad de la página web también es muy útil si usted necesita saber qué componentes de su página adopta las cantidades mínimas y máximas de tiempo para cargar.

10. Web Page Analyzer

webpageana

Web Page Analyzer proporciona una amplia gama de estadísticas que miden el tamaño de archivos, así como la estimación de tiempo de descarga y rendimiento del sitio web. ademas ofrece recomendaciones técnicas de optimización para su sitio web.

Si conoces otra herramienta o crees que se ha omitido alguna favor de compartir los enlaces :).

Creando entornos de desarrollo virtuales con Vagrant

Vagrant

 

Como en todo proyecto web, muchas veces sucede que los miembros de un equipo de desarrollo utilizan una plataforma distinta (WindowsLinuxMac OS X) para construir software, no solo entre ellos, ademas distinta con la plataforma del software en el ambiente de producción,  ocasionando en la mayoría de los casos inconsistencia y problemas a la hora de subir sus avances al entorno de pruebas y producción.
La solución a este problema es utilizar máquinas virtuales, para centralizar y aislar un entorno de pruebas y compartirlo entre todos los miembros del equipo.
Las soluciones de virtualización mas comunes son : VirtualboxVM WareXen, entre otros, pero requieren instalar el Sistema Operativo y configurarlos.

¿QUÉ ES VAGRANT?

 

Vagrant es una herramienta, escrita en Ruby, que facilita  la creación de entornos virtuales de desarrollo completos, para ello nos abstrae del sistema de virtualización subyacente (Virtualbox, VM Ware u otro) y nos permite instalar y configurar el software de la máquina virtual con herramientas de automatización como ChefPuppet o incluso los clásicos scripts de shell.
El proyecto Vagrant se inició en enero del 2010 por Mitchell Hashimoto.

INSTALACIÓN

 

Vagrant lo puedes utilizar con varios sistemas de virtualización, para el presente ejemplo voy a utilizar VirtualBox porque es gratuito, está disponible para varias plataformas y funciona con Vagrant sin configuraciones adicionales.
En el ejemplo, lo instalaré sobre plataforma windows 7.
1. Primero descargamos la ultima versión de Vagrant y la instalamos en nuestro Sistema Operativo Windows 7.

Iniciando nuestro entorno de desarrollo con Vagrant

 

Inicializamos la configuración partiendo de una imagen de base.
$ vagrant init precise32 http://files.vagrantup.com/precise32.box

Levantamos la maquina virtual

$ vagrant up
Con estos dos simples comandos ya tenemos funcionando nuestra máquina virtual de Ubuntu 12.04 LTS de 32 bits. Podemos conectarnos a ella por SSH con vagrant ssh y, una vez hemos terminado de usarla, eliminarla con vagrant destroy.
El comando vagrant init crea un fichero Vagrantfile en el directorio donde lo hemos ejecutado que contiene la configuración de la máquina virtual. Estando en ese directorio, con vagrant uppodemos volver a levantar la máquina sin necesidad de hacer de nuevo el init.

BOXES EN VAGRANT

 

En Vagrant una box es un fichero que contiene la base a partir de la cual se crean las máquinas virtuales. Este fichero puede ser compartido fácilmente para que otros repliquen nuestro mismo entorno de desarrollo.
En el ejemplo anterior creamos una máquina virtual con Ubuntu, pero no estamos limitados a este sistema. En la página vagrantbox.es disponemos de un listado enorme de Sistemas Operativos, tanto de 32 como de 64 bits, que podemos utilizar como base para nuestras máquinas de Vagrant. Podríamos incluso crear nuestras propias boxes utilizando Veewee.

COMANDOS BÁSICOS

 

vagrant init [box-name] [box-url]

Crea el fichero de configuración Vagrantfile en el directorio actual. Si se pasan el segundo y el tercer parámetro, se establecen el nombre y la box a utilizar en la configuración.

vagrant up

Levanta la máquina virtual de acuerdo a la configuración del Vagrantfile del directorio actual.

vagrant halt

Detiene la máquina virtual, pero mantiene los cambios que hayamos hecho en ella para la siguiente vez que ejecutemos vagrant up.

vagrant reload

Es equivalente a hacer un vagrant halt seguido de un vagrant up. Tras hacer cambios en un Vagrantfile es necesario hacer reload.

vagrant suspend

Suspende la máquina virtual, salvando el estado de ejecución actual de forma que pueda ser resumido más tarde y continuar desde ese punto exacto.

vagrant resume

Resume una máquina que ha sido anteriormente suspendida con vagrant suspend.

vagrant destroy

Detiene la máquina virtual y destruye todos los cambios que podamos haber hecho. La siguiente vez que hagamos un vagrant up partirá de una imagen totalmente limpia.

vagrant ssh

Nos conecta por SSH a la máquina virtual que hemos levantado.

vagrant status

Muestra el estado de las máquinas levantadas con Vagrant.

vagrant box

Comando para gestionar las boxes que tenemos en nuestro sistema.

vagrant package

Exporta la máquina virtual en ejecución en un fichero box que puede ser reutilizado.

QUE ES EL VAGRANTFILE

 

El archivo Vagrantfile contiene el tipo de máquina virtual y su configuración. Por defecto, tras hacer vagrant init, la configuración solo incluye el nombre de la box que va a usar y su URL. Para que puedas realizar una configuración según las necesidades de tu proyecto puedes revisar la documentación de vagrantfile.