Caricamento asincrono di plugin per WordPress: La guida definitiva per migliorare la velocità e le prestazioni del sito web

Cos’è il caricamento asincrono e qual è la sua importanza?

Nello sviluppo di siti web moderni, la velocità di caricamento delle pagine rappresenta un indicatore chiave per valutare l’esperienza utente e il posizionamento nei motori di ricerca (SEO). Il metodo tradizionale di caricamento dei script è noto come “blocco della rendering” (render-blocking): il browser deve sospendere l’analisi del codice HTML fino a quando il file script non è stato completamente scaricato ed eseguito, prima di poter continuare a visualizzare il contenuto della pagina. Quando il vostro sito WordPress integra diversi plugin, ciascuno di essi può introdurre i propri file JavaScript (JS) e CSS, che vengono caricati simultaneamente nella parte iniziale o nel corpo della pagina, rallentando notevolmente i tempi di visualizzazione del contenuto (in particolare i tempi di “First Content Paint” – FCP e “Last Content Paint” – LCP).

Il caricamento asincrono (Asynchronous Loading) è una tecnica di caricamento di script non bloccante. Quando il browser incontra un elemento del sito web che richiede il caricamento di contenuti (ad esempio, un file JavaScript o un’immagine), non interrompe l’esecuzione delle altre operazioni in corso. In questo modo, il sito web continua a funzionare correttamente anche se il caricamento dei contenuti richiesti richiede più tempo.async或deferQuando si utilizza un tag di script per un attributo, il documento HTML viene continuato a essere analizzato, mentre il file dello script viene scaricato in parallelo. La differenza principale tra i due approcci risiede nel momento in cui lo script viene eseguito.
* asyncNon appena lo script viene scaricato, viene eseguito immediatamente, il che potrebbe interrompere l’analisi del codice HTML.
* deferLo script attende che l’intero documento HTML sia stato analizzato (il DOM sia pronto) per poi eseguire le istruzioni nell’ordine in cui compaiono nel documento.

Per quanto riguarda il CSS, è possibile anche ridurre la priorità di caricamento dei file di stile non essenziali (ad esempio, quelli utilizzati per i contenuti presenti al di sotto della prima pagina) utilizzando tecniche come il “caricamento asincrono” o la rimozione dei file che bloccano il processo di rendering.

Si consiglia di leggere Guida definitiva all’ottimizzazione della velocità dei siti WordPress: dalle configurazioni di base alle strategie di caching avanzate。

Adottando una strategia di caricamento asincrono, è possibile rimuovere le risorse dei plug-in non fondamentali (come i pulsanti di condivisione sui social media, i moduli di commento, i codici di analisi statistica, ecc.) dal percorso di rendering critico. Ciò si traduce direttamente in due vantaggi principali: migliorare le prestazioni del sito web, consentendo agli utenti di visualizzare e interagire con i contenuti della pagina più rapidamente; ottimizzare le prestazioni SEO, poiché la velocità della pagina è uno dei fattori di ranking principali di motori di ricerca come Google.

UltaHost – Hosting per siti WordPress

Garanzia di rimborso entro 30 giorni, larghezza di banda illimitata e accesso ai database, protezione gratuita contro gli attacchi DDoS; sconto del 50% per l’acquisto di un piano valido per 3 anni (da 3 a 4 TB di spazio di archiviazione).

pagina di accesso

Come riconoscere i risorse dei plugin che devono essere caricati in modo asincrono?

Prima di iniziare l’ottimizzazione, è necessario identificare con precisione quali risorse dei plugin causano blocchi nella fase di rendering, e determinare quali di queste siano adatte ad essere caricate in modo asincrono o differito.

Utilizzare strumenti di analisi del performance.

Innanzitutto, utilizzare strumenti professionali per il test delle prestazioni per generare un rapporto. Google PageSpeed Insights, GTmetrix e WebPageTest sono ottime opzioni. Questi strumenti elencano chiaramente le risorse che causano problemi nella visualizzazione del sito (in particolare quelle che bloccano il processo di rendering) e forniscono informazioni dettagliate sull’URL, sulla dimensione di ciascun file JS o CSS, nonché una stima del tempo risparmiato. Di solito, tali informazioni provengono dal catalogo dei plugin (ad esempio…)./wp-content/plugins/I risorse di dimensioni maggiori e non essenziali per la visualizzazione della pagina iniziale rappresentano l’obiettivo principale dell’ottimizzazione.

Valutare l’importanza di una risorsa

Non tutti i risorse sono adatte al trattamento asincrono. È necessario valutare in base alle funzionalità di ciascuna risorsa se sia opportuno utilizzare il metodo asincrono o meno.
Risorse chiave: risorse che influenzano direttamente l'aspetto e la funzionalità della prima schermata. Ad esempio, il JavaScript utilizzato per l'interazione del menu di navigazione e i fogli di stile del contenuto della prima schermata. Questi dovrebbero generalmente essere caricati in modo sincrono o essere incorporati direttamente nella pagina.
Risorse non critiche: funzionalità che si trovano in fondo alla pagina o che sono necessarie solo dopo l'interazione dell'utente. Esempi tipici includono:
Plugin per la condivisione sui social media (come AddToAny, ShareThis)
JS della sezione dei commenti (come Disqus, che migliora i commenti per impostazione predefinita).
Codice di analisi statistica del sito web (come Google Analytics), nonostante il fatto che Google abbia ufficialmente raccomandato script asincroni.
Moduli di contatto nei plugin che non sono visualizzati nella prima schermata.
Le diapositive non presenti nella prima schermata del plugin Carousel.

Una semplice regola empirica è: se la funzionalità di un plugin non deve essere completamente pronta già nel primo secondo in cui l’utente apre la pagina, allora i suoi file di risorse rappresentano una candidatura ideale per essere caricati in modo asincrono.

Si consiglia di leggere Analisi approfondita della tecnologia CDN: dall’approccio iniziale alla padronanza, per costruire un doppio scudo di protezione per le prestazioni e la sicurezza dei siti web。

Metodi pratici per implementare il caricamento asincrono

Esistono diversi metodi per convertire i file relativi ai plugin di WordPress in modo che vengano caricati in modo asincrono. Puoi scegliere il metodo più adatto in base alle tue competenze tecniche.

Utilizzare plugin di ottimizzazione (soluzioni senza codice).

Per la maggior parte degli utenti, l’utilizzo di plugin di ottimizzazione dedicati rappresenta il metodo più sicuro e conveniente. Questi plugin offrono un’interfaccia grafica che permette di gestire facilmente il modo in cui vengono caricati i risorse.

Plugin consigliati: WP Rocket e Async JavaScript.

hosting.com Hosting condiviso

Prestazioni elevate con CPU AMD EPYC, storage SSD NVMe e LiteSpeed, supporto interno di esperti 24 ore su 24, 7 giorni su 7, misure di sicurezza avanzate, tra cui SSL, brute force, malware e protezione DDoS, risparmi fino a 73%

pagina di accesso

WP Rocket è un potente plugin di cache che offre, nella scheda “Ottimizzazione dei file”, l’opzione per il caricamento differito dei file JavaScript, nonché la possibilità di escludere determinati script. Il plugin Async JavaScript, invece, si concentra esclusivamente su questo aspetto: consente di configurare il caricamento differito di quasi tutti i file JavaScript presenti sul sito.async或deferVengono forniti gli attributi necessari, insieme a un elenco dettagliato degli elementi da escludere.

I passaggi generali per utilizzare questo tipo di plugin sono i seguenti: dopo aver installato e attivato il plugin, trova nelle impostazioni le opzioni relative all’ottimizzazione del codice JS/CSS, abilita funzionalità come il “caricamento differito dei file JavaScript” o simili. Successivamente, in base ai report precedenti forniti dal tool, aggiungi i file di codice chiave (ad esempio la libreria principale di jQuery o i file strettamente correlati all’evento “DOMContentLoaded”) all’elenco degli elementi da escludere, per evitare problemi di funzionamento del sito.

Modifica manuale del file del tema (soluzione basata sul codice)

Se desiderate un controllo più dettagliato, è possibile modificare le impostazioni del tema.functions.phpPer implementarlo, è necessario utilizzare un file specifico. WordPress fornisce gli strumenti necessari per farlo. script_loader_tag 和 style_loader_tag Vengono utilizzati filtri per modificare l’output HTML generato dai script e dai fogli di stile.

Si consiglia di leggere Guida completa all’ottimizzazione della velocità dei siti WordPress: le strategie essenziali per migliorare i Core Web Vitals。

Ecco un esempio di codice che aggiunge funzionalità al script target.defer“Attribute.” È necessario modificare il codice in modo da includere questo elemento.plugin-script-handleSostituisci con l’handle del script effettivamente da elaborare.

function add_async_defer_attribute($tag, $handle) {
    // 将要延迟加载的脚本句柄添加到这个数组
    $scripts_to_defer = array('plugin-script-handle', 'another-plugin-script');

foreach($scripts_to_defer as $defer_script) {
        if ($defer_script === $handle) {
            // 使用 defer， 如需 async 则替换为 async='async'
            return str_replace(' src', ' defer="defer" src', $tag);
        }
    }
    return $tag;
}
add_filter('script_loader_tag', 'add_async_defer_attribute', 10, 2);

Per trovare i handle delle istruzioni scritte nel codice del plugin, è possibile esaminare il codice HTML generato dal plugin stesso, oppure analizzare il codice sorgente del plugin.wp_enqueue_script()Il primo parametro della chiamata a funzione.

Hosting condiviso InterServer

Hosting condiviso $2,50 USD al mese, primo mese $0,1 USD codice promozionale tryinterserver, 461 script di applicazioni cloud, installazione con un clic.

pagina di accesso

Gestire il caricamento asincrono dei file CSS

Per CSS, è possibile utilizzare la tecnica del “preloading” (caricamento anticipato) in combinazione con altre strategie per migliorare le prestazioni del sito web.onloadL’evento lo converte in un “risorsa non bloccante” (non-blocking resource). Ecco un esempio di codice che carica in modo asincrono un determinato foglio di stile (stylesheet):

function async_load_stylesheets() {
    ?>
    <link rel="preload" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css"></noscript>
    <?php
}
// 根据需求，将其挂载到 wp_head 或其它钩子上
add_action('wp_head', 'async_load_stylesheets', 1);

Questo metodo funziona attraverso…rel=”preload”Insegnare al browser di ottenere i risorse il prima possibile, ma senza applicarle immediatamente. Una volta che i risorsi sono stati caricati completamente, applicarle tramite JavaScript.relModifica l’attributo in…stylesheetE quindi applicare lo stile.Per gli utenti a cui è stato disabilitato il JavaScript, è stata fornita una soluzione di backup.

Test e risoluzione dei problemi dopo il caricamento asincrono

Dopo l’attuazione del caricamento asincrono, è fondamentale eseguire test approfonditi per verificare che il sito, pur avendo aumentato la velocità di caricamento, mantenga intatte tutte le sue funzionalità.

Test di funzionalità e compatibilità

È necessario eseguire test manuali su diverse pagine del sito (pagina principale, pagine degli articoli, pagine singole, ecc.), concentrandosi in particolare sulle funzionalità dei plugin che vengono caricati in modo asincrono. Ad esempio:
Verificare se il pulsante dei social media con caricamento asincrono è in grado di aprire correttamente la finestra di condivisione.
Verificare se la sezione dei commenti con caricamento differito venga visualizzata correttamente quando la pagina viene scorretta fino alla posizione corrispondente.
Verificare che tutti gli elementi interattivi (come l'invio di moduli, il clic su pulsanti e i menu a discesa) funzionino correttamente.

Occorre prestare particolare attenzione a quelle situazioni che dipendono da…DOMContentLoadedScript che fanno affidamento sul fatto che jQuery sia già pronto all’avvio del sito (ossia caricato nella parte iniziale del codice HTML). Se il loro caricamento viene ritardato, potrebbero verificarsi errori a causa dell’impossibilità di individuare gli elementi del DOM. Ecco perché è così importante configurare una “lista di esclusioni” quando si ottimizzano i plugin: potrebbe essere necessario escludere alcuni file o parti del codice che richiedono l’utilizzo di jQuery.jquery-coreI componenti principali (core components) e i loro elementi dipendenti diretti vengono esclusi dal processo di caricamento asincrono.

Confronto delle prestazioni prima e dopo

Riprovate a testare il vostro sito utilizzando gli strumenti di analisi delle prestazioni menzionati in precedenza (PageSpeed Insights, GTmetrix). Confrontate i rapporti prima e dopo le ottimizzazioni, prestando attenzione ai seguenti indicatori chiave:
Prima fase di creazione dei contenuti (FCP): è stata completata in modo significativamente anticipato?
Rendering del contenuto principale (LCP): gli elementi principali del contenuto vengono visualizzati più rapidamente?
Indice di velocità: la velocità di visualizzazione del contenuto della pagina è stata accelerata?
Tempo di blocco totale (TBT): il tempo durante il quale il thread principale è stato bloccato è diminuito?
Suggerimento “Rimuovere le risorse che bloccano il rendering”: i problemi elencati nel rapporto sono diminuiti o scomparsi?

Un’ottimizzazione efficace dovrebbe portare a un notevole miglioramento di questi indicatori, nonché a una riduzione dei segnali di avvertimento relativi ai blocchi nella fase di rendering, presenti nella sezione “Opportunità” o “Diagnosi”.

Se si riscontra che alcune funzionalità non funzionano correttamente, tornate alle impostazioni del plugin di ottimizzazione o al vostro codice e rimuovete l’handler dello script responsabile del problema dall’elenco dei contenuti da caricare in modo asincrono o differito. La risoluzione dei problemi è un processo iterativo: potrebbero essere necessari più tentativi per trovare il giusto equilibrio tra le funzionalità e le prestazioni del sistema.

Riassumendo

Il caricamento asincrono dei risorse dei plugin di WordPress rappresenta una tecnica di ottimizzazione delle prestazioni del front end efficace e consolidata. Questa tecnica permette di spostare i file JavaScript e CSS non essenziali fuori dal percorso di rendering principale, consentendo al browser di elaborare e visualizzare prima i contenuti fondamentali della pagina, migliorando notevolmente la velocità di caricamento del sito e l’esperienza utente. L’implementazione di questa strategia è semplice: è possibile avvalersi di plugin come WP Rocket per un approccio rapido, oppure personalizzarla completamente scrivendo codice. L’importante è identificare con precisione i risorsi non essenziali, procedere con attenzione durante l’applicazione della soluzione e, infine, eseguire test approfonditi per verificare l’efficacia delle modifiche sia dal punto di vista funzionale che delle prestazioni. Integrare questa strategia nel processo di manutenzione di WordPress rappresenta un mezzo efficace per affrontare le sfide legate alle prestazioni delle reti moderne e migliorare la posizione nei motori di ricerca (SEO).

FAQ - Domande frequenti

Qual dovrebbe essere scelto tra il caricamento asincrono (async) e il caricamento differito (defer)?

Per quanto riguarda i script dei plugin, di solito si consiglia di utilizzare…deferPerchédeferÈ essenziale garantire che gli script vengano eseguiti nell’ordine in cui compaiono nell’HTML, soprattutto per quelli che hanno relazioni di dipendenza tra loro (ad esempio, uno script di un plugin che dipende da jQuery). Questo permette di evitare errori causati da un ordine di esecuzione errato.asyncPiù adatto a frammenti di codice completamente indipendenti, che non dipendono da alcun altro script e non ne dipendono a loro volta; ad esempio, alcuni moduli di analisi statistica autonomi.

Il caricamento asincrono dei risorse dei plugin può causare il malfunzionamento delle funzionalità del sito?

È possibile. Tuttavia, se l’esecuzione dello script del plugin dipende in modo significativo dallo stato disponibile del DOM in un determinato momento (ad esempio, durante l’interazione con l’utente o durante l’esecuzione di alcune operazioni), potrebbero verificarsi problemi di funzionamento.DOMContentLoadedQuando un evento viene attivato, le operazioni sul DOM vengono eseguite immediatamente; tuttavia, se quel codice dipende da altri script sincroni, il caricamento asincrono potrebbe causarne l’esecuzione in modo prematuro o troppo tardivo, generando errori. È per questo che è essenziale effettuare test approfonditi dopo l’ottimizzazione e prepararsi a inserire i script problematici in una lista di esclusione.

Tutti i plugin sono adatti al caricamento asincrono?

No. I componenti aggiuntivi che influenzano direttamente la rendering della pagina iniziale e le interazioni principali con l’utente non dovrebbero essere caricati in modo asincrono. Ad esempio, una libreria di animazioni utilizzata per creare gli effetti visivi della pagina iniziale, uno script responsivo per i menu di navigazione, o un file CSS fondamentale per ottimizzare l’visualizzazione dei caratteri sul sito web dovrebbero essere caricati in modo sincrono o essere incorporati direttamente nel codice sorgente, al fine di garantire coerenza e immediatezza nell’esperienza d’uso dell’utente. L’ottimizzazione dei tempi di caricamento deve sempre avvenire senza compromettere le funzionalità essenziali del sito.

Oltre al caricamento asincrono, quali altri metodi possono essere utilizzati per ottimizzare le prestazioni dei plugin?

Il caricamento asincrono è un aspetto importante, ma è possibile adottare anche altre strategie combinate: 1. Unire e minimizzare i file: utilizzare i plug-in per unire più piccoli file JS/CSS e rimuovere gli spazi e i commenti. 2. Caricamento su richiesta: per i plug-in complessi (come i page builder), assicurarsi che le loro risorse vengano caricate solo nelle pagine necessarie. 3. Scegliere plug-in leggeri: quando si selezionano nuovi plug-in, dare la priorità alle alternative con una buona reputazione in termini di prestazioni e con un codice semplice. 4. Utilizzare la cache: assicurarsi che tutte le risorse statiche abbiano un tempo di scadenza della cache più lungo e che vengano distribuite tramite CDN. Questi metodi, combinati con il caricamento asincrono, possono generare il miglior miglioramento delle prestazioni complessive.