{"id":226566,"date":"2022-09-05T11:16:00","date_gmt":"2022-09-05T08:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226566"},"modified":"2022-11-09T02:56:33","modified_gmt":"2022-11-08T23:56:33","slug":"come-eliminare-javascript-e-css-che-bloccano-il-rendering-nei-contenuti-above-the-fold","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/come-eliminare-javascript-e-css-che-bloccano-il-rendering-nei-contenuti-above-the-fold\/","title":{"rendered":"Come eliminare JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold"},"content":{"rendered":"\n

Quando si crea un sito Web, ci sono alcuni aspetti che sono fondamentali per offrire agli utenti un’esperienza fluida. Uno di questi aspetti \u00e8 rappresentato dal tempo di caricamento. Un sito web che si carica velocemente<\/a> \u00e8 sempre apprezzato dai visitatori che vogliono trovare quello che cercano il pi\u00f9 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.<\/p>\n

La velocit\u00e0 di un sito Web pu\u00f2 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\u00f2 essere difficile da risolvere, poich\u00e9 alcuni elementi non dipendono dalle tue azioni. Sono dettati da ogni situazione in particolare (es. posizione geografica, velocit\u00e0 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<\/a>.<\/p>\n

Definire il blocco del rendering e il contenuto above-the-fold<\/h2>\n

Blocco del rendering<\/h3>\n

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 \u00e8 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 \u00e8 stato completamente eseguito, diventando cos\u00ec un blocco del rendering.<\/p>\n

Contenuti above the fold<\/h3>\n

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

Informazioni sul blocco della visualizzazione in JavaScript e CSS<\/h3>\n

I browser leggono l’HTML per visualizzare un sito. Questo \u00e8 un processo che ha pi\u00f9 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\u00e0 richiedere un file, attendere una risposta, scaricare il file dal server e quindi eseguire il file.<\/p>\n

Naturalmente, questi passaggi aggiuntivi possono rallentare il tempo di caricamento. Tieni presente che alcuni temi WordPress coinvolgono pi\u00f9 di un solo file CSS o JavaScript. Il tempo di caricamento pu\u00f2 essere notevolmente rallentato a causa di questi file. Questo \u00e8 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\u00ec la velocit\u00e0 del tuo sito.<\/p>\n

Identificazione di JavaScript e CSS che bloccano la visualizzazione<\/strong><\/h3>\n

\"Come<\/a><\/p>\n

Per eliminare JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold, dovrai identificare quali sono questi elementi. Uno dei modi pi\u00f9 semplici per identificarli \u00e8 aprire il tuo sito Web con uno strumento di velocit\u00e0 della pagina che ti dice quali problemi deve affrontare durante il caricamento. PageSpeed \u200b\u200bInsights di Google<\/a> \u00e8 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.<\/p>\n

Come eliminare JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold?<\/h3>\n

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:<\/p>\n

Cancella JavaScript dal percorso di rendering critico<\/h3>\n

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 \u00e8 richiesto JavaScript. Gli attributi sono:<\/p>\n