La velocità di caricamento è fondamentale. Ogni secondo di ritardo può costare conversioni e influire sul tuo posizionamento nei motori di ricerca. Questa guida ti mostra come ottimizzare il tuo sito per ottenere le migliori prestazioni.
Perché contano le prestazioni?
- Il 53% degli utenti abbandona se una pagina impiega più di 3 secondi
- 1 secondo di miglioramento può aumentare le conversioni del 7%
- Google usa la velocità come fattore di ranking
Core Web Vitals
Google misura l’esperienza utente con tre metriche principali:
LCP (Largest Contentful Paint)
Tempo fino a quando il contenuto principale è visibile.
- Buono: < 2.5s
- Necessita miglioramento: 2.5s - 4s
- Scarso: > 4s
FID (First Input Delay)
Tempo fino a quando la pagina risponde alla prima interazione.
- Buono: < 100ms
- Necessita miglioramento: 100ms - 300ms
- Scarso: > 300ms
CLS (Cumulative Layout Shift)
Stabilità visiva durante il caricamento.
- Buono: < 0.1
- Necessita miglioramento: 0.1 - 0.25
- Scarso: > 0.25
Tecniche di ottimizzazione
1. Ottimizzazione delle immagini
<!-- Usare formati moderni -->
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Descrizione" loading="lazy">
</picture>2. Caricamento differito (Lazy Loading)
// Intersection Observer per lazy loading
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});3. Minificazione e compressione
- Minifica CSS, JavaScript e HTML
- Abilita la compressione Gzip o Brotli
- Elimina il codice non utilizzato (tree shaking)
4. Cache efficace
# Configurazione della cache in Nginx
location ~* \.(css|js|jpg|png|webp|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}5. Precaricare le risorse critiche
<head>
<!-- Precaricare i font -->
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>
<!-- Preconnettersi a origini esterne -->
<link rel="preconnect" href="https://api.example.com">
</head>6. Rendering lato server
Usa SSR o SSG per consegnare HTML completo al browser:
// Esempio con Next.js
export async function getStaticProps() {
const data = await fetchData();
return {
props: { data },
revalidate: 3600 // Rigenerare ogni ora
};
}Strumenti di misurazione
- Lighthouse (Chrome DevTools)
- PageSpeed Insights (Google)
- WebPageTest
- GTmetrix
Checklist di ottimizzazione
- Immagini ottimizzate e in formato moderno
- Lazy loading implementato
- CSS critico inline
- JavaScript differito
- Cache configurata correttamente
- CDN configurato
- Compressione abilitata
- Font ottimizzati
Conclusione
L’ottimizzazione delle prestazioni è un processo continuo. Monitora regolarmente le tue metriche e adegua secondo necessità.
Il tuo sito ha bisogno di un audit delle prestazioni? Contattaci per un’analisi gratuita.