Introducción
Una aplicación web rápida es una aplicación web exitosa. Tu trabajo como desarrollador no terminará hasta que hayas optimizado el rendimiento real y percibido de tu app. No solo es lo correcto para garantizar que tus usuarios tengan una experiencia excelente, sino que hay razones comerciales muy importantes y prácticas para optimizarla. 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 demora de 0.5 segundos (cita). Son números reales con implicaciones reales para tu empresa y tu app web.
La velocidad de la Web es tan importante que Google incluso hace todo un esfuerzo 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.
Hay muchas prácticas recomendadas publicadas para optimizar el rendimiento de tu aplicación web, entre las que se incluyen dos excelentes libros: Sitios web de alto rendimiento y Sitios web aún más rápidos. Las técnicas del servidor (implementar los encabezados de control de caché correctos) y del cliente (proporcionar atributos de altura y ancho de imagen) se combinan en una estrategia de extremo a extremo para optimizar el rendimiento. Con tantas sugerencias y trucos, a veces es difícil medir cómo se mapean a la vida real y a tu app web real.
Afortunadamente, las herramientas para desarrolladores de Chrome (incluidas en todas las instancias de Chrome) ofrecen 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 abordará el panel Audits, que tiene un alcance similar al de la popular herramienta YSlow, y cómo puede usarlo para acelerar su sitio web, disminuir la latencia y aumentar la satisfacción de los usuarios.
Tenga en cuenta que, actualmente, la herramienta Panel de auditorías solo está disponible en Chrome, pero esperamos que otros navegadores WebKit la integren.
Getting Started
Para ilustrar cómo el Panel de auditorías puede recomendar mejoras en el rendimiento de las aplicaciones web, implementaremos la herramienta en nuestra propia www.html5rocks.com. Usaremos el Panel de auditorías para que nuestro sitio sea aún más rápido.
Iniciar Herramientas para desarrolladores es tan fácil como usar el ícono de Chrome (arriba a la derecha de la ventana de Chrome) y seleccionar Herramientas > Herramientas para desarrolladores.
Si desea obtener más información para comenzar a usar las Herramientas para desarrolladores, consulte la documentación oficial.
El panel Audits se encuentra en el panel de botones principal de las herramientas. Notarás que, una vez seleccionado, el panel Audits aún no ha analizado tu aplicación web. La ejecución de todas las heurísticas puede ser lenta, especialmente para una aplicación web grande como Gmail, por lo que la herramienta está inhabilitada de forma predeterminada.
Para comenzar, haga clic en el botón Ejecutar, que vuelve a cargar la aplicación web con la heurística de rendimiento activada. Cuando se vuelva a cargar la página, verás una lista de recomendaciones similar a la que se muestra en la siguiente captura de pantalla.
Notarás que el panel Audits clasifica las sugerencias por gravedad: las más graves están marcadas con un punto rojo y las sugerencias de gravedad media marcadas con un punto amarillo. Esta codificación por color te ayuda a priorizar las sugerencias, centrándote primero en las ganancias más importantes (y mayores).
El número que aparece entre paréntesis, después de la sugerencia, indica cuántas instancias detectó la Herramienta de auditoría. Por ejemplo, hubo 12 instancias de "Aprovechar el almacenamiento en 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ó anteriormente, existen muchas estrategias conocidas y muy probadas para optimizar el rendimiento de las aplicaciones web. No los explicaremos 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 acerca de los detalles de la optimización de aplicaciones web, se incluyen los siguientes instructivos para que la Web sea más rápida y High Scalability's Latency is Everywhere and It Costs You Sales.
El panel Audits agrupa sus sugerencias en dos categorías: Uso de la red y Rendimiento de la página web.
De acuerdo con el Panel de auditorías, para mejorar la utilización de la red, debemos hacer lo siguiente:
- aprovechar el almacenamiento en caché del navegador
- aprovechar el almacenamiento en caché del proxy
- Minimizar el tamaño de la cookie
- Publicar contenido estático desde un dominio sin cookies
- especificar dimensiones de imagen
Para mejorar el rendimiento de la página web, debemos hacer lo siguiente:
- optimizar el orden de los estilos y las secuencias de comandos
- Quite las reglas de CSS sin usar
Echemos un vistazo a una de las estrategias en las que podemos centrarnos para mejorar el rendimiento de htmlrocks.com.
Aprovecha el almacenamiento en caché del navegador
Por ejemplo, analicemos primero la recomendación para aprovechar el almacenamiento en caché del navegador. ¿Qué significa esto específicamente? Abriendo la opción en la IU, verás los siguientes detalles:
- A los siguientes recursos les falta el vencimiento de la caché. Es posible que los navegadores no almacenen en caché los recursos que no especifican un vencimiento.
- Los siguientes recursos que se pueden almacenar en caché tienen una vida útil de actualización corta.
- Los siguientes recursos explícitamente no se pueden almacenar en caché. Considera permitir que se puedan almacenar en caché si es posible.
El almacenamiento en caché de recursos es una excelente manera de mejorar la utilización de la red, lo que reduce las facturas de ancho de banda para el desarrollador y reduce los tiempos de respuesta para el usuario. Lamentablemente, la herramienta no te indica exactamente lo que debes hacer, por lo que debemos profundizar un poco en las recomendaciones y usar nuestros conocimientos sobre optimizaciones de rendimiento de aplicaciones web para aplicar estas sugerencias.
Almacenar en caché
Sin ahondar en el almacenamiento en caché HTTP, sin duda podemos cubrir algunos de los conceptos básicos. El protocolo HTTP incluye instrucciones para almacenar en caché, lo que permite que el servidor y el cliente reduzcan la cantidad de datos que se deben transferir por la transferencia. Por ejemplo, el servidor puede indicar al cliente que guarde el recurso de forma local durante un período determinado, lo que elimina la necesidad de volver a solicitar el recurso. El cliente también puede preguntar si el recurso del servidor es más reciente que el que se almacena de forma local. Lo ideal es que si un recurso es estático, el servidor debería indicarle al cliente que almacene el recurso de forma local y evitar solicitarlo en el futuro. Como puedes imaginar, hay una cantidad increíble de detalles relacionados con el almacenamiento en caché de HTTP, pero el tema general es "reducir la cantidad de datos que se envían de manera inalámbrica almacenando recursos localmente en el cliente".
Cómo corregir recursos que no se pueden almacenar en caché
Veamos una recomendación en profundidad y aprendamos a conectarla a otras herramientas dentro de Herramientas para desarrolladores. En concreto, veamos cómo corregir “de forma explícita los siguientes recursos no se pueden almacenar en caché”.
Debido a que el almacenamiento en caché se realiza a través del protocolo HTTP, debemos analizar la solicitud y la respuesta HTTP del recurso http://www.html5rocks.com/. Simplemente haz clic en el recurso para ver los encabezados y los detalles de la solicitud y la respuesta originales.
Se te dirigirá 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, irás al panel Network.
Estamos tratando de confirmar que el servidor le indicó al cliente que "no almacenes en caché la página de inicio de html5rocks.com". Para ello, hacemos clic en el recurso y veremos los encabezados de respuesta, ya que estos son los encabezados y las instrucciones enviadas por el servidor.
Cache-Control.Efectivamente, el servidor envió el encabezado "Cache-Control: no-cache" al cliente. Como imaginarías, esto le indica al cliente que siempre solicite el recurso y no lo almacene en caché de forma local. Específicamente, la especificación HTTP para "no-cache" lee 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 revalidación exitosa con el servidor de origen. Esto permite que un servidor de origen evite el almacenamiento en caché incluso mediante cachés que se configuraron para mostrar respuestas inactivas a las solicitudes del cliente”.
Esa 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 enviarán información potencialmente redundante.
Ahora que confirmamos la causa raíz de la sugerencia de auditoría, ¿cómo la corregimos? En este caso, la solución implica la configuración o el código del servidor. Según tu configuración, puedes habilitar el almacenamiento en caché a través de los parámetros de configuración del servidor web o del framework de la 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, las sugerencias
Recuerda que el panel Audits recomienda mejoras basadas en heurísticas genéricas. Es aplicar prácticas recomendadas, aprendidas a lo largo de los años, a tu aplicación web específica. La mayoría de las veces, estas recomendaciones son acertadas y deben tomarse en cuenta.
Sin embargo, hay algunos casos en los que la recomendación puede ser correcta, pero tal vez no genera ninguna mejora. Por ejemplo, si tu página tiene una sola imagen grande, el Panel de auditorías recomendaría agregar atributos de ancho y alto a la etiqueta <img> (para que el motor de procesamiento reconozca las dimensiones de la imagen sin tener que descargarla ni inspeccionarla). Si bien este suele ser un buen consejo, no será útil si la imagen es el único elemento de la página.
Recuerda aplicar estas sugerencias después de entenderlas. Y no olvides medir el rendimiento antes y después de los cambios para asegurarte de que realmente se produzca 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 aplicación web. La velocidad es un atributo crucial de la app web, ya que muchas empresas encontraron correlaciones directas entre el rendimiento, los ingresos o la actividad. Optimizar el rendimiento de tu app no es solo lo correcto para los usuarios, sino también para los resultados de tu empresa.