«Elementor è lento» è una delle affermazioni più dure a morire nel mondo WordPress. Non è del tutto sbagliata e ciononostante è fuorviante. Un page builder produce più markup del codice scritto a mano — qualcosa costa. Ma ciò che nella pratica rende davvero lente le pagine Elementor sono quasi sempre altre cose, e sono cose che si possono sistemare.
I tre valori di cui si parla
Da qualche anno Google misura tre indicatori che insieme formano i Core Web Vitals.
LCP (Largest Contentful Paint) — quando è caricato l'elemento visibile più grande. Di solito l'immagine hero o il titolo grande. Obiettivo: sotto i 2,5 secondi.
INP (Interaction to Next Paint) — quanto rapidamente la pagina reagisce a un'azione. Ha sostituito il precedente valore FID. Obiettivo: sotto i 200 millisecondi.
CLS (Cumulative Layout Shift) — quanto il contenuto sobbalza durante il caricamento. Lo conoscono tutti: si sta per toccare un link e all'ultimo momento si intrufola un'immagine. Obiettivo: sotto 0,1.
Importante per inquadrare la cosa: Google valuta sui dati di campo di chi visita davvero, non sul risultato del test di una singola apertura. Un buon valore nello strumento di test a fronte di dati di campo scadenti significa che chi visita il sito vive un'esperienza diversa dalla sua.
LCP: quasi sempre l'immagine hero
In nove progetti Elementor su dieci che guardo, il motivo di un LCP scadente è la grande immagine in cima.
Le dimensioni. Una foto presa direttamente dalla fotocamera arriva volentieri a 4000 pixel di larghezza e a diversi megabyte. Viene mostrata a 1600 pixel. La ridimensioni prima del caricamento alla misura realmente necessaria.
Il formato. WebP al posto di JPEG, a parità di qualità, fa risparmiare tipicamente un terzo. Esistono plugin che se ne occupano automaticamente.
Niente lazy loading per l'immagine hero. Sembra un controsenso, ma è decisivo: il caricamento ritardato è pensato per le immagini che diventano visibili solo scorrendo. Se lo applica all'immagine in cima, ritarda proprio l'elemento che determina l'LCP. In Elementor lo disattiva nel widget immagine.
Immagini di sfondo con criterio. Un'immagine come sfondo di container viene caricata più tardi di un vero widget immagine. Per l'elemento più in alto della pagina il widget immagine è la scelta migliore.
CLS: riservare lo spazio
Gli spostamenti di layout nascono quando un elemento reclama in un secondo momento uno spazio che non era stato previsto. Tre cause coprono quasi tutto.
Immagini senza misure fisse. Il browser scopre solo al caricamento quanto sarà alta l'immagine e spinge giù tutto ciò che sta sotto. Dia alle immagini larghezza e altezza oppure una proporzione fissa.
Caratteri caricati in ritardo. Il testo compare prima in un carattere sostitutivo e sobbalza al cambio. I caratteri ospitati in proprio con una strategia di caricamento adeguata risolvono la cosa — e sul piano della protezione dei dati sono comunque la scelta migliore, si veda Elementor a norma GDPR.
Barre che compaiono dall'alto. Un banner dei cookie o una fascia informativa che spinge il contenuto verso il basso è un colpo garantito al CLS. La sovrapponga al contenuto invece di anteporla.
INP: meno è meglio
Il valore di reattività soffre per l'eccesso di JavaScript. Nelle pagine Elementor i soliti sospetti sono: slider e caroselli, contatori animati, effetti di movimento durante lo scorrimento, video incorporati e script esterni come finestre di chat o tracciamento.
La misura più efficace è anche la più impopolare: ne usi di meno. Uno slider con cinque immagini, di cui quasi nessuno guarda oltre la prima, costa tempo di caricamento senza contropartita.
Per i video incorporati vale questo: non incorporarli direttamente, ma mostrare prima un'anteprima e caricare il video al clic. Elementor offre a questo scopo un'opzione nel widget video.
Che cosa porta con sé Elementor stesso
In Elementor → Impostazioni → Funzionalità trova diversi interruttori che aiutano in modo percepibile:
Il caricamento ottimizzato del CSS carica solo gli stili che servono sulla pagina, invece di un grande file unico. Il caricamento migliorato degli asset e l'opzione per tralasciare le librerie di icone inutilizzate vanno nella stessa direzione.
Attivi queste opzioni una alla volta e poi verifichi la pagina. In casi rari manca uno stile che arrivava da un plugin di terze parti.
Come fare pulizia oltre a questo è spiegato in Togliere la zavorra a Elementor.
Che cosa cambia Pro: niente
Perché non nasca un'aspettativa sbagliata — la versione Pro non rende il suo sito più veloce. Porta funzioni, non velocità. Chi grazie a Pro impiega più widget tende semmai a rallentare.
Elementor Pro: ha senso per Theme Builder, moduli e popup — non per i tempi di caricamento. Anche questo fa parte di un inquadramento onesto. Scopri Elementor Pro
L'ordine con cui procedo
Prima le immagini, poi il caching, poi i caratteri, poi gli script. In quest'ordine, perché è ordinato per resa decrescente. Sulla maggior parte dei siti bastano i primi due passaggi per portare il valore dal rosso al verde.
Misuri prima e dopo, altrimenti ottimizza alla cieca. E misuri su mobile — lì i valori sono peggiori ed è lì che si decide la valutazione.
Altre leve le ho raccolte in Ottimizzare le prestazioni di Elementor. Se preferisce passarle in rassegna una volta sul suo sito, lo facciamo nel mio corso Elementor.
Tag