Correzione rapida con Thunder
Thunder Page Speed Optimizer è progettato per il momento esatto in cui un'utile app Shopify danneggia la velocità del negozio. Mantiene in posizione lo stack delle tue app migliorando al tempo stesso il caricamento degli script, la priorità delle risorse, le immagini, i caratteri e i modelli Core Web Vitals per dispositivi mobili.
Perché il punteggio di velocità di Shopify diminuisce dopo l'installazione delle app
Le app Shopify possono aggiungere codice negozio in diversi modi: incorporamenti di app, estensioni di app a tema, tag di script, eventi del cliente, pixel, file CSS, snippet, iframe e chiamate API di terze parti. Alcune app aggiungono codice solo sulle pagine dei prodotti. Altri si caricano su ogni pagina anche quando il widget visibile appare solo in un posto.
Quel codice extra può influenzare tutti e tre i Core Web Vitals. Un widget di recensioni può ritardare il Largest Contentful Paint se blocca il modello del prodotto. Uno script di tracciamento può danneggiare l'interazione con Next Paint aggiungendo lunghe attività JavaScript. Una barra popup o di annunci può creare uno spostamento cumulativo del layout quando viene visualizzata dopo che la pagina ha già iniziato il rendering. Google consiglia LCP inferiore a 2,5 secondi, INP inferiore a 200 millisecondi e CLS inferiore a 0,1 per una buona esperienza utente.
La Web Performance Dashboard di Shopify è utile perché mostra le prestazioni reali degli utenti e può aiutarti a collegare una regressione della velocità a modifiche come installazioni di app, pubblicazioni di temi e modifiche al codice. Usa prima quella sequenza temporale, poi usa Punteggio di velocità di Shopify rispetto a PageSpeed Insights per capire perché strumenti diversi possono mostrare numeri diversi.
Passaggio 1: verificare che l'app abbia effettivamente causato il calo
I punteggi di velocità si spostano per ragioni che non hanno nulla a che fare con l'app appena installata. Il traffico può spostarsi verso paesi più lenti, un cambio di tema può essere pubblicato contemporaneamente, la pagina di destinazione di una campagna può ricevere più visitatori da dispositivi mobili o i dati dei campi di Google possono essere aggiornati con un ritardo.
- Annotare la data di installazione. Confrontalo con la dashboard e le note di analisi di Shopify.
- Prova quattro URL. Utilizza la home page, una pagina del prodotto, una pagina della collezione e una pagina di destinazione.
- Confronta i tipi di pagina interessati. Un'app per le recensioni dei prodotti non dovrebbe essere incolpata di un calo LCP solo sulla home page a meno che non venga caricata anche lì.
- Controlla il pannello di rete del browser. Cerca nuovi JavaScript, CSS, file di caratteri, richieste iframe e chiamate di analisi.
- Duplica il tema prima di cambiare qualsiasi cosa. Non eseguire mai il debug di un percorso delle entrate direttamente sul tema live.
Se il punteggio è sceso ma i tuoi parametri utente reali non sono ancora cambiati, leggi perché le correzioni del punteggio di velocità di Shopify non vengono visualizzate. Lo stesso ritardo nei dati sul campo può far sembrare tardive le regressioni e i ripristini.
Verifica manuale dell'impatto dell'app per i cali del punteggio di velocità di Shopify
Il percorso manuale è semplice ma lento: isolare l'app, decidere se vale la pena tenerla, poi fare in modo che il browser la carichi più tardi o solo dove serve. Questo è più semplice con un tema duplicato e un foglio di calcolo con i risultati prima e dopo.
| Segnale | Cosa significa solitamente | Prima correzione |
|---|---|---|
| Nuove attività JavaScript lunghe | Il codice del widget, del pixel, delle recensioni, della chat o del carrello sta bloccando il thread principale. | Rimanda gli script non critici e carica i widget in base all'intento dell'utente. |
| Altri CSS che bloccano il rendering | L'app ha aggiunto un foglio di stile che blocca il primo rendering. | Carica il CSS dell'app solo sulle pagine in cui appare l'app. |
| Il layout cambia dopo il caricamento | L'app inserisce in ritardo un banner, un popup, delle stelle, dei consigli o un messaggio di pagamento. | Prenota spazio con CSS o ritarda l'interfaccia utente non critica fino a dopo la prima interazione. |
| Il carico utile della rete salta | L'app carica immagini, caratteri, risposte API o librerie in bundle. | Limita il posizionamento della pagina, riduci le opzioni del widget o sostituisci l'app. |
Per categorie di app più approfondite, consulta le nostre guide su correzione degli script delle app che rallentano Shopify, Blocco JavaScript di terze parti Shopifye App di Shopify che rallentano il tuo negozio.
Correzioni del tema che riducono i danni alla velocità dell'app
L'impatto dell'app può essere ridotto nel codice del tema. Fallo con attenzione perché gli script delle app spesso controllano funzionalità visibili, analisi, opzioni di prodotto, carrelli, abbonamenti, recensioni o strumenti di conformità.
First, remove app blocks from templates where they do not matter. A product recommendations app may not need to run on every blog post. A review widget should not load on collection pages if no review UI appears there. A chat app may be delayed until after the first scroll or click.
In secondo luogo, riserva lo spazio del layout per l'interfaccia utente dell'app a caricamento tardivo. Ad esempio, se sotto il titolo del prodotto compaiono le stelle della recensione o un messaggio di pagamento, assegna al contenitore un'altezza minima stabile:
.product-review-slot {
min-height: 28px;
}
.installment-message-slot {
min-height: 40px;
}Terzo, evita di caricare widget opzionali prima del contenuto principale del prodotto. Un semplice caricatore ritardato può aiutare per i widget che non sono necessari per la prima verniciatura:
<script>
window.addEventListener('load', function () {
window.setTimeout(function () {
var script = document.createElement('script');
script.src = 'https://example-app-cdn.com/widget.js';
script.async = true;
document.body.appendChild(script);
}, 2500);
});
</script>Non utilizzare questo modello per gli script richiesti per la selezione delle varianti, l'aggiunta al carrello, gli abbonamenti, i collegamenti di pagamento, la prevenzione delle frodi, il consenso o l'analisi essenziale. Testa il flusso di acquisto su dispositivo mobile prima di pubblicare qualsiasi modifica.
Correzione manuale vs. Correzione Thunder
| Problema dopo l'installazione dell'app | Correzione manuale | Correzione del tuono |
|---|---|---|
| Gli script dell'app danneggiano INP o TBT | Ispeziona ogni script, decidi cosa può essere rinviato ed esegui il QA manualmente sui widget. | Ottimizza il caricamento degli script con regole di sicurezza incentrate su Shopify. |
| I CSS dell'app bloccano il rendering | Sposta i CSS nei modelli necessari, negli stili critici incorporati ed evita stili di app duplicati. | Migliora il caricamento delle risorse come parte dello stack di prestazioni automatizzate. |
| L'interfaccia utente inserita cambia il layout | Riserva spazio per blocchi di app, recensioni, popup e banner. | Riduce i problemi comuni di Core Web Vitals e aiuta a stabilizzare il comportamento di caricamento. |
| Lo stack pesante di app rallenta i dispositivi mobili | Rimuovi le app di basso valore, consolida gli strumenti e riscrivi i widget ad alto impatto. | Automatizza il primo passaggio veloce prima della costosa pulizia personalizzata. |
Quando conservare, sostituire o rimuovere l'app
Un punteggio di velocità non è il business. Se un'app aggiunge un aumento delle entrate dell'8% e costa 4 punti di velocità, probabilmente la manterrai e ottimizzerai il caricamento. Se un'app aggiunge un badge che nessuno clicca e costa 20 punti mobile, rimuovilo.
Utilizza una regola decisionale semplice: mantieni le app che proteggono chiaramente le entrate o la conformità, sostituisci le app che duplicano un altro strumento e rimuovi le app che aggiungono codice storefront senza valore misurabile. Quindi utilizzare la nostra guida completa all'ottimizzazione della velocità di Shopify per risolvere i restanti problemi relativi a temi, contenuti multimediali e script.
Se desideri un percorso più veloce, installa Thunder, esegui nuovamente gli stessi URL di test e confronta il risultato. Per i negozi che devono decidere tra un'app e il lavoro di un esperto, vedere Strumento di ottimizzazione della velocità di Shopify: app, audit o sviluppatore o controlla Prezzi tempestosi.
FAQ
Perché il mio punteggio di velocità Shopify è diminuito dopo aver installato un'app?
La maggior parte dei cali si verifica perché l'app ha aggiunto JavaScript, CSS, pixel, widget, richieste di rete o modifiche al layout alla vetrina. L'app può essere utile, ma il browser ora ha più lavoro prima che la pagina possa caricarsi e rispondere.
Devo disinstallare l'app se il mio punteggio di velocità Shopify diminuisce?
Non immediatamente. Per prima cosa testa la pagina prima e dopo aver disabilitato l'incorporamento dell'app, controlla se l'app influisce sulle entrate e verifica se il differimento dello script o le modifiche al caricamento risolvono il problema. Rimuovilo solo quando l'app non giustifica il suo costo in termini di velocità.
Thunder può correggere i cali di velocità causati dalle app Shopify?
Thunder can help when the drop comes from common app-related performance issues such as script loading, render-blocking resources, lazy loading conflicts, heavy images, fonts, and mobile Core Web Vitals bottlenecks.
Come posso scoprire quale app Shopify ha rallentato il mio negozio?
Confronta la data di installazione con le modifiche della Shopify Web Performance Dashboard, esegui un test di velocità sui modelli chiave, controlla le richieste di terze parti in DevTools, quindi disabilita l'incorporamento di un'app alla volta in un tema duplicato.
Gli incorporamenti di app rallentano Shopify anche quando sono disattivati?
Di solito l'incorporamento di un'app non dovrebbe caricare il codice della vetrina quando è disabilitato, ma vecchi snippet, modifiche al tema, pixel e risorse rimanenti possono rimanere dopo le modifiche dell'app. Controlla i file dei temi e gli eventi dei clienti prima di dare per scontato che l'app sia completamente scomparsa.
Quanto tempo impiega il punteggio di velocità Shopify per recuperare?
I test di laboratorio possono migliorare immediatamente dopo una correzione. La Web Performance Dashboard di Shopify e i dati sul campo di Google richiedono più tempo perché utilizzano dati reali sui visitatori nel tempo, quindi valuta le tendenze nell'arco di giorni o settimane.
Conclusione
Se il tuo punteggio di velocità Shopify diminuisce dopo l'installazione delle app, non farti prendere dal panico e non eliminarle alla cieca. Confronta i modelli interessati, isola l'impatto dell'app, mantieni gli strumenti che guadagnano sui costi di caricamento e utilizza Thunder per automatizzare le correzioni comuni di script, immagini, caratteri, caricamento lento e Core Web Vitals prima di pagare per il lavoro personalizzato.