Ottimizzazione di immagini e font in React
Utilizzi next/image o con lazy loading, dimensioni e formati corretti (AVIF/WebP) e font-display.
Ottimizzazione di immagini e font in React è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Perché le immagini sono fondamentali
Le immagini sono in genere le risorse più grandi di una pagina. Le immagini non ottimizzate causano un LCP negativo, rallentano il caricamento della pagina e aumentano i costi della larghezza di banda, soprattutto sui dispositivi mobili.
Componente Image di Next.js
next/image ottimizza automaticamente le immagini: caricamento lazy per impostazione predefinita, srcSet adattivo, formati moderni (WebP/AVIF) e dimensioni corrette per prevenire il CLS.
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
priority // preload above-the-fold images
sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>Caricamento lazy in React senza framework
Aggiunga loading='lazy' agli elementi nativi <img>. Il browser rimanda il caricamento delle immagini fuori dallo schermo finché non si avvicinano all'area visibile.
// Below-the-fold images:
<img src="/product.jpg" alt="Product" loading="lazy" />
// Above-the-fold (hero) — eager to avoid LCP delay:
<img src="/hero.jpg" alt="Hero" loading="eager" fetchPriority="high" />Formati immagine moderni
Serva immagini WebP o AVIF invece di JPEG/PNG. AVIF è il 50% più piccolo di JPEG a parità di qualità. Usi un elemento <picture> per la negoziazione del formato con fallback.
<picture>
<source srcSet="/hero.avif" type="image/avif" />
<source srcSet="/hero.webp" type="image/webp" />
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />
</picture>Immagini adattive con srcSet
Fornisca più dimensioni, così il browser sceglie la risoluzione appropriata per lo schermo ed evita di scaricare un'immagine da 2000px per uno schermo mobile da 400px.
<img
src="/photo-800.jpg"
srcSet="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Photo"
/>Segnaposto Blurhash / Skeleton
Mostri un segnaposto sfocato durante il caricamento dell'immagine per prevenire spostamenti del layout e migliorare le prestazioni percepite.
// With next/image blur placeholder:
<Image
src="/photo.jpg"
alt="Photo"
width={800}
height={600}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 blur
/>Strategia di caricamento dei font
I font bloccano il rendering. Usi font-display: swap per mostrare un font di fallback mentre viene caricato il font personalizzato, riducendo il FOIT (Flash of Invisible Text).
/* In global CSS: */
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2');
font-display: swap; /* show fallback, swap to MyFont when ready */
}Ottimizzazione dei font in Next.js
next/font carica Google Fonts in fase di build, li ospita autonomamente e applica font-display: optional per eliminare il CLS causato dai cambi di font.
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
export default function RootLayout({ children }) {
return <html className={inter.variable}><body>{children}</body></html>;
}Creare subset dei font
Carichi solo i subset di caratteri necessari. Un font Unicode completo può superare 1 MB; un subset Latin è in genere di 30–80 KB.
// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin
// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });Precaricare i font critici
Precarichi i font usati above the fold, così vengono caricati in parallelo all'analisi dell'HTML, riducendo il tempo di blocco del rendering.
<link
rel="preload"
href="/fonts/MyFont.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>CDN e caching
Serva immagini e font da una CDN con TTL di cache lunghi (Cache-Control: max-age=31536000, immutable). I nomi file con hash del contenuto garantiscono che i file aggiornati aggirino la cache.
Verifica rapida
Che cosa fa font-display: swap per i font web?
Riepilogo
Usi next/image per l'ottimizzazione automatica oppure loading='lazy' nativo + srcSet in React senza framework. Serva AVIF/WebP con fallback <picture>. Applichi font-display: swap ai font web, usi next/font per ospitare autonomamente Google Fonts e precarichi le risorse critiche above the fold.
Domande Frequenti
La lezione «Ottimizzazione di immagini e font in React» è gratuita?
Sì — il testo completo di «Ottimizzazione di immagini e font in React» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Ottimizzazione di immagini e font in React»?
Utilizzi next/image o con lazy loading, dimensioni e formati corretti (AVIF/WebP) e font-display. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Ottimizzazione di immagini e font in React»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Misurazione dei Core Web Vitals nelle app React
- Analisi del bundle e strategia di code splitting
- Ottimizzazione di immagini e font in React
- Riduzione dell'INP: ottimizzazione degli event handler