Il tuo sito Next.js carica le immagini in 3 secondi e i font si spostano mentre leggi. I visitatori se ne vanno e Google lo sa. Ogni secondo di ritardo riduce le conversioni del 7% — un dato che conosciamo bene perché lo vediamo nei bilanci dei clienti che seguiamo. La buona notizia? Next.js ha già gli strumenti per risolvere tutto: next/image e next/font. Non li usi al massimo? Stai pagando per perdere clienti. Vediamo come cambiare le cose.
Come ottimizzare le immagini in Next.js per migliorare i Core Web Vitals?
Le immagini sono il 50% del peso medio di una pagina web. Se non le ottimizzi, LCP (Largest Contentful Paint) e CLS (Cumulative Layout Shift) ne risentono. Noi, di Meteora Web, abbiamo visto un cliente e-commerce dimezzare il tempo di caricamento semplicemente usando next/image al posto dei tag <img> classici. Ecco come funziona.
Usare next/image per il caricamento lazy e il formato moderno
Il componente next/image fa tre cose che il tag HTML non fa: ottimizza automaticamente le immagini (WebP/AVIF), carica lazy quelle sotto la piega e riserva lo spazio per evitare il CLS. Senza di lui, ogni immagine è un colpo ai tuoi Core Web Vitals.
Sponsored Protocol
import Image from 'next/image';
export default function ProductCard({ product }) {
return (
<div>
<Image
src={product.image}
alt={product.name}
width={600}
height={400}
sizes="(max-width: 768px) 100vw, 50vw"
priority={product.isFirst}
/>
</div>
);
}Imposta sizes per dire al browser quanto spazio occupa l'immagine a seconda del viewport — è il segreto per non scaricare immagini giganti su mobile. Usa priority solo per l'immagine LCP, non per tutte.
Configurare i domini remoti per le immagini esterne
Se le immagini vengono da un CDN o da un backend esterno, Next.js blocca i domini sconosciuti. Configurali in next.config.js per evitare errori in produzione.
// next.config.js
module.exports = {
images: {
remotePatterns: [
{ protocol: 'https', hostname: 'cdn.example.com' },
],
},
};Questo passaggio è obbligatorio se non vuoi che le immagini si rompano in produzione. Lo vediamo spesso nei progetti che ci arrivano: tutto funziona in locale, poi il deploy fallisce.
Come ottimizzare i font in Next.js per ridurre il CLS e accelerare il rendering?
I font sono un altro nemico silenzioso. Ogni font personalizzato è una richiesta HTTP extra e un potenziale shift del layout quando si carica. La soluzione? next/font, che carica i font in modo ottimizzato e li serve dallo stesso dominio — niente richieste esterne verso Google Fonts.
Sponsored Protocol
Usare next/font per caricare i font in modo ottimizzato
Con next/font puoi usare font di sistema o font da Google Fonts senza richieste esterne. Il font viene scaricato al build time e servito con font-display: swap per evitare il FOIT (Flash of Invisible Text).
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], display: 'swap' });
export default function Layout({ children }) {
return <html lang="it" className={inter.className}>{children}</html>;
}Questo elimina il CLS causato dai font e migliora l'LCP. Se usi font di sistema, puoi definire una font-family con fallback per non dipendere da nulla.
Definire i fallback dei font per evitare il layout shift
Anche con next/font, se il font non è ancora caricato, il browser usa un fallback. Misura la differenza di dimensioni tra font e fallback per minimizzare il CLS. Next.js ti dà la possibilità di regolare il size-adjust con la proprietà adjustFontFallback.
Sponsored Protocol
const inter = Inter({ subsets: ['latin'], adjustFontFallback: true });Questa opzione allinea le metriche del font con il fallback, riducendo il CLS a zero. È un dettaglio che fa la differenza nei punteggi di PageSpeed Insights.
Come misurare e monitorare i Core Web Vitals in Next.js?
Ottimizzare senza misurare è come guidare al buio. Next.js ha un componente integrato per tracciare i Core Web Vitals in tempo reale. Lo usiamo per capire dove intervenire prima che il cliente se ne accorga.
Usare il componente useReportWebVitals per il monitoraggio
Puoi creare un componente che invia i dati a Google Analytics o a un endpoint custom. Così hai dati reali dai tuoi utenti, non solo dai test di laboratorio.
'use client';
import { useReportWebVitals } from 'next/web-vitals';
export function WebVitals() {
useReportWebVitals((metric) => {
console.log(metric); // Invia a GA o altro servizio
});
return null;
}Integra questo componente nel layout e inizia a raccogliere dati. Senza questi numeri, ogni ottimizzazione è un'opinione, non una certezza.
Quali sono gli errori comuni da evitare nell'ottimizzazione di immagini e font?
Anche con gli strumenti giusti, sbagliamo tutti. Ecco gli errori che vediamo più spesso nei progetti che ci arrivano, e come evitarli.
Sponsored Protocol
Non ottimizzare le immagini eroiche (hero images)
L'immagine hero è la prima cosa che si vede — è l'LCP. Se non la carichi con priority e sizes corretto, perdi il 90% del beneficio. Noi la trattiamo come un elemento critico, non come un dettaglio.
Usare troppi font e pesi diversi
Ogni font aggiuntivo è un colpo al performance. Limita i pesi a 2-3 e usa variable fonts se possibile. Con next/font, se importi un font con più pesi, Next.js genera solo i file necessari.
const inter = Inter({ subsets: ['latin'], weight: ['400', '700'] });Questo mantiene il bundle leggero e il rendering veloce.
Come integrare l'ottimizzazione di immagini e font con il tuo stack?
L'ottimizzazione non è un'isola: si integra con il resto del tuo stack. Se usi una CDN per le immagini, puoi combinarla con next/image per avere il meglio di entrambi. Se hai un backend custom, puoi generare immagini ottimizzate a runtime.
Combinare next/image con CDN e storage esterno
Il componente next/image supporta i loader personalizzati. Puoi puntare a un CDN come Cloudinary o Imgix e lasciare che faccia il lavoro pesante.
Sponsored Protocol
import Image from 'next/image';
const customLoader = ({ src, width, quality }) => {
return `https://cdn.example.com/${src}?w=${width}&q=${quality || 75}`;
};
export default function OptimizedImage(props) {
return <Image loader={customLoader} {...props} />;
}Questo ti dà flessibilità totale senza sacrificare le performance.
In sintesi
L'ottimizzazione di immagini e font in Next.js non è un lusso: è la base per un sito che converte. Ecco le azioni immediate da fare:
- Sostituisci tutti i tag
<img>connext/imagee impostasizeseprioritycorrettamente. - Configura
next/fontper tutti i font personalizzati e usaadjustFontFallbackper eliminare il CLS. - Misura i Core Web Vitals con
useReportWebVitalse collega i dati a Google Analytics. - Controlla la tua homepage con PageSpeed Insights e confronta i punteggi prima e dopo.
Se hai bisogno di una mano, noi di Meteora Web lavoriamo su questi dettagli ogni giorno. Il tuo sito merita di essere veloce — e i tuoi clienti meritano di non aspettare.
