Ottieni un web hosting di qualità

Scegli l'affidabilità e l'esperienza di SiteGround!

Sviluppo Velocità WordPress

Come Eliminare le Risorse che Bloccano il Rendering

Mar 20, 2025 9 min di lettura Aleksandar Kolev

Questo articolo è stato originariamente scritto e pubblicato il 28 marzo 2022 da Cal Evans. È stato aggiornato il 20 marzo 2025 per riflettere gli ultimi sviluppi nelle tecniche per eliminare le risorse che bloccano il rendering.

Nei primi giorni del web, le prime pagine web erano costruite in una versione semplificata di XML chiamata HTML. Bianco con testo nero. Se vedevi una frase con una sottolineatura blu, sapevi che potevi cliccarci sopra. Se era viola, sapevi che ci avevi già cliccato.

La vita era semplice.

Oggi l’HTML è solitamente la parte più piccola di qualsiasi pagina web. Quando un browser richiede una pagina, ottiene l’HTML ma poi deve analizzarlo e scaricare le risorse.

  • CSS
  • JavaScript
  • Immagini
  • Font
  • …e altri file esterni necessari per fornire l’esperienza utente

Non tutte le risorse sono uguali. Alcune risorse che devono essere caricate possono effettivamente rallentare la visualizzazione della pagina web.

Queste risorse sono chiamate “Risorse che Bloccano il Rendering” e questo articolo ti mostrerà alcune tattiche che puoi usare per ridurre il numero di risorse che bloccano il rendering sul tuo sito web e come applicarle manualmente o utilizzando il plugin SiteGround Speed Optimizer.

Cosa Sono le Risorse che Bloccano il Rendering?

“Render” è il termine tecnico per “visualizzare”. In questo articolo, ogni volta che parliamo di rendering, intendiamo il processo di visualizzazione del tuo sito web su uno schermo.

Ogni risorsa caricata nel tuo sito web ha il potenziale di essere una risorsa che blocca il rendering. Questo include:

  • Immagini grandi
  • Codice JavaScript che deve essere eseguito nella <head> della tua pagina
  • CSS grande che la tua pagina non può visualizzare finché non è completamente caricato
  • Qualsiasi risorsa da un altro sito che è più lenta del tuo
  • Plugin che hanno ciascuno i propri file CSS e JavaScript

In breve, qualsiasi cosa tu abbia nel tuo HTML da caricare è potenzialmente una risorsa che blocca il rendering.

Perché Dovresti Eliminare le Risorse che Bloccano il Rendering?

Quando un visitatore arriva sul tuo sito web, il suo browser vuole mostrargli la pagina il più rapidamente possibile. Ma se ci sono troppe risorse che bloccano il rendering, il browser deve frenare e aspettare che quei file vengano scaricati e processati prima di mostrare qualcosa di utile.

Questo crea quello che chiamiamo un “primo rendering lento” – quella pausa imbarazzante in cui gli utenti fissano una pagina vuota o caricata a metà. Non è l’ideale, giusto?

Ecco perché è importante:

  • Migliore Esperienza Utente – Le pagine che si caricano velocemente sembrano fluide e ben rifinite. Una pagina che si carica lentamente, invece, può frustrare i visitatori e farli andare via prima ancora di vedere il tuo contenuto.
  • Miglioramento SEO – Google e altri motori di ricerca considerano la velocità della pagina come un fattore di ranking primario. Se le tue pagine sono lente a causa delle risorse che bloccano il rendering, questo danneggerà la tua posizione nei risultati di ricerca.
  • Maggiore Conversione – Che tu gestisca un negozio online, un blog o un sito portfolio, le pagine che si caricano più velocemente spesso significano tassi di conversione più alti. Una pagina reattiva aiuta a mantenere le persone coinvolte.
  • Uso più Efficiente delle Risorse – Eliminare asset non necessari o mal ottimizzati riduce l’uso di banda e il carico sul server, il che può farti risparmiare denaro e ridurre lo stress sul tuo ambiente di hosting.

Con Interaction to Next Paint (INP) che sostituisce First Input Delay (FID) come metrica dei core web vitals, è ancora più importante ridurre le risorse che bloccano il rendering.

Ottimizzare la velocità con cui gli utenti possono interagire con la tua pagina non solo migliorerà le prestazioni percepite ma avrà anche un impatto positivo sul tuo punteggio dei web vitals.

Alla fine della giornata, l’obiettivo del tuo sito web è comunicare qualcosa rapidamente e chiaramente. Le risorse che bloccano il rendering ostacolano questo obiettivo ritardando il momento in cui i visitatori possono effettivamente iniziare a interagire con il tuo contenuto.

Ora che conosci il “perché”, vediamo come individuare questi rallentamenti e ottimizzare il processo di caricamento del tuo sito web.

Come Identificare le Risorse che Bloccano il Rendering sul Tuo Sito Web?

Ci sono molti strumenti che ti aiutano a vedere come si carica il tuo sito web. Ti suggeriamo queste opzioni per identificare le risorse che bloccano il rendering:

Utilizzando Browser DevTools

Questo è uno degli strumenti che può mostrarti una vista a “cascata” di come si carica una pagina. Tutti i browser moderni includono questa funzione.

Fai clic con il tasto destro del mouse in qualsiasi punto della tua pagina web, seleziona “Ispeziona”, quindi vai alla scheda “Rete”.

Ricarica la pagina e vedrai qualcosa del genere:

Screenshot della scheda Rete di Ispeziona elemento per eliminare le risorse che bloccano il rendering.

Sul lato destro, noterai il grafico a cascata. Le barre colorate mostrano quanto tempo impiega ciascuna risorsa a caricarsi. La sottile linea blu segna quando la pagina inizia a essere visualizzata.

Se noti molte risorse che si caricano prima di quella linea, potrebbe significare che c’è spazio per miglioramenti.

Questa vista integrata è ottima per controlli rapidi, ma ti dice solo come la pagina si comporta sulla tua configurazione attuale. Se stai sviluppando localmente, i risultati potrebbero essere più veloci rispetto alle condizioni reali.

Per approfondimenti più dettagliati, puoi rivolgerti a strumenti online come WebPageTest.

WebPageTest & Altri Strumenti di Test delle Prestazioni

WebPageTest ti offre un quadro più chiaro di come il tuo sito si comporta a livello globale. Inoltre, puoi personalizzare i test per adattarli alle condizioni reali.

Consiglio Pro: Se vuoi una panoramica più rapida, strumenti come PageSpeedInsights segnalano anche le risorse che bloccano il rendering.

Il metodo tipico è:

  • Inizia con un test desktop
  • Scegli una posizione del server distante dall’host del tuo sito web
  • Rimani con Chrome a meno che tu non abbia un motivo per scegliere un altro browser

Puoi regolare queste impostazioni nella scheda “Configurazione Avanzata”.

Screenshot dello strumento WebPageTest con i campi per l’URL, la posizione e il browser da testare.

Clicca su “Avvia Test” e rivedi i risultati.

Risultati di WebPageTest.

Ora vedrai un grafico a cascata più dettagliato. Cliccandoci sopra si apre una versione a grandezza naturale dove puoi individuare i file JavaScript e CSS che bloccano il rendering.

Visualizzazione a cascata di WebPageTest per eliminare le risorse che bloccano il rendering.

In questo esempio, ci sono 32 risorse che bloccano il rendering, principalmente file CSS, con alcuni file JavaScript mescolati.

È facile capire perché JavaScript può bloccare il rendering, ma anche il CSS può farlo. Il browser non può visualizzare completamente la pagina finché non ha tutti gli stili di cui ha bisogno. Se una regola CSS importante viene caricata in ritardo, la tua pagina potrebbe fermarsi finché non è pronta.

Ecco perché ottimizzare la consegna di CSS e JS è fondamentale, ed è esattamente ciò di cui parleremo ora.

Come Eliminare le Risorse che Bloccano il Rendering

Nel tempo, gli sviluppatori web hanno sperimentato vari metodi per ridurre o eliminare le risorse che bloccano il rendering. Oggi, ci sono diverse tecniche affidabili che puoi usare per velocizzare il rendering delle pagine.

1. Ottimizzare il Caricamento di JavaScript

JavaScript è uno dei colpevoli più comuni quando si tratta di bloccare il rendering. Fortunatamente, ci sono diverse tecniche per controllare come e quando i tuoi script vengono caricati, in modo che la tua pagina possa essere visualizzata più velocemente.

1.1. Comprendere Async vs. Defer

Per evitare che i file JavaScript blocchino il rendering della pagina, dovresti usare gli attributi DEFER o ASYNC nei tuoi tag script.

<script defer src="https://example.com/script.js"></script>
  • DEFER scarica lo script mentre la pagina viene visualizzata ed esegue solo dopo che l’HTML è stato completamente analizzato. Preserva l’ordine degli script.
  • ASYNC scarica ed esegue lo script non appena è pronto, indipendentemente dallo stato di rendering della pagina. Questo può causare l’esecuzione degli script fuori ordine.

In generale, DEFER è la scelta migliore, specialmente quando i tuoi script dipendono l’uno dall’altro o dal DOM. Permette al browser di concentrarsi sulla visualizzazione della pagina prima di eseguire gli script.

1.2. Gestire Efficientemente gli Script di Terze Parti

Gli script di terze parti, come quelli di analisi o widget di condivisione sociale, sono comuni bloccanti del rendering. Se possibile, carica questi script usando DEFER o ASYNC.

Alcuni script di terze parti non essenziali possono anche essere spostati per essere caricati dopo che la pagina è stata completamente visualizzata, utilizzando listener di eventi come window.onload.

1.3. Caricamento Pigro di Script Non Critici con IntersectionObserver

Per gli script che sono necessari solo quando un utente interagisce o scorre fino a una certa sezione (ad esempio, widget di chat o video incorporati), puoi caricarli in “modo pigro” usando l’API IntersectionObserver.

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    // Dynamically load script here
  }
});
observer.observe(document.querySelector('#lazy-element'));

Questo dice al browser di caricare questi script solo quando gli elementi correlati entrano in vista, riducendo il carico iniziale per il browser.

2. Ottimizzazione del CSS per un Rendering più Veloce

Il CSS dice al tuo browser come stilizzare la tua pagina, ma può anche rallentare la velocità con cui la pagina appare. Vediamo come far funzionare il tuo CSS con te, non contro di te, quando si tratta di prestazioni.

2.1. Inlining del CSS Critico per il Contenuto Above the Fold

I browser bloccano il rendering finché non hanno elaborato il CSS. Per velocizzare il primo paint, Google suggerisce di identificare il tuo “CSS critico” (gli stili necessari per il contenuto above the fold) e di inserirli direttamente nel tuo HTML.

<style>/* Critical CSS goes here */</style>

Questo elimina la necessità per il browser di attendere i fogli di stile esterni prima di visualizzare il contenuto above the fold, cioè immediatamente visibile appena aperta la pagina principale.

Il modo più semplice per identificare e inserire il CSS critico in linea è utilizzare strumenti come il Chrome Coverage Tool per vedere quali stili vengono caricati durante il rendering iniziale.

Strumento Chrome Coverage per eliminare il CSS che blocca il rendering.

Lo strumento ti mostrerà il CSS non critico (barra rossa) e critico (barra verde) che stai caricando.

Estraendo il CSS critico e posizionandolo inline, (in linea), puoi rimuovere il CSS come risorsa che blocca il rendering.

2.2. Differire il CSS Non Critico

Per gli stili non essenziali, come quelli che influenzano il footer o gli elementi sotto il fold, puoi differire il caricamento utilizzando l’attributo media con un valore come print e cambiarlo a all dopo che la pagina è stata caricata:

<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

Questo trucco permette al browser di dare priorità alle risorse critiche e caricare il resto dopo che la pagina è visivamente completa.

2.3. Precaricare i File CSS Chiave

Un’altra tattica è precaricare i file CSS che sai essere cruciali ma che non vuoi inserire come inline. Il precaricamento aiuta il browser a scoprire queste risorse prima nel processo di rendering:

<link rel="preload" href="important.css" as="style" onload="this.rel='stylesheet'">

È utile per i fogli di stile importanti che influenzano l’aspetto e la sensazione del contenuto above the fold ma sono troppo grandi o complessi per essere inseriti come inline.

3. Tecniche di Rendering Progressivo

Oltre agli script e ai fogli di stile, ci sono alcune strategie aggiuntive che puoi utilizzare per caricare progressivamente il contenuto e velocizzare il primo paint del tuo sito web.

3.1. Server-Side Rendering (SSR) e Generazione Statica

Il Server-Side Rendering (SSR), cioe il Rendering Lato Server e la generazione statica possono aiutare a fornire HTML completamente formato al browser, riducendo la dipendenza dagli script lato client per il rendering iniziale.

Questo significa che il contenuto diventa visibile prima perché il browser non deve aspettare che JavaScript costruisca la struttura della pagina.

Framework come Next.js o Gatsby rendono più facile implementare SSR e generazione statica.

3.2. Ottimizzazione di Font e Immagini per Migliorare i Tempi di Caricamento

Anche i font e le immagini possono bloccare il rendering se non gestiti correttamente. Per ottimizzarli:

  • Usa la proprietà CSS font-display: swap per evitare che i file dei font blocchino il primo paint.
  • Carica le immagini sotto il fold in modo “pigro” utilizzando l’attributo loading=”lazy”.
  • Precarica font chiave o hero images con il tag <link rel=”preload”>per dare loro priorità.

Insieme, queste strategie migliorano le prestazioni del tuo sito permettendo ai browser di visualizzare il contenuto il prima possibile mentre caricano le risorse non essenziali in background.

Come Ridurre le Risorse che Bloccano il Rendering in WordPress con SiteGround Speed Optimizer

Se stai usando WordPress, il plugin Speed Optimizer di SiteGround offre un modo semplice per ridurre le risorse che bloccano il rendering senza toccare il tuo codice.

Anche se non ospiti con SiteGround, questo plugin può comunque aiutare a ottimizzare le prestazioni del tuo sito web.

Attenzione:

Quando apporti queste modifiche, è importante procedere con cautela. Ti consigliamo di regolare un’impostazione alla volta e poi controllare il tuo sito in un browser diverso per assicurarti che tutto funzioni ancora correttamente.

In questo modo, puoi identificare eventuali problemi e risolverli immediatamente prima di passare alla prossima ottimizzazione.

1. Ottimizzazione di JavaScript

Per prima cosa, vai alle impostazioni di JavaScript nel plugin. Ecco le ottimizzazioni chiave:

Screenshot delle impostazioni JavaScript Frontend di Speed Optimizer, con le opzioni per minificare, combinare e differire i file JavaScript, e opzioni aggiuntive per escludere file specifici dall'ottimizzazione.
  • Minimizza i File JavaScript: Questo rimuove i caratteri non necessari dal tuo codice JavaScript. Lo rende più piccolo e veloce da caricare.
  • Combina i File JavaScript: Combinare i file JavaScript riduce il numero di richieste che il browser deve fare, accelerando il tempo di caricamento.
  • Differisci il JavaScript che Blocca il Rendering: Questa opzione importante aggiunge l’attributo DEFER ai tuoi file JavaScript, permettendo alla pagina di essere renderizzata prima di eseguire JavaScript.

2. Ottimizzazione del CSS

Successivamente, vai alle impostazioni di CSS:

Screenshot delle impostazioni CSS Frontend di Speed Optimizer, con le opzioni per minificare, combinare e precaricare i file CSS, e opzioni aggiuntive per escludere file specifici dall'ottimizzazione.
  • Precarica il CSS Combinato: Questa impostazione assicura che il tuo file CSS combinato venga caricato presto nel processo, così è disponibile quando la pagina inizia a essere renderizzata.
  • Minimizza i File CSS: Questo rimuove spazi, nuove righe e commenti dal tuo CSS, riducendo la dimensione del file e migliorando i tempi di caricamento.
  • Combina i File CSS: Combinare i file CSS aiuta a ridurre il blocco del rendering abbassando il numero di richieste HTTP.

Applicando queste ottimizzazioni, puoi ridurre significativamente le risorse che bloccano il rendering sul tuo sito WordPress e renderlo più veloce.

Se vuoi approfondire le ottimizzazioni di WordPress, dai un’occhiata al nostro video su Come Velocizzare il Tuo Sito WordPress Come un Pro.

Dopo aver seguito tutti questi passaggi sul nostro sito di test, siamo scesi a 24 risorse che bloccano il rendering da 32. È davvero un buon inizio.

Visualizzazione a cascata dei risultati di WebPageTest dopo le ottimizzazioni.

Il passo successivo è individuare tutto il CSS critico e inserirlo come inline. Poi differire tutto il resto del CSS e applicare le altre tecniche di ottimizzazione di cui abbiamo discusso sopra. Questo rimuoverà quasi tutti i rimanenti blocchi di rendering.

Ora, passiamo a una lista di controllo finale di tutte le tecniche che abbiamo esplorato.

Lista di Controllo per Eliminare le Risorse che Bloccano il Rendering

Ormai, hai imparato che le risorse che bloccano il rendering non solo rallentano le cose, ma possono influenzare direttamente l’esperienza utente, SEO e conversioni.

Per aiutarti a mettere tutto in pratica, ecco una lista di controllo che puoi seguire:

  • ✅ Identifica le risorse che bloccano il rendering utilizzando gli strumenti DevTools del browser o strumenti come WebPageTest.
  • ✅ Aggiungi attributi defer o async ai file JavaScript non critici.
  • ✅ Ottimizza gli script di terze parti caricandoli in modo asincrono o differendoli quando possibile.
  • ✅ Usa IntersectionObserver per caricare in modo “pigro” gli script che non sono necessari immediatamente.
  • ✅ Inserisci inline il tuo CSS critico (stili above the fold) direttamente nel tuo HTML.
  • ✅ Differisci il CSS non critico o caricalo in modo asincrono, e rimuovi il CSS non utilizzato.
  • ✅ Precarica i file CSS importanti per dare al browser un vantaggio.
  • ✅ Implementa tecniche di rendering progressivo come il Rendering Lato Server (SSR) o la generazione statica dove ha senso.
  • ✅ Ottimizza font e immagini per rimuovere i colli di bottiglia nascosti.
  • ✅ Usa plugin di ottimizzazione delle prestazioni come il SiteGround Speed Optimizer per automatizzare facilmente molte di queste attività.

Eliminare le risorse che bloccano il rendering può sembrare un lavoro da perfezionisti. Ma ognuno di questi passaggi riduce quei fastidiosi ritardi durante i caricamenti delle pagine. Applicali costantemente e creerai un’esperienza più veloce e fluida per i tuoi visitatori.

Dal miglioramento dell’esperienza utente al potenziamento della SEO, ogni ottimizzazione conta. Quando le tue pagine si caricano rapidamente, i visitatori rimangono più a lungo e i motori di ricerca se ne accorgono.

La parte migliore? Con uno strumento come il SiteGround Speed Optimizer, puoi automatizzare molti di questi passaggi e ottenere risultati più rapidi senza troppi problemi e conoscenze di codifica.

A lungo termine, ogni piccolo miglioramento si somma, ed è questo che mantiene il tuo sito web veloce, affidabile e pronto a performare.

Condividi questo articolo

Aleksandar Kolev

Scrittore di contenuti tecnici

Aleksandar lavora in SiteGround dal 2019, cercando sempre di apportare sia una mentalità analitica acuta che un tocco creativo nel suo lavoro. Come scrittore di contenuti tecnici, si impegna a rendere accessibili e coinvolgenti argomenti complessi. Fuori dal lavoro, Aleksandar ama adottare uno stile di vita minimalista e incentrato sulla natura ed è appassionato di musica e di esibizioni dal vivo. Il suo interesse per lo yoga, il Tai-Chi e la meditazione si aggiunge al suo approccio equilibrato sia alla vita che al lavoro.

Altro di Aleksandar

Post correlati

11 Plugin WordPress indispensabili per il tuo sito

WordPress non è solo un CMS - è una potenza con oltre 60.000 plugin pronti a…

  • Feb 25, 2025
  • 11 min di lettura

PHP 8.4: Vediamo cosa c'è di nuovo, le funzionalità e i miglioramenti

Ricca di potenti funzionalità e miglioramenti, l'ultima versione di PHP 8.4 promette di rendere la programmazione…

  • Jan 30, 2025
  • 9 min di lettura

Cos'è l'hosting WordPress? Vale la pena usarlo?

Se hai appena avviato un sito web o un progetto online, probabilmente hai molte domande sull'hosting.…

  • Jan 20, 2025
  • 11 min di lettura

Commenti ( 0 )

Lascia un commento