tutoriales.com

Optimización del Rendimiento en Next.js: Preloading, Prefetching y Estrategias de Carga

Este tutorial te guiará a través de las estrategias avanzadas de optimización de rendimiento en Next.js, centrándose en el preloading y prefetching de recursos. Aprenderás a configurar estas técnicas para reducir los tiempos de carga, mejorar la navegación y ofrecer una experiencia de usuario fluida y reactiva. Exploraremos ejemplos prácticos y las mejores prácticas para cada escenario.

Intermedio12 min de lectura8 views
Reportar error

El rendimiento es un factor crítico para el éxito de cualquier aplicación web moderna. En el ecosistema de Next.js, tenemos herramientas poderosas a nuestra disposición para asegurar que nuestras aplicaciones sean no solo funcionales, sino también increíblemente rápidas. Este tutorial se sumerge en dos de estas técnicas clave: Preloading y Prefetching, y cómo aplicarlas eficazmente para maximizar la velocidad de tu sitio.

🚀 ¿Por qué la Optimización del Rendimiento es Crucial?

En un mundo digital donde la paciencia del usuario es limitada, cada milisegundo cuenta. Un sitio web lento puede resultar en:

  • Menos conversiones: Los usuarios abandonan los sitios que tardan en cargar.
  • Peor SEO: Los motores de búsqueda penalizan los sitios lentos.
  • Mala experiencia de usuario: Frustración y percepción negativa de la marca.
  • Mayor tasa de rebote: Los visitantes se van antes de interactuar.

Next.js está diseñado para el rendimiento, pero aún así, comprender y aplicar sus características de optimización es fundamental para exprimir cada gota de velocidad. Preloading y prefetching son dos de los pilares de esta optimización, especialmente para la navegación entre páginas.

📚 Entendiendo el Preloading y Prefetching

Aunque a menudo se usan indistintamente o se confunden, preloading y prefetching tienen propósitos distintos y se aplican en diferentes contextos para optimizar la carga de recursos.

Preloading (Precarga) ⚡

El preloading le indica al navegador que un recurso específico (como una fuente, una imagen crítica, un archivo CSS o JavaScript) es crítico para la página actual y debe descargarse con una prioridad alta. El navegador sabe que necesitará ese recurso inmediatamente o muy pronto durante la carga de la página, lo que evita esperas innecesarias y mejora el Largest Contentful Paint (LCP) y First Contentful Paint (FCP).

Se realiza generalmente a través de una etiqueta <link rel="preload"> en el <head> del HTML. Es para recursos que definitivamente se usarán en la página actual.

💡 Consejo: Usa el preloading para recursos que son esenciales para la primera vista del usuario, como imágenes hero, fuentes personalizadas y CSS crítico.

Prefetching (Pre-obtención) ✨

El prefetching, por otro lado, le indica al navegador que un recurso (o incluso una página entera) podría ser necesario en el futuro cercano, pero no es crítico para la página actual. El navegador descarga estos recursos en segundo plano, con una prioridad baja, cuando está inactivo. Si el usuario luego solicita ese recurso o navega a esa página, ya estará en la caché del navegador, lo que resulta en una carga casi instantánea.

En Next.js, el prefetching se maneja principalmente a través del componente <Link> y es fundamental para la navegación rápida entre rutas. También se puede usar para otros recursos con <link rel="prefetch">.

🔥 Importante: El prefetching es ideal para recursos que el usuario probablemente necesitará a continuación (por ejemplo, la siguiente página en una navegación), pero no garantizados.

Aquí tienes una tabla comparativa para resumir las diferencias:

CaracterísticaPreloading (Precarga)Prefetching (Pre-obtención)
---------
PropósitoCarga recursos críticos para la página actual con alta prioridad.Carga recursos para futuras navegaciones con baja prioridad.
Uso PrincipalMejorar FCP/LCP, carga inicial.Acelerar la navegación a páginas posteriores.
---------
PrioridadAltaBaja
Cuándo usarRecursos que definitivamente se necesitan ahora.Recursos que probablemente se necesitarán después.
---------
ImpactoReduce el tiempo de carga de la página actual.Reduce el tiempo de carga de las próximas páginas.
Preloading Recursos críticos para la página actual Prioridad Alta Prefetching Recursos para futuras navegaciones Prioridad Baja Carga más rápida

⚙️ Preloading en Next.js: Ejemplos Prácticos

Next.js maneja automáticamente muchos aspectos de optimización, pero a veces necesitas un control más granular para recursos específicos.

Precargando Fuentes (Fonts) ✍️

Las fuentes personalizadas son un cuello de botella común. Para precargarlas, puedes usar el componente next/font (que ya hace algo de optimización) o añadir una etiqueta <link rel="preload"> en el componente next/head (en el Pages Router) o directamente en el layout.js o head.js (en el App Router).

Con App Router (Recomendado):

// app/layout.js
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter', // Opcional, para CSS
  display: 'swap', // Evita FOUT (Flash of Unstyled Text)
});

export default function RootLayout({ children }) {
  return (
    <html lang="es" className={inter.variable}> {/* Aplica la variable si usas Tailwind u otro CSS */}
      <body>
        {children}
      </body>
    </html>
  );
}

next/font se encarga automáticamente de precargar las fuentes para las que has configurado subsets.

Con Pages Router (o para fuentes personalizadas externas):

Para fuentes de terceros o si necesitas un control explícito, puedes usar next/head:

// pages/_document.js (Solo si necesitas añadir <link> manualmente fuera de next/font)
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="es">
      <Head>
        <link
          rel="preload"
          href="/fonts/my-custom-font.woff2" // Ruta a tu fuente
          as="font"
          type="font/woff2"
          crossOrigin="anonymous"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
⚠️ Advertencia: Un uso excesivo o incorrecto de `preload` puede tener el efecto contrario, ya que satura la red con recursos no tan críticos. ¡Úsalo con moderación y solo para lo esencial!

Precargando Imágenes Críticas 🖼️

Para las imágenes que son críticas para el LCP (por ejemplo, la imagen principal de la sección hero), puedes usar el prop priority con next/image.

import Image from 'next/image';

function MyHeroSection() {
  return (
    <div>
      <Image
        src="/images/hero-bg.jpg"
        alt="Fondo principal"
        width={1920}
        height={1080}
        priority // Esto precarga la imagen con alta prioridad
      />
      <h1>¡Bienvenido a nuestro sitio!</h1>
    </div>
  );
}

Al añadir priority, Next.js automáticamente añade la etiqueta <link rel="preload"> para esa imagen en el head de tu documento, asegurando que se cargue lo antes posible.

🚀 Prefetching en Next.js con <Link>

El componente <Link> de next/link es una de las características más potentes de Next.js para el prefetching. Por defecto, cuando un <Link> es visible en el viewport del usuario, Next.js automáticamente prefetchea la página asociada a ese enlace.

Cómo funciona el prefetching automático de <Link>

  1. Detección: Next.js detecta todos los componentes <Link> en el viewport.
  2. Prefetching en segundo plano: Para cada <Link> visible, Next.js discretamente descarga el bundle de JavaScript para la ruta vinculada, junto con sus datos si la ruta usa getServerSideProps (en Pages Router), getStaticProps (en Pages Router) o si es un RSC (en App Router).
  3. Navegación instantánea: Cuando el usuario hace clic en el enlace, la página ya está precargada y se muestra casi instantáneamente, sin un viaje de ida y vuelta adicional al servidor.
📌 Nota: Next.js solo prefetchea los bundles de JavaScript para las rutas. Los datos de `getServerSideProps` o `getStaticProps` también pueden ser prefetchados, dependiendo de la configuración y si la ruta es SSR o SSG. Para App Router, los Server Components también se prefetch.

Controlando el Prefetching con el prop prefetch

El comportamiento por defecto del <Link> es prefetch={true} (o simplemente omitir el prop). Sin embargo, puedes desactivarlo o activarlo explícitamente:

  • prefetch={true} (por defecto): Prefetchea la página cuando el enlace es visible en el viewport.
  • prefetch={false}: Desactiva el prefetching para ese enlace específico. Útil para enlaces a páginas menos probables de ser visitadas a continuación, o para sitios con muchas rutas donde el prefetching de todas podría ser ineficiente.
import Link from 'next/link';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Inicio</Link> {/* prefetch={true} por defecto */}
        </li>
        <li>
          <Link href="/productos">Productos</Link> {/* prefetch={true} por defecto */}
        </li>
        <li>
          <Link href="/dashboard" prefetch={false}> {/* Desactiva el prefetching */}
            Dashboard (Solo para usuarios logueados)
          </Link>
        </li>
        <li>
          <Link href="/contacto">Contacto</Link>
        </li>
      </ul>
    </nav>
  );
}

El uso de prefetch={false} es recomendable para rutas que no son el flujo principal de navegación o que están detrás de alguna autenticación, donde el prefetching podría ser un desperdicio de recursos.

Prefetching enrutado (Routed Prefetching) 🛣️

Para el App Router, el prefetching se extiende a los segmentos de ruta. Cuando navegas por un Link en el App Router, Next.js prefetch el código para el nuevo segmento de ruta y sus componentes de cliente, así como los datos del Server Component para el nuevo segmento.

¿Qué datos se prefetch en el App Router? En el App Router, cuando un `` está en el viewport y el prefetching está habilitado, Next.js no solo prefetch el JavaScript para los componentes del cliente, sino que también inicia la solicitud de los datos para el Server Component de la ruta destino. Esto significa que cuando el usuario hace clic, la carga de datos del servidor ya está en progreso o incluso completa, haciendo que la transición sea aún más fluida. Esto es un gran avance sobre cómo se manejaban los datos en el Pages Router.

📈 Estrategias Avanzadas de Carga

Más allá del preloading y prefetching, Next.js ofrece otras formas de optimizar la carga de tus recursos.

Lazy Loading (Carga Perezosa) con next/dynamic 😴

El lazy loading te permite cargar componentes o módulos JavaScript solo cuando son realmente necesarios, por ejemplo, cuando entran en el viewport o después de una interacción del usuario. Esto reduce el tamaño inicial del bundle y mejora el tiempo de carga inicial.

import dynamic from 'next/dynamic';

// El componente HeavyComponent solo se cargará cuando sea renderizado
const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>Cargando componente...</p>, // Opcional: un fallback mientras carga
  ssr: false, // Si el componente no necesita SSR (e.g., usa window/document)
});

function MyPage() {
  return (
    <div>
      <h1>Mi Página Principal</h1>
      {/* ... contenido principal ... */}
      <HeavyComponent /> {/* Se carga solo cuando MyPage se renderiza */}
    </div>
  );
}

next/dynamic también es compatible con importaciones dinámicas que usan condiciones, por ejemplo, cargar un componente solo si el usuario está logueado.

💡 Consejo: Usa lazy loading para componentes pesados, widgets de terceros, librerías grandes (ej. librerías de gráficos), o cualquier UI que no sea esencial para la primera carga de la página.

Carga Condicional de Scripts de Terceros con next/script 🚀

Los scripts de terceros (analíticas, incrustaciones, anuncios) pueden impactar significativamente el rendimiento. next/script te permite cargarlos de manera optimizada, especificando cuándo y cómo deben ejecutarse.

import Script from 'next/script';

function AnalyticsPage() {
  return (
    <>
      <h1>Mi Página con Analíticas</h1>
      <Script
        src="https://example.com/analytics.js"
        strategy="lazyOnload" // Carga el script después de que la página se haya cargado
        onLoad={() => {
          console.log('Script de analíticas cargado');
        }}
      />
      <Script
        src="https://example.com/chatbot.js"
        strategy="afterInteractive" // Carga el script después de la hidratación del cliente
        id="chatbot-script"
      />
      {/* ... */}
    </>
  );
}

Las diferentes estrategias para next/script son:

  • beforeInteractive: Se inyecta antes de cualquier hidratación en el cliente. Ideal para scripts que necesitan estar disponibles antes de que la aplicación sea interactiva (ej. gestión de consentimiento de cookies).
  • afterInteractive (por defecto): Se inyecta después de que la página se haya vuelto interactiva. Para scripts que pueden esperar hasta después de que la interfaz de usuario principal haya sido hidratada (ej. Google Analytics, gestión de etiquetas).
  • lazyOnload: Se inyecta después de que la página y todos los recursos críticos hayan terminado de cargar. Ideal para scripts de baja prioridad que no bloquean (ej. chatbots, banners publicitarios).
90% Optimizado con next/script

🛠️ Monitoreo y Herramientas

Una vez que implementas estas optimizaciones, es crucial monitorear su impacto.

Google Lighthouse y PageSpeed Insights 燈

Estas herramientas te proporcionan informes detallados sobre el rendimiento de tu sitio, incluyendo métricas clave como LCP, FCP, CLS (Cumulative Layout Shift) y TBT (Total Blocking Time). Te darán puntuaciones y sugerencias específicas para mejorar.

Web Vitals 💙

Las Core Web Vitals son métricas estándar que miden la experiencia de usuario. Next.js te permite reportar estas métricas fácilmente:

// pages/_app.js (Pages Router) o en un componente de cliente global (App Router)
export function reportWebVitals(metric) {
  console.log(metric); // Puedes enviar esto a tu proveedor de analíticas
  // Ejemplo enviando a Vercel Analytics:
  // if (metric.label === 'web-vital') {
  //   // analytics.sendToVercel(metric);
  // }
}

Pestaña Network en DevTools 🌐

La pestaña Network en las herramientas de desarrollo de tu navegador es tu mejor amiga. Te permite ver exactamente qué recursos se están cargando, su tamaño, su prioridad y su tiempo de carga. Aquí puedes verificar si tus recursos están siendo precargados o prefetchados como esperas.

Paso 1: Abrir DevTools: Presiona F12 o Ctrl + Shift + I (Windows/Linux) / Cmd + Option + I (Mac).
Paso 2: Ir a la pestaña Network: Recarga la página (con la opción 'Disable cache' activada para pruebas precisas).
Paso 3: Filtrar por Prioridad/Tipo: Observa la columna 'Priority' para ver qué recursos tienen 'Highest', 'High', 'Low' prioridad. También puedes filtrar por tipo (JS, CSS, Font, Img).
Paso 4: Analizar: Identifica recursos grandes, solicitudes bloqueantes o cualquier cosa que no se esté cargando como esperas.

✅ Buenas Prácticas y Consideraciones Finales

  • No precargues en exceso: Tanto el preloading como el prefetching consumen ancho de banda. Úsalos estratégicamente para los recursos más importantes o las rutas más probables.
  • Prioriza el contenido above the fold: Asegúrate de que los recursos necesarios para la parte visible de tu página (sin hacer scroll) se carguen lo antes posible.
  • Comprime y optimiza: Antes de pensar en cómo cargar, asegúrate de que tus recursos (imágenes, CSS, JS) sean lo más pequeños posible.
  • Prueba en condiciones reales: El rendimiento puede variar mucho entre una conexión rápida de desarrollo y una red 3G en un dispositivo móvil. Usa las herramientas de throttling de red en DevTools.
  • Mantente actualizado: Next.js evoluciona constantemente. Las nuevas versiones a menudo traen mejoras de rendimiento automáticas. Consulta siempre la documentación oficial.
  • Usa next/head o head.js con cautela: Las etiquetas <link rel="preload"> manuales deben ser bien pensadas para evitar conflictos o sobrecarga.

Dominar el preloading y prefetching en Next.js te empoderará para construir aplicaciones web excepcionalmente rápidas y responsivas. Al aplicar estas técnicas junto con la carga perezosa y la gestión inteligente de scripts de terceros, puedes ofrecer una experiencia de usuario superior y mejorar significativamente las métricas clave de tu sitio.

Tutoriales relacionados

Comentarios (0)

Aún no hay comentarios. ¡Sé el primero!