Performance Is a Feature

Crear aplicaciones rápidas y con buena capacidad de respuesta no solo es importante para satisfacer las necesidades de los usuarios, sino también para obtener mejores resultados finales. Por ejemplo, Google ahora tiene en cuenta la velocidad de los sitios al determinar su posición en las páginas de resultados. Amazon ha descubierto que cada 100 ms de aumento en el tiempo de carga de las páginas reduce las ventas en un 1%. Y también Microsoft ha observado que los clics en anuncios se reducen en un 4% al disminuir la velocidad de una página en 2 segundos.

La optimización de aplicaciones web abarca todos los aspectos del desarrollo, desde el servidor hasta la red y el cliente. Centrarse en el rendimiento es esencial para lograr el éxito.

Themes

• Almacenar de forma local Se accede más rápido a los datos almacenados en el cliente que a los almacenados en el servidor. También se accede más rápido a los datos almacenados más próximos a los cálculos.
• Proceso en segundo plano Cualquier proceso que no ayude al usuario a ver una respuesta a su acción se debe realizar en segundo plano.
• Minimizar conexiones Cada conexión requiere un trabajo de configuración y desinstalaión.
• Disminuye el ancho de banda Un menor ancho de banda supone una respuesta más rápida.

Technologies

• Almacenamiento en caché HTTP Permite a los clientes y a los servidores reducir las conexiones y el ancho de banda.
• Servidores en caché HTTP Los servidores como Varnish y Squid pueden almacenar tu contenido en la caché.
• Memcache Recuperación y almacenamiento del servidor eficaz de datos de valores o claves
• Web Workers Ejecuta JavaScript en segundo plano, en paralelo a la ventana principal.
• Web Sockets Comunicación de flujo bidireccional eficaz
• Almacenamiento local Almacenamiento de datos de valores o claves del cliente
• Indexed Database Almacenamiento de objetos sencillos del cliente
• Caché de aplicaciones Almacenamiento en caché local de elementos de aplicaciones web para uso sin conexión
• Transiciones y animaciones CSS3 Cambios en las propiedades de forma nativa (y posiblemente acelerada por hardware) para elementos
• Objetos móviles CSS Combinar muchas imágenes pequeñas en una imagen reduce las descargas.
• Precarga de enlaces Pide al navegador que descargue otras páginas en segundo plano.
• Cliente nativo Ejecuta código nativo (C/C++) en la zona de pruebas de un navegador.
• Conexiones persistentes HTTP enviar varios recursos a través de la misma conexión
• Fuentes web Mostrar texto de forma nativa en lugar de imágenes de descarga
• URI de datos Inserta datos binarios, como imágenes en HTML, reduciendo las solicitudes HTTP.

Techniques

• Almacenamiento en caché HTTP Utiliza If-Modified-Since y Etags para reducir el contenido que se ha de cambiar.
• Almacenamiento en caché de datos Utiliza sistemas como Memcache para datos a los que se acceda con frecuencia.
• Almacenamiento en caché de datos locales Incluye datos en el cliente para un acceso más rápido.
• Redes de entrega de contenido Aproxima el contenido al cliente a través de una red CDN.
• Recuperación eficaz de datos Minimiza llamadas SQL, reduce uniones y recupera elementos a través de un índice.
• Precálculo de resultados Desnormaliza o precalcula datos recuperados con frecuencia.
• Minificación Reduce tu código JavaScript y CSS, e incluso los archivos HTML.
• Compresión Comprime tus elementos a través del encabezado "Accept-Encoding" de HTTP.
• Devoluciones de llamada asíncronas Pospón el trabajo y recibe una notificación cuando esté listo.
• Aceleración por hardware Los navegadores utilizan ahora la GPU para elementos como canvas y las transformaciones.
• Aproximación de los cálculos a los datos El tamaño de los datos es superior al de los algoritmos. Debes mover el código, no los datos.
• Perfiles Utiliza herramientas para interpretar y recopilar datos reales. Debes medir, no adivinar.
• Objetos móviles Coloca muchas imágenes en un archivo reduciendo las solicitudes HTTP.
• Optimización de imágenes Comprime tus imágenes y escoge el formato correcto para el trabajo.
• Especificación del ancho y del alto de la imagen Indica al navegador cómo mostrar las imágenes antes de que se descarguen.
• Colocación del código JavaScript en la parte inferior del código HTML Deja que la página se descargue y empiece a mostrar imágenes.
• Representación en el cliente Utiliza canvas para dibujar imágenes o fuentes web para representar texto en lugar de descargar elementos.
• Artículos sobre sitios web de alto rendimiento y sitios web aún más rápidos Trata el rendimiento de las aplicaciones web en detalle.

Tools

• Herramientas para desarrolladores de Chrome y Safari Analiza solicitudes, navega por el DOM, establece puntos de interrupción para JavaScript e sumérgete en el código.
• Dragonfly para Opera Similar a las Herramientas para desarrolladores de Webkit, pero para Opera
• Firebug para Firefox Similar a Dragonfly de Opera, pero para Firefox
• El panel Audit de las Herramientas para desarrolladores Obtén sugerencias para acelerar tu aplicación web.
• Speedtracer: no solo para GWT, consulta el complemento Ruby. Identifica y soluciona incidencias de rendimiento en tu aplicación web.
• YSlow para Firebug Como el panel Audit de las Herramientas para desarrolladores, pero para Firefox
• Compilador de cierre de JavaScript Minifica, reduce y ofusca tu código JavaScript.
• Compresor YUI Reduce y ofusca tu código JavaScript y CSS.
• WebPageTest Una colaboración de la industria que proporciona la infraestructura necesaria para realizar pruebas en todo el mundo

Further Reading

• Let's make the web faster
• High Performance Web Sites
• Even Faster Web Sites
• The psychology of web performance
• Practical guide to controller experiments on the Web