¡Hola a todos! Ha pasado un tiempo desde la última vez que escribí un blog y lo admito, me pone un poco triste. La realidad es que hay mucho que aprender y, a veces, parece que nunca hay tiempo suficiente para sumergirse en todo. ¿A quién engaño? La verdad es que últimamente he estado postergando mucho las cosas.

Pero recientemente, he estado explorando el rendimiento web, un tema crucial para cualquier desarrollador frontend, y estoy emocionado de compartir lo que he aprendido. La optimización del rendimiento es una de esas cosas que, cuando se hace correctamente, puede marcar una gran diferencia en la forma en que los usuarios experimentan su sitio web o aplicación web. No solo mejora la experiencia del usuario, sino que también impulsa el SEO e incluso puede afectar las tasas de conversión.

¡Vamos a sumergirnos!

Por qué es importante el rendimiento web

En el mundo acelerado de hoy, los usuarios esperan que los sitios web se carguen rápidamente e interactúen sin problemas. Si su sitio es lento, los usuarios lo abandonarán; es tan simple como eso. Los estudios demuestran que un retraso de incluso unos pocos segundos puede generar tasas de rebote más altas y una menor participación. Como desarrolladores frontend, somos responsables de garantizar que nuestras aplicaciones no solo se vean bien sino que funcionen bien en diversas condiciones.

Cuando se trata de medir el rendimiento, a menudo se considera a Google como el estándar de oro. Google proporciona un conjunto de métricas clave, conocidas como Core Web Vitals, que ayudan a los desarrolladores a rastrear y mejorar el rendimiento de sus sitios web. Analicémoslos:

Según el señor Google estas cosas importan en el rendimiento

• FCP (Primera pintura con contenido)
• LCP (pintura con contenido más grande)
• CLS (cambio de diseño acumulativo)
• TTI (Tiempo de interacción)
• INP (Interacción con la siguiente pintura)

Explorémoslos más de cerca

FCP (Primera pintura con contenido)

Qué mide: FCP mide el tiempo que tarda el primer contenido (texto, imágenes, etc.) en aparecer en la pantalla después de que un usuario navega a su página. Es una métrica fundamental porque brinda a los usuarios información sobre si la página se está cargando. Cuanto más rápido sea el FCP, mejor será la experiencia del usuario.

Cómo mejorar el FCP:

Minimizar los recursos de bloqueo de renderizado: Reducir o eliminar los recursos que bloquean el renderizado de la página, como JavaScript o CSS sincrónico. Utilice para recursos críticos.

Aplazar JavaScript no crítico: Utilice los atributos aplazar o async para scripts no esenciales para asegurarse de que no bloqueen la pintura inicial.

*Usar renderizado del lado del servidor (SSR): * SSR ayuda a entregar el HTML inicial más rápido, especialmente para contenido dinámico, para que los usuarios puedan ver contenido significativo antes.

Optimiza la entrega de CSS: Minimiza el tamaño de tu CSS y del CSS crítico en línea, para que el navegador pueda representar el contenido más rápido.

Utilice una red de entrega de contenido (CDN): proporcione recursos estáticos desde una CDN para reducir la latencia y acelerar la entrega de recursos.

LCP (pintura con contenido más grande)

Qué mide: LCP se centra en el tiempo que tarda el elemento más grande (normalmente una imagen principal, un bloque de texto grande o un vídeo) en renderizarse completamente dentro de la ventana gráfica. Es un gran indicador de la velocidad de carga percibida, ya que los usuarios consideran que la página está lista una vez que se ha cargado el contenido más grande. Intenta mantener el LCP por debajo de 2,5 segundos para disfrutar de una experiencia rápida.

Cómo mejorar LCP:

Optimizar y comprimir imágenes: Utilice formatos de imagen modernos como WebP, comprima imágenes y asegúrese de que se proporcionen los tamaños de imagen correctos mediante los atributos srcset y size.

Carga diferida de imágenes en la mitad superior de la página: Implemente la carga diferida para imágenes que no son inmediatamente visibles para priorizar la carga del contenido en la mitad superior de la página.

Precargar recursos importantes: Utilice la etiqueta para cargar recursos importantes como fuentes, imágenes destacadas o archivos multimedia de gran tamaño más rápidamente.

Minimiza el CSS que bloquea el renderizado: Al igual que con FCP, minimiza el uso de archivos CSS grandes que podrían bloquear el renderizado.

Reducir secuencias de comandos de terceros: Los anuncios, análisis u otras secuencias de comandos de terceros pueden ralentizar LCP. Aplazar o cargar secuencias de comandos no esenciales de forma asincrónica.

CLS (cambio de diseño acumulativo)

Qué mide: CLS mide la estabilidad visual de su página. ¿Alguna vez has estado leyendo algo y de repente el diseño cambia, lo que te hace perder el lugar o hacer clic en el botón equivocado? Esa es una mala puntuación CLS. CLS rastrea cuántos elementos de la página cambian inesperadamente durante el proceso de carga. Un CLS bajo es esencial para una experiencia de usuario fluida, especialmente en dispositivos móviles.

Cómo mejorar CLS:

Establecer dimensiones para imágenes y videos: Incluya siempre atributos de ancho y alto en las imágenes, o use cuadros de relación de aspecto CSS para reservar espacio para elementos multimedia antes de que se carguen.

Evite insertar contenido encima del contenido existente: evite agregar contenido dinámicamente encima del contenido existente a menos que sea absolutamente necesario (por ejemplo, anuncios).

Utilice estrategias de carga de fuentes: Al cargar fuentes personalizadas, utilice font-display: swap; para evitar cambios de diseño causados ​​por la carga de fuentes.

Evite inyectar nuevos anuncios o ventanas emergentes sin espacio: asegúrese de que los anuncios, banners o ventanas emergentes cargados dinámicamente se tengan en cuenta en el espacio de diseño para evitar cambios inesperados.

Usar marcadores de posición o cargadores de imágenes con el mismo espacio que la imagen

TTI (Tiempo de interacción)

Qué mide: TTI mide cuánto tiempo tarda la página en volverse completamente interactiva. Esto significa que todos los botones, entradas y enlaces se pueden utilizar y el hilo principal es libre de responder a las entradas del usuario. Un TTI rápido garantiza que los usuarios puedan interactuar con su contenido rápidamente sin sentir que el sitio está lento o no responde.

Cómo mejorar la TTI:

Reduzca el tiempo de ejecución de JavaScript: Divida paquetes grandes de JavaScript y cargue solo los scripts esenciales para la primera interacción. Utilice la división de código en React (con React.lazy()) o importaciones dinámicas en JavaScript.
Utilice Web Workers: Descargue tareas pesadas que no bloqueen la interfaz de usuario a Web Workers para mantener el hilo principal receptivo.
Aplazar tareas largas: Divida las tareas largas de JavaScript en tareas más pequeñas para evitar bloquear el hilo principal durante demasiado tiempo.
Precargar recursos críticos: Asegúrese de que los recursos esenciales necesarios para la interactividad (guiones, estilos) estén precargados para evitar retrasos en TTI.
Optimiza CSS y JavaScript: Minimiza, comprime y prioriza el código esencial. Utilice la agitación de árboles para eliminar el código inactivo y garantizar una ejecución de script más rápida. Utilice el mecanismo de compresión GZIP o BROTLI

INP (Interacción con la siguiente pintura)

Qué mide: Una métrica relativamente nueva, INP rastrea el tiempo que tarda una página en responder a las interacciones del usuario (como hacer clic en botones, desplazarse o escribir) y actualiza la interfaz de usuario en consecuencia. Ayuda a medir la interactividad general más allá de la carga inicial, lo que garantiza que su aplicación se mantenga ágil durante toda la sesión del usuario.

Cómo mejorar el INP:

Reducir la latencia de entrada: Asegúrese de que las entradas del usuario (clics, pulsaciones de teclas) se manejen rápidamente evitando tareas largas de JavaScript que bloqueen el hilo principal.

Priorizar la capacidad de respuesta de entrada: Utilice requestAnimationFrame o requestIdleCallback para manejar el trabajo no urgente durante el tiempo de inactividad, dejando el hilo principal abierto para el manejo de la interacción.

Utilice la limitación y la eliminación de rebotes: Cuando maneje interacciones frecuentes del usuario (como desplazarse o escribir), elimine el rebote o acelere los controladores de eventos para evitar que la interfaz de usuario deje de responder.

Carga diferida de código no crítico: Aplazar la carga de funcionalidades no críticas hasta después de la interacción inicial.
Por ejemplo, puedes cargar componentes de forma diferida en React usando React.lazy() y Suspense.

Al seguir estas estrategias, puedes mejorar significativamente estas métricas clave y ofrecer una experiencia de usuario más rápida y con mayor capacidad de respuesta. Estas optimizaciones, especialmente cuando se aplican juntas, ayudan a garantizar que su sitio no solo pase las pruebas Core Web Vitals de Google, sino que también brinde una experiencia excepcional a sus usuarios

Espero que este blog te haya resultado útil y hayas podido obtener información clave que te ayudará en tu próxima estrategia de mejora del rendimiento.

Para obtener más blogs sorprendentes sobre rendimiento, seguridad web, reaccionar, angular y vue, sigue siguiéndome