|

El rendimiento de Google Instant Previews

ByLuis

Algunas veces no nos paramos a pensar en los cambios que añade una web, en este caso Google, los problemas que pueden aparecer en tema de rendimiento. Y estos problemas suelen ser fundamentales a la hora de la impresión que se lleva un usuario de la web, claro, que Google no se caracteriza por problemas de rendimiento y los expertos que están trabajando allá deben ser de lo mejorcito que existe.

Después de este rollo introductorio, me gustaría apuntar los 3 aspectos que utiliza Google para mejorar el rendimiento que se centran sobre todo en la reducción del número de peticiones HTTP:

  • Compilación de Javascript: mediante Closure Compiler, consigue reducir el tamaño de los ficheros js, reutilizar variables, …
  • JSONP bajo demando: JSONP permite envolver la respuesta JSON con una llamada Javascript. Se realizan llamadas directas al script en vez de usar Ajax, lo cual permite hacer llamadas crossdomain y que el navegador lo cachee perfectamente. El problema es que si se añade la llamada con un createElement, el navegador se queda cargando, por lo que es mejor meterlo entre un setTimeout.
  • DATA URIs: es un método de añadir contenido en URLs usando base64, el problema es que IE8 sólo admite DATA URIs de 32k, por lo que dividen las imagenes en trozos y los “empalman” con etiquetas IMG. También han comprobado que aunque base64 añade hasta un 33% del tamaño, como lo devuelven en gzip, el tamaño final es más o menos el mismo.

Está claro que hay que aprender de los que saben.

Instant Previews: Under the hood

Vía / High Scalability

Boomerang: medición de rendimiento desde la perspectiva del usuario

ByLuis

Boomerang es una librería desarrollada por Yahoo que permite medir diferentes aspectos de rendimiento de nuestra web desde la perspectiva del usuario final. Añadiendo un script y distintas funciones, podemos comprobar diversos aspectos de nuestra web como:

  • El tiempo que el usuario cree que tarda en cargarse la web
  • El tiempo de carga de contenido dinámico
  • El ancho de banda durante la carga de la página
  • Tiempo de carga de diferentes módulos, por ejemplo módulos de Twitter o Facebook
  • Latencia HTTP
  • Latencia DNS
BOOMR.init({
  user_ip: "",
  beacon_url: "http://yoursite.com/path/to/beacon.php",
  BW: {
    base_url: 'http://yoursite.com/path/to/bandwidth/images/"
  }
});

Además permite etiquetar páginas para realizar distintos tests y poder compararlos, realizar tests a usuarios aleatorios y evitar abusos de uso

Boomerang

Vía / WebAppers

Comparativa de Data Stores

ByLuis

Entendiendo por Data Stores los sistemas de almacenamiento tanto RDBMS o NoSQL, el PDF que referencio compara los distintos tipos de data stores que hay:

  • Almacenamientos clave-valor
  • Almacenamiento de documentos
  • Similares al BigTable de Google
  • BD relacionales escalables

De cada tipo de data store explica cuales son y que características tiene, y por último hace comparativa entre ellos. También nos dice posibles ejemplos de uso:

  • Sistemas clave-valor: útil cuando los datos almacenados se basan en el acceso de información mediante un ID (sin joins) y que se actualiza pocas veces o se actualiza siempre de la misma manera.
  • Almacenamiento de documentos: cuando la información almacenada depende de varios campos (por ejemplo un stock de vehículos).
  • Sistemas basados en BigTable: se puede tratar de aplicaciones similares a los almacenamientos documentales, pero con la diferencia de que es necesario un elevado número de registros.
  • RDBMS escalables: cuando nuestra aplicación necesita de relaciones entre distintos datos y nuestro servidor se queda corto para aguantar el volumen de datos o de transacciones.

Me gustaría destacar que entre estos data store, se encuentra Cassandra, proyecto open source de Facebook, que ahora es un proyecto de Apache y que Twitter va a usar para sustituir MySQL.

High Performance Scalable Data Stores

|

Escalar aplicaciones web usando HMVC

ByLuis

Hierarchical-Model-View-Controller (HMVC) es una variante del MVC que se forma mediante una colección de estos, siendo cada MVC independiente de los otros, y siendo un aspecto importante la reutilización de código, por lo que la localización física de los MVC no es importante. El HMVC es muy efectivo a la hora de testear módulos de la aplicación independientes, y una buena opción para escalar nuestra aplicación.

El tutorial nos muestra cómo usar Kohana para llevar a cabo una aplicación que implemente HMVC. Está claro que una aplicación así puede ser algo más difícil de diseñar y que no siempre puede que necesitemos este grado de escalabilidad.

Scaling Web Applications with HMVC

5 consejos para reducir la carga de la página enfocado a imágenes

ByLuis

Una cosa es realizar una aplicación o tener un blog y otra es que el número de visitas aumenten y tengamos que optimizar la carga de la página. Hay que intentar ganar rendimiento de cualquier forma, y una de estas formas es mediante imágenes, por eso estos consejos (que quizás sean un poco obvios) no vienen mal:

  • Evita usar imágenes complejas o grandes: cuanto más ligeras sean antes cargarán.
  • Optimiza las imágenes: existe diferentes formatos, y cada cual es conveniente en un caso. Los más usados son GIF, PNG y JPEG. JPEG y PNG tienen un valor de calidad de la imagen, reducirlo puede hacernos ganar algunos Kb y no perder en calidad.
  • Indica el tamaño de las imágenes en el HTML: así el navegador sabrá como repartir el espacio para la imagen antes de que cargue por lo que el render de la página será más rápido.
  • Precarga imágenes: aquí el autor dice un consejo un tanto peculiar, no sé si bueno o malo, pero sí interesante. Se trata de cargar imágenes grandes en páginas anteriores y asignarle el tamaño 1×1 para que no se vean y así esté cargada anteriormente. Eso sí, forzaría a que tire de caché para que no te la cargue dos veces.
  • Animaciones flash: si tienes que usar una animación no uses GIFs animados (sí, algunos te encuentras aún), usa flash, pero tampoco te pases.

Top 5 tips to decrease the load time of your websites via images

Benchmarks de PHP

ByLuis

The PHP Benchmark es un sitio que realiza tests de prueba para ver rendimientos de funciones y así programar de forma más eficiente. La página está bastante completa, ya que también ofrece el código de las funciones que ha ejecutado.

Gracias a las pruebas podemos darnos cuenta de:

  • Realizar un foreach es siempre más rápido, y si no recuperamos la clave del array mejor aún.
  • Un for es más rápido si no calculamos previamente en una variable el tamaño del array que recorremos, y que sizeof es más rapido que count.
  • Cuando vamos a asignar el valor de una posición de un array a una variable para tratar con ella, es conveniente hacerlo por referencia ($alias = &$aSingleDimArray[$i]).
  • No es más rápido crear un objeto como referencia ($obj =& new SomeClass();).
  • if es más rápido que switch/case, y ligeramente más rápido es usar == que ===.
  • Parece ser que el uso de comilla simple o doble en las últimas versiones se ha mejorado y no existe apenas diferencia.

The PHP Benchmark

Firebug y el rendimiento Ajax

ByLuis

Ajax es una de las técnicas que más se están extendiendo por Internet. Su desarrollo es sencillo, pero su abuso es importante. Hay que tener en cuidado al desarrollar usando Ajax ya que podemos tener problemas de rendimiento.
En IBM nos ofrecen un artículo interesante sobre el rendimiento de estas aplicaciones y como medirlo y mejorarlo mediante Firebug e YSlow.
El tiempo de una llamada Ajax se centra en tres aspectos: tiempo de respuesta del servidor, tiempo de transferencia y tiempo de procesado en el cliente. Es importante bajar estos tiempos ya que así agilizaremos nuestras aplicaciones.
Reduce el número de llamadas HTTP, aunque en el cliente se puedan anular, en el servidor se procesan, por lo que es tiempo de proceso malgastado. También es interesante reducir el tamaño del contenido de la respuesta que devuelve el servidor, cuanto menos haya para mandar, menos se tarda en enviar y menos se tarda en procesar.
Una lectura interesante que nos ayudará paso a paso a mejorar nuestras aplicaciones.
Ajax performance analysis