{"id":27917,"date":"2019-09-26T04:30:37","date_gmt":"2019-09-26T11:30:37","guid":{"rendered":"https:\/\/kinsta.com\/?p=54531"},"modified":"2023-02-02T08:17:43","modified_gmt":"2023-02-02T07:17:43","slug":"differire-parsing-javascript","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/differire-parsing-javascript\/","title":{"rendered":"Come Differire il Parsing di Javascript in WordPress (4 Metodi)"},"content":{"rendered":"

Avete analizzato il vostro sito WordPress tramite un’applicazione per il test delle prestazioni web<\/a> e vi siete scontrati con un avviso che vi chiede di differire il parsing di JavaScript in WordPress (defer parsing of JavaScript<\/em>)?<\/p>\n

Effettuare questa modifica pu\u00f2 avere un impatto positivo sui tempi di caricamento delle pagine del vostro sito, specialmente per i visitatori da dispositivi mobili. Ma poich\u00e9 l’avviso pu\u00f2 essere un po’ difficile da capire, spiegheremo esattamente cosa significa differire il parsing del JavaScript e vi diremo come potete implementare questa modifica sul vostro sito WordPress.<\/p>\n

Ecco cosa imparerete con questo articolo:<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Se preferite saltare direttamente al tutorial, potete fare clic sull’ultimo link nell’elenco di cui sopra.<\/p>\n

<\/a> Cosa Significa Differire il Parsing del JavaScript in WordPress?<\/h2>\n

Se avete mai analizzato il vostro sito WordPress attraverso Google PageSpeed Insights<\/a>, GTmetrix, o altri strumenti di test di velocit\u00e0 della pagina, probabilmente vi siete imbattuti nel suggerimento di differire il parsing del JavaScript.<\/p>\n

Ma cosa significa veramente? E perch\u00e9 \u00e8 un elemento importante da considerare per le prestazioni?<\/p>\n

Fondamentalmente, quando qualcuno visita il vostro sito WordPress<\/a>, il vostro server invia il contenuto HTML del vostro sito web al browser di quel visitatore.<\/p>\n

Il browser del visitatore parte dall’alto e passa attraverso il codice per riprodurre il vostro sito. Se, muovendosi dall’alto verso il basso, trova un qualsiasi JavaScript, interromper\u00e0 il rendering del resto della pagina fino a quando non sar\u00e0 in grado di recuperare e analizzare il file JavaScript.<\/p>\n

Lo far\u00e0 per ogni script che trova, il che pu\u00f2 avere un effetto negativo sui tempi di caricamento delle pagine del vostro sito, perch\u00e9 il visitatore sta di fronte a una schermata vuota mentre il suo browser scarica e analizza tutti i JavaScript.<\/p>\n

Se un certo script non \u00e8 necessario per il funzionamento centrale del vostro sito (almeno al momento del caricamento iniziale della pagina<\/em>), non volete che sia d’intralcio al caricamento di parti pi\u00f9 importanti del sito: \u00e8 per questo motivo che gli strumenti di analisi di velocit\u00e0 della pagina<\/a> dicono sempre di differire il parsing del JavaScript.<\/p>\n

Cosa significa differire il parsing del JavaScript?<\/p>\n

In sostanza, il vostro sito dir\u00e0 ai browser dei visitatori di aspettare a scaricare e\/o analizzare il JavaScript fino a quando il contenuto principale non avr\u00e0 finito di caricare. A quel punto, i visitatori possono gi\u00e0 vedere e interagire con la vostra pagina, quindi i tempi di attesa per scaricare e analizzare quel JavaScript non avranno pi\u00f9 un impatto negativo.<\/p>\n

Accelerando i tempi di caricamento dei vostri contenuti visibili<\/a>, non solo farete felice Google ma creerete un’esperienza migliore e pi\u00f9 veloce per i vostri visitatori.<\/p>\n

<\/a>Come Capire Se Avete Bisogno di Differire il Parsing del JavaScript<\/h2>\n

Per verificare se il vostro sito WordPress ha bisogno di differire il parsing del JavaScript, potete analizzare il vostro sito attraverso GTmetrix<\/a>.<\/p>\n

GTmetrix vi dar\u00e0 un voto ed elencher\u00e0 anche gli script specifici che devono essere differiti:<\/p>\n

\"Differire
Differire il parsing del JavaScript in GTmetrix<\/figcaption><\/figure>\n

<\/a>I Diversi Metodi per Differire il Parsing del JavaScript<\/h2>\n

Ci sono alcuni modi diversi per differire il parsing del JavaScript. In primo luogo, esistono due attributi<\/a> che potete aggiungere ai vostri script:<\/p>\n

    \n
  1. Async<\/li>\n
  2. Defer<\/li>\n<\/ol>\n

    Entrambi gli attributi consentono ai browser dei visitatori di scaricare il JavaScript senza mettere in pausa l’analisi HTML. Tuttavia, la differenza \u00e8 che async<\/strong> non mette in pausa l’analisi HTML per scaricare lo script (come farebbe invece di default), ma mette in pausa il parser HTML per eseguire lo script una volta che questo stato scaricato.<\/p>\n

    Con defer<\/strong>, invece, i browser dei visitatori continueranno a scaricare gli script mentre analizzano l’HTML, ma aspetteranno di effettuare il parsing dello script fino a quando il parsing HTML non sar\u00e0 stato completato.<\/p>\n

    Questo grafico di Growing with the Web<\/a> fa un ottimo lavoro per spiegare la differenza:<\/p>\n

    \"Grafico
    Grafico che spiega async vs defer<\/figcaption><\/figure>\n

    Un’altra opzione, raccomandata da Patrick Sexton di Varvy, usa uno script per chiamare un file JavaScript esterno solo dopo che il caricamento della pagina iniziale \u00e8 finito. Questo significa che i browser dei visitatori non scaricheranno o eseguiranno alcun JavaScript fino a quando il caricamento della pagina iniziale non sar\u00e0 terminato.<\/p>\n

    Infine, un altro approccio che vedrete consiste nello spostare il vostro JavaScript in fondo alla pagina. Tuttavia, questo metodo non \u00e8 una grande soluzione perch\u00e9, anche se la vostra pagina sar\u00e0 visibile prima, i browser dei visitatori continueranno a visualizzare la pagina come se fosse ancora in caricamento, fino alla fine di tutti gli script. Questo potrebbe impedire ad alcuni visitatori di interagire con la vostra pagina, pensando che il contenuto non sia completamente caricato.<\/p>\n

    <\/a>Come Differire il Parsing del JavaScript in WordPress (4 Metodi)<\/h2>\n

    Per differire il parsing del JavaScript in WordPress, ci sono tre soluzioni che potete intraprendere:<\/p>\n