Aggiungere un chatbot al tuo sito WordPress senza plugin: il metodo leggero che non rallenta le pagine

Perché "senza plugin" fa la differenza su WordPress

Ogni plugin che installi su WordPress è una tassa che paghi a ogni caricamento di pagina. Alcuni se la meritano. La maggior parte dei plugin chatbot no.

Il motivo è strutturale. Un tipico plugin di chat registra un hook PHP su wp_enqueue_scripts, carica il proprio CSS e il proprio JavaScript, spesso porta con sé una copia di jQuery, attiva chiamate di analytics ancora prima che il visitatore abbia fatto qualunque cosa, e gira su ogni pagina del sito — homepage, articolo, contatti, checkout — che la finestra di chat venga aperta oppure no. Il peso sulla connessione si aggira tra i 200 e i 500 KB. Moltiplica per ogni visitatore e hai scambiato la velocità del sito con una funzionalità che la maggior parte delle persone non usa.

Questa guida mostra l'approccio opposto: un singolo tag <script> asincrono — sotto i 5 KB compressi — che si carica dopo che la pagina è interattiva, non tocca i Core Web Vitals e si comporta nello stesso modo su qualsiasi tema. Nessun plugin da aggiornare, nessuna sorpresa di compatibilità dopo il prossimo rilascio di WordPress, nessun impatto sul punteggio Lighthouse. Tre minuti per installare, quattro percorsi diversi tra cui scegliere e un trucco opzionale di caricamento condizionale che porta l'impatto vicino allo zero sulle pagine dove il bot non è strettamente necessario.

L'articolo presuppone che tu abbia un sito basato su WordPress (Gutenberg o classico) e che il bot in Simple Chat tu lo abbia già creato — se non l'hai fatto, la guida ai 5 minuti ti accompagna passo per passo.

Perché la maggior parte dei plugin chatbot rallenta il sito

Le schede prodotto sul repository di WordPress.org raramente dichiarano il peso reale del plugin, quindi vale la pena capire cosa succede sotto il cofano. In quasi ogni plugin di chat trovi quattro voci di costo:

• jQuery duplicato. Molti plugin di chat dipendono ancora da jQuery, anche se il tuo tema l'ha abbandonato da tempo. WordPress deduplica la copia core, ma le librerie aggiuntive (jQuery UI, jQuery Migrate, addon specifici del plugin) si caricano comunque — 30–90 KB in più a pagina.
• CSS di framework pesante. Fogli di stile da 50–150 KB, spesso un design system completo usato dal bot per disegnare un solo pulsante.
• Interfaccia caricata in anticipo. Avatar, font, sprite di emoji e set di icone SVG scaricati al primo paint, anche se il visitatore non ha ancora cliccato sul pulsante della chat.
• Analytics su ogni azione. Hover, scroll, tempo sulla pagina, ping di tipo beacon allo unload. Tante piccole richieste, tutte sul percorso critico nelle connessioni più deboli.

La conseguenza sui Core Web Vitals è la parte che fa più male alla SEO. Le metriche con cui Google valuta le pagine — Largest Contentful Paint, Interaction to Next Paint, Cumulative Layout Shift — sono esattamente quelle che un plugin di chat tende a peggiorare. Gli audit Lighthouse pubblici mostrano regolarmente plugin che aggiungono 100–300 ms al LCP in modalità mobile con throttling, e una penalizzazione analoga sul Total Blocking Time quando il JS della chat compete con il JS del tema durante l'hydration.

Il danno non è teorico. Il segnale Page Experience di Google entra nel ranking. Il bot diventa il motivo per cui un tuo articolo perde una posizione nei risultati di ricerca. Quasi nessuno collega causa ed effetto: si percepisce che "il sito va più piano", ma il plugin continua a fare il proprio mestiere visibile, quindi rimane installato.

Non è davvero colpa del vendor del chatbot: il plugin lo distribuisce così perché chi non è tecnico possa installarlo con un clic. Il problema è che dietro a quel "un clic" si nasconde tutto il peso elencato sopra.

L'alternativa leggera: lo script di embed

Uno script di embed è un singolo tag <script> che scarica un piccolo loader dal CDN del fornitore. In Simple Chat il loader pesa circa 3 KB compressi. Fa quattro cose:

1. Legge l'ID del bot da un attributo data- sul tag.
2. Disegna un pulsante della chat in un angolo della pagina, con il colore del tuo brand.
3. Aspetta che il visitatore clicchi prima di montare l'iframe completo della chat (l'iframe carica a richiesta circa 35–40 KB, mai al primo paint).
4. Sta in disparte fino a quando non succede qualcosa.

L'ultimo punto è la notizia importante. Le installazioni con plugin caricano il motore della chat, l'avatar, i font e il messaggio di benvenuto prima che il visitatore abbia segnalato qualunque interesse. Lo script di embed fa l'opposto: il pulsante è praticamente l'unica cosa che tocca la pagina finché non arriva il clic, e anche quel pulsante si carica con async defer, lasciando al browser tutto il tempo per finire di disegnare la tua immagine in hero.

La differenza in peso si somma. Un tipico plugin chat distribuisce 200–500 KB di CSS e JS al primo paint. Lo script di embed di Simple Chat è 3 KB. È una riduzione tra 40 e 100 volte sulla parte di pagina che Google misura più severamente.

Cosa importante: il metodo è indipendente dal tema. Funziona su Astra, GeneratePress, Kadence, Avada, Divi, il Twenty Twenty-Four di default, i temi a blocchi personalizzati e i temi figli artigianali allo stesso modo. Il pulsante della chat è posizionato in un angolo fisso, sopra il contenuto con il pattern standard di z-index, e non interferisce mai con il layout del tema.

Metodo 1 — Inserirlo nel functions.php del child theme

È il percorso più adatto a chi sviluppa. Modifichi un file PHP, ma la variazione consiste in una funzione sola e una chiamata add_action. Usa un child theme — mai il parent theme — così l'aggiornamento del tema non sovrascrive la modifica.

<?php
/**
 * Inietta lo snippet di embed di Simple Chat poco prima del </body>.
 *
 * Sostituisci YOUR_BOT_ID con l'UUID dalla scheda Install della
 * dashboard di Simple Chat. La priorità 99 tiene il tag in fondo al
 * footer, dopo quasi tutto l'output di temi e plugin.
 */
add_action( 'wp_footer', function () {
    if ( is_admin() ) {
        return; // Non caricare il widget in /wp-admin/.
    }
    ?>
    <script
        src="https://getsimplechat.com/widget/embed.js"
        data-bot-id="YOUR_BOT_ID"
        async defer></script>
    <?php
}, 99 );

Dove incollare: apri wp-content/themes/tuo-child-theme/functions.php dal file manager dell'hosting, via SFTP, oppure da Aspetto → Editor dei file del tema. Aggiungi il blocco in fondo al file. Salva.

Perché wp_footer e non wp_head: la posizione in footer significa che il tag <script> viene letto dopo il body HTML, quando il browser ha già cominciato a disegnare il contenuto visibile. async dice al browser di scaricare lo script in parallelo; defer dice di eseguirlo dopo che il parsing è finito. Insieme, l'embed ha costo di rendering effettivo praticamente nullo.

Dove trovare l'ID del bot: nella dashboard di Simple Chat apri il bot e vai sulla scheda Install. Lo snippet completo è già lì, pronto da copiare — l'attributo data-bot-id contiene l'UUID di quel bot.

Metodo 2 — Dal campo "Header / Footer scripts" del tema (senza codice)

Non sei costretto a toccare il PHP. Quasi tutti i temi WordPress moderni offrono un campo "codice personalizzato" o "footer scripts" pensato proprio per questo tipo di una-tantum.

La posizione esatta cambia da tema a tema, ma il pattern è lo stesso: trovi un pannello di impostazioni che si chiama "Header / Footer Scripts", "Custom Code", "Code Injection" o simile, scegli la posizione footer e incolli lo snippet.

• Astra: Aspetto → Personalizza → Layout → Custom Code → Footer.
• GeneratePress (Premium): Aspetto → Elements → Aggiungi nuovo → Hook → scegli wp_footer.
• Kadence: Personalizza → General → Header / Footer Scripts → Footer Scripts.
• Avada: Avada → Options → Advanced → Code Fields → Space Before </body>.
• Divi: Divi → Theme Options → Integration → Aggiungi codice al <body> (bottom).
• Twenty Twenty-Four e altri temi a blocchi: Aspetto → Editor → Pattern → parte template Footer → aggiungi un blocco HTML personalizzato in fondo.

Conta come "senza plugin" perché non stai installando nulla — stai usando una funzionalità nativa del tema. Lo script finisce nello stesso posto in cui sarebbe finito via wp_footer; il tema ti sta solo offrendo l'interfaccia per inserirlo.

Incolla lo snippet esattamente come compare nella dashboard di Simple Chat, salva, poi ricarica il sito in una finestra in incognito per verificare che il pulsante della chat appaia. Se non compare, controlla che il campo accetti HTML grezzo (alcuni temi codificano l'input — passa a "HTML raw" se è disponibile).

Metodo 3 — Tramite un blocco HTML personalizzato nell'editor

Se ti serve il chatbot solo su alcune pagine specifiche — una pagina contatti, una pagina prezzi, una singola landing di un prodotto — l'editor a blocchi è la soluzione diretta.

In Gutenberg apri la pagina dove vuoi il bot, aggiungi un blocco nuovo, digita HTML e scegli HTML personalizzato. Incolla lo snippet di embed nel blocco. Aggiorna la pagina.

<!-- Da incollare dentro un blocco HTML personalizzato in Gutenberg -->
<script
    src="https://getsimplechat.com/widget/embed.js"
    data-bot-id="YOUR_BOT_ID"
    async defer></script>

Il metodo è limitato alla pagina: lo script gira solo quando quella singola pagina viene aperta. Va bene quando vuoi un bot dedicato per una landing, oppure quando vuoi testare il widget su una sola pagina prima di estenderlo a tutto il sito.

Il limite è il rovescio del vantaggio: dovrai aggiungere il blocco a ogni pagina che vuoi coprire. Per un'installazione site-wide i Metodi 1, 2 o 4 sono migliori. Usa il Metodo 3 quando lo scopo è davvero a livello di pagina — ad esempio un bot "orari festivi" che vive solo sulla pagina contatti durante dicembre.

Metodo 4 — Tramite Google Tag Manager

Se usi già Google Tag Manager per analytics o tag marketing, aggiungere il chatbot da GTM è l'opzione più pulita. Niente modifiche al tema, niente blocchi pagina per pagina, e in più hai gratis le condizioni di trigger di GTM.

Nel tuo workspace GTM:

1. Clicca Tag → Nuovo → HTML personalizzato.
2. Incolla lo snippet di embed esattamente come compare nella dashboard di Simple Chat.
3. Imposta l'attivatore. Per uso site-wide scegli All Pages. Per uso mirato scegli Some Pages e aggiungi una condizione (Page Path contiene /contatti, oppure Page Hostname uguale a shop.esempio.com, e così via).
4. Salva, poi Submit per pubblicare il workspace.

Vantaggi rispetto agli altri metodi:

• Nessun file del tema viene toccato. Lo sviluppatore rimane concentrato sul tema; il marketing gestisce l'installazione della chat da GTM.
• Flessibilità sui trigger. Mostri il bot solo su certi percorsi, solo dopo un timer di 15 secondi, solo per i visitatori che tornano una seconda volta — qualunque condizione GTM esponga come trigger.
• A/B test. Metti in pausa il tag, fallo partire sul 50% del traffico, confronta le conversioni prima/dopo — tutto dentro l'interfaccia di GTM.

Un avvertimento: cookie consent. Se sul sito hai un consent manager (Cookiebot, Iubenda, Complianz, la famiglia dei plugin GDPR per WordPress), il widget di chat deve rispettare la scelta di consenso del visitatore. Il cookie di sessione di Simple Chat è funzionale e non di tracciamento, ma se la tua giurisdizione o la tua policy lo classificano come non strettamente necessario, vincola il tag GTM al gruppo di consenso statistico o funzionale anziché farlo partire incondizionatamente.

Caricamento condizionale (avanzato)

Anche uno script di embed leggero come 3 KB ha un costo diverso da zero. Se stai inseguendo l'ultimo millisecondo — su una homepage che fa già 95+ in Lighthouse, oppure su un flusso di checkout dove non vuoi nessun JS di terze parti — puoi rimandare lo stesso embed dietro a un segnale di interazione dell'utente.

Il pattern funziona così: aggiungi un piccolo script inline che inietta il tag di embed solo quando si verifica un segnale reale. Tre trigger utili:

<!-- Da incollare nel <footer> o in un blocco HTML personalizzato -->
<script>
(function () {
    var loaded = false;
    function loadSimpleChat() {
        if (loaded) return;
        loaded = true;
        var s = document.createElement('script');
        s.src = 'https://getsimplechat.com/widget/embed.js';
        s.async = true;
        s.defer = true;
        s.setAttribute('data-bot-id', 'YOUR_BOT_ID');
        document.body.appendChild(s);
    }

    // Trigger 1 — carica al primo scroll (quasi tutti i visitatori scrollano subito).
    window.addEventListener('scroll', loadSimpleChat, { once: true, passive: true });

    // Trigger 2 — carica dopo 8 secondi sulla pagina.
    setTimeout(loadSimpleChat, 8000);

    // Trigger 3 — carica al primo click o pressione di un tasto.
    window.addEventListener('click',   loadSimpleChat, { once: true });
    window.addEventListener('keydown', loadSimpleChat, { once: true });
})();
</script>

Vince il trigger che si attiva per primo; i successivi sono innocui perché la guardia loaded li blocca. Il risultato è un pulsante della chat che compare entro un secondo dalla prima interazione reale — abbastanza rapidamente perché il visitatore non percepisca alcun ritardo — mantenendo il caricamento iniziale completamente libero da JS di chat.

Per le pagine che mirano al traffico da assistenti AI, ai crawler dei motori di ricerca o ai pre-render delle preview di condivisione, è la configurazione più pulita: il bot c'è per gli umani che interagiscono, è invisibile ai bot che non interagiscono.

Quando non usare questo trucco. Sulle pagine ad alto intento dove il visitatore ha bisogno del bot subito — pagine prezzi, pagine di supporto, una landing "Parla con noi" — gli 8 secondi sono troppi. Lì usa l'installazione standard (Metodi 1–4). Il caricamento condizionale dà il meglio sulle pagine di sola lettura (articoli del blog, documentazione, pagine marketing) dove il bot è un piacere in più, non l'azione principale.

Test e verifica

Hai aggiunto lo snippet. Vedi comparire il pulsante della chat quando ricarichi il sito in una finestra in incognito. Bene — l'installazione è andata a buon fine. La domanda successiva è: è davvero rimasto leggero?

Tre controlli da fare prima di cantare vittoria.

1. Lighthouse, prima e dopo. Lancia un audit Lighthouse da Chrome DevTools sulla stessa pagina, modalità mobile, throttling simulato, finestra in incognito. Confronta punteggio Performance, LCP, TBT e CLS con un baseline preso prima dell'installazione. Un embed installato correttamente sposta l'LCP di meno di 50 ms e il TBT di meno di 20 ms.

2. Il tab Network. Apri DevTools → Network, ricarica la pagina, ordina per Size. Cerca embed.js: la dimensione trasferita dovrebbe essere intorno ai 3 KB. L'iframe della chat non deve comparire nella lista finché non clicchi davvero sul pulsante. Se l'iframe parte al primo paint, qualcosa sta sovrascrivendo il montaggio lazy; controlla di aver incollato lo snippet esattamente come fornito.

3. La waterfall di WebPageTest. Per uno sguardo più approfondito, passa la pagina da webpagetest.org. La waterfall conferma che embed.js si carica dopo il parsing del documento e che nessuna risorsa della chat blocca l'elemento LCP della pagina.

Due modalità di fallimento da tenere d'occhio: un plugin di chat ancora installato accanto all'embed (disinstallalo — far girare entrambi è il peggio dei due mondi), e un plugin di caching che minifica o combina lo snippet di embed in un file rotto (vedi le ottimizzazioni WP qui sotto).

Ottimizzazioni specifiche per WordPress

Quasi sempre c'è un layer di caching davanti al sito: WP Rocket, LiteSpeed Cache, W3 Total Cache, FlyingPress, oppure quello integrato dall'hosting (Kinsta, WP Engine, SiteGround). Lo snippet va d'accordo con tutti, ma due impostazioni meritano attenzione.

Non combinare né minificare lo snippet di embed. Alcuni plugin di caching concatenano gli script inline per ridurre le richieste HTTP. Questo rompe l'ordine async defer e può spostare la chiamata embed prima di wp_footer. In WP Rocket, escludi embed.js da "Combine JavaScript files"; in LiteSpeed, aggiungilo alla lista di esclusione JS. Lo snippet è già 3 KB, combinarlo non risparmia niente e rompe l'ordine.

Aggiungilo correttamente alla allowlist di "Delay JS". Se usi il Delay JS di WP Rocket o una funzionalità simile, lo snippet è già differito — aggiungerlo una seconda volta può causare doppio caricamento. Lascialo com'è in quei cache.

Siti multilingua (WPML, Polylang, TranslatePress). Un solo bot può servire ogni lingua del sito. Simple Chat rileva la lingua del visitatore dal browser e risponde nella sua lingua sui tier Advanced e Ultra — nessuna configurazione aggiuntiva, nessun bot per lingua. Installi lo snippet una volta, nel footer condiviso.

Considerazioni sulla CDN. Lo script di embed è già servito da una CDN; la tua CDN non deve fare da proxy. Non provare a self-hostare embed.js sul tuo dominio — gli aggiornamenti automatici non ti raggiungono e resti bloccato su una versione vecchia.

Plugin vs script di embed: confronto

Lo script di embed vince su ogni asse tranne uno: il plugin ti dà un pannello di impostazioni dentro wp-admin invece di una dashboard separata. Se quel pannello dentro WP è un requisito non negoziabile del tuo flusso di lavoro, installa un plugin chat; in tutti gli altri casi lo script è più leggero, più veloce e più facile da togliere.

Riepilogo e prossimo passo

Quattro percorsi di installazione senza plugin, tutti sotto i 5 KB, tutti più rapidi di qualunque plugin di chat trovi nel repository di WordPress.

• Metodo 1 — functions.php per chi sa lavorare in PHP.
• Metodo 2 — campo footer scripts del tema per chi non sviluppa e usa un tema moderno.
• Metodo 3 — blocco HTML personalizzato per installazioni limitate a singole pagine.
• Metodo 4 — Google Tag Manager per deploy gestiti dal marketing e flessibilità sui trigger.

Una volta installato, verifica con Lighthouse, controlla nel tab Network la voce embed.js da 3 KB, escludila dalle regole di combine del plugin di caching ed è fatta. Il chatbot risponde ai visitatori 24/7 senza tirare giù i tuoi Core Web Vitals.

Provare Simple Chat è gratis — 50 crediti all'iscrizione, senza carta. Abbastanza per attivare il bot, provarlo su un sito di staging, far girare conversazioni reali per la prima settimana e capire se l'embed senza plugin tiene davvero il punteggio Lighthouse dove vuoi. Vedi i prezzi quando sei pronto a scalare.