Introducción
Una app web rápida es una app web exitosa. Tu trabajo como desarrollador no termina hasta que optimizas el rendimiento real y percibido de tu app. No solo es lo correcto para garantizar que tus usuarios tengan una experiencia excelente, sino que existen razones comerciales muy prácticas y importantes para realizar la optimización. Amazon midió una disminución del 1% en las ventas por cada 100 ms de latencia del sitio, y Google midió una disminución del 20% en el tráfico por cada 0.5 segundos de retraso (cita). Esas son cifras reales con implicaciones reales para tu empresa y tu app web.
La velocidad de la Web es tan importante que Google incluso tiene un esfuerzo completo dedicado a hacer que la Web sea más rápida. Si necesitas otro motivo para optimizar el rendimiento de tu app, Google anunció que se agregó la velocidad de la página a su algoritmo de clasificación.
Existen muchas prácticas recomendadas publicadas para optimizar el rendimiento de tu app web, incluidos dos excelentes libros (High Performance Web Sites y Even Faster Web Sites). Las técnicas del servidor (implementar los encabezados de control de caché correctos) y del cliente (proporcionar atributos de ancho y alto de la imagen) se combinan en una estrategia de extremo a extremo para optimizar el rendimiento. Con tantas sugerencias y trucos, a veces es difícil evaluar cómo se relacionan con la vida real y tu app web real.
Por suerte, las Herramientas para desarrolladores de Chrome (incluidas en cada instancia de Chrome) proporcionan una excelente herramienta que inspecciona tu app web y ofrece recomendaciones personalizadas para mejorar el rendimiento y reducir la latencia. En este artículo, se analizará el Panel de auditorías, que tiene un alcance similar al de la popular herramienta YSlow, y cómo puedes usarlo para acelerar tu sitio web, disminuir la latencia y aumentar la satisfacción del usuario.
Ten en cuenta que, por el momento, la herramienta del panel de auditorías solo está disponible en Chrome, pero esperamos que otros navegadores de WebKit la integren más adelante.
Comenzar
Para ilustrar cómo el panel de auditorías puede recomendar mejoras en el rendimiento de las apps web, usaremos la herramienta en nuestro sitio www.html5rocks.com. Usaremos el panel de auditorías para ayudar a que nuestro sitio sea aún más rápido.
Para iniciar DevTools, es tan fácil como usar el ícono de Chrome (en la esquina superior derecha de la ventana de Chrome) y seleccionar Herramientas > Herramientas para desarrolladores.
Para obtener más información sobre cómo comenzar a usar DevTools, lee la documentación oficial.
El panel de auditorías se encuentra en el panel de botones de herramientas principal. Notarás que, una vez seleccionado, el Panel de auditorías aún no ejecutó el análisis de tu app web. Ejecutar todas las heurísticas puede ser lento, en especial para una app web grande como Gmail, por lo que la herramienta está inhabilitada de forma predeterminada.
Hagamos clic en el botón Run para comenzar. Se volverá a cargar la app web con las heurísticas de rendimiento activadas. Después de que se vuelva a cargar la página, verás una lista de recomendaciones similar a la siguiente captura de pantalla.
Notarás que el panel de auditorías clasifica las sugerencias por gravedad, las más graves están marcadas con un punto rojo y las de gravedad media con un punto amarillo. Esta codificación por colores te ayuda a priorizar las sugerencias y a enfocarte primero en las más importantes (y con mayores ganancias).
El número entre paréntesis, después de la sugerencia, indica cuántas instancias detectó la herramienta de auditoría. Por ejemplo, hubo 12 instancias de "Aprovecha la caché del navegador". Esto te da una idea de la frecuencia con la que se puede aplicar la sugerencia.
Estrategias de velocidad
Como se mencionó antes, existen muchas estrategias conocidas y probadas para optimizar el rendimiento de las apps web. No los cubriremos todos en detalle en este artículo, pero es fácil encontrar más información y detalles. Entre los recursos útiles para obtener más información sobre los aspectos específicos de la optimización de apps web, se incluyen los instructivos de Aumentemos la velocidad de la Web y La latencia de alta escalabilidad está en todas partes y te cuesta ventas.
El panel de auditorías agrupa sus sugerencias en dos categorías: Uso de red y Rendimiento de la página web.
Según el panel de auditorías, para mejorar la utilización de la red, debemos hacer lo siguiente:
- aprovecha el almacenamiento en caché del navegador
- aprovechar el almacenamiento en caché de proxy
- minimizar el tamaño de la cookie
- entrega contenido estático desde un dominio sin cookies
- Especifica las dimensiones de la imagen
Para mejorar el rendimiento de la página web, debemos hacer lo siguiente:
- Optimiza el orden de los estilos y las secuencias de comandos
- Quita las reglas de CSS que no se usen
Veamos una de las estrategias en las que podemos enfocarnos para mejorar el rendimiento de htmlrocks.com.
Aprovecha el almacenamiento en caché del navegador
Por ejemplo, primero analicemos la recomendación para aprovechar la caché del navegador. ¿Qué significa esto específicamente? Cuando abrimos la opción en la IU, se nos presentan los siguientes detalles:
- A los siguientes recursos les falta un vencimiento de caché. Es posible que los navegadores no almacenen en caché los recursos que no especifican una fecha de vencimiento.
- Los siguientes recursos almacenables en caché tienen una vida útil de actualización corta.
- Los siguientes recursos no se pueden almacenar en caché de forma explícita. Si es posible, considera que se puedan almacenar en caché.
El almacenamiento en caché de recursos es una excelente manera de mejorar el uso de la red, lo que genera facturas de ancho de banda más bajas para el desarrollador y tiempos de respuesta más rápidos para el usuario. Lamentablemente, la herramienta no te indica exactamente lo que debes hacer, por lo que debemos analizar un poco las recomendaciones y usar nuestros conocimientos sobre las optimizaciones de rendimiento de las apps web para aplicar estas sugerencias.
Almacenamiento en caché
Sin profundizar en el almacenamiento en caché HTTP, podemos abordar algunos de los conceptos básicos. El protocolo HTTP incluye instrucciones de almacenamiento en caché, lo que permite que el servidor y el cliente reduzcan la cantidad de datos que se deben transferir por cable. Por ejemplo, el servidor puede indicarle al cliente que guarde el recurso de forma local durante un período determinado, lo que elimina la necesidad de volver a solicitarlo. El cliente también puede preguntar si el recurso del servidor es más reciente que el que se almacena de forma local. Idealmente, si un recurso es estático, el servidor debe indicarle al cliente que lo almacene de forma local y evitar pedirle el recurso al servidor en el futuro. Como puedes imaginar, hay una cantidad increíble de detalles sobre el almacenamiento en caché de HTTP, pero el tema general es “reducir la cantidad de datos que se envían por cable almacenando recursos de forma local en el cliente”.
Cómo corregir recursos que no se pueden almacenar en caché
Analicemos una recomendación en profundidad y aprendamos a conectar la recomendación de auditoría a otras herramientas dentro de DevTools. Específicamente, veamos cómo corregir el error "Los siguientes recursos no se pueden almacenar en caché de forma explícita".
Como el almacenamiento en caché se realiza a través del protocolo HTTP, debemos observar la solicitud y la respuesta HTTP del recurso http://www.html5rocks.com/. Solo tienes que hacer clic en el recurso para ver los encabezados y los detalles de la solicitud y la respuesta originales.
Luego, se te dirige al panel Red, Recursos o Fuentes (según el tipo de recurso en el que se hizo clic) con más información. En este caso, se nos dirigirá al panel Red.
Estamos tratando de confirmar que el servidor le dijo al cliente que no almacene en caché la página principal de html5rocks.com. Para ello, hacemos clic en el recurso para ver los encabezados de respuesta, ya que estos son los encabezados y las instrucciones que envía el servidor.
Cache-Control.Efectivamente, el servidor envió el encabezado "Cache-Control: no-cache" al cliente. Esto, como puedes imaginar, le indica al cliente que siempre solicite el recurso y que no lo almacene en caché de forma local. Específicamente, la especificación HTTP para "no-cache" dice lo siguiente:
"Si la directiva no-cache no especifica un nombre de campo, la caché NO DEBE usar la respuesta para satisfacer una solicitud posterior sin una validación correcta con el servidor de origen. Esto permite que un servidor de origen evite el almacenamiento en caché, incluso por las cachés que se configuraron para mostrar respuestas inactivas a las solicitudes de los clientes".
Esta es la razón por la que el Panel de auditorías recomienda habilitar el almacenamiento en caché, ya que, de lo contrario, el servidor y el cliente envían información potencialmente redundante.
Ahora que confirmamos la causa raíz de la sugerencia de auditoría, ¿cómo la solucionamos? En este caso, la solución implica configuración o código del servidor. Según tu configuración, puedes habilitar el almacenamiento en caché a través de la configuración de tu servidor web o de las configuraciones en el framework de tu app web. Específicamente, debes incluir un encabezado Expires y un Cache-Control: private con un parámetro max-age para cualquier recurso que quieras almacenar en caché.
Las sugerencias son solo eso, sugerencias
Recuerda que el panel de auditorías recomienda mejoras basadas en heurísticas genéricas. Consiste en aplicar las prácticas recomendadas, que se aprenden a lo largo de muchos años, a tu aplicación web específica. La mayoría de las veces, estas recomendaciones son acertadas y deben tenerse en cuenta.
Sin embargo, hay algunos casos en los que la recomendación puede ser correcta, pero en realidad no genera ninguna mejora. Por ejemplo, si tu página solo tiene una imagen grande, el Panel de auditorías recomendará agregar atributos de ancho y altura a la etiqueta <img> (para que el motor de renderización conozca las dimensiones de la imagen sin tener que descargarla ni inspeccionarla). Si bien este es un buen consejo en general, no será de mucha ayuda si la imagen es el único elemento de la página.
Recuerda aplicar estas sugerencias después de comprenderlas. Además, no olvides medir el rendimiento antes y después de los cambios para asegurarte de que haya una mejora.
Resumen
El panel de auditorías es una herramienta excelente y fácil de usar que te mostrará rápidamente cómo optimizar el rendimiento de tu app web. La velocidad es un atributo fundamental de las apps web, ya que muchas empresas encontraron correlaciones directas entre el rendimiento y los ingresos o la actividad. Optimizar el rendimiento de tu app no solo es lo correcto para los usuarios, sino también para las ganancias de tu empresa.