Archivo

Entradas Etiquetadas ‘YSlow’

Herramientas de YSlow

Martes, 15 de Junio de 2010

Para finalizar la serie de artículos sobre YSlow, veremos las herramientas que proporciona YSlow para complementar su análisis.

Recordemos que inicialmente hemos visto una introducción a YSlow, después hemos instalado YSlow, posteriormente hemos utilizado YSlow y finalmente hemos analizado los resultados de YSlow.

Pero esto no es todo, ya que YSlow nos proporciona estas herramientas complementarias que encontraremos en la pestaña “Herramientas”:

herramientas de YSlow

  • JSLint: se trata de un verificador de código javascript que proporciona un informe con los problemas de código javascript que haya encontrado en nuestra web.
  • All JS: nos informa de qué scripts de javascript está utilizando nuestra web para poder así controlar si todo es correcto y esperado, o por el contrario estamos utilizando códigos javascript inútiles.
  • All JS Beautified: parecido al anterior, pero con un formato que facilita la lectura de scripts.
  • All JS Minified: devuelve todos los scripts utilizados en nuestra web sin comentarios y con reducción de espacios. Podemos aprovechar esta herramienta para reducir el tamaño de los scripts utilizados.
  • All CSS: nos muestra todo el código CSS utilizado en nuestra web.
  • All Smush.it: esta herramienta analiza todas las imágenes de nuestro web y nos indica cuales pueden ser optimizadas. Por último, nos devuelve en un fichero zip estas imágenes optimizadas para que las sustituyamos por las no optimizadas.

Espero que os sean de utilidad estos artículos sobre YSlow y estas herramientas de YSlow y os faciliten la mejora y optimización de vuestra web. Recordad que una web optimizada y rápida agradará más a vuestros visitantes y también a los buscadores.

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, seo, web

Analizar los resultados de YSlow

Sábado, 12 de Junio de 2010

En el anterior artículo vimos cómo utilizar YSlow. Después de ejecutar el test de YSlow vemos que nos devuelve los resultados clasificados en tres pestañas:

  • Grado
  • Componentes
  • Estadísticas

Vamos a empezar a analizar los resultados obtenidos en la pestaña de “Grado”:

Vista de Grado del análisis de datos YSlow

Aquí nos muestra un informe de la web que queremos analizar. Primero nos muestra una letra (en el ejemplo es la letra A), y al lado una puntuación de 0 a 100. La letra mostrada puede ir de la A (puntuación más alta) a la F (puntuación más baja). Justo debajo podemos filtrar estos resultados por contenido, cookies, css, imágenes, javascript y servidor.

A continuación hay un listado de todos los términos analizados y una letra asignada a cada uno de ellos, con lo que nos informa el grado de puntuación de cada término (yendo siempre de la A a la F).

Si clickamos en cada término analizado nos informará de qué es lo que falla, cómo mejorarlo y qué nos aportará. Además incluye un “Leer más” que nos llevará a otra pantalla con mucha más información.

Pasamos a analizar los resultados obtenidos en la pestaña “Componentes”. Veremos algo como lo siguiente:

Vista de componentes del análisis de resultados YSlow

Aquí se listan todos los componentes utilizados en la web, como pueden ser javascripts, css, iframe, flash, imágnes, favicons,…

Si clickamos en alguno de los componentes nos visualizará todos los componentes de ese tipo utilizados, e información como la URL, fecha de expiración, tiempo de respuesta,…

Esta información nos permite situarnos globalmente en cuanto a componentes utilizados en nuestra web y saber qué tiempo de respuesta tienen. A partir de aquí podemos ver cómo influyen en la velocidad de carga de nuestra web.

Por último nos queda la pestaña de “Estadísticas”:

Vista de estadísticas de análisis de datos YSlow

Se tratan de estadísticas gráficas sobre las solicitudes HTTP que realiza nuestra web y el tamaño de cada componente tanto en Caché vacía como en Caché primaria.

Vayamos por partes… la Caché vacía se refiere a todos aquellos componentes que el navegador solicita vía HTTP para cargar la página web la primera vez que se visita. Y la Caché primaria muestra los componentes que estarían en la Caché la próxima vez que visitamos la web, reduciendo así las solicitudes HTTP y el tamaño de carga.

Veremos que no todos los componentes que aparecen en la Caché vacía aparecen en la Caché primaria. Esto nos permite saber qué solicitudes HTTP se realizan en la primera visita y en las posteriores, así como el tamaño de carga de los componentes.

Resumiendo un poco, la pestaña “Grado” nos informa de aquello que tenemos bien y de aquello que podemos mejorar de nuestra web. La pestaña “Componentes” nos informa de los componentes utilizados en nuestra web y sus características más importantes a la hora de afectar la velocidad de carga de nuestra web. Por último, la pestaña “Estadísticas” nos informa gráficamente de los componentes que generan solicitudes HTTP en la primera visita y en las posteriores.

Analizándolo todo en global y aplicando pequeños retoques podremos mejorar la velocidad de carga de nuestra web, factor importante no sólo de cara a nuestros visitantes sino también en el posicionamiento de nuestra web en las búsquedas realizadas en Google.

En el próximo artículo veremos las herramientas YSlow que acompañan a los resultados y que nos permitirán obtener mayor información para mejorar nuestra web.

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, seo, web

Cómo utilizar YSlow

Martes, 8 de Junio de 2010

Después de ver para qué sirve YSlow y cómo instalar YSlow, pasaré a explicar cómo utilizar YSlow.

Para empezar a utilizar YSlow realizamos los siguientes pasos:

  • En Firefox, vamos a Herramientas – Firebug – Abrir Firebug. Esto nos abrirá una ventana en la parte inferior del navegador de Firefox.
  • Si en su día hemos instalado otros complementos, por ejemplo Page Speed, deberemos seleccionar YSlow de entre las pestañas que nos aparecen en esta ventana de la parte inferior del navegador.

Pantalla de YSlow

Ahora vamos a la web que queremos analizar, y para ejecutar el test de YSlow podemos hacerlo de dos maneras:

  • Clickamos en el botón “Run Test” que aparece en pantalla.
  • Clickamos en la opción “Grade” en la parte izquierda.

Ambas acciones provocarán el inicio del análisis. Veréis que tarda a penas unos segundos en realizarlo, y a partir de ahí ya podremos ver los resultados y analizarlos.

Por último, si queremos que YSlow se ejecute cada vez que abrimos una página web, podemos marcar la opción “Autorun YSlow each time a web page is loaded”, justo encima del botón “Run Test”.

Con estos sencillos pasos hemos visto cómo utilizar YSlow. En el próximo artículo veremos qué resultados nos aporta YSlow y cómo nos permiten analizar nuestra web.

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, seo, web

Cómo instalar YSlow

Sábado, 5 de Junio de 2010

Después de la introducción a YSlow, pasaré a explicar cómo instalarlo.

Para poder ejecutar YSlow es necesario tener instalado el navegador Firefox. Por lo tanto, el primer paso (si no tienes Firefox en tu pc) es descargar el navegador Firefox de la página web de Mozilla.

Una vez lo instalamos (no tiene ningún secreto), necesitaremos instalar Firebug. Podéis descargar Firebug de la página web de GetFirebug. Más adelante dedicaré un artículo a Firebug, pero por ahora simplemente comentaré que se trata de una herramienta de desarrollo web integrada en Firefox.

Prosiguiendo con la instalación de YSlow, ahora sólo queda instalar el add-on YSlow para Firefox. Podéis descargar YSlow desde la página de Add-ons de Mozilla. Simplemente hay que darle al botón Añadir a Firefox y se instalará automáticamente. Eso sí, nos pedirá reiniciar Firefox.

Siguiendo todos estos pasos hemos conseguido instalar YSlow. En el próximo artículo veremos cómo utilizar YSlow.

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, seo, web

Introducción a YSlow

Jueves, 3 de Junio de 2010

YSlowDespués de haber visto cómo instalar y utilizar Page Speed, y después de ver GTmetrix y sus informes basados en Page Speed y YSlow,… pasaré a estudiar a fondo YSlow.

Con este primer artículo sobre YSlow os introduciré en qué es, de que trata y qué analiza.

YSlow es un complemento que se integra en el Firebug de Firefox y que nos permite analizar todos los componentes que utiliza nuestra web (scripts, programación html, ajax, tags,…) para comprobar si es posible optimizarla.

Entre los componentes que testea podemos destacar:

  • HTTP requests utilizados, localización de los scripts dentro del web, expresiones CSS, scripts utilizados, configuración de Etags, errores 404, cookies,…

YSlow analiza la web y puntúa cada componente analizado. Suma todas las puntuaciones para establecer un resultado promedio teniendo en cuenta siempre la gravedad de cada mejora encontrada.

La puntuación que nos mostrará YSlow estará entre 0 y 100, siendo 100 la mejor puntuación que nos puede dar.

En el próximo artículo veremos cómo instalar YSlow en Firefox.

¿Te gustó el artículo? Compártelo!!:
  • Facebook
  • Twitter
  • FriendFeed
  • del.icio.us
  • LinkedIn
  • Technorati
  • Ping.fm
  • StumbleUpon
  • Google Bookmarks
  • Digg
  • Meneame
  • Netvibes
  • Live
  • BarraPunto
  • Bitacoras.com
  • Reddit
  • Wikio
  • email
  • Print

A. Montes programación, seo, web