Nuevo Invento Performance de Frontend – Parte 2: Impulsando la Velocidad de tu Sitio Web
Introducción
En la Parte 2 de nuestra serie sobre el nuevo invento en performance de frontend, profundizaremos en técnicas avanzadas para mejorar la velocidad de carga y la experiencia del usuario en tu sitio web. La optimización del frontend es crucial para mantener a tus visitantes comprometidos y reducir las tasas de rebote.
Técnicas Avanzadas de Optimización
- Optimización de Imágenes: Utiliza formatos de imagen modernos como WebP para reducir el tamaño de tus imágenes sin comprometer la calidad.
- Lazy Loading: Implementa el cargado perezoso para imágenes y videos, asegurando que solo se carguen cuando sean visibles en la pantalla del usuario.
- Minificación de Código: Minifica tus archivos CSS y JavaScript para reducir su tamaño y acelerar el tiempo de carga.
- Uso de CDN: Utiliza una Red de Entrega de Contenidos (CDN) para distribuir tus archivos estáticos en servidores de todo el mundo, acercándolos a tus usuarios.
- Caché de Navegador: Configura correctamente las reglas de caché para permitir que los navegadores almacenen en caché los recursos estáticos y reducir las solicitudes innecesarias.
Herramientas de Análisis de Rendimiento
Para medir y monitorear el rendimiento de tu sitio web, utiliza herramientas como:
- Google PageSpeed Insights: Proporciona un análisis detallado del rendimiento y sugerencias de optimización.
- Lighthouse: Una herramienta de código abierto que audita el rendimiento, la accesibilidad y la SEO de tu sitio web.
- WebPageTest: Ofrece pruebas de rendimiento detalladas desde diferentes ubicaciones y dispositivos.
Conclusión
Implementar estas técnicas avanzadas de optimización y utilizar herramientas de análisis de rendimiento puede marcar una gran diferencia en la velocidad y la experiencia del usuario de tu sitio web. Recuerda que el rendimiento de frontend es un viaje continuo de mejora y adaptación a las nuevas tecnologías y prácticas.
Hace unos meses creé este post preguntando si alguien tenía idea de cómo evaluar el rendimiento del frontend, donde u/Dry_Author8849 me tiró algunas ideas y recomendaciones.
Pude ir dedicándole ratos a lo que quería hacer y paso a mostrar una primera implementación. Revisé esto con el equipo de frontend (al que no pertenezco), les gustó la idea, los gráficos y me preguntaron/pidieron algunos cambios para tener más granularidad pero eso ya son particularidades de la empresa en la que estoy. Creo que con lo que cuento acá es suficiente para que a alguien le sirva en el futuro.
El browser ofrece un objeto 'performance' que para usarlo/probarlo solo necesitan apretar F12, ir a la pestaña Console, definir una variable/constante, pedir datos con getEntriesByType() y luego ver las métricas que nos ofrece:
const navigationEntry = performance.getEntriesByType('navigation')[0]
navigationEntry
Métricas que nos ofrece el objeto performance.
Por pragmatismo y sencillez opté por usar Playwright, un framework de automatización de frontend y en mi caso la implementación es una pavada. Antes del bloque de código que hay debajo hice la inicialización del framework de automatización donde defino variables, instancio algunos objetos, etc. y cuando el browser y el entorno están listos es tan sencillo como:
await dashboardPage.createPerformanceMark(location[0])
await dashboardPage.navigateTo(location[0])
await dashboardPage.waitForDomLoadEvent()
await dashboardPage.createPerformanceMark(location[0]+'End')
await dashboardPage.trackPerformanceMetric(location[0], testMetrics)
El objeto performance que comentaba antes es la manera en la que el browser nos da acceso a la Performance API, y nos permite crear marcas en la linea de tiempo a medida que vamos navegando. En este caso:
– location[#] es un array de strings estáticos, lo uso para identificar las marcas en la linea de tiempo y para armar dinámicamente selectores de navegación.
– createPerformanceMark es una abstracción que hice para crear una marca de inicio en la linea de tiempo del objeto performance.
– navigateTo() arma un selector de manera dinámica y le hace click para navegar entre páginas de la aplicación
– Espero el evento 'DOMContentLoaded' con la implementación que me ofrece Playwright
– Creo una segunda marca al finalizar
– trackPerformanceMetric() es netamente mío. Tomo las métricas de comienzo y fin, y luego actualizo un objeto donde recopilo y formateo los datos de una manera determinada.
Ya con los primeros cabos atados pude hacer un recorrido muy acotado y superficial por el producto que desarrolla la empresa para la que trabajo. Ejecuté mi script 5 veces cambiando de usuario cada vez, indicado por la leyenda de colores a la derecha. Esto nos da grupos de 5 columnas, una para cada usuario, y cada grupo de 5 columnas nos da el tiempo que tardó cada uno de esos usuarios en cargar una página determinada. A modo de ejemplo, el primer grupo de 5 columnas es el tiempo que tardó cada usuario desde que se clickea el botón 'login' hasta que se carga el dashboard (igual y estático para todo usuario):
Sí, tenemos usuarios que esperan más de 20 segundos al hacer un login.
Hasta antes de tener estos gráficos el feedback de devs, qa y usuarios era 'anda un toque lento, no?'. Ahora con un seguimiento más serio y fundamentado, y después de una primera iteración de mejoras, el tiempo de login mejoró para todos y de manera notable para los usuarios que más demoraban:
Tiempos de login después de una primera tanda de mejoras.
Ese proceso de login hacía una pila de cosas que se mejoraron o bien se trasladaron a otras ubicaciones de nuestra aplicación, cuyo impacto con respecto al primer gráfico se ve en los siguientes grupos de columnas. El login sigue tardando mucho pero los tiempos empiezan a mejorar y toca seguir iterando.
No faltará quien diga "Cóm0 PuEd3 Ser Que TaRden 1.5 Se6uNdos en C4da PáGinA?". Y tendrá algo de razón, pero también estará hablando sin conocer el negocio y sin saber que nos toca trabajar con jsons que tienen millones de lineas ¯\_(ツ)_/¯
Para graficar estas métricas estoy usando Apache Echarts que me pareció una librería fantástica y exageradamente fácil de usar.
Nota final de color y no menor: Estas métricas que nos da el objeto performance va de la mano de la potencia y disponibilidad de recursos de la computadora que se use para evaluar el rendimiento, así como la velocidad de internet. Hay que tener esto muy en cuenta al momento de comparar los resultados entre cada ejecución.
[matched_content]
Here are some important social SEO tags to include on your web pages:
1. Open Graph Tags (Facebook):
– og:title: The title of your content as it should appear when shared on Facebook.
– og:description: A brief description of your content.
– og:image: The URL of an image to represent your content when shared.
– og:url: The canonical URL of your content.
2. Twitter Card Tags:
– twitter:card: The type of card to be used when your content is shared on Twitter (e.g., “summary”, “summary_large_image”).
– twitter:title: The title of your content as it should appear when shared on Twitter.
– twitter:description: A brief description of your content.
– twitter:image: The URL of an image to represent your content when shared.
3. Schema.org Markup:
– Itemscope and itemtype: Define the scope and type of your content (e.g., “Article”, “Product”, “Event”).
– itemprop=”name”: The name of your content or item.
– itemprop=”description”: A description of your content or item.
– itemprop=”image”: The URL of an image to represent your content or item.
4. Meta Tags:
– : A concise summary of your page’s content.
– : Relevant keywords related to your content (less important nowadays).
– : The author of the content.
– : Specifies how your page should be displayed on different devices.
5. Canonical Tag:
– : Specifies the preferred URL if you have multiple pages with similar content to avoid duplicate content issues.
6.Hreflang Tags (for multilingual websites):
– : Specifies the language and targeted audience for alternate versions of your page.
7. Social Profile Links:
– : Links to your social media profiles, establishing a connection between your website and social accounts.
Remember to place these tags within the
section of your HTML document. Additionally, ensure that the content you provide in these tags is accurate, concise, and engaging to maximize the impact when your pages are shared on social media platforms.
