Come eliminare JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold

Quando si crea un sito Web, ci sono alcuni aspetti che sono fondamentali per offrire agli utenti un’esperienza fluida. Uno di questi aspetti è rappresentato dal tempo di caricamento. Un sito web che si carica velocemente è sempre apprezzato dai visitatori che vogliono trovare quello che cercano il più velocemente possibile. Per ottenere un tempo di caricamento rapido, dovresti imparare come eliminare JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold.

La velocità di un sito Web può essere influenzata da un’ampia gamma di fattori, ma i fattori discussi in questo articolo hanno l’impatto maggiore. L’equazione perfetta del sito Web può essere difficile da risolvere, poiché alcuni elementi non dipendono dalle tue azioni. Sono dettati da ogni situazione in particolare (es. posizione geografica, velocità di Internet). Tuttavia, puoi ottimizzare la consegna CSS modificando gli elementi che sei in grado di controllare completamente. Scopri di seguito ulteriori informazioni su questo argomento in questo articolo creato dal nostro team su wpDataTables.

Definire il blocco del rendering e il contenuto above-the-fold

Blocco del rendering

Il blocco del rendering si riferisce agli elementi che impediscono il caricamento del contenuto cruciale di un sito Web (ad esempio il corpo del testo principale di un articolo) prima del caricamento dell’intera pagina. Un buon esempio di tale elemento è rappresentato da qualsiasi JavaScript o CSS aggiuntivo che viene aggiunto a un sito web. Questo codice potrebbe impedire all’utente di vedere qualsiasi cosa nel proprio browser fino a quando il codice non è stato completamente eseguito, diventando così un blocco del rendering.

Contenuti above the fold

Quando un visitatore accede a un sito Web, viene accolto da una determinata parte del sito, ovvero la parte più in alto. Per vedere il resto, l’utente dovrà scorrere verso il basso o eseguire altre azioni sul sito. Il contenuto che i visitatori possono vedere immediatamente dopo aver effettuato l’accesso è chiamato contenuto above-the-fold.

Informazioni sul blocco della visualizzazione in JavaScript e CSS

I browser leggono l’HTML per visualizzare un sito. Questo è un processo che ha più passaggi. Se il browser si imbatte in elementi che fanno riferimento a uno script/foglio di stile, sono necessari passaggi aggiuntivi per leggere il codice. Il browser dovrà richiedere un file, attendere una risposta, scaricare il file dal server e quindi eseguire il file.

Naturalmente, questi passaggi aggiuntivi possono rallentare il tempo di caricamento. Tieni presente che alcuni temi WordPress coinvolgono più di un solo file CSS o JavaScript. Il tempo di caricamento può essere notevolmente rallentato a causa di questi file. Questo è il motivo per cui dovrai eliminare le risorse di blocco del rendering dal tuo sito. Molto spesso, questi non sono file critici, quindi puoi posticipare l’analisi di JavaScript per ridurre il blocco del rendering della pagina, migliorando così la velocità del tuo sito.

Identificazione di JavaScript e CSS che bloccano la visualizzazione

Per eliminare JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold, dovrai identificare quali sono questi elementi. Uno dei modi più semplici per identificarli è aprire il tuo sito Web con uno strumento di velocità della pagina che ti dice quali problemi deve affrontare durante il caricamento. PageSpeed ​​Insights di Google è uno di questi strumenti che dovrebbe aiutarti a trovare i file che bloccano il rendering sul tuo sito. Una volta che hai capito quali sono i file, puoi procedere a rimuovere o riorganizzare il JavaScript che blocca il rendering.

Come eliminare JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold?

Hai due opzioni in questa situazione: impara come eliminare JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold o usa un plug-in per farlo. Se sei un esperto di tecnologia e sei disposto a imparare come vengono eliminate le risorse che bloccano il rendering, applica uno di questi metodi:

Cancella JavaScript dal percorso di rendering critico

Il percorso di rendering critico dovrebbe includere solo gli elementi essenziali per il sito web. Puoi spostare le risorse JavaScript non necessarie da questo percorso. Questo viene fatto aggiungendo alcuni attributi in cui è richiesto JavaScript. Gli attributi sono:

• Async: questo attributo dice al browser che dovrebbe iniziare a scaricare le risorse immediatamente per evitare tempi di caricamento lenti. Una volta che le risorse sono disponibili, l’analisi HTML viene temporaneamente sospesa e le risorse vengono caricate.
• Rinvia:  questo attributo dice al browser di posticipare il download delle risorse fino al termine del processo di analisi HTML. Una volta completato, il browser scaricherà e visualizzerà gli script nell’ordine di apparizione sul sito web.

Controlla come vengono fornite le risorse CSS e ottimizzale

Per eliminare le risorse di blocco del rendering nei CSS, dovrai:

• Identifica le risorse necessarie per i contenuti above-the-fold e integra gli stili CSS con HTML.
• Utilizzare un altro attributo per identificare le risorse CSS che sono assolutamente necessarie (attributo media).
• Carica le risorse CSS in modo asincrono (usando gli attributi discussi sopra).

Un elenco di plug-in che possono aiutarti a eliminare più facilmente JavaScript che blocca il rendering

Ottimizza automaticamente

Per eliminare JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold di WordPress, puoi utilizzare plug-in come Autoptimize. Questo plugin migliora il tempo di caricamento del tuo sito WordPress combinando bit di codice, riducendo i blocchi di codice rimuovendo i caratteri non necessari (compressione) e così via. Apportando queste modifiche, il codice è più facile da leggere e la dimensione del file viene ridotta, riducendo così il tempo di caricamento di alcune centinaia di millisecondi o addirittura secondi.

Per installare questo plugin, devi semplicemente accedere alla dashboard di WordPress e accedere alla scheda Plugin. Quindi, seleziona l’opzione Aggiungi nuovo che si trova nella parte superiore della finestra. Successivamente, puoi cercare Autoptimize o altri plugin nella barra di ricerca. Fai clic su Installa ora, attivalo per il sito Web che desideri e sei a posto.

Cache totale W3

Autoptimize ha molte altre alternative che puoi utilizzare per rimuovere le risorse che bloccano il rendering da WordPress. Il plugin W3 Total Cache è uno dei migliori. La cosa interessante di questo plugin è che incorpora molteplici funzionalità extra per l’ottimizzazione di WordPress. La memorizzazione nella cache rappresenta il processo in cui determinati file vengono archiviati sul computer di un utente per migliorare la sua esperienza con il sito web. Le visite successive saranno più facili e i tempi di caricamento miglioreranno.

Pacchetto potenziamento velocità

Un’altra opzione è Speed ​​Booster Pack. Una volta installato, puoi accedere alle impostazioni e scegliere le opzioni più adatte alle tue esigenze. Il plug-in offre alcune opzioni di configurazione come spostare gli script nel piè di pagina o rinviare i file JavaScript dall’analisi. Selezionandoli, puoi rimuovere JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold con solo un paio di clic.

Ottimizzazione JCH

JCH Optimize è un plugin che combina JavaScript e CSS riducendo le dimensioni dei file. Ha molte altre funzionalità che possono essere utili a lungo termine, ma è ottimo per eliminare le risorse che bloccano il rendering. Naviga attraverso le sue impostazioni e attiva le funzionalità che sembrano rilevanti per il tuo sito web.

Anche se richiede una certa attenzione, la risoluzione di questo problema avrà un grande impatto sul tuo sito. Dopo aver appreso come rimuovere JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold, assicurati di sradicare tutti gli elementi che potrebbero rallentare il tuo sito Web il prima possibile.

Se ti è piaciuto leggere questo articolo su come eliminare JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold, dovresti dare un’occhiata a questo su come modificare i caratteri in WordPress.

Abbiamo anche scritto di alcuni argomenti correlati come come incorporare un iframe di WordPress, come trovare l’ID della pagina in WordPress, come scaricare la libreria multimediale di WordPress, come fermare un attacco DDoS e come nascondere il titolo della pagina in WordPress.