CSS Critico su Shopify: elimina il CSS che blocca il rendering
Il CSS Critico su Shopify in breve
Il CSS critico è un insieme di regole CSS necessarie per il primo rendering. Queste regole vengono inserite inline nell'head della pagina in modo che il browser possa iniziare il rendering senza aspettare il download dei file CSS esterni.
Shopify non supporta il CSS critico automatizzato. Ha un'infrastruttura eccellente (i dati del Web Almanac 2025 mostrano che Shopify è in testa tra tutte le piattaforme ecommerce con il 95% di TTFB buono e il 92% di LCP buono su desktop), ma solo il 48% dei negozi Shopify supera tutti i Core Web Vitals su mobile. Il CSS che blocca il rendering è una delle ragioni principali. Il Web Almanac 2025 ha scoperto che l'85% delle pagine mobile fallisce ancora l'audit delle risorse che bloccano il rendering.
Ultima revisione di Arjen Karel a Marzo 2026
Che cos'è il CSS critico?
Tutti i browser moderni bloccano il rendering fino al download e all'analisi dei file CSS esterni. Quando una pagina carica uno o più file CSS, il rendering può essere facilmente bloccato per 100 ms o più.
Il CSS critico risolve questo problema estraendo solo le regole CSS necessarie per renderizzare la parte visibile della pagina (above the fold) e posizionandole inline all'interno del tag <head>. Il browser può iniziare il rendering immediatamente, mentre i fogli di stile completi vengono scaricati in background. Questo migliora direttamente il First Contentful Paint (FCP) e il Largest Contentful Paint (LCP).
L'approccio moderno: inline_asset_content
Se il tuo tema utilizza file CSS separati per sezione o componente (come il tema Dawn di Shopify e la maggior parte dei temi Online Store 2.0), puoi utilizzare il filtro Liquid inline_asset_content per inserire il CSS inline direttamente dai tuoi file asset:
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
Questo inserisce inline i contenuti del file CSS come un blocco <style>, eliminando completamente la richiesta di blocco del rendering. Puoi anche inserire il CSS inline in modo condizionale solo per le sezioni above-the-fold:
{%- if section.index0 < 2 -%}
<style>
{{ 'section-hero.css' | inline_asset_content }}
</style>
{%- else -%}
{{ 'section-hero.css' | asset_url | stylesheet_tag }}
{%- endif -%}
Le sezioni con un indice inferiore a 2 (le prime due sezioni della pagina, che sono quasi sempre above the fold) ottengono il loro CSS inline. Tutto il resto viene caricato come un normale foglio di stile. Questo è l'approccio che raccomando per i temi Shopify moderni.
L'approccio classico: generare e inserire inline il CSS critico
Se il tuo tema utilizza un unico grande foglio di stile (comune nei vecchi temi e nei negozi pesantemente personalizzati), devi estrarre il CSS critico tu stesso. Questo è un processo in sei fasi.
1. Duplica il tuo tema
Quando modifichi il comportamento principale di un template su Shopify, lavora sempre prima su una copia. Naviga verso il tuo tema attuale tramite 'Negozio online' > 'Temi' e duplicalo cliccando su 'Azioni' > 'Duplica'.
2. Genera il CSS critico
Io utilizzo il modulo Node.js Critical in combinazione con aggiustamenti manuali. Richiede un po' di sforzo, ma produce i risultati migliori.
Se è troppo tecnico per te, usa un generatore online. Il nostro Generatore di CSS Critico lo fa per te. Inserisci il tuo URL, copia il CSS critico generato e procedi al passaggio successivo.
3. Carica il CSS critico
Nel tuo tema duplicato, naviga nella cartella snippets e crea un nuovo file chiamato critical-css.liquid. Avvolgi il CSS generato nei tag <style> e incollalo nel tuo nuovo file.
4. Modifica il file di layout
Apri theme.liquid nella cartella Layout. Sono necessarie due modifiche.
Innanzitutto, renderizza lo snippet del CSS critico nel <head>:
<head>
{% render 'critical-css' %}
Nota: Shopify ha deprecato {% include %} in favore di {% render %}. Se il tuo tema usa ancora include, funziona ma dovresti migrare.
Quindi modifica i riferimenti CSS esistenti in modo che si carichino in background. Il pattern più pulito (utilizzato dal tema Dawn di Shopify stesso) è il trucco media="print":
<link
rel="stylesheet"
href="{{ 'theme.scss.css' | asset_url }}"
media="print"
onload="this.media='all'; this.onload=null;" />
Questo dice al browser di trattare il foglio di stile come un foglio di stile per la stampa (che non blocca il rendering) durante il caricamento iniziale, per poi passare a media="all" una volta scaricato. Il tuo CSS critico renderizza la pagina immediatamente mentre il foglio di stile completo viene scaricato in background. Questo approccio media="print" ha sostituito il vecchio pattern rel="preload" perché è più semplice e non necessita di alcun fallback <noscript>.
5. Testa il nuovo tema
Sulla pagina del tema clicca su 'Azioni' > 'Anteprima' per testare il tema copiato. Presta particolare attenzione al Cumulative Layout Shift (CLS). Un CSS critico incompleto o errato causa un lampo di contenuti non stilizzati dove gli elementi vengono renderizzati senza i loro stili finali, per poi saltare in posizione una volta che il CSS completo viene caricato. Quello è il layout shift.
Esegui PageSpeed Insights sull'URL di anteprima e confronta FCP e LCP prima e dopo. Dovresti vedere un chiaro miglioramento in entrambi. Per un monitoraggio continuo dopo il go-live, traccia i tuoi dati sul campo con il Real User Monitoring per verificare che il miglioramento si mantenga per i visitatori reali.
6. Pubblica il nuovo tema
Naviga in Temi nel menu di sinistra sotto 'Negozio online' e sotto 'Azioni' seleziona 'Pubblica' per il tuo nuovo tema.
Limitazioni che non puoi controllare
Shopify forza content_for_header nell'<head> di ogni pagina. Questo inietta script di analytics, script di app e altro codice di piattaforma che non puoi differire o modificare. Ogni app Shopify installata può aggiungere script attraverso questo meccanismo. Questo è un costo inevitabile di blocco del rendering, che rende l'ottimizzazione di tutto ciò che controlli (il tuo CSS, i tuoi font, i tuoi stessi script) ancora più importante. Disinstallare le app inutilizzate è una delle cose più efficaci che puoi fare.
Un'altra limitazione: Shopify non consente di leggere o inviare cookie nell'editor Liquid. Idealmente serviresti il CSS critico solo ai visitatori alla prima visita e serviresti il foglio di stile completo in cache ai visitatori di ritorno. Questo non è possibile su Shopify. Tuttavia, il guadagno in velocità derivante dal CSS critico ne vale la pena. Il negozio Shopify mediano su mobile ha un LCP di 2,26 secondi secondo il benchmark 2025 di Shero Commerce, proprio al limite della soglia dei 2,5 secondi. Risparmiare anche solo 200 ms eliminando il CSS che blocca il rendering può fare la differenza tra superare o fallire i Core Web Vitals.
Cosa altro puoi fare?
Il CSS critico è un pezzo del puzzle. Per una strategia completa di ottimizzazione su Shopify, consulta la nostra guida ai Core Web Vitals per Shopify. Altri miglioramenti ad alto impatto includono il preload della tua immagine LCP, l'hosting in proprio dei tuoi Google Fonts e la comprensione della prioritizzazione delle risorse. Shopify supporta anche le Speculation Rules per navigazioni di pagina istantanee e 103 Early Hints per il preload delle risorse prima ancora che arrivi l'HTML.
Se stai ancora combattendo con gli avvisi di CSS inutilizzato, affronta prima quelli. Rimuovere il CSS di cui non hai bisogno è sempre meglio che inserire inline il CSS che hai.
I have done this before at your scale.
Complex platforms, large dev teams, legacy code. I join your team as a specialist, run the performance track, and hand it back in a state you can maintain.
Discuss Your Situation
