![\"Dashboard](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/ls-01-dashboard.png\")
<\/p>\nLa 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.<\/p>\n
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.<\/p>\n
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.<\/p>\n
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.<\/p>\n
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).<\/p>\n
<\/p>\n
LiteSpeed Cache utilizza il servizio QUIC.cloud per generare il Critical CSS. Il processo è completamente automatico:<\/p>\n
<head><\/code> della pagina<\/li>\n<\/ol>\nPer attivare il Critical CSS:<\/p>\n
\n- Vai su LiteSpeed Cache > Page Optimization > CSS Settings<\/strong><\/li>\n
- Imposta Load CSS Asynchronously<\/strong> su “On”<\/li>\n
- Imposta Generate Critical CSS<\/strong> su “On”<\/li>\n
- Vai su LiteSpeed Cache > Toolbox > CSS<\/strong><\/li>\n
- Clicca su Generate Critical CSS<\/strong> per avviare la generazione per tutti i tipi di pagina<\/li>\n<\/ol>\n
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.<\/p>\n
Critical CSS per Tipo di Pagina vs per URL<\/h3>\n
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.<\/p>\n
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.<\/p>\n
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.<\/p>\n
Risolvere il FOUC (Flash of Unstyled Content)<\/h3>\n
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.<\/p>\n
Per risolvere il FOUC:<\/p>\n
\n- Rigenera il Critical CSS<\/strong>: a volte la prima generazione non è perfetta. Rigenerala dalla sezione Toolbox<\/li>\n
- Aggiungi CSS critico manuale<\/strong>: se conosci le regole CSS mancanti, puoi aggiungerle manualmente nel campo “CSS critico aggiuntivo”<\/li>\n
- Escludi CSS specifici<\/strong>: se un foglio di stile è essenziale per il rendering above the fold, escludilo dal caricamento asincrono<\/li>\n
- Verifica il viewport<\/strong>: QUIC.cloud genera il CSS critico per un viewport standard (1920×1080 desktop). Se il tuo sito ha un layout non standard, il risultato potrebbe non essere ottimale<\/li>\n<\/ul>\n
![\"Configurazione](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/ls-03-imgopt.png\")
<\/p>\n
Unique Critical CSS (UCSS)<\/h3>\n
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.<\/p>\n
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.<\/p>\n
Per attivare l’UCSS, vai su LiteSpeed Cache > Page Optimization > CSS Settings<\/strong> e imposta Generate UCSS<\/strong> su “On”. L’UCSS viene generato tramite QUIC.cloud, come il Critical CSS.<\/p>\nAttenzione: 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.<\/p>\n
Prefetch: Anticipare le Richieste<\/h3>\n
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à:<\/p>\n
DNS Prefetch<\/strong>: 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).<\/p>\nPer configurare il DNS Prefetch, vai su LiteSpeed Cache > Page Optimization > Tuning > DNS Prefetch<\/strong> e inserisci i domini da pre-risolvere, uno per riga:<\/p>\n\/\/fonts.googleapis.com\n\/\/fonts.gstatic.com\n\/\/www.google-analytics.com\n\/\/cdn.jsdelivr.net\n\/\/www.googletagmanager.com<\/code><\/pre>\nPreconnect<\/strong>: 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.<\/p>\nInserisci i domini da preconnettere nel campo DNS Prefetch Control<\/strong> con il prefisso appropriato. LiteSpeed Cache genererà i tag <link rel="preconnect"><\/code> corrispondenti.<\/p>\nPrefetch risorse<\/strong>: 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.<\/p>\nInstant Click (Prefetch delle Pagine)<\/h3>\n
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.<\/p>\n
Per attivare questa funzionalità, vai su LiteSpeed Cache > Page Optimization > General > Instant Click<\/strong> e imposta su “On”.<\/p>\nAttenzione: 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.<\/p>\n
![\"Impostazioni](\"https:\/\/gtechgroup.it\/blog\/wp-content\/uploads\/2026\/05\/ls-02-cache.png\")
<\/p>\n
Preload: Risorse Critiche<\/h3>\n
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”.<\/p>\n
Il Preload è ideale per:<\/p>\n
\n- Font web<\/strong>: i font sono spesso le ultime risorse a caricarsi, causando un “flash of invisible text” (FOIT) o “flash of unstyled text” (FOUT). Preload dei font elimina questo problema<\/li>\n
- Immagine hero<\/strong>: l’immagine principale above the fold beneficia enormemente del preload<\/li>\n
- CSS critico<\/strong>: se hai un file CSS essenziale per il rendering, il preload assicura che venga scaricato con la massima priorità<\/li>\n<\/ul>\n
In LiteSpeed Cache, puoi specificare le risorse da preload in Page Optimization > Tuning<\/strong>. Inserisci gli URL completi delle risorse, specificando il tipo (font, image, style, script).<\/p>\nViewport Images: Preload Automatico<\/h3>\n
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.<\/p>\n
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"<\/code> e il preload per quelle immagini.<\/p>\nStrategia Integrata: Critical CSS + Prefetch<\/h3>\n
La combinazione di Critical CSS e Prefetch crea un’esperienza di caricamento ottimale:<\/p>\n
\n- Primo millisecondo<\/strong>: il browser riceve l’HTML con il CSS critico inline e inizia il rendering<\/li>\n
- Simultaneamente<\/strong>: il DNS prefetch e preconnect preparano le connessioni ai domini esterni<\/li>\n
- Subito dopo<\/strong>: il preload scarica font e immagini critiche con alta priorità<\/li>\n
- In background<\/strong>: i CSS completi vengono caricati in modo asincrono<\/li>\n
- Al passaggio del mouse<\/strong>: Instant Click pre-carica la prossima pagina<\/li>\n<\/ol>\n
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.<\/p>\n
Monitoraggio e Debug<\/h3>\n
Per verificare che il Critical CSS e il Prefetch funzionino correttamente:<\/p>\n
Critical CSS<\/strong>: controlla il codice sorgente della pagina e cerca un blocco <style id="litespeed-optm-css-rules"><\/code> nel <head><\/code>. Questo è il CSS critico inline.<\/p>\nPrefetch\/Preconnect<\/strong>: cerca nel <head><\/code> i tag <link rel="dns-prefetch"><\/code>, <link rel="preconnect"><\/code> e <link rel="preload"><\/code>.<\/p>\nPageSpeed Insights<\/strong>: verifica che il messaggio “Eliminate render-blocking resources” sia risolto o significativamente ridotto dopo l’attivazione del Critical CSS.<\/p>\nConclusione<\/h3>\n
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.<\/p>\n
\nSerie Completa: LiteSpeed Cache per WordPress<\/h4>\n\n- Installazione e Configurazione<\/a><\/li>\n
- Configurazione Cache<\/a><\/li>\n
- Ottimizzazione CSS e JavaScript<\/a><\/li>\n
- Ottimizzazione Immagini e WebP<\/a><\/li>\n
- Lazy Load e Placeholder<\/a><\/li>\n
- CDN e QUIC.cloud<\/a><\/li>\n
- LiteSpeed Cache e WooCommerce<\/a><\/li>\n
- → Page Optimization: Critical CSS e Prefetch<\/strong><\/li>\n
- Database e Object Cache<\/a><\/li>\n
- Esclusioni e Cache Crawler<\/a><\/li>\n
- LiteSpeed vs WP Rocket vs W3TC<\/a><\/li>\n
- LiteSpeed vs Apache vs Nginx<\/a><\/li>\n
- ESI e Cache Dinamica<\/a><\/li>\n
- PageSpeed a 100<\/a><\/li>\n
- Troubleshooting<\/a><\/li>\n<\/ul>\n<\/div>\n
Le tecniche di Critical CSS e Prefetch richiedono esperienza per essere configurate senza introdurre problemi. Affidati al team di G Tech Group<\/a>: il nostro hosting WordPress con LiteSpeed<\/a> include configurazione professionale di tutte le ottimizzazioni. Contattaci<\/a> per un audit gratuito delle prestazioni del tuo sito.<\/p>\nMigliora il Tuo Sito WordPress<\/h3>\n
Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:<\/p>\n
\n- Come Installare Elementor su WordPress<\/a><\/li>\n
- Come Installare e Configurare WP Rocket<\/a><\/li>\n
- Come Installare e Configurare SEOPress<\/a><\/li>\n
- Come Installare e Configurare UpdraftPlus<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":0,"featured_media":167025,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"LiteSpeed Cache: Critical CSS e Prefetch | Guida","_seopress_titles_desc":"Come usare Page Optimization di LiteSpeed Cache. Critical CSS, DNS prefetch, preload e Core Web Vitals.","_seopress_robots_index":"","footnotes":""},"categories":[1],"tags":[2741,3365,3486,3491,3492],"class_list":["post-167095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-senza-categoria","tag-critical-css","tag-lcp","tag-litespeed-cache","tag-page-optimization","tag-prefetch"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=167095"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/167095\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/167025"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=167095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=167095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=167095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}