Il tuo widget di chat è attivo e funziona. Poi apri il negozio su un telefono, scorri fino a un prodotto e il launcher si trova sulla barra "Aggiungi al carrello". Tocchi "Acquista" e si apre la finestra di chat.
Il consiglio abituale è di rimpicciolire il widget, impostarlo come chiuso per impostazione predefinita e posticipare lo script. Tutto questo riguarda il peso, e il peso vale la pena di essere controllato, quindi l'ho testato. Stesso sito, widget attivo e disattivo, e i punteggi di velocità sono rimasti gli stessi entrambe le volte.
Some widgets are genuinely heavy and worth optimizing. But a widget sitting on your Add to Cart button costs you the sale outright, and that one isn’t a weight problem.
È un problema di posizione, e la striscia inferiore dello schermo di un telefono è dove la tua barra del carrello, il tuo banner dei cookie e il tuo launcher finiscono per competere.
Di seguito ho esaminato i risultati dei test, come misurare la barra del carrello del tuo tema e a cosa impostare il widget in modo che la eviti.
In questo articolo:
- Il tuo widget di chat non è troppo pesante, è nel posto sbagliato
- Alcuni widget sono veramente pesanti e vale la pena ottimizzarli. Ma un widget che si trova sul tuo pulsante "Aggiungi al carrello" ti costa la vendita, e quello non è un problema di peso.
- Come scoprire quanto è alta la tua barra del carrello sticky
- Il ciclo di indovinelli sui pixel e le impostazioni che lo interrompono
- Domande comuni sui widget di chat su dispositivi mobili
- Ottimizzazione mobile del widget di chat: a cosa si riduce
Il tuo widget di chat non è troppo pesante, è nel posto sbagliato
Su un telefono, il fondo dello schermo è uno spazio conteso. La tua barra "Aggiungi al carrello" sticky si trova lì. Anche il tuo banner dei cookie. E anche il tuo launcher di chat, di solito nell'angolo in basso a destra per impostazione predefinita.
Quando il launcher si sovrappone al pulsante "Acquista", l'acquirente tocca la chat invece di acquistare. Questo ti costa la vendita in un modo che pochi kilobyte in più non faranno mai.
Ho eseguito un audit Lighthouse sullo stesso sito con il widget attivo e disattivo. La versione breve: il widget ha aggiunto circa 148 KiB di asset e non ha spostato alcun Core Web Vital.
Quindi la soluzione non è un progetto di ottimizzazione delle dimensioni dei file. Sono tre passaggi, in quest'ordine:
- Scegli l'angolo che non è conteso. Se la tua barra del carrello o il banner affollano un lato, sposta il launcher sull'altro.
- Misura l'altezza della tua barra sticky. Hai bisogno del numero reale del tuo tema, non di uno ipotizzato.
- Imposta un offset in pixel dal basso. Questo solleva il launcher sopra la barra invece di nasconderlo.
Affrontali in quest'ordine e la collisione scompare prima ancora di aprire un report sulle prestazioni.
Alcuni widget sono veramente pesanti e vale la pena ottimizzarli. Ma un widget che si trova sul tuo pulsante "Aggiungi al carrello" ti costa la vendita, e quello non è un problema di peso.
Ho impostato quattro pagine identiche sullo stesso sito WordPress. Due eseguivano WPChat, due non avevano alcun widget di chat.
Poi ho testato ciascuna in PageSpeed Insights su un Android di fascia media simulato con una connessione lenta, due volte per pagina, e ho mediato i risultati.
Ecco cosa è emerso.
| Metrica | Senza widget | Con widget |
|---|---|---|
| Prestazioni | 96.5 | 96.5 |
| First Contentful Paint | 2,0s | 2,0s |
| Largest Contentful Paint | 2,30s | 2,35s |
| Total Blocking Time | 0ms | 0ms |
| Cumulative Layout Shift | 0 | 0 |
| Speed Index | 2,05s | 2,20s |
- Largest Contentful Paint, il momento in cui la cosa più grande sullo schermo finisce di caricarsi, spostato di 0,05 secondi.
- Speed Index, all'incirca la velocità con cui la pagina si riempie visivamente, spostato di 0,15 secondi.
Entrambi rientrano nella normale varianza da un'esecuzione all'altra su configurazioni identiche, quindi nessuno dei due rappresenta una differenza reale.
Total Blocking Time e Cumulative Layout Shift sono rimasti a zero. Ciò significa che il widget non ha bloccato nulla sul thread principale e non ha spostato nulla sulla pagina durante il caricamento.
Il costo si riflette invece nei diagnostici. La pagina è passata da 33 KiB di file memorizzabili nella cache a 181 KiB, che sono circa 148 KiB di asset del widget, ovvero circa le dimensioni di una foto di medie dimensioni.
Quindi la versione semplice è questa: il widget è costato circa 148 KiB e non ha mosso alcun Core Web Vital, il che significa che nessuno dei tre punteggi di caricamento e stabilità che Google utilizza effettivamente per il ranking.
Finché utilizzi un plugin ben codificato come WPChat per il tuo widget di chat, la velocità del sito non sarà un problema per i tuoi visitatori mobili.
Come scoprire quanto è alta la tua barra del carrello sticky
Ogni tema costruisce la sua barra mobile "Aggiungi al carrello" in modo diverso, quindi non c'è un numero che posso darti. Devi leggere il tuo. Ci vogliono circa due minuti nel tuo browser desktop.
Ecco come ottenerlo.
- Apri una delle tue pagine prodotto in Chrome sul tuo computer. Scegli un prodotto che vendi effettivamente, non uno di esempio, perché il contenuto della barra cambia il suo aspetto.
- Apri DevTools. Fai clic destro ovunque sulla pagina e scegli "Ispeziona". Un pannello si apre sul lato o in basso dello schermo.
- Passa alla visualizzazione telefono. Fai clic sulla piccola icona del telefono e del tablet in alto a sinistra nel pannello DevTools, etichettata "Attiva barra degli strumenti del dispositivo". La pagina si ridisegna alla larghezza del telefono.
- Impostala su una larghezza da telefono, 390 è una comune. In cima alla pagina vedrai una casella di dimensioni con un menu a discesa accanto, solitamente con scritto "Responsive". Digita 390 nel campo della larghezza. La tua barra si impila e si ridimensiona diversamente alle larghezze da telefono rispetto a uno schermo desktop.
- Scorri verso il basso finché non appare la barra mobile. Sulla maggior parte dei temi, scorre una volta superato il pulsante principale "Aggiungi al carrello".
- Fai clic destro sulla barra stessa e scegli di nuovo "Ispeziona". Chrome salta a quell'elemento nel pannello "Elementi" e lo evidenzia sulla pagina.
- Passa il mouse sopra la riga evidenziata nel pannello Elementi. Una piccola tooltip appare sopra la pagina mostrando due numeri, qualcosa come 390 × 64. Il primo è la larghezza, il secondo è l'altezza. Quel secondo numero è quello che cercavi.
Scrivilo. Quella è l'altezza della tua barra in pixel.
Ecco alcune cose da considerare da qui:
- Se il numero sembra troppo piccolo, hai selezionato il pulsante invece della barra. Nel pannello Elementi, fai clic sulla riga appena sopra quella su cui ti trovi e osserva l'evidenziazione. Continua a salire finché non copre l'intera striscia, da bordo a bordo, quindi rileggi l'altezza.
- Controlla un secondo prodotto. Un prodotto semplice con un pulsante di solito fornisce una barra più corta rispetto a un prodotto variabile, dove un selettore di quantità o un menu a discesa di variazione la rendono più alta.
- Tieni il numero più grande. Il widget può trovarsi solo a un'altezza.
Ora hai un numero. La domanda successiva è dove digitarlo, perché molti widget non ti danno un posto dove metterlo e ti forniscono invece il CSS.
WPChat ha campi per esattamente questo: un'impostazione di posizione e offset di pixel separati dal basso e da destra.
Trasformare quel numero in un offset
Il tuo offset è l'altezza della barra più uno spazio. Se la tua barra misura 64px, non impostare l'offset a 64px.
Impostalo invece su qualcosa come 80px. Lo spazio è importante perché i target di tocco non devono sovrapporsi per causare problemi.
La punta di un dito copre molto più schermo di un cursore del mouse, quindi due controlli uno accanto all'altro produrranno tocchi errati anche quando il layout sembra pulito. Uno spazio di 16px sopra la barra è sufficiente per separarli.
Quindi la formula di lavoro è: altezza della barra + 16px = il tuo offset inferiore.
Un avvertimento prima di fidarti di quel numero
DevTools disegna il tuo layout, ma non disegna il telefono. L'interfaccia del browser si sovrappone alla pagina su un dispositivo reale, e questo ti costa altezza che l'emulatore non ti mostra mai.
Tre cose ne consumano:
- L'interfaccia del browser. La barra degli indirizzi e la barra degli strumenti in fondo a Safari e Chrome su iOS occupano spazio reale.
- La barra degli indirizzi comprimibile. Si riduce quando scorri e si espande quando scorri indietro, quindi lo spazio disponibile cambia mentre l'acquirente utilizza la pagina.
- Margini di area sicura di iOS. La striscia dell'indicatore di avvio nella parte inferiore dei nuovi iPhone è uno spazio riservato che il tuo layout deve evitare.
Non dimenticare che le altezze delle barre differiscono tra temi come Astra, Botiga, Woostify e gli altri, e non li ho testati tutti.
Ecco perché sceglierei un offset con margine piuttosto che uno pixel-perfect.
Imposta il tuo numero, quindi apri la pagina del prodotto su un telefono reale una volta e tocca il pulsante Acquista. Se è pulito, hai finito. Se è stretto, aggiungi altri 10px e controlla di nuovo.
Il ciclo di indovinelli sui pixel e le impostazioni che lo interrompono
Due thread di supporto pubblici su WordPress.org mostrano cosa succede quando un widget non ti fornisce un'impostazione per questo.
Nel primo thread, un proprietario di negozio segnala che il widget di chat copre il pulsante Aggiungi al carrello di WooCommerce su mobile. La soluzione è breve: sposta la posizione del widget nelle impostazioni del plugin. Questa è l'intera risoluzione.
Il secondo thread va nella direzione opposta. Una barra dei cookie si sovrappone ai pulsanti di un widget di chat su mobile, e non c'è un'impostazione per questo.
Quindi, il supporto fornisce CSS personalizzato che alza la barra di 100px su schermi inferiori a 479px di larghezza.
Non è abbastanza, quindi il numero sale a 160px. L'utente torna indietro e segnala che il banner ora si trova nel bel mezzo del nulla.
Nessuno in quel thread ha fatto nulla di male. Il loop si verifica perché un valore di pixel indovinato viene testato rispetto a un'altezza della barra che non è mai stata misurata, all'interno di una media query, il proprietario del negozio non ha modo di eseguire il debug sul proprio telefono.
Cambia il numero, ricarica, strizza gli occhi, cambialo di nuovo. Non c'è alcuna misurazione in quel processo, motivo per cui non converge.
Le impostazioni che sostituiscono l'indovinello
Dove si trova quella barra dipende dal tuo tema, che è esattamente il motivo per cui WPChat ti fornisce controlli di posizione invece di presumere che un angolo funzioni ovunque.
I controlli corrispondono all'ordine di correzione discusso in precedenza in questo articolo.
- Posizione: Il launcher si trova in basso a destra per impostazione predefinita, con la possibilità di posizionarlo in basso a sinistra. Questo è lo spostamento orizzontale, per quando il tuo pulsante Aggiungi al carrello occupa un lato della barra.
- Offset: Campi pixel separati per la distanza dal lato destro e la distanza dal basso. Il numero che hai misurato in precedenza va nel campo inferiore: l'altezza della tua barra più lo spazio di 16px.
- Targeting della pagina: Questo ti consente di disattivare il widget su pagine specifiche, che è il modo in cui lo tieni lontano dalle pagine in cui non ne hai bisogno.
Vale la pena sapere sul targeting della pagina: quando il widget è disattivato su una pagina, WPChat non lo carica e poi lo nasconde. Controlla prima, quindi i file non vengono mai scaricati.
Pronto per iniziare? Dai un'occhiata alla nostra guida passo passo per aggiungere un widget di chat online al tuo sito web.
Domande comuni sui widget di chat su dispositivi mobili
Come misuro l'altezza della barra "Aggiungi al carrello" fissa del mio tema?
Misurala in Chrome DevTools con la barra degli strumenti del dispositivo attiva. Premi F12, fai clic su "Attiva/disattiva barra degli strumenti del dispositivo", imposta la larghezza su una dimensione del telefono come 390, quindi scorri finché non appare la barra fissa. Fai clic con il pulsante destro del mouse sulla barra, scegli "Ispeziona" e passa il mouse sopra la riga evidenziata nel pannello "Elementi". Il tooltip mostra due numeri e il secondo è la tua altezza in pixel.
In basso a sinistra o in basso a destra quando ho una barra del carrello fissa?
Scegli l'angolo opposto al pulsante principale della barra, in modo che un tocco errato non ti costi nulla. Se il tuo pulsante Aggiungi al carrello si trova a destra, posiziona il launcher in basso a sinistra. Quando la barra occupa l'intera larghezza dello schermo, non c'è un angolo libero in entrambi i casi, quindi lascia la posizione invariata e solleva il launcher con un offset inferiore invece.
Un widget di chat danneggia il mio punteggio PageSpeed?
Nel mio test, no. Eseguendo lo stesso sito con il widget attivo e disattivo, ha aggiunto circa 148 KiB di asset e non ha spostato alcun Core Web Vital. TBT e CLS sono rimasti entrambi a zero. Un'avvertenza: quella era una pagina di test pulita, che è il caso migliore, quindi una pagina di prodotto ricca di immagini non si comporterà in modo identico.
Perché un offset di pixel consigliato non funziona su tutti i temi?
Perché la barra fissa "Aggiungi al carrello" non è una funzionalità di WooCommerce. Proviene dal tuo tema o da un plugin separato, e ognuno costruisce quella barra con un'altezza diversa. Qualsiasi numero che copi da un thread di supporto è stato misurato sul tema di qualcun altro, motivo per cui devi misurare il tuo.
Ottimizzazione mobile del widget di chat: a cosa si riduce
Un widget ben costruito non deve appesantire il tuo sito. WPChat ha aggiunto circa 148 KiB nei miei test e non ha mosso alcun Core Web Vital, quindi il peso non è mai stato ciò che ha fatto saltare la vendita. La posizione era: il launcher seduto sull'unico pulsante su cui il tuo acquirente è venuto a cliccare.
Ecco cosa puoi fare:
- Misura la tua barra sticky in Chrome DevTools a larghezza di telefono, e prendi l'altezza dal tooltip.
- Aggiungi uno spazio di 16px a quel numero. Questo è il tuo offset inferiore.
- Imposta la posizione e l'offset nelle impostazioni del tuo widget, non in una media query.
- Disattiva il widget per il carrello e il checkout, se vuoi che l'attenzione sia completamente sulla vendita.
- Controlla su un vero telefono una volta, perché le barre del browser e la striscia riservata in fondo ai nuovi iPhone consumano altezza che l'emulatore non ti mostra mai.
Il numero che otterrai appartiene al tuo tema, non ai widget di chat in generale. Temi diversi costruiscono quella barra in modo diverso, motivo per cui un campo in cui puoi digitare la tua misurazione batte qualsiasi numero che potrei stampare qui.
Ora hai una misurazione. WPChat ti offre un posto dove digitarla: posizione, offset separati in pixel e targeting della pagina.
Ottieni WPChat e inizia a connetterti con i visitatori su tutti i dispositivi e fai crescere la tua attività.
