Capire i CSS di WordPress
Prima di immergerci, capiamo come funzionano i normali CSS in WordPress.
Ogni tema WordPress è costituito da style.css che contiene tutto il codice necessario per lo stile del tuo sito. Gli sviluppatori di temi dovrebbero supportare tutte le funzionalità di WordPress che includono post di blog, commenti, pagina di prodotti, pagina di iscrizione, moduli, ecc. Altri plugin che installi possono anche aggiungere fogli di stile CSS simili.
Questo può rendere i file CSS gonfi e di grandi dimensioni di 200 kb o anche di più.
Che cos'è il CSS del percorso critico?
Man mano che i tuoi file CSS crescono, il tuo browser deve scaricare quei file di grandi dimensioni, analizzarli e renderli. Conosciuto anche come blocco del rendering. Incrementerà anche il primo rendering significativo e il primo rendering significativo.
Critical Path CSS è il CSS richiesto per visualizzare il contenuto di cui sopra su ogni pagina web. Come suggerisce il nome, CSS "critico", che aiuta il browser a disegnarlo e renderizzarlo rapidamente prima di caricare file CSS completi.
Di solito il CSS del percorso critico è incorporato nell'intestazione e il file CSS di origine viene caricato in modo asincrono o nel piè di pagina per facilità d'uso.
Perché il CSS del percorso critico è così importante?
Devi aver già visto un avviso da strumenti come Google PageSpeed Insights o GTmetrix che dice "ottimizza la consegna dei css" o "rinvia i css inutilizzati".
I CSS critici non hanno nulla a che fare con il tempo di caricamento della pagina. Non aumenta/diminuisce il tempo di caricamento. Ma offre un'esperienza utente molto migliore. Aiuta a "renderizzare" o "colorare" rapidamente una pagina web.
- Migliora il First Content Draw (FCP)
- Migliora il primo pagamento significativo (FMP)
- Rimuovi i CSS inutilizzati (tecnicamente non rimuoverli, ma dai la priorità ai CSS "utili")
Ecco due screenshot del mio blog con e senza CSS critici.
Come puoi vedere nella sezione "nessun percorso css critico", ci sono voluti quasi 5 secondi per mostrare all'utente qualcosa di utile su un dispositivo mobile. Il browser deve effettuare una richiesta HTTP aggiuntiva al file CSS, scaricarlo, analizzarlo per avviare il rendering. Ma quando si utilizza CSS critico, tutti i CSS necessari devono essere inline e il browser può avviare il rendering immediatamente dopo aver caricato il file HTML in un secondo o meno.
Come creare CSS critici in WordPress?
Esistono diversi modi per generare CSS critici in WordPress.
Utilizzo dei plugin di memorizzazione nella cache
WP Rocket è un plug-in di memorizzazione nella cache premium che funziona davvero bene.
Uno dei motivi per cui utilizzo WP Rocket su ogni sito è la stessa generazione critica di CSS. Generano CSS critici separatamente per la home page, la pagina dei post, la pagina della categoria, la pagina del prodotto, ecc. e lo incorporano. Ripristineranno CSS critici se ci sono modifiche al tema o all'impostazione.
Tutto può essere fatto premendo un pulsante.
Altri plugin di memorizzazione nella cache che possono generare CSS critici
Swift Performance e LiteSpeed (richiede il server LiteSpeed/OpenLiteSpeed) sono plugin simili che possono generare CSS critici. Entrambi questi plugin hanno cloud e cache completa integrati nei loro server.
Utilizzo di Autoptimize + Generatore CSS critico gratuito
Esistono strumenti online di terze parti che forniscono CSS importanti inserendo l'URL del tuo sito. pegasaas è un ottimo strumento gratuito.
Ecco come farlo:
Passo 1. Vai su https://pegasaas.com/critical-path-css-generator/ e inserisci il tuo URL. Copia il "Percorso critico CSS" generato.
Passo 2 Nelle impostazioni di ottimizzazione automatica (abilita le impostazioni avanzate), in "Opzioni CSS", seleziona "Inline e differisci CSS" e incolla il CSS copiato.
Professionisti:
- È libero
Svantaggi:
- Nessun CSS critico separato per diversi tipi di pagina (es: home page, pagina dei post, pagina della categoria, pagina del prodotto, ecc.)
- Non ricostruire automaticamente in caso di modifica del tema/impostazione
Perché WordPress stesso non può generare CSS critici?
Come avrai notato, la creazione di un percorso critico CSS abilita servizi esterni. Allora perché WordPress stesso non può generarlo?
La creazione di CSS critici è resa possibile da progetti open source come Critical (di Google), CriticalCSS o penthouse. Tutti questi progetti sono basati su NodeJS, non su PHP. Quindi, devi installare NodeJS sul tuo server. La maggior parte dei provider di hosting condiviso/gestito non lo consente per diversi motivi.
