Se la tua pagina Elementor Se la visualizzazione richiede dai 4 agli 8 secondi, ma il server "sembra non essere carico", probabilmente si tratta di un problema lato front-end: troppi elementi, troppi widget, troppi font o una cache che non sta fornendo i dati che ti aspetti.
Il problema
La cosa più frustrante di “Slow Elementor” è che spesso nessuno Un errore visibile. A volte, i segnali sono ancora presenti nella console o nei log.
Esempi di messaggi tipici lato browser (Console/Rete):
Failed to load resource: the server responded with a status of 404 (Not Found) /wp-content/uploads/elementor/css/post-1234.css
[Violation] 'click' handler took 287ms
Uncaught TypeError: Cannot read properties of undefined (reading 'hooks')
Dove appare:
- Front-end Tempi di caricamento lunghi, interazioni lente, CLS/LCP scadenti, immagini che "saltano".
- Editor Elementor Pannello che si blocca, anteprima lenta, salvataggio che continua a caricare all'infinito. (Spesso correlati, ma non sempre.)
- Dopo un aggiornamento : Elementor / tema plugin /cache oppure aggiorna a PHP 8.1 o versioni successive.
- Dopo aver attivato un plugin Componenti aggiuntivi per Elementor: popup, tracciamento, chat, test A/B.
A chi è destinata questa guida: blogger e sviluppatori WordPress Utenti intermedi (WordPress 6.9.4, PHP 8.1+) che utilizzano Elementor (e spesso un tema tipo Hello, Astra o Avada/Divi in altre parti del sito). Alla fine, saprai come isolare la causa (non solo “ottimizzare”), ridurre il CSS/JS inviato e migliorare LCP/INP senza compromettere l'editor.
Riassunto veloce
- Innanzitutto, misurare : LCP/INP/CLS + waterfall di rete, altrimenti si ottimizza in modo casuale.
- Il più frequente : troppi CSS/JS (widget + componenti aggiuntivi), font/icone pesanti, animazioni, script di terze parti.
- Non mandare in tilt l'editor : qualsiasi ottimizzazione deve escludere
is_admin()e contesti Elementor. - Gestire gli errori 404 di Elementor CSS Rigenerazione CSS + permessi + cache + regole Nginx/Apache.
- Cache Cache di pagina + OPcache + HTTP/2/3 + compressione. Senza questi elementi, Elementor non "salverà" nulla.
- confermare : dopo ogni modifica, svuota la cache (plugin + CDN + browser) e riprova in modalità di navigazione privata.
Sintomi
Ecco cosa si può osservare, dalle più comuni alle più specifiche:
- LCP elevato (spesso > 3 s): il contenuto principale arriva in ritardo (eroe, immagine, titolo).
- alto INP : clic e scorrimento "prendono piede", soprattutto sui dispositivi mobili.
- Molte richieste 120–300 query, incluso un cluster
/wp-content/uploads/elementor/css/post-XXXX.css. - Grande CSS : un file CSS Elementor per pagina di dimensioni comprese tra 200 e 800 KB (o più file).
- JavaScript di terze parti : chat, pixel, mappe di calore, elementi incorporati che bloccano la discussione.
- FEDE/FALSO : testo invisibile che poi "spunta" (Google Fonts, Adobe Fonts, ecc.).
- 404 nel CSS generato : il sito si carica senza formattazione per 1-2 secondi, poi la formattazione viene riapplicata (o non viene mai applicata).
- Differenza tra locale e prodotto : veloce in locale, lento in produzione (CDN, cache, minificazione, regole del server).
- Conflitto del plugin della cache Il codice JavaScript minimizzato compromette l'interattività (causando errori nella console), oppure la combinazione di CSS altera il layout.
Tabella diagnostica (rapida)
| sintomo | Probabile causa | Verifica | Soluzione |
|---|---|---|---|
| LCP > 3 secondi sulla pagina Elementor | Image hero è pesante + blocca CSS/JS | Strumenti per sviluppatori > Prestazioni + Rete (a cascata) | Ottimizza l'immagine, ritarda il caricamento di JavaScript di terze parti, riduci il CSS/widget. |
| INP scadente (clic lenti) | JavaScript di terze parti + animazioni + troppi listener | Strumenti per sviluppatori > Prestazioni (Thread principale) | Disabilita i componenti aggiuntivi, limita le animazioni, posticipa gli script |
| Errore 404 su post-XXXX.css | CSS non rigenerato / cache / permessi | Rete > filtro “post-” + stato HTTP | Rigenera il CSS, controlla i permessi, svuota la cache/CDN |
| Editor Elementor lento | Plugin di amministrazione pesanti + memoria PHP | Monitoraggio delle query + Stato del sito + Log PHP | Disabilita i plugin, aumenta la memoria, correggi gli errori |
| Il sito è veloce quando non si è effettuato l'accesso, lento quando si è effettuato l'accesso. | Ignora la cache per gli utenti autentificati | Confronta le intestazioni memorizzate nella cache + TTFB | Ottimizza il back-office, la cache degli oggetti, riduci i hook |
Perché succede
Versione semplice: Elementor costruisce la tua pagina con molti blocchi di costruzione. Ogni blocco può aggiungere CSS, JS, font, icone e animazioni. Alla fine, il browser impiega più tempo su scaricare e soprattutto a Calculer (stile/layout/JS) piuttosto che da visualizzare.
Ecco cosa succede dietro le quinte (WordPress 6.9.4 / PHP 8.1+):
- Indagine patrimoniale Elementor e i suoi componenti aggiuntivi chiamano
wp_enqueue_script()/wp_enqueue_style()Se tutto viene caricato ovunque, si paga il costo per ogni pagina. - CSS generato per pagina Elementor scrive file CSS in
wp-content/uploads/elementor/css/Una cache/CDN configurata in modo errato o autorizzazioni non corrette possono causare errori 404 o rallentamenti nella convalida. - JavaScript sul thread principale Slider, popup, effetti di movimento e widget "di marketing" creano attività lunghe, il che peggiora l'INP.
- Caratteri e icone Font Awesome è completo, Google Fonts offre diverse varianti e non ci sono vantaggi reali. Ho spesso visto 6 famiglie di font più 12 pesi "solo perché" il kit Elementor li include.
- Minimizzazione aggressiva Alcuni plugin combinano/spostano il codice JavaScript e ne alterano l'ordine di esecuzione (causando errori nella console). Risultato: la pagina si "carica", ma risulta lenta o parzialmente inutilizzabile.
Cause elencate dalla più frequente alla più rara:
- Widget/componenti aggiuntivi in eccesso (Elementor Addons, Essential Addons, ecc.) che caricano risorse globali.
- Caratteri/icone incontrollati + animazioni.
- Copertura mal regolata (nessuna cache di pagina, cache ignorata, pulizia incompleta, CDN che serve CSS obsoleti).
- 404/autorizzazioni basato su CSS generato da Elementor.
- Script di terze parti (GTM, pixel, gatto) che dominano il thread principale.
- Tema del conflitto (Avada/Divi/Elementor misti): framework CSS/JS duali.
- Server : OPcache mancante, HTTP/2 disabilitato, TTFB elevato, disco lento, limite della CPU.
Prerequisiti prima di iniziare
Prima di modificare il codice o le impostazioni:
- Sauvegarde (file + database). Su un sito Elementor, ripristinare il CSS può essere complicato.
- Staging Se possibile. Testare in un ambiente di produzione senza una rete di sicurezza è un classico... e spesso si conclude con un file CSS danneggiato nel bel mezzo della giornata.
- versioni : WordPress 6.9.4, PHP 8.1+ (idealmente 8.2/8.3 se il tuo provider di hosting lo supporta), Elementor aggiornato.
- strumenti :
- Monitorare le query (hook diagnostici, script, richieste).
- Controllo dello stato e risoluzione dei problemi (Disattiva i plugin solo per te stesso).
- Strumenti per sviluppatori di Chrome (Prestazioni + Rete) o Firefox equivalente.
Abilita il debug correttamente (temporaneamente) in wp-config.php :
<?php
// wp-config.php (extrait) — WordPress 6.9.4+
// Activez temporairement sur staging, pas sur production publique.
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false); // Évite d’afficher les erreurs aux visiteurs
@ini_set('display_errors', '0');
Codice : Esegui il debug di WordPress (developer.wordpress.org).
Soluzione 1: Caricare meno CSS/JS in Elementor (senza compromettere l'editor)
Quando Elementor è "lento", quasi sempre inizio controllando se vengono caricati script o stili. partout anche se servono solo a una pagina. I componenti aggiuntivi sono i principali responsabili.
Diagnosi
- Apri DevTools > Rete, filtra per CSS puis JS.
- Identifica gli handle ricorrenti (spesso file aggiuntivi) caricati sulle pagine che non utilizzano questi widget.
- In Query Monitor > “Script” / “Stili”, identifica chi sta inserendo cosa nella coda.
Codice AVANT (rotto / anti-pattern)
Esempio concreto (plugin o snippet di codice sviluppati internamente): inseriamo uno script pesante in coda su tutto il sito "per sicurezza".
<?php
// functions.php (AVANT) — Anti-pattern : charge partout, même si la page n’en a pas besoin.
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('mon-addon-elementor', get_stylesheet_directory_uri() . '/assets/mon-addon.css', [], '1.0');
wp_enqueue_script('mon-addon-elementor', get_stylesheet_directory_uri() . '/assets/mon-addon.js', ['jquery'], '1.0', true);
});
Su un sito Elementor, questo "piccolo" script finisce per essere aggiunto ad altri 10. Il browser non riesce a gestirlo, soprattutto su dispositivi mobili.
Codice DOPO (corretto: caricamento condizionale)
Obiettivo: caricare solo sulle pagine che ne hanno bisogno, senza interrompere l'editor/anteprima di Elementor.
<?php
/**
* functions.php (APRÈS)
* Chargement conditionnel d’assets front-end, compatible WordPress 6.9.4+ / PHP 8.1+.
*
* Astuce : adaptez la condition (ID de page, template, shortcode, etc.).
*/
add_action('wp_enqueue_scripts', function () {
// Ne touchez pas l’admin, et évitez de perturber l’éditeur Elementor.
if (is_admin()) {
return;
}
// Si Elementor est actif et que vous êtes dans son mode preview, évitez les optimisations agressives.
// On évite d’appeler des APIs Elementor si le plugin n’est pas chargé.
if (defined('ELEMENTOR_VERSION') && isset($_GET['elementor-preview'])) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
return;
}
// Exemple : ne charger que sur une page précise.
$target_page_id = 123; // Remplacez par votre ID réel.
if (!is_singular() || (int) get_queried_object_id() !== $target_page_id) {
return;
}
$ver = '1.1';
wp_enqueue_style(
'mon-addon-elementor',
get_stylesheet_directory_uri() . '/assets/mon-addon.css',
[],
$ver
);
wp_enqueue_script(
'mon-addon-elementor',
get_stylesheet_directory_uri() . '/assets/mon-addon.js',
[],
$ver,
true
);
}, 20);
Perché è corretto?
- Si riducono il numero di richieste e la quantità di CSS/JS da analizzare.
- Si riduce la competizione sul thread principale (INP).
- Si evitano gli effetti collaterali nell'editor (anteprima di Elementor), una trappola classica: "funziona sul front-end, ma l'editor diventa instabile".
Scenario comune: disabilitazione delle risorse di un plugin aggiuntivo
Molti plugin aggiuntivi offrono un'impostazione "Carica le risorse solo quando utilizzate". Abilitala. Se non è disponibile, a volte puoi disabilitarla caso per caso.
Esempio generico (da adattare: è necessario conoscere l'handle esatto tramite Query Monitor). Attenzione: se si utilizza l'handle errato, non si ottiene alcun vantaggio.
<?php
/**
* Désenregistre un style/script d’add-on Elementor sur les pages qui ne l’utilisent pas.
* À adapter avec les handles réels observés.
*/
add_action('wp_enqueue_scripts', function () {
if (is_admin()) {
return;
}
// Exemple : on garde sur les pages “landing”, on retire ailleurs.
if (is_page_template('templates/landing.php')) {
return;
}
// Handles fictifs : remplacez par ceux vus dans Query Monitor.
wp_dequeue_style('eael-frontend'); // Essential Addons (exemple)
wp_dequeue_script('eael-frontend'); // Essential Addons (exemple)
// Si le plugin ré-enqueue plus tard, utilisez wp_deregister_* ou augmentez la priorité.
}, 999);
Riferimenti ufficiali: wp_enqueue_script (), wp_dequeue_script ().
Soluzione 2: Ottimizzare font, icone e animazioni (la vera causa di LCP/INP)
Sui siti web "bellissimi" realizzati con Elementor, la lentezza spesso dipende meno dal server che dal browser. Due sospetti continuano a ripresentarsi: font et animazioni.
2A. Caratteri: ridurre il numero di varianti + evitare il blocco
Sintomi :
- Testo invisibile al caricamento (FOIT) o cambio di carattere tardivo (FOUT).
- LCP è stato declassato perché il titolo principale è in attesa del font.
Impostazioni di Elementor da verificare (senza codice):
- In Elementor > Impostazioni/Esperienze (a seconda della versione): disattiva i font globali se non ti servono, oppure limitali a 1 o 2 famiglie.
- Evita 6 tipi di grassi (100/200/300/400/600/700) se ne bastano 2.
Ottimizzazione tecnica: forza font-display: swap sui font auto-ospitati (o quando un plugin inietta CSS senza swap).
Codice PRIMA
/* AVANT : font-face sans font-display, risque de FOIT */
@font-face {
font-family: "MaFont";
src: url("/wp-content/uploads/fonts/mafont.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
Codice DOPO
/* APRÈS : swap évite le texte invisible, améliore la perception et parfois le LCP */
@font-face {
font-family: "MaFont";
src: url("/wp-content/uploads/fonts/mafont.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
Se non hai il controllo del codice CSS sorgente, puoi inserire una piccola correzione. Non è una soluzione "pura", ma funzionerà.
<?php
/**
* Injecte un correctif CSS minimal.
* À mettre dans un thème enfant ou un plugin mu-plugin.
*/
add_action('wp_head', function () {
if (is_admin()) {
return;
}
echo '<style>@font-face{font-display:swap;}</style>';
}, 20);
Nota: questa soluzione è volutamente minimale e potrebbe non coprire tutte le dichiarazioni. La riservo ai casi in cui un plugin genera @font-face senza scambio e si necessita di un vantaggio immediato.
Riferimento CSS: font-display (MDN).
2B. Icone: Evita di caricare Font Awesome completo
Mi è capitato spesso di imbattermi in siti realizzati con Elementor che caricano diverse versioni di Font Awesome, oltre a un pacchetto completo, pur utilizzando solo 12 icone.
diagnosi:
- Rete > cerca “fontawesome”, “fa-solid-900.woff2”, ecc.
- Controlla se il tuo tema (Avada, alcuni temi premium) carica già un set di icone.
Approccio consigliato (senza interruzioni):
- Utilizza le icone SVG ogni volta che è possibile (Elementor le supporta). Paghi solo per l'icona che utilizzi, non per l'intero font.
- Evita il caricamento doppio (tema + Elementor + plugin).
Non ti sto dando qui un wp_dequeue_style('font-awesome') “Magico”, perché gli handle variano a seconda di Elementor, del tema e dei componenti aggiuntivi. Usa Query Monitor per identificare l’handle esatto, quindi annulla la registrazione solo se hai verificato che nessun widget lo sta utilizzando.
2C. Animazioni / Effetti di movimento: Limitare per migliorare INP
Sintomi :
- Scorrimento a scatti, ritardo nell'input al clic, input scadente.
- Prestazioni degli Strumenti per sviluppatori: molti "Ricalcola stile" e "Layout".
Nessun codice: in Elementor, evitare:
- Animazioni su ogni sezione (voci, effetti complessi al passaggio del mouse).
- Effetti di movimento su dispositivi mobili (parallasse, tracciamento del mouse).
- Slider ovunque (uno slider = JS + layout + immagini).
Tramite codice (mirato): ridurre le animazioni per gli utenti che preferiscono meno movimento e alleggerire il carico sui dispositivi.
<?php
/**
* Ajoute une classe sur le body pour appliquer des règles CSS "reduced motion".
*/
add_filter('body_class', function (array $classes) {
$classes[] = 'bpcab-reduced-motion';
return $classes;
});
/* Désactive des animations lourdes si l’utilisateur a activé "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
.bpcab-reduced-motion .elementor * {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
Non si tratta di un'ottimizzazione "universale", ma su alcuni siti molto trafficati, il guadagno in termini di INP è immediato, soprattutto su dispositivi mobili.
Soluzione 3: Diagnostica avanzata (Monitoraggio query, cache, riscrittura, server)
Se hai già ridotto le dimensioni delle risorse e il sistema è ancora lento, devi separarle: TTFB (server) vs rendering del browser (front-end). Elementor può essere "lento" per un motivo o per l'altro.
3A. Gestione degli errori 404 nei CSS generati da Elementor
Il caso tipico: /wp-content/uploads/elementor/css/post-1234.css Restituisce un errore 404, quindi Elementor ripiega su un file CSS inline o su un altro file. Visivamente, si vede un'immagine Flash senza stile o con uno stile incompleto.
Passi concreti:
- In Elementor > Strumenti: Rigenera i file e i dati CSS (formulazione simile a seconda della versione).
- Svuota tutte le cache: plugin di cache, cache del server, CDN (Cloudflare), browser.
- Verifica le autorizzazioni:
wp-content/uploadsetwp-content/uploads/elementordeve essere scrivibile da PHP.
- Su Nginx, assicurati di non bloccare
/wp-content/uploads/tramite una regola di “negazione”.
Un errore comune: rigenerare il CSS dimenticandosi che la CDN sta ancora servendo la vecchia cache 404. Il risultato: si è convinti che "non funzioni", anche se il codice sorgente è corretto.
3B. Misurare il TTFB rispetto al rendering (ed evitare falsi positivi)
Ecco cosa faccio sistematicamente:
- Testato in modalità di navigazione privata, disconnesso, senza estensioni.
- Rete DevTools: guarda TTFB del documento HTML.
- Se TTFB > 800–1200 ms, il problema riguarda il server o la cache, non solo Elementor.
Benchmark delle prestazioni di WordPress: Prestazioni (developer.wordpress.org).
3C. Controllare lo stack della cache (cache di pagina + OPcache)
Con WordPress 6.9.4, un sito Elementor senza pagine memorizzate nella cache è quasi sempre lento, anche con un buon hosting.
- Cache della pagina : deve fornire pagine HTML statiche ai visitatori che non hanno effettuato l'accesso.
- OPcache : essenziale lato PHP. Senza OPcache, ogni richiesta ricompila gli script.
Riferimento OPcache: PHP OPcache (php.net).
3D. Identifica gli script che bloccano (INP) utilizzando DevTools
Su una pagina lenta:
- Strumenti per sviluppatori di Chrome > Prestazioni > registra lo scorrimento e il clic.
- Identifica le “attività lunghe” e lo script responsabile.
- Questo script è spesso di terze parti (gestore di tag, chat) o un widget slider.
In questa fase, la migliore ottimizzazione non è "minimizzare ulteriormente". Spesso si tratta di: rimuovere lo script, caricarlo in modo condizionale o ritardarne l'esecuzione.
3E. WordPress: Assicurati che le tue query siano corrette (e compatibili con la cache)
Due errori che vedo spesso:
- Il versioning è assente: il browser conserva una vecchia versione di JS/CSS anche dopo l'aggiornamento.
- Mettersi in coda al gancio sbagliato (o troppo presto), il che interrompe l'ordine.
Esempio: versioning corretto con filemtime() (pratica in tema bambinoNota: su alcuni alloggi NFS, filemtime() Potrebbe essere più lento. Utilizzalo principalmente per i file locali, non per gli URL remoti.
<?php
add_action('wp_enqueue_scripts', function () {
$css_path = get_stylesheet_directory() . '/assets/site.css';
$css_url = get_stylesheet_directory_uri() . '/assets/site.css';
$ver = file_exists($css_path) ? (string) filemtime($css_path) : '1.0';
wp_enqueue_style('site', $css_url, [], $ver);
}, 20);
Codice : Hook wp_enqueue_scripts.
Controlli post-correzione
Dopo aver applicato ciascuna soluzione, verificatela utilizzando un metodo stabile. Altrimenti, rischierete di confondere la cache a caldo/a freddo, la CDN e gli effetti locali.
- Epurazione : cache dei plugin, cache del server, CDN, quindi ricarica forzato (Ctrl+F5) o navigazione in incognito.
- Mesurer :
- TTFB del documento HTML (Rete).
- Numero totale di richieste + peso totale trasferito.
- LCP/INP tramite Lighthouse (tenendo presente che Lighthouse è un laboratorio).
- Controllo Nessun errore nella console e nessun errore 404 su CSS Elementor.
- Confronta i cellulari Un sito web che funziona "bene" su desktop può essere disastroso su dispositivi mobili.
Se utilizzi Elementor con un generatore di temi (Avada) o un altro generatore (Divi 5) su alcune pagine, testa ogni tipo di pagina. Il codice CSS/JS si accumula rapidamente.
Se ciò non funziona ancora
Procedura di risoluzione dei problemi che applico quando non si ottiene il risultato atteso.
Passaggio 1: Isolare il conflitto tra plugin e tema (senza interrompere il funzionamento del sito)
- installare Controllo dello stato e risoluzione dei problemi.
- Attiva la modalità di risoluzione dei problemi per la tua sessione.
- Disattiva tutti i componenti aggiuntivi di Elementor, quindi riattivali uno alla volta.
Stai cercando: il plugin che aggiunge 10 script globali o uno slider "universale".
Passaggio 2: Verifica la presenza di errori PHP e JS
wp-content/debug.log: avvisi/notifiche ripetitivi possono rallentare (e inquinare le risposte).- Console: errori JavaScript che causano tentativi di ripetizione o interrompono l'idratazione di un widget.
Errore comune: un frammento di codice copiato da un vecchio tutorial (precedente a WordPress 6.5) che richiama una funzione troppo presto o nell'hook sbagliato. Risultato: errori silenziosi e un front-end instabile.
Passaggio 3: Verificare che la cache sia effettivamente servita
- Controlla le intestazioni (ad esempio:
cache-control,x-cache(a seconda del fornitore di hosting). - Confronta la connessione con la disconnessione: se la disconnessione è veloce e la connessione è lenta, è normale, ma puoi ridurre i costi dal lato amministrativo (plugin, query).
Passaggio 4: Riscrivere le regole e i permalink
È raro, ma mi è capitato: regole di riscrittura errate causano errori 404 intermittenti sulle risorse (a seconda della CDN/proxy).
- Impostazioni > Permalink > Salva (senza modifiche) per rigenerare.
- Se utilizzi un'installazione personalizzata di Nginx, verifica la posizione dei file statici.
Codice : regole di riscrittura del flusso() (da non richiamare ad ogni caricamento, ma solo all'attivazione di un plugin o di un'azione amministrativa).
Passaggio 5: Server (quando il TTFB è il vero problema)
- OPcache attivo e dimensionato.
- HTTP/2 o HTTP/3 abilitato.
- Nessun disco saturo.
- Cache degli oggetti (Redis/Memcached) se il tuo sito ha molte pagine dinamiche per utenti autenticati.
Errori e trappole comuni
| sintomo | Probabile causa | Soluzione consigliata |
|---|---|---|
| "Ho disattivato uno script, l'editor di Elementor non funziona più." | Annullare l'iscrizione è un termine troppo generico, senza escludere gli utenti di anteprima/amministrazione. | Escludere is_admin() et elementor-preview, test in fase di preparazione |
| “Dopo l'ottimizzazione non cambia nulla” | La cache del browser/CDN non è stata svuotata. | Cancella la cache dei plugin e la CDN, prova in modalità di navigazione privata. |
| CSS danneggiato dopo la minimizzazione | Il plugin di cache combina/sposta i file CSS/JS nell'ordine sbagliato. | Disabilita la funzione "combina", mantieni la minimizzazione semplice, escludi Elementor |
| Errore della console dopo l'ottimizzazione | Script dipendente caricato prima del suo dipendente | Correggere le dipendenze wp_enqueue_script(..., ['jquery']) oppure rimuovi jQuery se non è necessario |
404 in poi post-XXXX.css |
CSS non rigenerato, permessi, CDN che nasconde l'errore 404 | Rigenera CSS + controlla i permessi + svuota la CDN |
| Il codice “non funziona” | Codice incollato nel posto sbagliato / parentesi mancanti / hook errato | Inserisci nel tema enfant o plugin, controlla gli errori PHP, usa un linter |
| Il sito è lento e funziona solo su dispositivi mobili. | Animazioni + immagini + JavaScript di terze parti dominano | Limita le animazioni, ottimizza le immagini, ritarda gli script di terze parti |
Variante / alternativa
Metodo senza codice (consigliato se non si ha familiarità con la programmazione)
- In Elementor: attiva le opzioni di prestazioni suggerite (caricamento ottimizzato delle risorse, se disponibile nella tua versione).
- Disattiva i widget non necessari nei componenti aggiuntivi (molti consentono di "disabilitare" i moduli).
- Laddove possibile, sostituite i cursori e i caroselli con sezioni statiche.
- Riduci il numero di caratteri a 1-2 famiglie e 2-3 pesi.
Metodo più avanzato (sviluppatori): plugin MU per il controllo delle risorse
Se vuoi evitare che un tema/elemento figlio o un plugin di snippet mandi in tilt tutto, crea un plugin MU: verrà caricato all'inizio e non dipende dal tema.
<?php
/**
* Fichier : wp-content/mu-plugins/bpcab-elementor-perf.php
* Contrôle minimal des assets, sans dépendre du thème.
*
* Attention : adaptez les handles. Testez sur staging.
*/
defined('ABSPATH') || exit;
add_action('wp_enqueue_scripts', function () {
if (is_admin()) {
return;
}
// Ne pas perturber l’éditeur Elementor en preview.
if (defined('ELEMENTOR_VERSION') && isset($_GET['elementor-preview'])) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
return;
}
// Exemple : retirer un script tiers sur toutes les pages sauf la page Contact.
if (!is_page('contact')) {
wp_dequeue_script('chat-widget'); // Handle à remplacer par le vrai
}
}, 999);
Riferimento ai plugin MU: Plugin indispensabili (developer.wordpress.org).
Evita questo problema in futuro
- Budget dei widget : imporre un limite per pagina (ad esempio, non più di 2 caroselli, non più di 1 popup, nessuna animazione in ogni sezione).
- Verifica dopo ogni aggiunta Stai installando un componente aggiuntivo per Elementor? Verifica subito se carica le risorse globali.
- Preparate le vostre code Niente script su tutto il sito senza una valida ragione. Questa è la causa principale delle regressioni.
- Evitare i costruttori di miscele L'utilizzo simultaneo di Divi 5, Elementor e Avada spesso comporta la duplicazione dei framework CSS e una cascata di override. Se proprio dovete farlo, segmentate il lavoro per tipologia di pagina e testate ogni segmento.
- Non eliminare i permalink in primo piano Ho già visto frammenti chiamati
flush_rewrite_rules()suinitQuesto rallenta tutto. Fatelo solo in fase di attivazione. - Mantieni PHP aggiornato PHP 8.1 è la versione minima consigliata, ma se il tuo stack supporta la versione 8.2/8.3, spesso otterrai vantaggi in termini di prestazioni e compatibilità (da verificare con i tuoi plugin).
Risorse
- Prestazioni di WordPress (developer.wordpress.org)
- Debug in WordPress (developer.wordpress.org)
- wp_enqueue_script() (developer.wordpress.org)
- Monitoraggio delle query (wordpress.org)
- Controllo dello stato di salute e risoluzione dei problemi (wordpress.org)
- OPcache (php.net)
- Team di ottimizzazione delle prestazioni di WordPress (GitHub)
Domande frequenti
Come faccio a capire se il problema è di Elementor o del mio server?
Verifica il TTFB del documento HTML (rete). Se il TTFB è buono (< ~800 ms) ma il rendering è lento, si tratta principalmente di un problema lato front-end (risorse, JavaScript, font). Se il TTFB è cattivo, inizia la risoluzione dei problemi relativi alla cache/server.
Perché è veloce a livello locale ma lento in produzione?
In ambiente di produzione, spesso si utilizzano CDN, regole di caching, minificazione e talvolta sistemi di protezione delle applicazioni web (WAF) che ne modificano il comportamento. Gli errori 404 di Elementor CSS "nascosti" da una CDN sono molto comuni.
La minimizzazione/combinazione dei file risolve il problema della lentezza?
La minimizzazione può essere d'aiuto. La combinazione è spesso controproducente in HTTP/2/3 e può compromettere l'ordine degli script. Preferisco: ridurre il numero di risorse caricate, quindi minimizzare senza combinare.
Cosa devo fare se l'editor di Elementor rallenta ma il front-end funziona correttamente?
Verifica i plugin attivi nel pannello di amministrazione (SEO, sicurezza, statistiche), l'utilizzo della memoria PHP e gli errori PHP. Query Monitor nel pannello di amministrazione può essere utile. Utilizza Health Check per isolare il sistema interessato senza impattare sui visitatori.
Dovrei disabilitare jQuery per velocizzare il tutto?
Non come fine a se stesso. La rimozione di jQuery può compromettere il funzionamento dei componenti aggiuntivi. D'altra parte, evita di aggiungere script dipendenti da jQuery se puoi farlo con JavaScript puro.
Perché ricevo errori 404 su /uploads/elementor/css/ ?
Spesso: CSS non rigenerato, permessi di scrittura, cache/CDN che serve uno stato vecchio o regole del server che bloccano l'accesso a uploadsRigenera, elimina e poi testa direttamente l'URL CSS.
Qual è il modo più redditizio per guadagnare con un sito web creato con Elementor?
Nella mia esperienza: 1) ridurre i componenti aggiuntivi/widget e le relative risorse globali, 2) controllare font/icone, 3) ritardare/rimuovere gli script di terze parti. È qui che LCP/INP eccelle davvero.
Divi 5/Avada può rendere Elementor più lento?
Sì, se caricate i loro framework sulle stesse pagine (doppio CSS, doppie icone, doppio JS). Segmento: pagine Elementor con un tema leggero, pagine Avada/Divi separate e test delle query.
Quale plugin di caching dovrei scegliere?
La scelta dipende dall'hosting. L'importante è avere una cache di pagina affidabile, una pulizia adeguata (Elementor + CDN) ed evitare ottimizzazioni JS/CSS eccessivamente aggressive che possano alterare l'ordine delle pagine.