Shopify Cache risorse di terze parti: cosa puoi risolvere

Cosa significa l'avviso relativo alla policy della cache

PageSpeed contrassegna le risorse statiche con una durata della cache breve perché i visitatori abituali potrebbero dover scaricarle di nuovo troppo presto. Su un sito puramente personalizzato, uno sviluppatore può spesso modificare le intestazioni del server. Su Shopify, le risorse della vetrina sono suddivise tra CDN di Shopify, tema, fornitori di app, piattaforme di monitoraggio, fornitori di caratteri, incorporamenti di video e reti pubblicitarie. Controlli parte di quello stack, ma non tutto.

Ecco perché i commercianti si frustrano con l'avviso. Vedono un file JavaScript di terze parti da un'app di recensioni, un widget di chat, un pixel o uno strumento di attribuzione e cercano un'impostazione Shopify che non esiste. Se il file è servito dal dominio del fornitore, il fornitore imposta la durata della cache. Il vostro compito è decidere se quel fornitore debba caricarsi, dove debba caricarsi e se un modello più leggero possa sostituirlo.

La politica della cache appartiene accanto Politica di cache efficiente di Shopify, Impatto sugli script di terze parti, Ottimizzazione della velocità dell'appe il guida completa all'ottimizzazione della velocità di Shopify.

Quali risorse puoi controllare su Shopify

Risorse tematiche

I file caricati sul tuo tema Shopify, come CSS, JavaScript, immagini e caratteri, sono il posto più sicuro per l'ottimizzazione. Puoi rimuovere file morti, comprimere immagini, dividere script ed evitare di caricare vecchie risorse. La CDN di Shopify gestisce la consegna, ma sei comunque tu a controllare ciò che viene richiesto.

File statici del fornitore approvati

Alcune librerie possono essere auto-ospitate se la licenza e la documentazione del fornitore lo consentono. Gli esempi includono una libreria slider locale, un piccolo script di aiuto o un file di font che siete autorizzati a ospitare. Questo è diverso dal copiare uno script di un'app live che si aspetta aggiornamenti dal fornitore.

Incorporamenti e pixel dell'app

Di solito non è possibile modificare le intestazioni della cache. Puoi disabilitare gli incorporamenti di app inutilizzati, rimuovere pixel duplicati, limitare i widget ai modelli pertinenti e ritardare l'interfaccia utente non critica fino a quando la prima schermata non sarà utilizzabile.

Manuale passo passo: gestire gli avvisi della cache di terze parti

1. Ordinare le risorse per proprietà

Apri DevTools Network o PageSpeed e raggruppa gli URL contrassegnati nella CDN di Shopify, nel tuo tema, nei fornitori di app, nei pixel, nei caratteri, negli incorporamenti video e negli strumenti di marketing. Correggi prima le tue risorse. Le risorse di proprietà del venditore richiedono una decisione diversa.

Shopify-controlled:
cdn.shopify.com/s/files/.../theme.css
cdn.shopify.com/s/files/.../custom.js

Vendor-controlled:
reviews-app.example/widget.js
analytics.example/pixel.js
chat.example/launcher.js

2. Rimuovete le risorse dai modelli che non ne hanno bisogno

Un widget per la recensione di un prodotto può appartenere alle pagine dei prodotti ma non ai post del blog. Uno script di localizzazione del negozio può appartenere a una pagina, non all'intera vetrina. Le estensioni delle app a tema e gli incorporamenti di app devono avere un ambito quanto più rigoroso consentito dall'app.

{% if template.name == 'product' %}
  <script src="https://vendor.example/reviews.js" defer></script>
{% endif %}

3. Utilizzare le facciate per incastri pesanti

Video, mappe, chat e incorporamenti social spesso caricano molti file con criteri di cache che non controlli. Sostituisci l'incorporamento completo con un'anteprima statica o un pulsante leggero, quindi carica il codice di terze parti solo dopo l'interazione.

<button class="chat-facade" data-load-chat>
  Chatta con noi
</button>

<script>
  document.querySelector('[data-load-chat]')?.addEventListener('click', () => {
    const script = document.createElement('script');
    script.src = 'https://chat.example/widget.js';
    script.defer = true;
    document.head.appendChild(script);
  });
</script>

4. Ospitare autonomamente solo ciò che è sicuro

Font auto-host, piccole librerie e risorse statiche approvate quando consentito. Non copiare nel tuo tema script di app, script di pagamento, pixel di tracciamento o codici fornitore costantemente aggiornati. Ciò può compromettere la gestione del consenso, l'analisi, il supporto e le future correzioni di sicurezza.

@font-face {
  font-family: 'Brand Sans';
  src: url('{{ "brand-sans.woff2" | asset_url }}') format('woff2');
  font-display: swap;
  font-weight: 400;
}

5. Chiedi ai fornitori una migliore memorizzazione nella cache

Se un'app critica spedisce file statici con durate di cache molto brevi, contattate il supporto con l'URL esatto da PageSpeed e chiedete se possono migliorare le intestazioni della cache o fornire un embed più leggero. I buoni fornitori capiscono la richiesta. Se non possono aiutare e il widget non sta producendo entrate, rimuovetelo o sostituitelo.

6. Testare nuovamente le visualizzazioni ripetute e le prestazioni mobili

La policy della cache è più importante per i visitatori abituali, ma le stesse risorse di terze parti possono anche danneggiare il payload della rete di primo caricamento, il lavoro del thread principale e INP. Riprova con il Test di velocità Shopify gratuito, quindi confronta Metriche di velocità mobile e Punteggio di velocità di Shopify rispetto a PageSpeed Insights.

Correzione manuale vs. Correzione Thunder

Cosa non fare

Non inseguire un punteggio perfetto in termini di politica della cache violando gli strumenti di entrate. Recensioni, abbonamenti, analisi, controlli antifrode e chat possono avere importanza. La domanda giusta è se ogni risorsa di terze parti guadagna il suo posto su quel modello esatto. Rimuovi ciò che non lo fa, conteni ciò che lo fa e mantieni la pagina controllata da Shopify il più snella possibile.

Per un piano di pulizia più ampio, utilizzare Correzioni dello script dell'app, Correzioni di velocità GTMe Suggerimenti sulle risorse Shopify. Se desideri prima la linea di base automatizzata, rivedi Prezzi tempestosi e quindi pulire lo stack del fornitore con dati migliori.

FAQ