Ha costruito un sito elegante in Framer. Le animazioni sono fluide nell'editor, il design appare rifinito e tutto sembra veloce sul Suo MacBook Pro. Poi esegue un test PageSpeed e vede un punteggio di 45.
Non è una situazione insolita. Molti siti Framer ottengono risultati inferiori alle aspettative sui Core Web Vitals di Google, in particolare su mobile. Ecco perché tende ad accadere e cosa si può fare al riguardo.
I numeri delle prestazioni
Nell'ultimo anno sono stati analizzati decine di siti Framer. Lo schema è costante:
| Metrica | Media Framer | Soglia "buono" di Google | Media Next.js |
|---|---|---|---|
| Punteggio PageSpeed mobile | 42-65 | 90+ | 92-99 |
| Largest Contentful Paint | 3,2-5,8s | Sotto 2,5s | 0,8-1,5s |
| Total Blocking Time | 400-1.200ms | Sotto 200ms | 10-80ms |
| Cumulative Layout Shift | 0,05-0,25 | Sotto 0,1 | 0-0,02 |
Si tratta di range tipici rilevati su siti aziendali Framer con animazioni, contenuti CMS e componenti personalizzati. I siti più semplici possono comportarsi meglio, ma la complessità tende ad abbassare i punteggi.
Perché i siti Framer possono essere lenti
Bundle JavaScript pesante
Framer invia un runtime JavaScript di grandi dimensioni a ogni pagina. Questo runtime alimenta il motore di animazione, il rendering CMS e il sistema di componenti. Anche una semplice landing page con contenuto minimo carica 200-400KB di JavaScript prima che il contenuto effettivo sia visibile.
Su un telefono Android di fascia media con connessione 4G, il parsing e l'esecuzione di quel JavaScript richiedono 1-3 secondi. Questo avviene prima che le immagini si carichino, prima che i font si renderizzino, prima che l'utente veda qualcosa di utile.
Rendering lato client
Framer renderizza le pagine principalmente lato client. Il browser scarica l'HTML, poi il JavaScript, e infine il JavaScript costruisce la pagina. Con Next.js il funzionamento è diverso: viene inviato HTML completamente renderizzato dal server, così il browser mostra il contenuto immediatamente mentre il JavaScript si carica in background.
È per questo che il sito Framer sembra veloce sul laptop ma ottiene punteggi bassi su PageSpeed. Il test simula un vero dispositivo mobile su una vera connessione mobile, non un MacBook su fibra.
Overhead delle animazioni
Il sistema di animazioni di Framer è potente, ma ha un costo. Ogni animazione attivata dallo scroll, effetto hover e transizione di pagina aumenta il costo di esecuzione JavaScript. Animazioni fluide su desktop possono causare scatti visibili su dispositivi mobili con meno potenza di calcolo.
Ottimizzazione immagini limitata
Framer gestisce l'ottimizzazione base delle immagini, ma non è possibile controllare formati, impostazioni di qualità o strategie di dimensionamento responsive. Il componente Image di Next.js serve automaticamente WebP/AVIF nelle dimensioni giuste per ogni dispositivo, con lazy loading e placeholder blur-up. La differenza nel peso delle immagini da sola può essere del 50-80%.
Cosa si può fare restando su Framer
Chi vuole restare su Framer può apportare miglioramenti concreti:
- Ridurre il numero di animazioni: ognuna ha un costo in termini di prestazioni
- Comprimere le immagini prima di caricarle invece di affidarsi all'ottimizzazione di Framer
- Minimizzare i code override personalizzati e gli script incorporati
- Rimuovere componenti e sezioni inutilizzati
- Evitare strutture di componenti profondamente annidate
Realisticamente, queste ottimizzazioni possono migliorare il punteggio di 10-15 punti. Partendo da 45, si potrebbe arrivare a 55-60. Ancora al di sotto della soglia di Google per prestazioni "buone".
Il costo per il business
Google utilizza i Core Web Vitals come segnale di ranking. Un'esperienza mobile lenta si traduce in posizionamenti più bassi nei risultati di ricerca. Oltre alla SEO, il 53% dei visitatori mobile abbandona un sito che impiega più di 3 secondi a caricarsi (dati Google). Se il LCP del sito Framer supera i 4 secondi, i visitatori se ne vanno prima di vedere il contenuto.
Per i siti che dipendono dal traffico organico o dalle conversioni da campagne a pagamento, le prestazioni scadenti incidono direttamente sui ricavi. Ogni 100ms aggiuntivi di tempo di caricamento riduce il tasso di conversione di circa l'1%.
L'alternativa
Una riscrittura in Next.js preserva il design risolvendo i problemi di prestazioni alla radice. L'output visivo resta invariato: stesso layout, stesse animazioni, stessa identità del brand. Il meccanismo di distribuzione passa da JavaScript renderizzato lato client a HTML renderizzato lato server con asset ottimizzati.
Il risultato nei progetti di migrazione webvise è tipicamente un salto da 45-65 su PageSpeed mobile a 92-99. Stesso design, prestazioni sensibilmente migliorate. Posizionamenti più alti, bounce rate ridotto, conversioni in crescita.
Se il sito Framer è uno strumento di business e non solo un portfolio, le prestazioni meritano attenzione. Si esegua il test con PageSpeed Insights su mobile e si valuti il risultato. I numeri indicano se l'ottimizzazione interna alla piattaforma è sufficiente o se l'architettura di Framer ha raggiunto i propri limiti per il caso d'uso specifico.