Critical CSS in Shopify
Critical CSS in Shopify - in breve
Il Critical CSS è una raccolta di regole CSS necessarie per il primo rendering. Queste regole CSS vengono inserite nell'head della pagina. Ciò garantisce che un browser inizi il rendering senza dover scaricare tutti i file CSS che bloccano il rendering
Shopify è una soluzione webshop all-in-one molto utilizzata, dove chiunque può creare facilmente il proprio webshop. Sfortunatamente, Shopify non è progettato per avere un punteggio pagespeed perfetto e non supporta il Critical CSS automatizzato. Il Critical CSS in Shopify può essere aggiunto solo manualmente.
In questo articolo, ti mostrerò come aggiungere rapidamente il Critical CSS al tuo webshop Shopify.
Cos'è il Critical CSS?
A causa del modo in cui funzionano tutti i browser moderni, il rendering della pagina è bloccato dai file CSS esterni. Quando un browser deve scaricare 1 o più file CSS, il rendering di una pagina può bloccarsi facilmente per 100ms o anche più a lungo.
Un modo per evitarlo è utilizzare il Critical CSS. Il Critical CSS è una raccolta di CSS necessaria per renderizzare solo la parte visibile della pagina. Questo Critical CSS è spesso inserito inline, nell'head della pagina. Ciò garantisce che un browser non debba scaricare 1 o più file CSS prima di poter iniziare il rendering. Nel frattempo, mentre la pagina viene visualizzata, il tuo browser scarica i file CSS finali in background.
Inizia rapidamente: Critical CSS in Shopify!
Shopify è una popolare soluzione webshop all-in-one. Funziona molto facilmente, ma la page speed non è il punto forte di Shopify. Ad esempio, non esiste un buon supporto automatizzato per il Critical CSS di default. Pertanto, dovremo aggiungere il supporto per il Critical CSS manualmente. Fortunatamente, non è molto faticoso. Segui la guida passo passo qui sotto per utilizzare il Critical CSS in Shopify.
1. Crea un nuovo tema
Quando si modifica il comportamento principale di un template in Shopify, è meglio creare un nuovo tema. Naviga fino al tuo tema attuale tramite 'Online Store'> 'Themes' e copia il tuo tema attuale in un nuovo tema cliccando su 'Actions'> 'Duplicate'
2 Genera il Critical CSS
Ci sono numerosi modi per generare il Critical CSS in vari modi. Io stesso utilizzo il modulo Critical di NodeJs in combinazione con alcune regolazioni manuali. È un po' un puzzle, ma spesso è la soluzione migliore.
Se questo è un po' troppo tecnico per te, potresti provare uno dei tanti generatori di Critical CSS online. Inserisci qui l'URL del tuo sito web e lo strumento genererà automaticamente il tuo Critical CSS per te. Copia questo Critical CSS e procedi al passaggio successivo.
3. Carica il Critical CSS
Nel tuo nuovo tema, naviga nella cartella snippets e crea un nuovo file chiamato critcal.css.liquid. Incolla i contenuti del Critical CSS generato dal passaggio 2 nel tuo nuovo file.
4. Modifica i file del template
Apri il tuo template nella cartella Layout. Dobbiamo apportare 2 modifiche qui. Per prima cosa aggiungiamo il Critical CSS nell'head della pagina:
<head>
{% include 'critical.css'%}
Quindi modifica i riferimenti CSS esistenti per scaricare i file CSS originali in background. Per questo utilizzeremo il tag preload. Il tag preload indica ai tuoi browser che un file verrà utilizzato successivamente nella pagina. Il browser quindi scaricherà questo file in parallelo. Una volta che questi file sono stati scaricati, attiva i file CSS tramite JavaScript:
<link
rel = "preload"
href = "{{'theme.scss.css' | asset_url}}"
type = "text / css" as = "style"
onload = "this.onload = null; this.rel = 'stylesheet';" />
4. Testa il nuovo tema
Ora sei pronto per testare il Critical CSS in Shopify. Sulla pagina del tema clicca su 'Actions' > 'Preview' del tema copiato. Testa a fondo il nuovo tema, prestando particolare attenzione al valore del Layout Shift (CLS) in Lighthouse. Un Critical CSS incompleto o errato può causare un layout shift significativo.
5. Pubblica un nuovo tema
Naviga in Themes nel menu a sinistra sotto 'Online Store' e sotto 'Actions' seleziona 'Publish' per il tuo nuovo tema.
Il Critical CSS è live!
Congratulazioni, il tuo shop Shopify ora utilizza il Critical CSS. Questo rende il caricamento del tuo shop molto più veloce! Hai bisogno di aiuto per velocizzare il tuo shop? Mi piacerebbe aiutarti!
Limitazioni di Shopify
Normalmente vuoi fornire il Critical CSS solo ai visitatori che non hanno i file CSS finali nella cache del loro browser. Servire i file CSS originali tramite la cache del browser è di solito più veloce rispetto all'utilizzo del Critical CSS.
Questo viene fatto inviando un cookie alla prima richiesta e tramite un po' di rendering lato server. Sfortunatamente, Shopify non consente di leggere e inviare cookie nell'editor liquid di Shopify. È un peccato, ma cosa ci puoi fare?
Tuttavia, ha senso aggiungere il Critical CSS al tuo shop Shopify. Il guadagno in velocità ne varrà la pena!
Your Lighthouse score is not the full picture.
Lab tests run on fast hardware with a stable connection. I analyze what your actual visitors experience on real devices and real networks.
Analyze Field Data
