Ver perfil

Qué es la performance y por qué importa ⚡ - @midudev

¡Hola {{first_name}}! Menudo calorazo hace por aquí en España, por suerte te traigo, bien fresquita,
Qué es la performance y por qué importa ⚡ - @midudev
Por Miguel Ángel Durán • Publicación #2 • Visualizar online
¡Hola {{first_name}}! Menudo calorazo hace por aquí en España, por suerte te traigo, bien fresquita, una nueva entrega de mi lista de correo y qué mejor que hablar de un tema que me apasiona desde hace muchos años: la performance.
¿Sabías que el nivel de estrés que sufrimos al ver una película de miedo o resolver un problema matemático es similar a usar una web o app lenta 🐌? Hoy te explico qué es la performance y por qué es importante. ¡Vamos a ello 👇!

¿Qué es la performance ⚡?
Cuando empecé en la programación web, la performance o rendimiento de una página web era, simplemente, el tamaño del sitio. Después, evolucionó en dos métricas: el DOMContentLoad y el Page Load que, básicamente, nos decían cuando el árbol de elementos de nuestra página estaba listo y cuando, definitivamente, nuestro sitio había cargado todos los recursos para funcionar.
El tamaño de las páginas web no ha dejado de aumentar desde entonces...
El tamaño de las páginas web no ha dejado de aumentar desde entonces...
Hoy en día es una serie de métricas más centradas en la experiencia del usuario como el SpeedIndex (una fórmula que indica la sensación de velocidad que transmite nuestra web conforme va mostrando contenido) o el Time to Interactive (el tiempo que tarda nuestro sitio en ser interactivo y usable totalmente por el usuario).
Estas métricas han sido seleccionadas por Google y sirven para representar, de una forma más precisa, cómo el rendimiento de nuestra página afecta al usuario. La lista de métricas va en aumento y, de hecho, recientemente se ha añadido una nueva: Largest Contentful Paint, para indicar cuánto tiempo ha tardado nuestro sitio en pintar el contenido más grande que tiene.
Para obtener estas métricas de cualquier web puedes usar Lighthouse. Si tienes Chrome instalado, sólo tienes que abrir las Herramientas de Desarrollo, ir a la pestaña Audits y hacer click en Run Audits.
Lighthouse da datos de las diferentes métricas. Eso ayuda a cuantificar las mejoras que se producen.
Lighthouse da datos de las diferentes métricas. Eso ayuda a cuantificar las mejoras que se producen.
¿Pero por qué importa 🤔?
Podría seguir escribiendo durante horas y horas sobre la performance pero lo voy a dejar para algunos artículos en mi blog y vídeos para mi canal. (¡Si te gustaría, házmelo saber! Me ayuda a priorizar 🙂).
Lo que sí me gustaría comentarte en unas pocas líneas es POR QUÉ importa. ¡Vamos a verlo!👇
SEO: Google tiene en cuenta la velocidad de nuestro sitio a la hora de indexar nuestro contenido. No es el único parámetro pero, desde luego, es importante. Actualmente, según comentan, sólo afecta si en mobile estás ofreciendo una experiencia realmente lenta. 🤖
Conversión: Cuanto más rápido es nuestro sitio, más leads o conversiones tendremos. Si un usuario le puede dedicar un minuto a nuestro sitio… ¡mejor que sea tiempo efectivo y no se quede esperando! ⏳
Monetización: ¿Te has preguntado alguna vez por qué Google aboga tanto por hacer la web rápida? Es sencillo: Cuántas más páginas visitas en menos tiempo, más anuncios de AdSense podrás ver. 💰
Tener una experiencia de usuario impecable ayuda a nuestros usuarios a acordarse de nosotros. ¡Yo nunca volvería a un sitio que me hace esperar 20 segundos con una página en blanco 😆! ¿Tú lo harías?
Pero si queréis una forma fácil de convencer a alguien de por qué la performance es importante, te lo resumo en una frase: TE HACE PERDER DINERO 💸.
¡Artículos y recursos sobre performance 👇!
Como comentaba, Google tiene un foco enorme en temas de rendimiento web y, por eso, tiene páginas con un sin fin de recursos que van a ayudarte a mejorar tu sitio. Sin duda, la más destacada es web.dev, que tiene consejos 💡 para diferentes librerías, habla de distintas estrategias y acciones que puedes tomar.
web.dev - Recursos para mejorar la performance de tu sitio web
Harry Roberts es otro de los referentes en el mundo de la performance. En este caso, os recomiendo un artículo que os ayudará a entender una de las métricas más básicos, pero no menos importantes, para mejorar la velocidad de vuestro sitio: el Time to First Byte.
Time to First Byte: What It Is and Why It Matters – CSS Wizardry
Y si hablamos de mejoras de performance. Recientemente la versión 76 de Chrome ha añadido soporte para el nuevo atributo loading que nos permite hacer lazy-loading nativo de las imágenes y los iframes de nuestro sitio sin usar necesidad de Javascript. Además, retrocompatible y super fácil de usar.
Native Lazy-Loading Launched on Chrome 76! ― Scotch.io
La extensión de la semana es... 🏆
Pero como no todo va a ser performance, aquí te dejo la extensión de la semana. Porque a todos nos gusta tunearnos el editor para ser más productivos. 👏
CSS Initial Value - Visual Studio Marketplace
¡Nueva sección con todos los podcasts 🎙️!
He creado en mi blog una nueva sección donde puedes encontrar todos los episodios de mi podcast sobre frontend WhatTheFront! y todos los enlaces para que puedas suscribirte. ¡Qué lo disfrutes!
¡Gracias por leerme! 🙇‍♂️
Y esto es todo por esta semana. Mucho performance pero es que no lo puedo evitar, me encanta el tema 💛. Y estoy seguro que pronto váis a ver más sobre ello en mi blog y en mi canal de Youtube.
¿Te ha gustado la newsletter de esta semana? Pues no te olvides compartirla con tus colegas de trabajo y amigos.
¡Un abrazo fuerte y nos leemos en el siguiente!
¿Te ha gustado?
Miguel Ángel Durán

Esta es mi newsletter sobre frontend. Contenido exclusivo por ser suscriptor, artículos de frontend de calidad 👌, avisos de sorteos, descuentos en mis cursos 💸 y nuevos vídeos en mi canal: https://www.youtube.com/c/midudev

Si no deseas recibir más esta newsletter, por favor, date de baja aquí.
Si te han remitido esta newsletter y te ha gustado, puedes suscribirte aquí.
Creado con Revue por Miguel Ángel Durán.