Acelera React: 6 consejos probados para optimizar Core Web Vitals

En este texto, presentamos varias técnicas de optimización para mejorar las métricas de Core Web Vitals en sitios construidos con React. Nos enfocaremos principalmente en Interaction to Next Paint (INP), es decir, la velocidad de respuesta a las interacciones.

Optimizar la velocidad de los sitios construidos con React implica optimizar tareas largas de JavaScript (medidas por la métrica JS Long Tasks (JSLT)), que están estrechamente vinculadas al funcionamiento interno de React y son visibles, entre otras cosas, en la métrica TBT.

¿Es React automáticamente rápido? Error#

Internamente, React utiliza varias técnicas ingeniosas que ayudan a la velocidad de los sitios web o aplicaciones web.

Actualiza y renderiza eficientemente solo los componentes cuyos datos han cambiado. El sistema de hooks protege parcialmente el sitio de recalculaciones de diseño no deseadas y del llamado layout thrashing.

¿Significa esto que un sitio construido con React será automáticamente rápido? La respuesta es simple: NO.

Aunque los componentes declarativos hacen que el código sea más predecible y fácil de entender, una manipulación descuidada del estado o la cantidad de componentes casi seguramente conducirá a una interactividad lenta.

Es una herramienta como cualquier otra y siempre depende de lo bien que el desarrollador la conozca.

Pasemos ahora a los consejos para optimizar React que le recomendamos basados en nuestro trabajo para clientes. ¿Cómo mantener el código de React bajo control?

1) Reduzca el tamaño del DOM#

El tamaño del DOM y su optimización son fundamentales. Lo que no está en el DOM no necesita ser renderizado, y el navegador puede descansar.

En React, esta verdad es doblemente cierta. Menos elementos significan menos componentes, lo que significa menos JavaScript para descargar y procesar.

En el caso de SSR (renderizado en el servidor), también se optimiza el tiempo necesario para construir la primera respuesta HTML. Además, tiene un tamaño de datos más pequeño. Simplemente un ganar-ganar por todos lados.

Extraiga componentes que no son importantes para el SEO completamente del DOM y cárguelos mediante carga diferida:

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

2) Cree dos versiones de componentes: simples y completas#

Aunque un componente o su contenido sean importantes para el SEO o la accesibilidad, no significa que deban estar en plena calidad visual al primer renderizado. Especialmente si el componente no es visible en el primer viewport.

La optimización mediante la división en un componente simple y uno rico es especialmente efectiva en elementos que se repiten varias veces en la página. Estos son típicamente páginas de enlaces, listas de productos u otras ofertas, como se ve en la imagen:

Ejemplo de un componente que, al cargar la página, proporciona solo los datos importantes para SEO. Este estado está visualmente oculto al usuario. La "variante rica" se activa al mostrar el componente en el viewport.

3) Utilice <Suspense>#

La etiqueta <Suspense> en React se utiliza principalmente para mostrar contenido de marcador de posición durante la carga de componentes diferidos.

Pero pocos saben que su superpoder oculto es que activa el renderizado concurrente. Así, la página y sus componentes pueden dividirse en partes importantes y menos importantes.

Árbol de componentes dividido mediante la etiqueta <Suspense>. Los componentes rojos se etiquetan como menos importantes.

En el caso de usar SSR (renderizado del lado del servidor), el efecto de <Suspense> es absolutamente crucial.

La hidratación, es decir, la activación de la página, es el momento en el que el código generado del lado del servidor se activa en el cliente en el navegador. Es casi siempre una tarea larga de JavaScript, por lo que el uso de <Suspense> ayuda.

¡Pero cuidado! Nunca envuelva un gran bloque con esta etiqueta, más bien solo pequeñas partes. Además, use <Suspense> con moderación en elementos que son visibles en el primer viewport. De lo contrario, puede ser contraproducente.

4) Cuidado con los errores de hidratación#

Al final de la hidratación, se verifica si el árbol de elementos resultante (DOM) coincide con el estado en el servidor. Si no, se produce un error y un mensaje:

Visualización de un error de hidratación en la consola del navegador.

En ese momento, React invalida todos los componentes en la página y se actualizan con JavaScript del cliente, lo que empeora el rendimiento y puede retrasar de manera incómoda la métrica LCP.

5) Sea cauteloso con useEffect()#

useEffect no siempre es asíncrono. Si un usuario activa una entrada (por ejemplo, hace clic), todo el código de React se ejecuta de manera síncrona, incluidos los "hooks de efecto".

Si el hook se utiliza para diferir efectivamente una tarea al siguiente ciclo de renderizado, es necesario usar setTimeout u otro método.

useEffect(() => {
	// Posponer el trabajo a una tarea separada:
	setTimeout(() => {
		sendAnalytics();
	}, 0);
}, []);

6) Componentes del servidor#

Server Components es una función relativamente nueva en React. Permiten escribir componentes que no están disponibles para el JavaScript del cliente, sino solo en el servidor.

Esto significa que el cliente recibe contenido ya renderizado y no necesita ejecutar JavaScript nuevamente para que el contenido se muestre o se active.

Conclusión#

React es solo una herramienta. La clave es conocerla bien. En este sentido, recomendamos encarecidamente la serie de artículos React Internals Deep Dive.

Consulte otros métodos de optimización de INP.