La migrazione da Divi 4 a Divi 5 comporta un cambiamento significativo nell'architettura del page builder di Elegant Themes e richiede quindi una fase di verifica puntuale del sito dopo l'aggiornamento.
Vorrei quindi condividere alcuni aspetti di una migrazione che ho implementato su un ambiente di staging creato tramite WP Toolkit, utilizzando il Migrator di Divi 5 e la modalità di backward compatibility prevista per i contenuti che non sono ancora completamente compatibili con la nuova versione.
La migrazione è stata complessivamente fluida, ma durante il controllo del front-end è emerso un problema nel modulo Blog: le immagini della griglia venivano mostrate con un ritaglio diverso da quello del sito originale e in formato JPG anziché WebP.
Il problema delle immagini tagliate dopo la migrazione
Sul sito originale in produzione, basato su Divi 4, le immagini della griglia del blog venivano mostrate in formato WebP e con una dimensione di 400×250 px.
Dopo la migrazione a Divi 5, effettuata sul sito di staging, le stesse immagini venivano invece mostrate a 400×284 px e in formato JPG.
C’erano quindi due problemi allo stesso tempo:
- le immagini avevano un ritaglio diverso da quello previsto;
- il sito non stava utilizzando le versioni WebP già disponibili.
Perché Divi 5 non gestiva correttamente la visualizzazione delle immagini
Per prima cosa ho analizzato il codice HTML generato dal sito e ho verificato quali file fossero effettivamente presenti sul server.
Nell'elemento relativo all'immagine compariva, tra gli altri, questo codice che ha svelato il problema:
<img src=".../planimetrie-srmonitor.jpg"
srcset=".../planimetrie-srmonitor.jpg 479w, .../planimetrie-srmonitor-400x284.jpg 480w"
class="sp-no-webp lazyloaded"
...>Da questi dati sono emersi alcuni elementi utili per capire il problema.
1. ShortPixel non stava servendo il WebP
Nel markup compariva la classe sp-no-webp, mentre l'immagine utilizzata era un file JPG.
Ho quindi verificato i file presenti sul server tramite File Manager. Il file WebP corrispondente alla versione 400×284 non era presente, mentre erano già disponibili i file WebP 400×250 creati in precedenza.
Questo spiegava perché ShortPixel non poteva servire la versione WebP della nuova immagine richiesta dal sito.
2. Divi 5 utilizzava una dimensione diversa per la miniatura
La seconda verifica ha riguardato la dimensione della miniatura utilizzata per la griglia.
Nel sito migrato risultava ancora registrata la dimensione et-pb-portfolio-image con proporzioni 400×284 px. Questa era la dimensione utilizzata da WordPress per generare la relativa versione dell'immagine.
Il problema, quindi, non era semplicemente un'immagine visualizzata con dimensioni diverse tramite CSS: il sito disponeva effettivamente di una miniatura 400×284 e questa veniva utilizzata nel markup della pagina.
3. Perché questo influiva anche sul WebP
WordPress utilizza le dimensioni delle immagini disponibili per costruire il srcset, cioè l'insieme delle versioni dell'immagine che il browser può scegliere in base allo spazio disponibile e alla risoluzione dello schermo. Le informazioni sulle miniature generate vengono conservate nei metadati dell'immagine.
Nel mio caso, dopo la migrazione, tra le versioni disponibili c'era quindi anche quella 400×284.
Il problema era che per questa versione esisteva il JPG, ma non il corrispondente WebP. ShortPixel non poteva quindi servire il WebP e il browser utilizzava il JPG.
Per tornare alla dimensione corretta quindi serviva riallineare la dimensione della miniatura a quella prevista dal sito originale, cioè 400×250, e rigenerare le miniature.
Prima di iniziare: alcune verifiche
Se anche tu hai riscontrato problemi nel dimensionamento delle immagini e/o del formato, ti consiglio di fare alcune verifiche prima di adottare la soluzione che propongo. Questi controlli sono importanti perché la procedura descritta dipende dalla situazione concreta del sito.
In particolare:
- controlla che et-pb-portfolio-image sia registrata con dimensioni 400×284 px;
- verifica che sul server siano già presenti i file WebP 400×250 che si vogliono riutilizzare;
- controlla che il relativo JPG 400×250 esista già oppure possa essere generato con la rigenerazione delle miniature;
- verifica dal browser che il front-end stia effettivamente utilizzando la versione 400×284.
La soluzione senza ottimizzare nuovamente le immagini
In breve, la soluzione che ho adottato è stata riportare la dimensione della miniatura a 400×250, rigenerare le miniature e fare in modo che ShortPixel potesse nuovamente utilizzare i WebP già presenti sul server. Vediamo come fare concretamente:
1. Registrare la dimensione corretta nel Tema Child
Nel file functions.php del tema child ho registrato la dimensione et-pb-portfolio-image come 400×250 px, mantenendo il ritaglio forzato:
// Sovrascrittura dimensione miniatura per griglia Divi
function pac_override_divi_image_sizes() {
add_image_size( 'et-pb-portfolio-image', 400, 250, true );
}
add_action( 'after_setup_theme', 'pac_override_divi_image_sizes', 11 );Questa modifica riguarda la registrazione della dimensione e non modifica automaticamente le miniature già presenti nella Libreria Media.
Per questo è necessario il passaggio successivo.
2. Disattivare temporaneamente ShortPixel
Prima di rigenerare le miniature ho disattivato temporaneamente ShortPixel.
Lo scopo è evitare che la rigenerazione delle immagini venga accompagnata da una nuova elaborazione tramite il plugin.
In questo modo è possibile creare prima la nuova miniatura JPG 400×250 e poi verificare che il WebP corrispondente, già presente sul server, possa essere utilizzato.
3. Rigenerare le miniature
A questo punto ho utilizzato Regenerate Thumbnails per rigenerare le miniature in base alle dimensioni attualmente registrate in WordPress.
La rigenerazione ha prodotto la nuova versione JPG 400×250 e ha aggiornato le informazioni associate alle immagini, permettendo a WordPress di considerare anche questa nuova dimensione tra quelle disponibili per il srcset.
Non è stato quindi necessario ricreare da zero le immagini WebP già disponibili.
4. Riattivare ShortPixel
Prima di riattivare ShortPixel ho verificato che il file 400x250.webp fosse effettivamente presente sul server e che fosse nella stessa cartella della relativa immagine originale.
ShortPixel può infatti utilizzare WebP già presenti sul server, purché siano configurate le relative opzioni di delivery e i file rispettino la posizione e la nomenclatura previste dal plugin.
Dopo aver riattivato ShortPixel, il sito ha quindi potuto tornare a servire la versione WebP 400×250 già disponibile, senza doverla generare nuovamente.
5. Svuotare le cache
Infine ho svuotato:
- la cache statica CSS di Divi;
- la cache di Autoptimize;
- la cache del server, se presente.
Dopo aver cancellato le cache ho verificato nuovamente il front-end per assicurarmi che le immagini venissero mostrate con il ritaglio corretto e che il browser ricevesse la versione WebP.
Alcune novità di Divi 5 che ho trovato utili
Il problema delle immagini è stato un piccolo inconveniente incontrato durante la migrazione, ma il passaggio a Divi 5 ha permesso anche di apprezzare alcune interessanti novità del builder.
1. Un backend più reattivo
Nel mio caso, uno dei cambiamenti più evidenti riguarda la velocità dell'interfaccia di editing.
Il Visual Builder di Divi 5 è basato sulla nuova architettura del builder e, durante il lavoro, l'ho trovato sensibilmente più fluido rispetto a Divi 4, soprattutto nell'apertura dei pannelli e nell'applicazione delle modifiche.
2. Module Groups e layout più flessibili
Divi 4 utilizzava una struttura gerarchica basata su Sezioni, Righe, Colonne e Moduli.
Divi 5 introduce invece i Module Groups, che permettono di raggruppare più moduli all'interno di un contenitore.
Questo rende più semplice creare alcune composizioni che in Divi 4 richiedevano strutture più articolate o l'utilizzo di CSS personalizzato.
3. Più controllo sulle immagini
Un'altra novità interessante riguarda la gestione delle immagini.
Divi 5 mette a disposizione controlli specifici per Aspect Ratio, Image Framing e Image Presets. Queste funzioni permettono di controllare il rapporto tra larghezza e altezza dell'elemento, il modo in cui l'immagine si adatta al contenitore e alcune impostazioni grafiche riutilizzabili.
È una distinzione utile anche per capire il problema descritto in questo articolo: la dimensione della miniatura presente sul server e il modo in cui l'immagine viene visualizzata nella pagina non sono necessariamente la stessa cosa.
La migrazione da Divi 4 a Divi 5 non è complessa ma richiede, come è giusto che sia, una fase di verifica puntuale, anche quando il processo di migrazione non presenta problemi evidenti.
Nel caso delle immagini, ad esempio, è necessario verificare non solo l'aspetto visivo della pagina, ma anche quali versioni delle immagini vengono effettivamente utilizzate e quali file sono disponibili sul server.
Vuoi migrare il tuo sito WordPress a Divi 5? Contattami per una consulenza.