Core Web Vitals: Mejorando el rendimiento web

En la era de la inmediatez, los usuarios esperan experiencias web rápidas, fluidas y sin interrupciones.

Con esto en mente, Google introdujo las Core Web Vitals, un conjunto de métricas diseñadas para medir el rendimiento de los sitios web. Estas métricas nos permiten identificar puntos críticos y tomar acciones concretas para mejorarlos.

Para analizar estas métricas, podemos recurrir a herramientas como Lighthouse y PageSpeed Insights, que proporcionan análisis detallados y recomendaciones específicas.

---

Lighthouse vs PageSpeed Insights

Aunque tanto Lighthouse como PageSpeed Insights son herramientas de Google para medir el rendimiento web, su enfoque y propósito son diferentes. No se trata de elegir entre una u otra, sino de aprovechar lo mejor de ambas.

• Lighthouse se basa en datos de laboratorio, es decir, realiza auditorías en un entorno controlado que podemos configurar, como la resolución de pantalla, la velocidad del procesador o el tipo de conexión. Esto nos proporciona una visión teórica del rendimiento del sitio web, ideal para identificar problemas específicos y probar mejoras.

• PageSpeed Insights, por otro lado, utiliza datos de campo, que son datos reales recopilados de usuarios finales mientras navegan por el sitio. Esto proporciona una perspectiva más práctica y precisa de cómo experimentan la web las personas en situaciones reales.

---

Entendiendo las métricas proporcionadas

Estas son algunas de las métricas principales utilizadas para evaluar el rendimiento de una página web:

Time to First Byte (TTFB)

El Time to First Byte (TTFB) mide el tiempo que transcurre desde que haces una solicitud a un sitio web hasta que recibes el primer byte de datos.

Comprende las siguientes fases:

• Redirecciones
• Inicialización del Service Worker
• DNS Lookup
• Conexión y negociación de TLS
• Recepción del primer byte de información

La siguiente tabla nos muestra que tiempos de carga se consideran adecuados:

Bueno	Puede mejorar	Malo
Menos de 800ms	entre 800ms y 1800ms	Más de 1800ms

First Contentful Paint (FCP)

El First Contentful Paint (FCP) mide el tiempo que transcurre desde que el usuario entra en una web hasta que se carga cualquier parte del contenido (texto, imágenes, etc.).

Nota: No debe confundirse con First Paint.

Bueno	Puede mejorar	Malo
Menos de 1.8s	entre 1.8 y 3s	Más de 3s

Largest Contentful Paint (LCP)

El Largest Contentful Paint (LCP) informa del tiempo de renderizado del contenido más grande visible en pantalla (viewport). Esto incluye imágenes, bloques de texto, vídeos u otros elementos visibles.

Bueno	Puede mejorar	Malo
Menos de 2.5s	entre 2.5 y 4s	Más de 4s

Speed Index (SI)

El Index (SI) mide la rapidez con la que el contenido visible se renderiza en pantalla mientras se carga la página.

Bueno	Puede mejorar	Malo
Menos de 3.4s	entre 3.4 y 5.8s	Más de 5.8s

Total Blocking Time (TBT)

El Total Blocking Time (TBT) mide el tiempo en el que la página queda bloqueada por una tarea larga, sin responder a entradas del usuario como clics.

Se considera una tarea larga cualquier operación que dure más de 50ms. Por ejemplo, si una tarea dura 70ms, el bloqueo será de 20ms.

Bueno	Puede mejorar	Malo
Menos de 200ms	entre 200ms y 600ms	Más de 600ms

Cumulative Layout Shift (CLS)

El Cumulative Layout Shift (CLS) es una métrica clave para medir la estabilidad visual de una página web durante su carga. Esta métrica evalúa cuánto se desplazan los elementos en la pantalla mientras el contenido se va cargando, lo que impacta directamente en la experiencia del usuario.

El Layout Shift Score es el indicador principal de la estabilidad visual de una página y se calcula de la siguiente forma:

$$\text{Layout Shift Score} = (\text{Impact Fraction} \times \text{Distance Fraction})$$

• Impact Fraction: Representa la fracción del área de la ventana de visualización (viewport) que ha sido afectada por el cambio en el diseño del elemento. Es decir, cuánto espacio en la pantalla ha sido alterado debido al movimiento de un elemento.
• Distance Fraction: Indica la fracción de la distancia que un elemento ha sido desplazado en relación con el tamaño de la ventana de visualización. Cuánto ha "saltado" o "migrado" un elemento en la pantalla.

Para obtener el CLS total de la página, se deben sumar los Layout Shift Scores de todos los elementos que experimentan un cambio de disposición. El cálculo es el siguiente:

$$\text{CLS}_{\text{total}} = \sum_{i=1}^{n} (\text{Impact Fraction}_i \times \text{Distance Fraction}_i)$$

Un CLS total bajo indica una experiencia más estable y fluida para el usuario, ya que los elementos de la página no se mueven de manera inesperada durante su carga.

Bueno	Puede mejorar	Malo
Menos de 0.1	entre 0.1 y 0.25	Más de 0.25

---

Tips para Mejorar el Rendimiento Web

Utilización de Formatos de Imagen Next-Gen

Para optimizar el rendimiento de las páginas web, es clave usar formatos de imagen modernos como .webp o .avif. Estos formatos ofrecen buena calidad con tamaños de archivo menores que .jpg o .png, lo que mejora los tiempos de carga.

Por ejemplo, una imagen de 1 MB en .png, puede pesar alrededor de 200 KB al convertirla a .avif sin pérdida de calidad.

Herramienta recomendada: Entre mis herramientas favoritas está Squoosh para convertir y comprimir imágenes de forma sencilla y muy visual.

Minificación de archivos CSS y JavaScript

Minificar archivos CSS y JavaScript consiste en eliminar espacios, saltos de línea y comentarios innecesarios para reducir el tamaño de los archivos. Esto resulta en una descarga más rápida desde el servidor al navegador.

Herramienta recomendada: Entre mis herramientas favoritas está Lightning CSS para minificar CSS y Terser para minificar JavaScript.

Tree-Shaking

El tree-shaking es una técnica que elimina partes no utilizadas del código JavaScript, reduciendo el tamaño final de los archivos y mejorando el rendimiento de la página.

Cuando utilizas herramientas como Vite, estas analizan los módulos de tu proyecto para identificar y eliminar el código que no es necesario.

por ejemplo:

// calc.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

Si en otro archivo solo utilizas una de las funciones:

// main.js
import { add } from "./calc";

console.log(add(2, 3));

El tree-shaking eliminará la función subtract del bundle final, ya que no está siendo utilizada.

Para facilitar esta utilización se recomienda usar ES Modules en lugar de CommonJS para importar módulos.

Herramienta recomendada: Entre mis herramientas favoritas está Rollup que está integrado en Vite de manera predeterminada.

Code-splitting

El code-splitting divide el código JavaScript en archivos más pequeños (chunks) para cargar solo lo necesario y mejorar el rendimiento.

Ejemplo en React

Usa React.lazy para cargar componentes bajo demanda:

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <React.Suspense fallback={<div>Cargando...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

Vite y Rollup soportan imports dinamicos por defecto.

Compresión con Brotli o Gzip

La compresión reduce el tamaño de los archivos enviados al navegador, acelerando los tiempos de carga.

Brotli vs Gzip

• Brotli: Mejor ratio de compresión, ideal para navegadores modernos.
• Gzip: Más rápido y ampliamente compatible.

Lazy-loading

El lazy-loading permite cargar recursos (como imágenes y scripts) solo cuando son necesarios, mejorando la velocidad de carga inicial.

Para imagenes debemos usar el atributo loading="lazy" para cargar a demanda. Para scripts, por ejemplo en React, podemos utilizar el React.lazy visto anteriormente para cargar componentes bajo demanda.

Preloading

A diferencia de lazy-loading, preloading carga recursos inmediatamente antes de que sean necesarios, lo que puede mejorar la experiencia del usuario y reducir el tiempo de carga.

Para utilizar esta técnica podemos utilizar la etiqueta <link rel="preload" ...> en el <head> del documento HTML.

Defer y Async para evitar bloqueos en el renderizado

Las técnicas defer y async permiten cargar scripts sin bloquear el renderizado de la página, mejorando la experiencia del usuario.

Diferencia entre Defer y Async

• Defer: Los scripts se cargan en paralelo, pero se ejecutan en el orden en que aparecen en el HTML, solo después de que el DOM esté completamente cargado.
• Async: Los scripts se cargan en paralelo y se ejecutan tan pronto como se descargan, sin importar el orden.

Ejemplo de uso

<script src="dom-manipulator.js" defer></script>
<script src="analytics.js" async></script>

Cuándo usar defer o async

• Usa defer para scripts que dependen de otros o necesitan acceder al DOM.
• Usa async para scripts independientes que no afectan la funcionalidad principal de la página.

Otras técnicas para mejorar el rendimiento

Existen varias técnicas adicionales que pueden ayudar a optimizar aún más el rendimiento de tu página.

Uso de CDN

Los CDN (Content Delivery Networks) almacenan tus archivos estáticos (CSS, JavaScript, imágenes) en servidores distribuidos globalmente, lo que mejora la velocidad de entrega.

Evitar redirecciones innecesarias

Las redirecciones HTTP pueden aumentar significativamente los tiempos de carga. Minimiza las redirecciones siempre que sea posible, asegurándote de que las URLs estén bien configuradas.

Priorizar el contenido visible

Carga primero los recursos que son necesarios para el contenido visible en la página. Esto mejora la First Contentful Paint (FCP) y la Largest Contentful Paint (LCP), dos métricas clave en la experiencia del usuario.

Conclusiones

Mejorar el rendimiento web es ideal para ofrecer una buena experiencia al usuario. Las Core Web Vitals nos dan las métricas necesarias para saber si nuestro sitio es rápido y estable. Herramientas como Lighthouse y PageSpeed Insights nos ayudan a medir estas métricas y a encontrar puntos de mejora.

Al aplicar técnicas como optimización de imágenes, minificación de CSS y JavaScript, lazy-loading y compresión de archivos, podemos hacer que nuestras páginas carguen más rápido y sean más eficientes. Lo que mejorará la experiencia de usuario, el SEO y la conversión de nuestra página.