Shopify Dimensioni DOM eccessive: Come risolvere l'avviso PageSpeed (2026)

Correzione rapida con Thunder

Cosa significa PageSpeed per dimensione DOM eccessiva

Il DOM è il modello live del browser del tuo HTML. Ogni sezione, scheda prodotto, voce di menu, badge dell'app, wrapper popup e modello nascosto diventa un nodo che il browser deve analizzare, definire lo stile, disporre e talvolta aggiornare con JavaScript.

La guida Lighthouse di Google indica comunemente tre soglie: più di 1.500 nodi DOM totali, una profondità massima maggiore di 32 elementi annidatio un genitore con più di 60 elementi figlio. Shopify I thread della community sono pieni di commercianti che vedono 3,000, 5,000, o anche 7,000+ elementi e che chiedono se hanno bisogno di un Shopify esperto. La risposta onesta: a volte sì, ma potete rimuovere una quantità sorprendente dall'editor del tema prima.

Un DOM di grandi dimensioni non sempre danneggia direttamente LCP, ma rende il browser più lento in tutto ciò che riguarda LCP: calcolo dello stile, layout, query JavaScript, delega di eventi e rendering dell'interazione. Questo è il motivo per cui DOM bloat appare spesso accanto minimizza il lavoro del thread principale, Esecuzione JavaScripte avvisi INP.

Le cause specifiche di Shopify

Passaggio 1: misurare il DOM prima della modifica

Apri la pagina, quindi eseguilo nella console di Chrome DevTools:

document.querySelectorAll('*').length

Quindi ispeziona le sezioni più grandi. PageSpeed ​​ti dice i totali, ma DevTools ti dice dove risiede il gonfiore. Utilizza il pannello Elementi, comprimi le sezioni e conta i trasgressori evidenti: griglie di prodotti, mega menu, blocchi di creazione di pagine e radici delle app inserite. Abbinalo al nostro Lista di controllo del controllo della velocità di Shopify in modo da non correggere le dimensioni del DOM e perdere problemi di script più pesanti.

Passaggio 2: Limita la raccolta e le griglie dei risultati della ricerca

Le pagine di raccolta sono il modo più veloce per creare un DOM di grandi dimensioni. Una scheda prodotto raramente è un elemento. Può includere due immagini, venditore, titolo, prezzo, prezzo di confronto, badge di vendita, campioni di colore, modulo di aggiunta rapida, pulsante della lista dei desideri, stelle di recensione e contenitori di app.

In un modello di raccolta, riduci la dimensione della pagina iniziale:

{% paginate collection.products by 24 %}
  {% for product in collection.products %}
    {% render 'card-product', product: product %}
  {% endfor %}
{% endpaginate %}

Per la maggior parte dei negozi sono sufficienti da 16 a 24 prodotti per pagina. Se utilizzi lo scorrimento infinito, esegui il rendering solo della prima pagina e recupera il resto dopo l'interazione. Nostro guida rapida alla pagina di raccolta tratta questo argomento in modo più dettagliato.

Passaggio 3: rimuovi il markup duplicato su dispositivi mobili e desktop

Molti temi rendono due versioni complete dello stesso contenuto: un blocco desktop e un blocco mobile, quindi ne nascondono una con CSS. Il visitatore vede una versione, ma il browser le analizza entrambe.

{%- comment -%}Avoid this pattern when the content is identical{%- endcomment -%}
<div class="hidden md:block">{% render 'mega-menu-desktop' %}</div>
<div class="md:hidden">{% render 'mega-menu-mobile' %}</div>

{%- comment -%}Prefer one semantic menu and change layout with CSS{%- endcomment -%}
<nav class="site-menu">
  {% render 'menu-items', menu: section.settings.menu %}
</nav>

Fallo attentamente. Alcuni menu mobili richiedono un comportamento diverso, ma i caroselli di prodotti duplicati, le barre degli annunci duplicate e gli alberi dei menu duplicati sono solitamente vittorie facili.

Passaggio 4: controlla gli incorporamenti delle app e gli snippet orfani

In Shopify Admin, andate su Online Store -> Themes -> Customize -> Incorporamento dell'app. Disabilitate tutto ciò che non è necessario caricare su ogni pagina. Quindi cercate nei file del tema vecchi nomi di app, domini di script e snippet. Le app rimosse mesi fa possono lasciare dei wrapper tema.liquid o modelli di prodotto.

Se un'app è ancora necessaria, caricala solo dove conta. Un widget di recensione appartiene alle pagine dei prodotti, non alle pagine delle norme. Un widget bundle appartiene alle sezioni di acquisto, non a tutte le schede di raccolta. Per l'impatto sulla velocità dell'app, confronta il tuo stack con il nostro Ricerca sull'impatto della velocità dell'app e app che rallentano i negozi Shopify.

Correzione manuale vs. Correzione Thunder

L'ordine pratico di priorità

1. Corri un test di velocità e PageSpeed Insights sul modello con il traffico più elevato.
2. Installa Thunder o rinvia manualmente gli script non critici se JavaScript blocca anche il thread principale.
3. Taglia le griglie di raccolta a 16-24 prodotti per pagina iniziale.
4. Rimuovi i contenuti duplicati nascosti su dispositivi mobili/desktop.
5. Disabilita gli incorporamenti di app inutilizzati ed elimina gli snippet di app orfani.
6. Semplifica i mega menu e le sezioni del generatore di pagine.
7. Ripeti il ​​test con lo stesso URL e confronta i nodi DOM, TBT, INP e LCP.

Se hai bisogno di un piano più ampio, usa il nostro guida completa all'ottimizzazione della velocità di Shopify. Per gli avvisi relativi a PageSpeed, consulta le guide a riduce il tempo di blocco totale di Shopify, corregge le catene di richieste critiche di Shopifye riduce i payload della rete Shopify. Per una pulizia pratica, il ns Servizio di ottimizzazione della velocità di Shopify può gestire le correzioni a livello di tema in modo sicuro.

Riferimenti e validazione

Per la diagnostica sottostante, confronta il tuo rapporto con quello Guida alle dimensioni DOM di Chrome Lighthouse. Le soglie non sono arbitrarie; riflettono la memoria aggiuntiva, il calcolo dello stile e il costo del layout che il browser assume quando una pagina diventa troppo grande.

I thread della Shopify Community sulla dimensione del DOM di solito seguono lo stesso schema: i commercianti vedono un numero spaventoso di PageSpeed, quindi scoprono che la causa effettiva è un accumulo di sezioni, incorporamenti di app, menu duplicati e schede di collezione. Trattate l'avviso come una mappa di pulizia, non come una prova che Shopify stesso sia rotto. La mossa vincente è ridurre il markup dove non cambia nulla per il cliente, quindi usare Thunder per impedire che il JavaScript rimanente dell'app blocchi la pagina.