YSlow para bloggers

YSlow es una extensión de Firefox desarrollada por el Exceptional Performance Team de Yahoo! para validar de forma sencilla algunas de las recomendaciones que exponen en su sitio web.

Para instalarla, simplemente hay que dirigirse a la página de la extensión y instalar, pero antes, hay que instalarse Firebug porque funciona a través suyo.

Una vez instalado aparecerá un icono en la barra inferior del Firefox que automáticamente mide algunos parámetros básicos del rendimiento de nuestra web y finalmente muestra el tiempo total de carga. Personalmente desactivo esta opción porque solamente me interesa usar YSlow en momentos concretos. Para ello, simplemente hay que abrir el Firebug pinchando en el bicho que aparece en la barra inferior y luego seleccionar la pestaña YSlow. A continuación, seleccionar más arriba la opción Performance para ver un análisis exhaustivo. Dará finalmente una nota (la mía es F, suspenso, lo habitual) y un desglose por apartados con la puntuación de cada uno (de F, la peor a A, la mejor). Sacar una F no es bueno, pero lo importante es conocer los motivos por los que ocurre.

Los parámetros analizados son los siguientes:

  • Make fewer HTTP requests: Mi página tiene 24 javascripts externos y 4 CSS, lo que es esencialmente malo. Para solucionarlo debería, por un lado, combinar los javascripts y las CSS en la medida de lo posible, cosa que en principio debería estar a mi alcance. Se pueden hacer más cosas avanzadas, como usar Sprites CSS, usar el clásico <map> para reducir el número de imágenes o incluso embeber las imágenes en el HTML usando URLs de tipo data:. Recomendación: Revisar con Firebug las CSS y los javascripts cargados y repasar si son combinables de algún modo o prescindibles.
  • Use a CDN: Esto significa Content Delivery Network, una red distribuida de servidores que copian los contenidos y los ofrecen al usuario final seleccionando el mejor enlace disponible. La gran mayoría son comerciales, como Akamai o Limelight con algunos experimentos gratuitos basados en P2P (como Coral) que no acaban de ir bien del todo. Recomendación: Olvídate de ellos, pero aprovéchate de los grandes, por ejemplo almacenando tus imágenes en Flickr o similares, ya que ellos tienen redes probablemente mejores que tu proveedor.
  • Add an Expires header: Esto sirve para indicar al navegador (y proxies que realizan caché) la caducidad de los contenidos. Convendría que todos los contenidos estáticos (imágenes, css, etc…) tuvieran una cabecera Expires en el futuro más o menos lejano, pero cuidado, al modificar los contenidos deberíamos modificar tambien su nombre o muchos usuarios seguirán viendo los antiguos! Recomendación: Si sabes como hacerlo pruébalo, pero mucho cuidado con las actualizaciones porque si no cambias los nombres no se actualizarán los contenidos (sí con Ctrl+F5, pero tus lectores no tienen porqué hacerlo ni saberlo).
  • Gzip components: Aquí tengo una F porque no sé porque mi servidor con comprime los .js y .css, lo tengo que mirar. En general los servidores Apache vienen configurados para comprimir con gzip usando mod_gzip por defecto pero en servidores IIS es un poco más complicado (por suerte no en IIS7). Recomendación: Con un poco de suerte ya estará activado, si no suele ser sencillo. No tiene contraindicaciones, así que no hay motivo por el que no hacerlo.
  • Put CSS at the top: Permite que la página se muestre progresivamente mientras carga, así que es mejor poner las CSS en el <head> de la página. Recomendación: Hazlo. Revisa tu diseño para que sea así, pero a veces, los javascripts de publicidad o de redes de afiliación cargan sus propias CSS de forma autónoma. No se puede hacer mucho en ese asunto.
  • Put JS at the bottom: Mientras se cargan los javascripts impedimos que se estén cargando imágenes u otros recursos y en general, la mayoría de ellos no hace falta que se ejecuten antes de cargarlos (por ejemplo, muchas veces se lanzan en el evento onload de la página). Por norma, si no hacen document.write se pueden mover al final. Recomendación: Revisa tu diseño para asegurarte que no los cargas en el <head> sino justo antes de cerrar el <body>.
  • Avoid CSS expressions: Casi seguro que no sabías que se podían inicializar propiedades de la CSS mezclándo javascript y usando la etiqueta expression. Si lo sabías y lo hacías ve con cuidado porque se evaluan muchas veces. Recomendación: No lo uses porque además en muchos navegadores ni siquiera está soportado.
  • Make JS and CSS external: Salvo casos especiales (como páginas relativamente pequeñas que tienen muchas visitas) es recomendable externalizar los javascripts y las css para que se puedan cachear mejor en el navegador, dejando solamente fuera de la caché los elementos dinámicos. Recomendación: No pongas mucho javascript ni css dentro de la plantilla, sino referencias con <link> y <script>.
  • Reduce DNS lookups: Aquí tengo una C porque obligo a mis lectores a resolver 7 dominios: 5 son de Amazon, 1 del Analytics y 1 mío, con lo que un tirón de orejas para Amazon porque los contenidos proporcionados por su red de afiliados hacen demasiadas consultas. Recomendación: Revisa quién hace qué. En general los sistemas de estadísticas y los contenidos sindicados de redes de publicidad o promoción añaden algunas consultas DNS que no se pueden evitar. Aun así, asegúrate que tus contenidos, los que puedes controlar, se acceden solamente a través de un dominio. Esto entra en conflicto con lo de colgar las imágenes en otra página y probablemente es mejor idea que reducir el número de consultas DNS.
  • Minify JS: Existen una serie de herramientas (JSMin, YUI Compressor, …) que permiten reducir drásticamente el tamaño de los javascripts, eliminando comentarios, reduciendo el nombre de las variables no visibles desde el exterior y haciendo algún que otro truquillo más. Recomendación: Si usáis alguna librería tipo JQuery o Prototype, disponen de versiones minimizadas que son las que se deben usar. Si no es el caso, se puede usar alguna de las herramientas, no suelen dar problemas.
  • Avoid redirects: En general los motores de blogging no hacen redirects y suelen estar bien configurados en ese aspecto, por lo que no hay que preocuparse. Recomendación: No creo que haya, pero si los hay es posible que sea por haber cambiado de subdominio o algo por el estilo. Habría que investigar a qué se deben estas redirecciones.
  • Remove duplicate scripts: Duplicar nunca es bueno, así que no debería haber nada duplicado. Recomendación: Si aparece algo duplicado, investigar el motivo y eliminar la duplicidad.
  • Configure ETags: Los ETags son una especie de identificador del contenido. Al hacer la petición, el navegador indica el ETag del contenido cacheado y si este coincide con el que tiene el servidor, se envia un código 304 indicando que el contenido sigue siendo válido. En caso contrario se reenvia el contenido. Esto hace aumentar un poco las cabeceras HTTP pero en un entorno monoservidor puede ser útil. Por el detalle que ofrece, entiendo que la recomendación de YSlow es eliminar los ETags porque en la muchos casos son más una molestia que una ventaja. Recomendación: En un hosting compartido es posible que los ETags no sean siempre iguales para contenidos iguales, aunque esto puede no ser así. Como recomienda quitarlos se puede hacer, pero la ventaja tampoco tengo claro que merezca el esfuerzo.

El documento de Yahoo! describe unos cuantos puntos más en los que se puede mejorar la velocidad y ganar unas décimas adicionales, que son también muy interesantes.

Además, como no, YSlow tiene tambien una pestaña Stats que muestra gráficas con el peso específico de cada conjunto de componentes y otra de Components donde muestra cada uno de los componentes cargados indicando su tamaño, si están comprimidos, si tienen fecha de expiración y también su ETag, información muy interesante a la hora de ver si nuestras modificaciones están funcionando.

Como ejercicio me queda mejorar en los puntos que dependan de mí y escribir otro post con mis experiencias, a ver si consigo por lo menos aprobado justillo.

Si te ha gustado esta entrada, por favor deja un comentario o suscríbete al RSS para que puedas recibir todas las novedades en tu lector de feeds favorito.
This entry was posted in Blogging and tagged , , , , . Bookmark the permalink.

2 Responses to "YSlow para bloggers"

Leave a reply