Nel panorama digitale competitivo di oggi, la velocità del sito Web è molto importante quando si tratta del successo di un’attività online. I giganti dei motori di ricerca come Google danno la priorità ai siti a caricamento rapido, riconoscendo la necessità di fornire un’esperienza utente senza soluzione di continuità.
Secondo gli studi, i caricamenti più rapidi delle pagine aumentano il coinvolgimento degli utenti e i tassi di conversione. Infatti, un ritardo di un secondo nel tempo necessario per il caricamento di una pagina può causare un calo del 7% nelle conversioni dei clienti. Detto questo, è ovvio che i proprietari di siti Web dovrebbero porre un’attenzione particolare alle prestazioni del sito Web.
Google prende sul serio le prestazioni del sito web e le tiene in considerazione quando determina i risultati di ricerca. Di conseguenza, è più probabile che i siti Web che si caricano rapidamente vengano visualizzati per primi nei risultati di ricerca, attirando più visitatori e, alla fine, generando maggiori entrate. Ma come puoi soddisfare i requisiti di Google e caricare rapidamente il tuo sito web?
Ti sbarazzi delle risorse che potrebbero bloccare il rendering del tempo di caricamento di un sito Web, come i file CSS e JavaScript.
Tuttavia, la rimozione di queste risorse può essere impegnativa e richiedere molto tempo, soprattutto per le persone prive di competenze tecniche.
In questo articolo, spiegheremo le risorse che bloccano il rendering e come influiscono sulle prestazioni del sito web e forniremo una guida passo passo per eliminarle dal tuo sito WordPress. Quindi, iniziamo a ottimizzare il tuo sito Web per velocità e successo!
Sommario:
Risorse di blocco del rendering
Qualsiasi risorsa che deve essere caricata prima che una pagina web possa essere mostrata è considerata una risorsa che blocca il rendering. Queste risorse influenzano le prestazioni e l’efficacia di un sito Web e prolungano il tempo necessario per caricare una pagina.
Un file CSS o JavaScript può essere considerato una risorsa che blocca il rendering se quel file sta bloccando il rendering di una pagina web. Tuttavia, l’importanza del caricamento della pagina può variare in base alla loro necessità immediata.
Quando un utente accede a una pagina, il browser elabora prima il codice HTML per visualizzarne il contenuto above the fold. Quando il browser incontra file CSS e JavaScript, li scarica e li elabora. Se i file di risorse contengono codici aggiuntivi o parti inutilizzate, il caricamento della pagina Web richiede più tempo.
Tipi di risorse di blocco del rendering
In generale, i file di risorse come CSS e JavaScript sono considerati risorse di blocco del rendering in WordPress. Il browser considera queste risorse critiche e richiede il caricamento prima che la pagina possa essere visualizzata. Ma non è così; ci sono più file di risorse che bloccano il rendering di una pagina web.
Ecco un elenco di risorse che bloccano il rendering:
Fogli di stile CSS
Il design e la presentazione di una pagina Web sono determinati dai fogli di stile CSS. Un file CSS verrà considerato una risorsa che blocca il rendering se viene inserito nella sezione
di una pagina HTML.File JavaScript nella sezione
JavaScript è un linguaggio di scripting che può essere utilizzato per fornire a una pagina Web un comportamento e un’interazione dinamici. Un file JavaScript sarà considerato una risorsa che blocca il rendering se inserito nella sezione
di una pagina HTML.Font
I testi su una pagina Web vengono visualizzati utilizzando caratteri diversi. I caratteri sono anche considerati una risorsa che blocca il rendering se inclusi nella sezione
di una pagina HTML e caricati da un server locale o da un CDN.Importazioni HTML
Queste sono le vecchie funzionalità HTML che consentono alle pagine Web di includere elementi di altri documenti HTML. Anche se le importazioni HTML non vengono più utilizzate così spesso, potrebbero ancora essere visualizzate su alcuni siti meno recenti. Anche le importazioni HTML sono considerate risorse di blocco del rendering.
Perché le risorse di blocco del rendering sono terribili per le pagine Web
Se il tuo sito WordPress include risorse che bloccano il rendering, rimarrai indietro nei risultati di ricerca. Anche se sei attualmente in prima linea, i siti con prestazioni migliori finiranno per sopraffarti.
I siti con risorse che bloccano il rendering caricheranno file aggiuntivi durante il rendering del sito. Prima di vedere il sito Web, gli utenti devono attendere che i file vengano elaborati. I seguenti indicatori di prestazione per i siti Web saranno influenzati da tali risorse:
- Largest Contentful Paint: determina il tempo necessario per caricare il contenuto principale della pagina.
- First Contentful Paint: il tempo impiegato da un browser per produrre il primo contenuto DOM (Document Object Model) sul tuo sito web.
- Total Blocking Time: valuta quanto tempo ci vuole dal primo Contentful Pianto a quanto tempo ci vuole perché una pagina diventi completamente interattiva.
Sebbene le risorse di blocco del rendering non siano necessarie per il caricamento, potrebbero ostacolare il rendering di un sito Web o di una pagina Web. Pertanto, è essenziale rimuovere tali risorse per evitare di rendere difficile agli utenti la navigazione nel tuo sito web.
Diamo un’occhiata più da vicino al motivo per cui il blocco del rendering è un problema serio per le pagine Web:
Tempo di caricamento della pagina lento
Le risorse che bloccano il rendering causeranno un caricamento più lento del sito Web, che è uno dei suoi principali svantaggi. Una pagina web si carica lentamente quando contiene file di risorse con elementi non necessari. Pertanto, influirà sull’aspetto dei risultati di ricerca, ridurrà il coinvolgimento degli utenti e aumenterà la frequenza di rimbalzo.
Rendering bloccato
Spesso un browser interrompe il rendering di una pagina Web quando incontra risorse che bloccano il rendering perché desidera che le risorse che bloccano il rendering vengano recuperate ed elaborate.
Alla fine, gli utenti si infastidiranno e lasceranno il tuo sito a causa della mancata risposta della pagina o del rendering lento.
Inoltre, se una risorsa si carica lentamente, il browser può anche rinunciare e smettere di tentare di caricarla. Questo potrebbe portare a pagine rotte o informazioni mancanti.
Diminuzione del coinvolgimento degli utenti
Quando si verificano ritardi nel rendering, l’esperienza dell’utente ne risente. Gli utenti si aspettano sempre tempi di caricamento rapidi e di solito abbandonano un sito a caricamento lento. Quindi, finiscono su un sito che si carica più velocemente.
I siti a caricamento lento hanno un effetto negativo sulla soddisfazione dei consumatori e sulla reputazione del marchio. Con ciò, anche il traffico del sito Web e il tasso di conversione diminuiscono drasticamente.
Esistono diversi approcci per rimuovere le risorse che bloccano il rendering da WordPress. Tuttavia, ti presenteremo i metodi manuali per eliminare le risorse che bloccano il rendering. Quindi mostreremo come puoi farlo utilizzando alcuni dei rinomati plugin di WordPress.
Elimina manualmente le risorse di blocco del rendering
Puoi evitare di farlo manualmente, quindi non sentirti frustrato. Ma passare attraverso questa sezione ti aiuterà sicuramente ad apprendere alcune tecniche di ottimizzazione delle prestazioni di WordPress. Ma prima, guarda questo video per familiarizzare con i termini discussi.
#1. Identifica le risorse che bloccano il rendering
Devi prima scoprire le risorse che bloccano il rendering prima di rimuoverle dal tuo sito web. Segui semplicemente questi passaggi per scoprire le risorse che bloccano il rendering sul tuo sito Web WordPress:
- Vai a Google PageSpeed Insights.
- Inserisci l’URL del tuo sito nella barra di ricerca.
- Fai clic sul pulsante “Analizza” per ottenere approfondimenti sul tuo sito web.
- Scorri verso il basso e controlla la sezione Opportunità.
- Se la tua pagina ha risorse che bloccano il rendering, verranno elencate.
#2. Utilizzo degli attributi “Defer” e “Async” per JS
Dopo aver identificato le risorse che bloccano il rendering, è il momento di eliminarle per migliorare le prestazioni del sito web. Da diversi metodi, l’utilizzo del metodo “defer” o “async” per i file JavaScript è un approccio per farlo.
Quando si tratta dell’attributo “defer”, consente al browser di scaricare il file JS e quindi eseguirlo. Ma succede quando la pagina ha terminato il caricamento ed è pronta per visualizzare il suo contenuto.
Quindi, il resto degli elementi sulla pagina può essere caricato in parallelo con il file JavaScript. Di conseguenza, il tempo necessario per caricare la pagina si riduce.
Un altro approccio è l’attributo “async” che consente al browser di scaricare il file JS ogni volta che è disponibile. Ciò avviene senza bloccare altri elementi della pagina. Di conseguenza, il file JS può essere caricato in parallelo con altri elementi, accelerando il processo di caricamento.
Puoi sbarazzarti delle risorse che bloccano il rendering e aumentare la velocità del tuo sito web utilizzando l’attributo “defer” o “async”.
#3. Utilizzo dell’attributo “Media” per CSS condizionale
L’utilizzo degli attributi “media” per i CSS condizionali è un altro approccio per eliminare le risorse che bloccano il rendering. Con questo attributo, puoi definire file CSS univoci per browser desktop e mobili.
Ad esempio, puoi includere un file CSS dedicato ai dispositivi desktop e un altro file CSS personalizzato per i dispositivi mobili. Puoi indicare al browser che il file CSS desktop verrà caricato quando si accede tramite un dispositivo desktop.
Allo stesso modo, il CSS mobile dovrebbe essere caricato solo quando si accede tramite dispositivi mobili. Caricando CSS specifici per dispositivo per dispositivi designati, puoi ridurre le risorse che bloccano il rendering e aumentare i tempi di caricamento del tuo sito.
#4. Rinvio di CSS non critici
Oltre a utilizzare l’attributo “media” per il CSS condizionale, prova a rinviare il CSS non critico. Per questo approccio, è necessario caricare principalmente il CSS essenziale. Successivamente, carichi il resto del CSS mentre la pagina viene caricata.
Ad esempio, potresti avere un enorme file CSS che include tutti gli stili per il tuo sito web. Ma solo una piccola parte di quel file CSS è necessaria per mostrare il contenuto nella regione above the fold del tuo sito. Il contenuto above the fold può essere visualizzato rapidamente ritardando il CSS non critico e il CSS rimanente può essere caricato quando la pagina viene caricata.
#5. Rimozione di CSS e JS inutilizzati
La rimozione di file CSS e JavaScript non necessari è un’altra tecnica per rimuovere le risorse che bloccano il rendering. Questi file possono appesantire la tua pagina e aumentare i tempi di caricamento.
Rimuovendo tutti i file CSS e JS inutilizzati, puoi ridurre il numero di risorse che bloccano il rendering. Puoi facilmente utilizzare strumenti come PurifyCSS o UnusedCSS per rimuovere qualsiasi file CSS inutilizzato dal tuo sito web.
#6. Caricamento locale di caratteri personalizzati
I caratteri personalizzati possono anche includere risorse che limitano il rendering. Invece di dipendere da fonti esterne come Google Fonts, dovresti caricare localmente i tuoi font personalizzati per evitare di aver bisogno di queste risorse.
Puoi garantire che i tuoi caratteri personalizzati vengano caricati in modo rapido ed efficiente senza rallentare le prestazioni del tuo sito Web caricandoli localmente. Ciò può portare a un sito Web più rapido e reattivo e migliorare l’esperienza dell’utente.
#7. Minimizzare JS e CSS
Infine, minimizzare i file CSS e JavaScript può aiutare il tuo sito web a funzionare meglio. La minificazione rimuove i caratteri non necessari, come spazi bianchi e commenti, dal codice. Pertanto, la dimensione dei tuoi file viene ridotta, il che accelera il caricamento.
Per minimizzare i tuoi file, puoi utilizzare strumenti come MinifyJS o CSSNano. Conserva una copia dei tuoi file originali nel caso in cui tu abbia bisogno di apportare modifiche ad essi.
Elimina le risorse che bloccano il rendering con il plug-in
In questa sezione, ti mostreremo come eliminare le risorse che bloccano il rendering utilizzando i plugin di WordPress. Questi plugin sono rinomati in WordPress e possono rimuovere rapidamente le risorse che bloccano il rendering. La parte migliore è che puoi persino migliorare le prestazioni del tuo sito Web senza alcuna competenza specializzata.
#1. Cache totale W3
W3 Total Cache (W3TC) migliora l’intera esperienza utente di un sito Web WordPress. Elimina le risorse che bloccano il rendering e migliora SEO, Core web vitals e altro ancora. Il plug-in utilizza funzionalità come l’integrazione della rete di distribuzione dei contenuti per implementare le migliori pratiche.
Per eliminare le risorse che bloccano il rendering, installa e attiva il plug-in W3 Total Cache e segui questi passaggi:
- Vai alla sezione Prestazioni nella dashboard di WordPress e fai clic su Impostazioni generali.
- Sotto l’intestazione Minimizza, abilita Minimizza e seleziona Manuale come modalità di minificazione.
- Ora fai clic su Salva tutte le impostazioni.
- Quindi raccogli tutti i file Javascript e CSS che bloccano il rendering tramite Google PageSpeed Insights.
- Seguito tornando a Prestazioni> Minimizza.
- Ora, nella sezione js, prima fai clic su Abilita per le impostazioni di JS Minify. Quindi, nella sezione Operazioni nelle aree, seleziona Non bloccante utilizzando il tipo “defer” per il tag Before .
- Ora vai alla gestione dei file JS, seleziona il tema che hai attivato e fai clic sul pulsante Aggiungi script. Ora raccogli gli URL Javascript che presentano problemi scansionati da Google PageSpeed Insights. Incolla gli URL nel campo designato come indicato nell’immagine.
- Ora scorri un po’ verso il basso fino alla sezione CSS. Seleziona il tuo tema dal menu a discesa nella sezione di gestione dei file CSS e fai clic su Aggiungi un foglio di stile. Ora segui semplicemente il passaggio precedente e copia e incolla gli URL raccolti da PageSpeed Insight che presentano problemi.
- Poiché tutte le impostazioni sono configurate, fare clic sul pulsante Salva impostazioni ed elimina per eseguire.
#2. JCH Ottimizza
JCH Optimize migliora le prestazioni del sito web di WordPress misurate da Google PageSpeed insight. Il plug-in migliora First contentful paint (FCP), Largest Contentful paint (LCP), Speed Index (SI), Cumulative Layout Shift (CLS), Time to Interactive (TTI) e altro ancora.
Pertanto, l’esperienza utente complessiva e le prestazioni del sito Web migliorano in modo significativo.
Dopo aver installato e attivato JCH Optimize, segui questi processi per eliminare le risorse che bloccano il rendering:
- Vai su Impostazioni>Ottimizza JCH, scorri un po’ verso il basso e vai alle impostazioni delle funzioni di base.
- Abilita la pubblicazione di Optimize CSS per eliminare il blocco del rendering CSS. Questa funzione determina automaticamente il CSS essenziale richiesto per visualizzare il contenuto above the fold su ogni pagina web. Inoltre, lo inserisce nella sezione del contenuto HTML di ciascuna pagina.
- Il collegamento di precaricamento viene quindi utilizzato per caricare i file CSS concatenati in modo asincrono.
- Per rimuovere le risorse di blocco del rendering Javascript, devi includere gli attributi async o defer nel tag