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

Post original

• 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: "<user's ip address>",
  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

• 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

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

• Usa siempre la última versión
• Une los scripts y minimizalos
• Usa for en vez de each
• Usa id en vez de class
• Recupera una selección en una variable y usa la variable el resto de las veces
• Evita la manipulación DOM
• Devuelve false en los eventos

10 Ways to Instantly Increase Your jQuery Performance

Vía / @wilson

• 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

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