Correzione rapida con Thunder
Se PageSpeed Insights contrassegna "Elimina risorse che bloccano la visualizzazione" o "Riduci CSS inutilizzati", installa Thunder e riprova la tua home page, una pagina di prodotto e una pagina di raccolta. Thunder migliora il caricamento delle risorse della vetrina senza chiederti di incollare fragili snippet di codice in ogni modello.
I CSS sono raramente isolati. Lo stesso negozio ha spesso JavaScript pesante, immagini hero caricate in modo lento, codice app inutilizzato e ritardi nei caratteri. Questo è il motivo per cui un'app con velocità più ampia di solito batte una soluzione limitata basata solo su CSS. Vedi Caratteristiche di Thunder, il migliore guida alle app veloci di Shopifye il nostro dettagliato Guida all'ottimizzazione CSS di Shopify prima di scegliere uno strumento.
Cosa può automatizzare uno strumento di ottimizzazione CSS di Shopify
Rinvio CSS con blocco del rendering
Fogli di stile nel rendering del blocco testata del documento per impostazione predefinita. Uno strumento può modificare il modo in cui vengono caricati i CSS non critici in modo che il browser dipinga prima i contenuti outside-the-fold. Questo di solito aiuta First Contentful Paint e può migliorare LCP quando l'elemento più grande è in attesa di stili.
Verifiche di minimizzazione e compressione
La minimizzazione rimuove spazi bianchi e commenti. La compressione avviene a livello server o CDN. La CDN di Shopify gestisce molto lavoro di consegna, ma i CSS inseriti dall'app e le risorse personalizzate possono comunque essere più pesanti del necessario. Gli strumenti possono rilevare questi problemi senza che uno sviluppatore legga ogni foglio di stile.
Estrazione CSS critica più sicura
CSS critico indica il piccolo insieme di regole necessarie per la prima visualizzazione. Un buon strumento tratta i modelli in modo diverso invece di dare per scontato che la home page, la pagina del prodotto e la pagina della collezione condividano lo stesso percorso critico. Ciò è importante perché una galleria di prodotti, un'intestazione fissa e l'interfaccia utente del filtro della raccolta richiedono regole diverse.
Priorità dei fogli di stile dell'app
Recensioni, upsell, abbonamenti, popup e page builder spesso inseriscono CSS a livello globale. Uno strumento di ottimizzazione CSS può ritardare gli stili per i widget lower-the-fold in modo che il titolo del prodotto, il prezzo, l'immagine hero e l'area di aggiunta al carrello vengano visualizzati per primi. Per problemi specifici dell'app, leggi anche come rimuovere CSS e JavaScript inutilizzati su Shopify.
Cosa non dovrebbe essere completamente automatizzato
La promessa pericolosa è "rimuovere automaticamente tutti i CSS non utilizzati". La copertura di Chrome può mostrare che l'80% di un foglio di stile è inutilizzato su una pagina, ma ciò non significa che sia inutilizzato in tutto il negozio. Una tabella delle taglie può essere nascosta finché non viene cliccata. Un selettore di varianti potrebbe essere visualizzato solo per determinati prodotti. Un cassetto del carrello potrebbe non esistere finché un acquirente non aggiunge un articolo. Un widget fedeltà può essere caricato dopo il consenso.
L'eliminazione di CSS in base a una scansione può interrompere questi stati. Questo è il motivo per cui l'approccio più sicuro è stratificato: automatizzare prima il differimento e la priorità, poi dividere i CSS del modello ovvio ed eliminare solo dopo il test. L'obiettivo è un negozio più veloce, non un rapporto di copertura perfetto che rompa la pagina di maggior valore.
Correzione CSS manuale passo passo
1. Conferma che il problema è CSS
Testa lo stesso URL in PageSpeed Insights, Chrome DevTools e nella Web Performance Dashboard di Shopify. Se la cascata mostra file CSS di grandi dimensioni che bloccano il primo disegno, vale la pena lavorare con i CSS. Se il tempo di blocco totale è il problema più grande, inizia con Ottimizzazione JavaScript invece.
2. Rinviare stili non critici
Per un foglio di stile del tema accuratamente testato, gli sviluppatori utilizzano spesso questo modello:
<link
rel="stylesheet"
href="{{ 'component-deferred.css' | asset_url }}"
media="print"
onload="this.media='all'"
>
<noscript>{{ 'component-deferred.css' | asset_url | stylesheet_tag }}</noscript>Non applicarlo a tutti i fogli di stile contemporaneamente. Inizia con la sezione CSS lower-the-fold, quindi prova la navigazione, i moduli del prodotto, le varianti, il cassetto del carrello e i menu mobili.
3. Dividi CSS specifici del modello
Se i filtri della raccolta esistono solo sulle pagine della raccolta, carica i relativi CSS solo sui modelli di raccolta. Se le regole multimediali del prodotto si applicano solo alle pagine del prodotto, mantienile lì. I temi Shopify possono caricare le risorse in modo condizionale in base al modello:
{% if template.name == 'product' %}
{{ 'product-media.css' | asset_url | stylesheet_tag }}
{% endif %}4. Rimuovi per ultimi gli avanzi dell'app
Dopo aver disinstallato le app, cerca vecchi snippet, risorse CSS e tag di script. Si tratta di un lavoro di grande impatto, ma necessita di revisione. Per il processo di pulizia completo, utilizzare il file Guida agli avanzi dell'app Shopify.
Correzione manuale vs. Correzione Thunder
| Ottimizzazione | Percorso manuale | Percorso del tuono |
|---|---|---|
| CSS con blocco del rendering | Modifica i collegamenti ai temi e testa ogni modello. | Automatizza le modifiche più sicure al caricamento delle risorse. |
| CSS non utilizzato | Usa copertura, dividi file, elimina solo dopo il QA. | Riduce l'impatto senza eliminare incautamente il foglio di stile. |
| CSS dell'app | Controlla le risorse inserite e il comportamento di incorporamento delle app. | Ottimizza automaticamente i modelli comuni di caricamento delle app. |
| Cambiamenti in corso | Ripeti dopo ogni aggiornamento di app o temi. | Mantiene attiva l'ottimizzazione man mano che le risorse del negozio cambiano. |
Come scegliere uno strumento di ottimizzazione CSS di Shopify
Scegli uno strumento compatibile con Shopify, non un minimizzatore generico. Dovrebbe comprendere gli incorporamenti di app, i temi Liquid, i modelli di pagina, i Core Web Vitals e la differenza tra test di laboratorio e dati sul campo. Dovrebbe anche fornirti un percorso di rollback pulito perché modifiche CSS aggressive possono interrompere gli stati visivi che appaiono solo durante lo shopping.
Se stai confrontando le opzioni, inizia con Guida all'app Shopify per l'ottimizzazione della velocità della pagina e il Panoramica dell'app per l'ottimizzazione della velocità di Shopify. CSS matters, but the best result usually comes from treating CSS, images, fonts, and scripts as one loading system.
FAQ
Cosa fa uno strumento di ottimizzazione CSS di Shopify?
Uno strumento di ottimizzazione CSS di Shopify può rinviare stili non critici, migliorare il caricamento delle risorse che bloccano il rendering, minimizzare i CSS, aiutare a dare priorità ai CSS Above-the-fold critici e ridurre l'impatto dei fogli di stile inseriti nell'app.
La rimozione dei CSS non utilizzati può essere completamente automatizzata su Shopify?
Solo parzialmente. Gli strumenti sono in grado di rilevare CSS inutilizzati su una pagina testata, ma i modelli Shopify, le sezioni dinamiche, i cassetti del carrello, le varianti di prodotto e gli stati delle app rendono rischiosa l'eliminazione automatica completa. Rinviare o dividere i CSS è solitamente più sicuro che eliminare le regole alla cieca.
I CSS critici sono sicuri da automatizzare?
I CSS critici possono essere automatizzati quando lo strumento comprende i tipi di pagina e testa più dimensioni del viewport. Ha ancora bisogno di guardrail perché una home page, una pagina di prodotto e una pagina di collezione spesso necessitano di stili Above-the-fold diversi.
L'ottimizzazione CSS migliorerà i Core Web Vitals?
Spesso migliora LCP e FCP quando gli stili di blocco del rendering ritardano la prima verniciatura. Può anche aiutare CLS se gli stili di carattere e layout vengono caricati in modo prevedibile, ma i problemi di JavaScript e di immagine potrebbero comunque richiedere correzioni separate.
Dovrei utilizzare un'app solo CSS o un'app di velocità più ampia?
Most Shopify stores benefit more from a broader speed app because CSS, JavaScript, images, fonts, and app embeds interact. A CSS-only tool may miss the bottleneck that actually hurts shoppers.
Automatizza prima il CSS sicuro
Esegui a Test di velocità Shopify gratuito, quindi utilizzare Thunder per gestire i miglioramenti pratici di CSS, script, font e Core Web Vitals che non dovrebbero richiedere una ricostruzione del tema.