Page Speed online: una nueva herramienta para medir el rendimiento de sitios web

Parte del desarrollo de sitios web de calidad es hacer un análisis correcto de su rendimiento, sobre todo desde temprano, utilizando recomendaciones y técnicas modernas para asegurar un sitio correctamente optimizado. Esto no quiere decir ir en contra de la famosa máxima de Donald Knuth, quien nos ensenó que "la optimización prematura es la causa de todos los males" en programación.

Cualquier sitio web público con una expectativa mínima de tráfico debería responder a una línea base para garantizar una buena experiencia a sus usuarios, y hoy día no necesitamos aplicar técnicas extravagantes o perder mucho tiempo para esto, sino más bien aplicar recursos estándares y sencillos, disponibles en todas las plataformas.

Entre las herramientas para realizar el análisis de rendimiento frecuentemente mencionamos la clásica Firebug (y su plugin YSlow) para Firefox, y Page Speed para Firefox o Chrome. Ambas son excelentes y complementarias, cada una con sus fortalezas, pero ahora Google aporta una alternativa más que puede ser útil en muchas circumstancias: Page Speed online.

A diferencia de las anteriores, en lugar de un plugin, este es un servicio en línea que realiza el mismo tipo de análisis, con lo que podemos ejecutarlo desde cualquier navegador, pero sobre todo puede orientar el análisis sobre navegadores desktop (corriendo en una computadora) como sobre navegadores móviles (sobre todo corriendo en smartphones), para los que incluye algunas reglas específicas como la de eliminar redirecciones en la página inicial que no puedan mantenerse en cache, o reducir la cantidad de Javascript durante la carga de la página. Estas son todas situaciones que no son tan problemáticas en otro ambiente, pero en un teléfono que tiene usualmente un ancho de banda y procesamiento limitados, hacen mucha diferencia.

Veamos un ejemplo. Realicé un análisis para navegadores desktop sobre un sitio popular como Twitter, ingresando la dirección:

Y el resultado dio 77 sobre 100 (bastante bueno). El detalle es el siguiente:

Prioridad alta: Estas son reglas que pueden generar mayor impacto en el rendimiento del sitio y que uno debería atacar inicialmente. En el caso de Twitter sólo queda en este nivel la regla: Combinar imágenes como sprites CSS.

Prioridad media: En el siguiente nivel las reglas son: entregar imágenes a escala, optimizar imágenes y minificar Javascript.

Prioridad baja: En este nivel ya hay unos cuantos más. Si quieren pueden ver el informe completo.

Para terminar ejecuto el mismo análisis para la versión móvil de Twitter:

... y: ¡Oh, sorpresa! me da 100/100. No es de extrañar que Twitter esté muy optimizado para su acceso desde móviles. Así que pruebo con otro servicio que tiene buena tradición en cuando a rendimiento (es donde se empezó a trabajar en estas áreas): http://news.yahoo.com/

El resultado para móviles es de 79/100, que es bastante bueno.

No hay reglas de alta prioridad para atacar, y en las de media, ambas son muy específicas para teléfonos: diferir la interpretación de Javascript y hacer que las redirecciones de la página de inicio puedan mantenerse en cache.

Como siempre, lo importante de estos análisis es leer con atención la información acerca de cada regla, entender de qué se trata y que prácticas tenemos que adoptar de manera permanente para que no vuelva a producirse.

 

Yoseki Coding Dojo en Kleer

Siguiendo con la buena costumbre de los Coding Dojo, mis amigos de Kleer vienen organizando algunas de estas sesiones abiertas para escribir código entre muchos, como un ejercicio de trabajo en grupo, programación y entretenimiento. Ellos ya tienen un formato bastante definido para estas sesiones, llamadas Yoseki Coding Dojo en las que se van variando el lenguaje y el entorno.

El martes de esta semana me sumé a esta actividad, me encontré con otro amigo asistiendo, Carlos Peix, y me di el gusto de compartir con él la primera ronda de pair programming.

Esta vez trabajamos con Java/Eclipse. Parece que el próximo Yoseki será en Ruby, y si me dejan haremos uno en Javascript.

El problema que planteó el facilitador de turno, Pablito "Pablitux" Tortorella: escribir un contador de puntos de tenis. A continuación dejo las premisas generales para quien quiera practicar este Code Kata. Recuerden que la idea es realizar el ejercicio utilizando TDD, y puede hacerse como una Kata individual, o en un Dojo con varias personas.

La idea es hacer un contador de puntos de tenis. No soy experto en tenis y no me quedaron a mano los detalles que Pablo iba mostrando como historias de usuarios, pero creo que todos sabemos un poco cómo se cuenta: "15 - 0", "30 - 0", "40 - 0"; después los sets; detalles de convención como "30 iguales", etc.

Les dejo debajo los primeros tests (a propósito no dejo todos por si alguno quiere intentar por su lado). Quienes quieran pueden ver los fuentes completos de los tests y de la implementación.

Primeros tests:

package la.kleer.yoseki.tenis.tests;

import junit.framework.Assert;
import la.kleer.yoseki.tenis.Tablero;

import org.junit.Test;

public class TenisFixture {
   
   @Test
   public void tableroTituloConDosJugadores()
   {
      Tablero t = new Tablero("Martin", "Carlos");
      Assert.assertEquals("Martin vs Carlos", t.getTitulo());
   }

   @Test
   public void tableroTituloConDosJugadoresAlReves()
   {
      Tablero t = new Tablero("Carlos", "Martin");
      Assert.assertEquals("Carlos vs Martin", t.getTitulo());
   }
   
   @Test
   public void tableroPuntajeInicial()
   {
      Tablero t = new Tablero("Carlos", "Martin");
      Assert.assertEquals("0 - 0", t.getPuntaje());
   }
   
   @Test
   public void puntosJ1()
   {
      Tablero t = new Tablero("Carlos", "Martin");
      t.puntoJugador1();
      Assert.assertEquals("15 - 0", t.getPuntaje());
   }
   
   @Test
   public void puntosJ2()
   {
      Tablero t = new Tablero("Carlos", "Martin");
      t.puntoJugador2();
      Assert.assertEquals("0 - 15", t.getPuntaje());
   }

   @Test
   public void puntosJ1_J1()
   {
      Tablero t = new Tablero("Carlos", "Martin");
      t.puntoJugador1();
      t.puntoJugador1();
      Assert.assertEquals("30 - 0", t.getPuntaje());
   }

   @Test
   public void puntosJ1_J2()
   {
      Tablero t = new Tablero("Carlos", "Martin");
      t.puntoJugador1();
      t.puntoJugador2();
      Assert.assertEquals("15 iguales", t.getPuntaje());
   }

   // Aquí van más tests

}

Finalmente, les dejo una foto del grupo en acción:

 

Akshell: Una IDE completa en línea

Hace rato vengo esperando ver algo como esto. Hubo intentos anteriores auspiciosos, pero esta vez creo que se aproxima mas a mis expectativas porque además plantea un flujo de trabajo bastante completo.

Publico la reseña antes de hacer muchas pruebas porque me entusiasmó el proyecto: Akshell

Se trata de un entorno de desarrollo en línea completo, para Javascript, incluyendo integración directa con Git y GitHub, y despliegue automatizado (incluyendo un entorno de pruebas provisto, pero que puede enviar a cualquier dominio).

Soporta (por ahora) PostgreSQL utilizando un API de Javascript, e incluye un framework propio de pruebas unitarias basado en la biblioteca unit test de Python.

Veamos rápidamente un pantallazo del entorno, con una mínima aplicación de prueba:

Como se ve, hay manejo de proyectos, y en el navegador de la izquierda se ven los diferentes entornos (release y debug por omisión).

El editor tiene coloreo de sintáxis, y también por omisión hay un motor simple de templates para manejar el HTML de la aplicación y hacerlo interactuar con los scripts, como en este ejemplo:

{% extends 'base.html' %}

{% block title %}{{ entry.title }}{% endblock %}

{% block content %}
  {{ entry.title }}
  {{ entry.author }}
  {{ entry.message }}
{% endblock %}

Por ahora esto apunta a un modelo de aplicación bastante específico, pero bastante bien documentado y no lejano a cualquier framework web moderno.

Espero probar un poco más el entorno y poder compartir más datos, y ojalá otros compartan sus experiencias si hacen la prueba.

Cuba: un micro-framework para desarrollo web basado en Rum

(Después de un lapsus entre feriados largos y proyectos, vuelvo a la carga)

En el último Ruby Meetup en Buenos Aires, del que hablé un poco más en el último post hace una semana, otra de las presentaciones correspondió a Michel Martens (soveran, en GitHub), quien presentó Cuba, su microframework inicialmente basado en el proyecto anterior Rum, otro pequeño mapper sobre Rack, pero que quedó discontinuado.

Rack es una abstracción que muchos de los frameworks web de Ruby utilizan para evitar reimplementar toda la interacción básica con un servidor web. Es básicamente una interfaz estandarizada sobre el servidor, independiente de cada implementación particular (soporta Mongrel, WEBrick, FCGI, Thin, y otros).

Rack surgió básicamente como una alternativa a Ruby on Rails, pero hoy hay Rails también puede utilizar Rack por debajo.

Muchos de los frameworks más chicos, como Sinatra, Camping o Merb construyen una capa de aplicación muy fina por encima de Rack, con lo que obtienen un modelo más limpio (obviamente con mucha menos magia que Rails), pero más eficiente cuando uno está dispuesto a trabajar un poco en algunas características en pos de más velocidad, menos consumo de recursos y muchas veces, más claridad en la solución final.

Cuba es otro de estos microframeworks, y tiene algunas características muy interesantes, que me sorprendieron en la presentación de Michel:

• Es realmente minimalista, muy cerca del mismo Rack, lo que otorga mucho control sobre el flujo de trabajo del servidor web.
• A pesar de tener algunas similaridades con Sinatra, es todavía más rápido, y más explícito.
• Integra plantillas para vistas usando Tilt y testing utilizando Cutest y Capybara, aunque es trivial integrar cualquier otra cosa.

Veamos un ejemplo mínimo para entender que tan simple y de bajo nivel es Cuba:

require "cuba"

Cuba.use Rack::Session::Cookie

Cuba.define do
  on get do
    on "hello" do
      res.write "Hello world!"
    end

    on true do
      res.redirect "/hello"
    end
  end
end

Por supuesto hay oportunidades para abstraer todo un poco más pero se puede notar como se puede manipular de manera explícita la respuesta del servidor (res). Esto en Sinatra es más implícito, lo que está bien para muchos casos pero a veces es bueno poder acceder y manipular la respuesta de manera directa.

Aclaro que no tuve oportunidad de probar mucho Cuba, pero me parecieron interesantes algunos de los principios de diseño y los resultados obtenidos, y más aún saber que es un proyecto que está vivo y en manos de alguien que tenemos cerca.

Navegadores actualizados: lo bueno, lo malo y lo feo

En estos últimos días hubo muchísima actividad alrededor de los navegadores web principales.

Por todos lados resonó el lanzamiento de FireFox 4, y con menos ruido desde la comunidad pero mucha promoción se lanzó también Internet Explorer 9. Por su parte, sin tanto ruido, Google Chrome siguió actualizándose silenciosamente y en mi caso pasó a la versión 11 Beta (quienes no están suscriptos al canal beta deberían estar alrededor de la versión 10.0.648.15).

A continuación algunos detalles, apreciaciones y recursos que me parecen interesantes para desarrolladores:

Internet Explorer 9

Esta versión es una imprescindible actualización de Microsoft, mientras hace esfuerzos denodados por eliminar los últimos restos de IE 6, que ya es un problema grave hasta para ellos mismos.

Casualmente, días antes del lanzamiento de IE 9 lanzaron también la campaña http://ie6countdown.com/ que me parece llena de problemas. Este sitio propone incorporar un banner que se activa si el navegador con que se accede al sitio es IE 6, pero en caso que el usuario en cuestión le preste atención y haga clic en el banner, es derivado al sitio de Internet Explorer, donde lo más probable es que termine descargando Explorer 8, no el 9.

He aquí uno de los principales problemas que veo en IE 9: no tiene soporte en Windows XP, un sistema operativo que sigue teniendo un nivel de presencia enorme, y que es el que deben estar utilizando la mayor cantidad de los usuarios que usan aún IE6. El resultado es que muchos de esos usuarios quedarán usando un navegador que todavía no cumple con los estándares modernos.

Fuera de este detalle, IE 9 se puso al día y soporta una buena cantidad de los últimos estándares conocidos como HTML 5. No implementa todos porque Microsoft tomó la decisión de no atacar estándares que no estén a cierto nivel de decisión, con lo que en la práctica hay cosas que otros navegadores soportan y IE9 no, pero el argumento es al menos atendible y la brecha es mucho menor.

IE9 es muy rápido, usa muy bien la aceleración gráfica, y tiene algunas características interesantes en cuanto a su integración con Windows. Claro, sólo corre en Windows, lo que es otra gran diferencia con respecto a los demás.

Para quienes estén interesados, Microsoft Argentina realizará un evento gratuito sobre las novedades, el próximo lunes 28, en sus oficinas de Bouchard 710, 4to piso, en Buenos Aires. Aunque es gratuito, requiere registración. Para más detalles y registro ver el post de Miguel Sáez sobre el evento.

Firefox 4

Mozilla finalmente liberó la nueva versión de su producto más famoso. Desde el punto de vista de los cambios visibles, en varias áreas comparte con IE9 el acercarse más a algunos principios establecidos por Chrome, como minimizar el espacio que el navegador mismo toma de la pantalla, dejando todo lo posible para el contenido.

También avanza en mayor soporte para los estándares, y aunque la versión acaba de salir, un dato importante para los desarrolladores es que FireBug ya está actualizado para esta versión.

Otro aspecto interesante es que esta va a ser la última entrega de Firefox que se deba descargar e instalar. A partir de ahora, las actualizaciones también seguirán el mecanismo de "goteo" de Chrome, y el navegador se mantendrá actualizado en forma paulatina, sin mayor intervención del usuario, aunque algunas actualizaciones queden a la espera de que el navegador -o el sistema completo- se reinicie.

Chrome

Una de las novedades más importantes de Chrome es que cambió el logo/icono, como pueden ver.

Hablando un poco más en serio, los cambios son como siempre incrementales, y en el caso de la versión beta, experimentales. Por ejemplo, ya están probando algunas APIs de voz y usando aceleración gráfica para el soporte 3D en las hojas de estilo.

Más adelante se ve venir que están por quitar Gears de Chrome, ya que esta extensión existía para dar soporte a características que ya se han implementado en HTML5. Sin embargo, muchas opciones de soporte fuera de línea de aplicaciones como GMail, Calendar y Docs lo utilizan, por lo que no sería raro ver que pronto estos productos migren hacia los nuevos estándares.