Imágenes, fuentes y scripts: el trío clásico del rendimiento

Este tema trata la parte de rendimiento. Las imágenes como canal de tráfico (alt, buscador de imágenes, schema ImageObject) se describen en SEO de imágenes.

Imágenes. next/image ofrece lazy loading, AVIF/WebP y tamaños correctos, pero solo con una configuración honesta:

import Image from "next/image";

// Imagen LCP: priority, sin lazy loading
<Image
  src="/hero.jpg"
  alt="Equipo trabajando en el roadmap del producto"
  width={1200}
  height={630}
  priority
  sizes="(max-width: 768px) 100vw, 1200px"
/>;

• priority solo en la imagen LCP (normalmente el hero). Todo lo que queda bajo el primer pantallazo sigue en lazy.
• sizes debe corresponder a su layout: sin él, los móviles descargan archivos del tamaño de escritorio.
• alt describe la imagen tanto para los lectores de pantalla como para el buscador de imágenes. Un alt="" vacío solo para gráficos puramente decorativos.

Fuentes. next/font aloja Google Fonts en su propio servidor, elimina la petición externa y establece font-display: swap por sí solo:

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin", "latin-ext"], display: "swap" });

Scripts. Todo script externo compite con su contenido por el hilo principal:

import Script from "next/script";

// Analítica: después de que la página sea interactiva
<Script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXX" strategy="afterInteractive" />

// Widgets de chat, heatmaps: solo cuando el navegador está inactivo
<Script src="https://widget.example.com/chat.js" strategy="lazyOnload" />

Audite lo que carga: haga un trace en Lighthouse y cuestione cada script que no sea clave para la página. Un tag manager lleno de píxeles olvidados puede cargar mucho el hilo principal y subir el INP.

Checklist:

• La imagen hero tiene priority, un sizes correcto y un alt con sentido
• Todas las fuentes a través de next/font, cero CSS de fuentes externo
• Scripts externos en afterInteractive o lazyOnload
• Las imágenes no provocan saltos de diseño (width/height siempre definidos)