Sito bello Senza Compromessi.
Ciao mondo! Sì, questo è un sito WordPress. Sì, ha un LCP di 1.1s. No, non è una pagina vuota.
Non servono 2MB di JavaScript sul sito per stupire l’utente con immagini belle…
Basta usare la GPU, invece del thread principale.
LCP: 1.1 Secondi.
Tre livelli d’immagine, movimento a ciclo continuo, effetto parallasse.
Zero JavaScript. 60 FPS costanti.
FCP Sub-Second
Il contenuto utile arriva prima che l’utente sbatta le palpebre.
Semantic Core
Schema.org nativo generato nel grafo ontologico.
Glassmorphism
Effetti calcolati dalla scheda video, non dalla CPU.
Le Prestazioni di un Sito si Misurano.
Questa pagina WordPress ottiene 100/100 PageSpeed mobile anche se è ricca di immagini ed effetti speciali, come il toggle dark/light nel menu che permette all’utente una visualizzazione più rilassante senza cambiare le impostazioni del cellulare. Puoi verificare il punteggio sul tool ufficiale di Google o nella sezione Audit che lo incorpora: WAA Audit misura qualsiasi sito gratuitamente in circa 30 secondi.
Come abbiamo fatto nel dettaglio
Le 5 regole d’oro che applichiamo senza compromessi sotto il cofano.
A. Sostituire JavaScript con le ultime novità CSS
La maggior parte dei siti installa centinaia di KB di librerie JavaScript per fare slide, modali, menu e animazioni. Noi usiamo CSS nativo avanzato.
B. Gestione chirurgica delle risorse (zero risorse bloccanti)
- Critical CSS inlined: il CSS necessario alla prima schermata è iniettato direttamente nell’HTML.
- Iniezione asincrona: il resto di CSS/JS caricato in background con
deferoasync. - Il browser non deve fermare il rendering per scaricare file.
C. Gestione aggressiva dell’LCP e delle immagini
- AVIF / WebP: riduzione del peso fino all’80% rispetto a PNG/JPG.
- Direct Preload:
<link rel="preload" as="image" fetchpriority="high">per l’immagine principale. - width/height fissi: prevengono il CLS (la pagina non “salta”).
D. Server & caching ad altissime prestazioni
- LiteSpeed + LiteSpeed Cache: HTML statico generato lato server, zero query MySQL per visita.
- HTTP/3 + Cloudflare: latenza minima nella connessione iniziale.
Perché non l’avevi mai visto prima?
La risposta è amara ma semplice: il mercato del web standard vive di scorciatoie e convenzioni.
Il modello delle agenzie tradizionali
Scrivere CSS custom ed eliminare plugin richiede competenze verticali e centinaia di ore. Un’agenzia media preferisce un tema pronto con 30 plugin, sacrificando le prestazioni.
Il mito di “WordPress è lento”
WordPress è un semplice generatore di contenuti backend. È il modo in cui i web designer assemblano temi con page builder sovrapposti che lo rende pesante.
Poca cultura sulle API moderne
Negli ultimi 3-4 anni CSS e browser si sono evoluti tantissimo. Molti sviluppatori continuano a usare librerie JS di 10 anni fa perché non conoscono le novità native.
Dove e come imparare questo approccio
Non serve un corso sul “plugin di velocizzazione X”: servono i fondamentali (SCUOLA)
Concetti chiave da studiare
- Core Web Vitals & WPO: ciclo di rendering (Parse → CSSOM → Render Tree → Layout → Paint → Composite).
- CSS moderno: Grid, Flexbox, Scroll Snap, Container Queries, accelerazione GPU (
transform,opacity,will-change). - Temi WordPress custom (FSE/Hybrid): PHP puro, Gutenberg Native Blocks o framework minimali come Sage.
Risorse gratuite di riferimento
- web.dev (Google): la verità su Optimize LCP, Main-Thread Work, Core Web Vitals.
- MDN Web Docs: API native del browser invece di librerie JS.
- Kevin Powell: CSS moderno senza JS.
- Addy Osmani: guide su JS/WPO da Google Chrome.
- Smashing Magazine & CSS-Tricks: articoli verticali su performance ed estetica.
Domande frequenti
Le risposte rapide ai dubbi più comuni sul nostro approccio.
Davvero si può fare a meno di JavaScript?
Per la maggior parte delle interazioni UI sì: slider con scroll-snap, modali con dialog o :target, menu con checkbox/hover, animazioni con transition e @keyframes. Il JS resta utile solo per logica applicativa complessa.
WordPress è davvero lento?
No. WordPress in sé è un generatore di contenuti backend leggero. La lentezza arriva da temi con page builder, plugin ridondanti e asset non ottimizzati. Un tema custom con LiteSpeed Cache può raggiungere 100/100.
Serve un server dedicato per questi risultati?
No. Bastano un hosting con LiteSpeed (o Nginx + FastCGI Cache) e Cloudflare in front. Il collo di bottiglia è quasi sempre il frontend, non l’hardware.
Quanto tempo richiede un sito costruito così?
Più di un tema pronto: si parla di centinaia di ore tra design, CSS custom, ottimizzazione immagini e test. È un investimento che si ripaga in SEO, conversione e manutenzione ridotta.
Posso migrare un sito esistente a questo approccio?
Sì, ma va fatto per gradi: prima immagini (AVIF/WebP + width/height), poi critical CSS e defer, poi eventualmente la rimozione dei page builder. Ogni step è misurabile con PageSpeed Insights.
Il 100/100 su mobile è realistico su ogni sito?
Dipende dal contenuto: siti vetrina/blog con poche immagini sì. E-commerce con centinaia di thumbnail richiedono lazy-loading aggressivo e formati AVIF, ma 90+ è quasi sempre raggiungibile.