Chi Siamo Area Clienti Promo del Mese Dicono di Noi Portfolio FAQ Blog
Contattaci
Senza categoria

Page Optimization con LiteSpeed Cache: Critical CSS e Prefetch

· 10 min di lettura

Page Optimization con LiteSpeed Cache: Critical CSS e Prefetch

La sezione Page Optimization di LiteSpeed Cache racchiude alcune delle funzionalità più avanzate e impattanti per le prestazioni del tuo sito WordPress. In questa guida ci concentreremo su due tecniche fondamentali: il Critical CSS e il Prefetch. Queste tecnologie, se configurate correttamente, possono trasformare radicalmente l’esperienza di caricamento del sito, eliminando il render-blocking e anticipando il caricamento delle risorse necessarie.

Entrambe le tecniche operano sul “percorso critico di rendering” (Critical Rendering Path), ovvero la sequenza di operazioni che il browser deve completare prima di poter mostrare il primo pixel della pagina all’utente. Ottimizzare questo percorso è la chiave per ottenere un LCP (Largest Contentful Paint) eccellente e un punteggio PageSpeed elevato.

Cos’è il Critical CSS

Il Critical CSS (o CSS critico) è il sottoinsieme minimo di regole CSS necessarie per renderizzare la porzione visibile della pagina senza scorrimento (“above the fold”). Invece di caricare tutti i fogli di stile del sito prima di mostrare qualsiasi contenuto, il browser riceve solo il CSS essenziale inline nell’HTML, permettendogli di iniziare il rendering immediatamente.

Per capire l’impatto, consideriamo uno scenario tipico. Un sito WordPress carica 200KB di CSS da 5 file diversi. Senza Critical CSS, il browser deve scaricare e parsare tutti i 200KB prima di mostrare qualsiasi cosa. Con il Critical CSS, il browser riceve 10-15KB di CSS critico inline nell’HTML e può iniziare il rendering immediatamente, mentre i restanti 185KB vengono caricati in background.

Il risultato è un primo rendering che avviene 1-3 secondi prima, migliorando drasticamente sia il First Contentful Paint (FCP) che il Largest Contentful Paint (LCP).

Dashboard LiteSpeed Cache con metriche Critical CSS

Generazione del Critical CSS con LiteSpeed Cache

LiteSpeed Cache utilizza il servizio QUIC.cloud per generare il Critical CSS. Il processo è completamente automatico:

  1. Il plugin invia a QUIC.cloud l’URL di ogni tipo di pagina del tuo sito (homepage, post, pagina, categoria, prodotto, ecc.)
  2. QUIC.cloud carica la pagina in un browser headless, analizza il viewport e identifica le regole CSS necessarie per il rendering above the fold
  3. Il CSS critico viene restituito al plugin e memorizzato nel database
  4. Nelle richieste successive, il CSS critico viene inserito inline nel <head> della pagina

Per attivare il Critical CSS:

  1. Vai su LiteSpeed Cache > Page Optimization > CSS Settings
  2. Imposta Load CSS Asynchronously su “On”
  3. Imposta Generate Critical CSS su “On”
  4. Vai su LiteSpeed Cache > Toolbox > CSS
  5. Clicca su Generate Critical CSS per avviare la generazione per tutti i tipi di pagina

La generazione richiede tempo: QUIC.cloud deve analizzare ogni tipo di pagina singolarmente. Per un sito con molti tipi di pagina diversi, il processo può richiedere da 30 minuti a diverse ore.

Critical CSS per Tipo di Pagina vs per URL

LiteSpeed Cache genera il Critical CSS per “tipo di pagina”, non per ogni singolo URL. Questo significa che tutte le pagine di tipo “post” condividono lo stesso CSS critico, tutte le pagine di tipo “prodotto” condividono il proprio, e così via.

Questo approccio è efficiente in termini di risorse: non devi generare CSS critico per migliaia di pagine. Tuttavia, può essere impreciso se pagine dello stesso tipo hanno layout molto diversi. Ad esempio, se alcuni post hanno un layout a sidebar e altri sono full-width, il CSS critico generato per un tipo potrebbe non essere ottimale per tutti.

Per gestire questo caso, puoi generare Critical CSS per URL specifici. Vai nella libreria media o nell’editor della pagina e cerca l’opzione per rigenerare il Critical CSS per quella specifica pagina. LiteSpeed Cache userà il CSS critico specifico per quell’URL quando disponibile, altrimenti quello generico per tipo di pagina.

Risolvere il FOUC (Flash of Unstyled Content)

Il problema più comune con il Critical CSS è il FOUC: un breve momento in cui la pagina appare senza stili (o con stili parziali) prima che i CSS completi vengano caricati. Questo accade quando il CSS critico non copre tutti gli stili visibili sopra il fold.

Per risolvere il FOUC:

Configurazione Critical CSS e Prefetch in LiteSpeed Cache

Unique Critical CSS (UCSS)

LiteSpeed Cache offre anche la funzionalità UCSS (Unique CSS), che va oltre il Critical CSS. Mentre il Critical CSS estrae solo il CSS necessario per il rendering above the fold, l’UCSS estrae TUTTO il CSS utilizzato dalla pagina, eliminando le regole non utilizzate.

Un sito WordPress tipico carica molte regole CSS che non vengono mai utilizzate sulla pagina corrente: stili per widget non presenti, stili per tipi di contenuto diversi, stili per plugin non attivi sulla pagina. L’UCSS elimina tutto il “CSS morto”, riducendo significativamente la dimensione dei fogli di stile.

Per attivare l’UCSS, vai su LiteSpeed Cache > Page Optimization > CSS Settings e imposta Generate UCSS su “On”. L’UCSS viene generato tramite QUIC.cloud, come il Critical CSS.

Attenzione: l’UCSS può causare problemi più frequenti rispetto al Critical CSS, perché rimuove CSS che potrebbe essere necessario per elementi caricati dinamicamente (tramite AJAX o JavaScript). Se noti stili mancanti dopo l’attivazione dell’UCSS, aggiungi i selettori CSS problematici alla lista delle esclusioni.

Prefetch: Anticipare le Richieste

Il Prefetch è una tecnica che permette al browser di iniziare a scaricare risorse prima che siano effettivamente necessarie. Esistono diversi tipi di prefetch, ciascuno con un diverso livello di aggressività:

DNS Prefetch: risolve il DNS di un dominio esterno in anticipo. È la forma più leggera di prefetch e non ha effetti collaterali negativi. È particolarmente utile per domini che ospitano risorse esterne (CDN, font Google, analytics, widget social).

Per configurare il DNS Prefetch, vai su LiteSpeed Cache > Page Optimization > Tuning > DNS Prefetch e inserisci i domini da pre-risolvere, uno per riga:

//fonts.googleapis.com
//fonts.gstatic.com
//www.google-analytics.com
//cdn.jsdelivr.net
//www.googletagmanager.com

Preconnect: come il DNS Prefetch, ma stabilisce anche la connessione TCP e completa l’handshake TLS. È più aggressivo ma offre un beneficio maggiore perché quando la risorsa è effettivamente necessaria, la connessione è già pronta.

Inserisci i domini da preconnettere nel campo DNS Prefetch Control con il prefisso appropriato. LiteSpeed Cache genererà i tag <link rel="preconnect"> corrispondenti.

Prefetch risorse: indica al browser di scaricare risorse specifiche in background durante i momenti di inattività. È utile per risorse che saranno necessarie nella prossima pagina visitata dall’utente.

Instant Click (Prefetch delle Pagine)

LiteSpeed Cache include una funzionalità chiamata “Instant Click” (o Page Prefetch) che anticipa il caricamento delle pagine che l’utente potrebbe visitare. Quando l’utente passa il mouse sopra un link, LiteSpeed Cache inizia a pre-caricare quella pagina in background. Se l’utente clicca effettivamente sul link, la pagina è già (parzialmente o completamente) caricata, dando l’impressione di un caricamento istantaneo.

Per attivare questa funzionalità, vai su LiteSpeed Cache > Page Optimization > General > Instant Click e imposta su “On”.

Attenzione: Instant Click aumenta il consumo di banda e il carico sul server, perché vengono pre-caricate pagine che l’utente potrebbe non visitare mai. Su siti con molto traffico o con risorse server limitate, considera di disabilitare questa funzionalità o di limitarla a specifici tipi di link.

Impostazioni Prefetch e DNS in LiteSpeed Cache

Preload: Risorse Critiche

A differenza del Prefetch (che è un suggerimento a bassa priorità), il Preload è un’istruzione ad alta priorità che dice al browser: “scarica questa risorsa immediatamente, ne avrai bisogno presto”.

Il Preload è ideale per:

In LiteSpeed Cache, puoi specificare le risorse da preload in Page Optimization > Tuning. Inserisci gli URL completi delle risorse, specificando il tipo (font, image, style, script).

Viewport Images: Preload Automatico

LiteSpeed Cache ha una funzionalità intelligente che identifica automaticamente le immagini nel viewport e le prepone nel caricamento. Questa funzionalità, combinata con il Lazy Loading delle immagini fuori dal viewport, crea un equilibrio perfetto: le immagini visibili vengono caricate con la massima priorità, mentre quelle non visibili vengono differite.

Per attivare questa funzionalità, cerca l’opzione “Viewport Images” nelle impostazioni Media di Page Optimization. Il plugin analizzerà automaticamente quali immagini si trovano nel viewport e aggiungerà l’attributo fetchpriority="high" e il preload per quelle immagini.

Strategia Integrata: Critical CSS + Prefetch

La combinazione di Critical CSS e Prefetch crea un’esperienza di caricamento ottimale:

  1. Primo millisecondo: il browser riceve l’HTML con il CSS critico inline e inizia il rendering
  2. Simultaneamente: il DNS prefetch e preconnect preparano le connessioni ai domini esterni
  3. Subito dopo: il preload scarica font e immagini critiche con alta priorità
  4. In background: i CSS completi vengono caricati in modo asincrono
  5. Al passaggio del mouse: Instant Click pre-carica la prossima pagina

Il risultato è un sito che sembra caricarsi istantaneamente: il contenuto above the fold appare in meno di un secondo, i font sono pronti senza flash, e la navigazione tra le pagine sembra immediata.

Monitoraggio e Debug

Per verificare che il Critical CSS e il Prefetch funzionino correttamente:

Critical CSS: controlla il codice sorgente della pagina e cerca un blocco <style id="litespeed-optm-css-rules"> nel <head>. Questo è il CSS critico inline.

Prefetch/Preconnect: cerca nel <head> i tag <link rel="dns-prefetch">, <link rel="preconnect"> e <link rel="preload">.

PageSpeed Insights: verifica che il messaggio “Eliminate render-blocking resources” sia risolto o significativamente ridotto dopo l’attivazione del Critical CSS.

Conclusione

Critical CSS e Prefetch sono tecniche avanzate che richiedono una configurazione attenta, ma il loro impatto sulle prestazioni è straordinario. Con LiteSpeed Cache, implementarle è significativamente più semplice rispetto a farlo manualmente, grazie all’automazione offerta da QUIC.cloud. Il risultato è un sito che non solo ottiene punteggi elevati su PageSpeed Insights, ma che offre un’esperienza di navigazione percepibilmente più veloce e fluida per i visitatori.

Serie Completa: LiteSpeed Cache per WordPress

Le tecniche di Critical CSS e Prefetch richiedono esperienza per essere configurate senza introdurre problemi. Affidati al team di G Tech Group: il nostro hosting WordPress con LiteSpeed include configurazione professionale di tutte le ottimizzazioni. Contattaci per un audit gratuito delle prestazioni del tuo sito.

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

#critical css #LCP #LiteSpeed Cache #Page Optimization #Prefetch