Page Speed con un budget limitato: le ottimizzazioni che contano di più

Le ottimizzazioni che contano di più

Come consulente Core Web Vitals ricevo molte richieste diverse per il supporto sulle prestazioni. E sì, a volte non c'è un grande budget. In tal caso, devo essere ancora più efficiente con il mio tempo e apportare solo ottimizzazioni ad alto rendimento e basso sforzo che migliorino concretamente i Core Web Vitals.

Ultima revisione a cura di Arjen Karel a marzo 2026

I numeri parlano chiaro. Secondo il Web Almanac 2025, solo il 48% delle origini mobile supera tutti e tre i Core Web Vitals. La pagina mobile mediana pesa 2,6 MB, con 632 KB di JavaScript (di cui 251 KB non utilizzati). Questi sono problemi che puoi risolvere senza un grande budget.

SUGGERIMENTO Core Web Vitals: La mia Consulenza On-Call è il modo più conveniente per ottenere aiuto esperto. Prenota una sessione di 2 ore (300 €) e diagnosticherò i tuoi problemi relativi ai Core Web Vitals, risolverò i problemi più urgenti e ti fornirò una chiara strategia per il resto. Mi preparo prima della nostra conversazione, in modo da non sprecare tempo.

Prenota una sessione!

1. Scopri prima i problemi

Quando si ottimizzano le prestazioni web con un budget limitato, dobbiamo essere assolutamente certi di agire nel modo più efficace possibile. Ciò significa che prima di tutto dobbiamo sapere qual è il vero problema.

Possiamo utilizzare l'eccellente strumento gratuito PageSpeed Insights per interrogare i dati CrUX. I dati CrUX sono l'unica fonte di dati che conta, poiché sono i dati utilizzati da Google.

Sotto il punteggio CrUX vedrai un audit di Lighthouse.

Voglio essere chiaro riguardo all'audit di Lighthouse! In questo momento non ci interessa Lighthouse. Perché? Perché non misura i Core Web Vitals. Certo, Lighthouse è un fantastico strumento di test e sentiti libero di esplorare tutti i suoi suggerimenti, ma dato che abbiamo un budget limitato, ci interessa superare i Core Web Vitals. Non ci interessa superare test sintetici in questa fase!

Torniamo ai dati CrUX. Ecco alcune linee guida da seguire se hai un budget limitato. Inizia a esaminare i Core Web Vitals in questo preciso ordine e concentrati prima su questi problemi!

• Se non stai superando il Time to First Byte, risolvi questo prima di tutto!
• Se non stai superando il First Contentful Paint, risolvi le risorse che bloccano il rendering (differisci gli script e ottimizza gli stili)
• Se non stai superando il Largest Contentful Paint, assegna priorità alle risorse di cui hai bisogno per quel LCP (come font o immagini)
• Se non stai superando il CLS, aggiungi larghezza e altezza a tutte le immagini, trova e rimuovi le transizioni CSS e prenota lo spazio per gli elementi a rendering ritardato (come annunci, filtri dei prodotti, ecc.)
• Se non stai superando l'Interaction to Next Paint molto probabilmente stai usando troppo JavaScript nel momento sbagliato. Rimuovi script e plugin non necessari, usa uno strumento RUM come CoreDash per trovare gli script più lenti

2. Ottimizza le tue immagini

Le immagini rappresentano 911 KB della pagina mobile mediana secondo il Web Almanac 2025. Si tratta di più di un terzo del peso totale della pagina. E il 57% delle immagini LCP sono ancora servite in formato JPG quando in WebP sarebbero più leggere a parità di qualità. Con un budget limitato, l'ottimizzazione delle immagini ti offre il massimo impatto con il minimo sforzo.

Converti gratuitamente le immagini in WebP

Ci sono tantissimi strumenti gratuiti, soluzioni e plugin disponibili che ti permetteranno di convertire le immagini in formati più recenti, veloci e moderni come WebP. Per WordPress, ad esempio, suggerirei l'eccellente e gratuito WebP Express.

Implementa il lazy loading

Il lazy loading segnalerà al browser che un'immagine non deve essere caricata finché non è quasi nella viewport visibile. Se hai 15 immagini in una pagina e solo 3 sono nella parte visibile, puoi tranquillamente aggiungere loading="lazy" alle immagini che non sono nella viewport visibile.

Ci sono 2 modi per affrontare la questione. Il primo è abilitare il lazy loading nel tuo CMS. Questo aggiungerà il lazy loading a tutte le immagini. Successivamente consulta la documentazione su come rimuovere il lazy loading per le immagini visibili e importanti. L'altro modo è aggiungere manualmente loading="lazy" alle immagini below-the-fold. Per una guida completa, consulta come differire le immagini fuori dallo schermo.

<img loading="lazy" src="image.jpg" width="800" height="600">

Imposta la fetchpriority dell'immagine

Aggiungendo fetchpriority="high" a un tag immagine segnaliamo al browser che questa immagine è più importante delle altre e dovrebbe essere scaricata per prima. E sebbene ci siano modi migliori che includono il preload dell'immagine e le 103 Early Hints, impostare la fetchpriority è semplice, veloce ed efficace! Identifica l'immagine più importante della tua pagina, modifica il template e aggiungi fetchpriority="high" all'immagine:

<img fetchpriority="high" src="image.jpg" width="800" height="600">

3. Risolvi il caching del browser

Se stai utilizzando un hosting economico, è probabile che il server web non sia configurato in modo ottimale. Uno degli errori che riscontro regolarmente è il caching del browser configurato male. Senza intestazioni di caching adeguate, i visitatori di ritorno scaricano di nuovo le stesse immagini, script e fogli di stile. Si tratta di larghezza di banda e tempo sprecati.

Se stai utilizzando Apache come server web, crea semplicemente un file chiamato .htaccess nella directory principale del tuo sito web e aggiungi queste righe:

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|webp|gif|css|js|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>
</FilesMatch>

Mentre modifichi il file .htaccess, abilita anche la compressione GZIP. Questa comprime le risorse basate su testo (HTML, CSS, JavaScript) prima di inviarle al browser. Sulla maggior parte dei siti, questo riduce le dimensioni del trasferimento del 60-80%.

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript
  AddOutputFilterByType DEFLATE application/javascript application/json
</IfModule>

Se utilizzi un server web diverso come NGINX, contatta il tuo provider di hosting e indirizzalo a questo articolo!

4. Prendi in considerazione Cloudflare (anche il piano gratuito aiuta)

Anche con il piano gratuito, Cloudflare ti offre molte importanti funzionalità per le prestazioni. Se sei su un hosting economico, passare i tuoi DNS a Cloudflare è uno dei cambiamenti a più alto impatto e minor sforzo che tu possa fare. Per una procedura dettagliata, consulta la guida completa alla configurazione di Cloudflare.

Nel piano gratuito

1. DNS veloci. I server DNS di Cloudflare sono gratuiti e probabilmente supereranno in prestazioni i server DNS del tuo provider di hosting economico. I dati CrUX del Web Almanac 2025 mostrano che solo il 44% delle origini mobile ha un buon TTFB. Un DNS lento è una causa comune e il passaggio a Cloudflare lo risolve all'istante.
2. HTTP/3 e Brotli. Cloudflare utilizza i protocolli più recenti e i metodi di compressione più veloci. Senza entrare troppo nei dettagli, stai certo che questo velocizzerà la tua rete di almeno il 10%.
3. Caching del browser coerente. Cloudflare ha una solida reputazione per quanto riguarda il caching delle risorse statiche. La configurazione predefinita è probabilmente migliore di quella che hai attualmente.
4. Edge caching per le risorse statiche. Cloudflare memorizzerà nella cache le versioni delle tue risorse statiche come immagini, script e file CSS e le servirà direttamente all'utente finale dalla sua rete edge. Questo elimina la necessità di viaggi di andata e ritorno verso il tuo server di origine.
5. Rocket Loader. Rocket Loader differirà il caricamento degli script e gestirà le complicazioni che ne derivano. È un metodo grezzo, ma se non sei in grado di differire gli script manualmente, questo probabilmente migliorerà le metriche di paint come il Largest Contentful Paint. Nota: Rocket Loader utilizza API del browser deprecate e PageSpeed Insights potrebbe segnalarlo. Se visualizzi quegli avvisi, valuta di differire gli script manualmente.

Nel piano Pro

Una delle prime cose che dico sempre quando vedo un piano Cloudflare gratuito è "passa al pro!". Se 25 $ è una cifra che puoi permetterti e che sei disposto a spendere per un sito più veloce, dovresti probabilmente prenderlo in considerazione.

1. Tutte le funzionalità gratuite. Ovviamente il piano pro include tutte le funzionalità gratuite.
2. Cloudflare APO per WordPress. APO per WordPress è una soluzione completa che memorizzerà nella cache le tue pagine sulla rete edge se i visitatori non sono loggati. Questo può velocizzare enormemente il Time to First Byte.
3. Ottimizzazione delle immagini lossless e lossy. Uno dei principali vantaggi dell'utilizzo della versione pro di Cloudflare è la sua ottimizzazione delle immagini. Cloudflare convertirà e memorizzerà le immagini nella cache in formato WebP e le servirà solo ai visitatori che accettano questi formati.

5. Fai self-hosting il più possibile

Un'altra ottimizzazione semplice ed efficace è il self-hosting delle risorse statiche. Su molti siti, le risorse statiche sono ospitate su CDN esterne. Ad esempio, jQuery è ospitato su https://code.jquery.com/, Bootstrap è ospitato su https://cdn.jsdelivr.net e i tuoi font sono ospitati su https://fonts.googleapis.com. Capisco l'attrattiva. Queste CDN si presentano come facili e veloci, ma usarle è in realtà una cattiva idea e rallenterà il tuo sito.

L'idea di utilizzare una CDN condivisa per questi tipi di file era valida quando i browser potevano ancora condividere questi file tra siti web. Quei giorni sono finiti. Il risultato è che un nuovo visitatore deve sempre scaricare il file statico ed è necessaria una nuova connessione a un nuovo server per ogni file. E queste nuove connessioni a questi nuovi server possono richiedere molto tempo aggiuntivo.

La soluzione è fare self-hosting di quei file di terze parti. Farlo è facile: basta scaricare il file, posizionarlo sul tuo server e cambiare il riferimento a questo file. Per i font in particolare, consulta come fare self-hosting dei Google Fonts.

6. Differisci i tuoi script

Un enorme collo di bottiglia possono essere gli script bloccanti nell'head della pagina. A volte, questi script possono ritardare il caricamento della pagina fino a 20 secondi! Il Web Almanac 2025 ha rilevato che solo il 15% delle pagine mobile supera l'audit delle risorse che bloccano il rendering. Questo ti dice quanto sia diffuso il problema.

Differire questi script non è affatto difficile. Basta aggiungere defer al tag script e il gioco è fatto. Se puoi, fallo! Modifica il template e cambia il tuo script in questo modo:

<!-- old blocking script tag -->
<script src="script.js"></script>

<!-- new deferred script tag -->
<script defer src="script.js"></script>

Ma ci sono delle insidie! Aggiungere defer ai tag script può causare ogni sorta di problemi e di errori di dipendenza. E poiché hai un budget limitato, devo presumere che tu non abbia i mezzi per assumere un esperto JavaScript che risolva tutti i problemi che potrebbero verificarsi. Quindi ti preghiamo di provare a differire i tuoi script e di verificare la presenza di errori (premi Ctrl+Shift+I in Chrome e controlla la scheda della console). Se non ci sono problemi dopo i test, sei tra i pochi fortunati! Se ci sono problemi, dovresti ricorrere a una delle seguenti soluzioni. Per un quadro completo, consulta 16 metodi per differire JavaScript.

Usa Rocket Loader

Come discusso, la versione gratuita di Cloudflare ti darà accesso a Rocket Loader. Questo differirà tutti gli script in una pagina. Non è in alcun modo perfetto, ma la maggior parte delle volte farà un ottimo lavoro.

Usa un plugin

La maggior parte dei siti basati su CMS dispone di un vasto repository di plugin. Esistono molti plugin in circolazione che ti permetteranno di differire JavaScript e gestire tutte le complicazioni che possono derivare dal differire gli script.

7. Ottimizza i tuoi font

I web font sono un costo di prestazioni nascosto sui siti con budget limitato. La pagina mediana carica 122 KB di file di font secondo il Web Almanac 2025. Se i tuoi font vengono caricati da Google Fonts, stai effettuando ulteriori ricerche DNS e connessioni TCP a ogni prima visita.

Due soluzioni gratuite:

1. Fai self-hosting dei tuoi font. Scarica i file dei font, inseriscili sul tuo server e caricali da lì. Questo elimina il sovraccarico di connessione verso fonts.googleapis.com e fonts.gstatic.com.
2. Aggiungi font-display: swap. Questo dice al browser di mostrare immediatamente il testo in un font di fallback mentre viene scaricato il web font. I tuoi visitatori visualizzano i contenuti più velocemente ed eviti il problema del testo invisibile. Per la strategia completa, consulta come risolvere il problema del testo invisibile durante il caricamento dei web font.

8. Caching, caching, caching

Quando hai un budget limitato e non vuoi spendere molto per l'hosting, il caching è uno dei modi più efficaci per velocizzare un sito web. Il caching è particolarmente efficace contro un alto Time to First Byte. Il caching può essere eseguito a diversi livelli.

Cache lato client: Configura il tuo server web per indicare ai browser di memorizzare nella cache quante più risorse statiche possibili. Questo ridurrà il carico sul tuo server. (Vedi l'esempio .htaccess nella sezione 3.)

Cache degli oggetti: La cache degli oggetti può essere utilizzata per archiviare dati che potrebbero essere computazionalmente costosi da rigenerare, come il risultato di complesse query sul database. Chiedi al tuo hoster di installare Redis o Memcached.

Cache dell'intera pagina: Se utilizzi un CMS, probabilmente vorrai aggiungere una cache per l'intera pagina al tuo sito. Per WordPress, buone opzioni sono WP Fastest Cache o WP Core Web Vitals.

9. Fai scelte di hosting strategiche

Quando si tratta di hosting, vale la pena guardarsi intorno e l'host più costoso non è sempre il più veloce. Generalmente stai cercando un piano di hosting ottimizzato per il tuo CMS, perché chi fa tutto non eccelle in nulla. Cerca un hosting che includa come minimo PHP 8+, HTTP/2 e archiviazione SSD. Un buon host WordPress con queste basi supererà sempre un host condiviso generico.

10. Monitora le tue prestazioni

Tutte queste ottimizzazioni non servono a nulla se non sai se hanno effettivamente funzionato. Configura un Real User Monitoring in modo da poter vedere come i visitatori reali sperimentano il tuo sito, non solo come lo valuta Lighthouse in laboratorio. I punteggi di laboratorio sono utili per il debug, ma i dati sul campo dei visitatori reali sono ciò che Google usa per il posizionamento. CoreDash traccia i Core Web Vitals dagli utenti reali e ti dirà esattamente a che punto ti trovi.