Come creare la pagina Divi più veloce: ottimizzare i contenuti Divi per la velocità

Con il nuovo aggiornamento delle prestazioni di Divi arrivano un sacco di possibilità per aumentare i punteggi di velocità della pagina. Oggi condividiamo alcuni suggerimenti e trucchi pratici che dovresti tenere a mente quando crei una pagina Divi da zero. Queste sono raccomandazioni, non regole scolpite nella pietra. Dipenderà sempre dagli obiettivi principali della tua pagina. A volte, ti ritroverai a sacrificare un po' di velocità per il design e viceversa. Riteniamo che si tratti di trovare un sano equilibrio tra entrambi, ma utilizzando i suggerimenti di seguito, puoi sicuramente migliorare la velocità della tua pagina Divi.

Immergiamoci in esso!

Iscriviti al nostro canale Youtube

1. Ottimizzazione del contenuto above the fold

Una delle nuove funzionalità per le prestazioni che sono state aggiunte a Divi si chiama Critical CSS. In breve, Critical CSS in Divi rileva automaticamente ciò che il CSS deve essere caricato immediatamente, denominato CSS above the fold, e ritarda il caricamento del resto del CSS della pagina. Questo da solo aiuta già a migliorare automaticamente la velocità della pagina, senza che tu debba fare uno sforzo. Ma se vuoi fare il possibile, puoi decidere di ottimizzare anche i contenuti above the fold.

Concetto di eroe a 4 moduli

Può essere allettante condividere quante più informazioni possibili con i tuoi visitatori, a prima vista, ma è esattamente quello che dovresti evitare in un eroe. Più il tuo contenuto è diretto, sia nello stile che nella visualizzazione, meglio è. Ecco perché limitare il numero di moduli che usi above the fold ti aiuterà ad aumentare la velocità della tua pagina Divi. Preferibilmente, useresti:

• Titolo
• Paragrafo
• Pulsante

Tuttavia, in molti casi, ti consigliamo di includere anche un'immagine di qualche tipo. Se lo fai, cerca di evitare di usare l'immagine come sfondo e usala invece come modulo. Usarlo come modulo all'interno di un particolare contenitore con una larghezza massima ti aiuterà a utilizzare dimensioni dell'immagine più piccole, il che a sua volta ti aiuta a velocizzare il tuo sito. Questo ci porta al concetto di eroe a 4 moduli:

• Titolo
• Paragrafo
• Pulsante
• Immagine ottimizzata

Usa l'eroe a schermo intero o dividi il contenuto in più sezioni per un rilevamento automatico preciso

C'è un motivo per cui i design degli eroi a schermo intero sono popolari. Non solo rendono il tuo design più traspirante, ma aiutano anche con i CSS critici. Se scegli di optare per un eroe a schermo intero, stai decidendo che è l'unica cosa che appare above the fold, indipendentemente dalle dimensioni dello schermo che stai utilizzando. Per creare un eroe a schermo intero in Divi, ricorda di assegnare un'altezza minima di "100vh" all'interno delle impostazioni della sezione. Assegnando un'altezza minima; stai assicurandoti che la sezione copra l'intera altezza del browser. Puoi posizionare qualsiasi cosa all'interno della sezione per far parte del tuo design eroe da quel momento in poi. In alternativa, puoi anche utilizzare l'intestazione a schermo intero integrata di Divi.

In alternativa, se non vuoi seguire il percorso dell'eroe a schermo intero, puoi decidere di dividere ciò che viene above the fold in più sezioni. Divi rileverà automaticamente ciò che appare above the fold a livello di sezione. Ciò significa che se stai costruendo una sezione grande che appare in parte above the fold e in parte below the fold, verranno caricati il ​​CSS dell'intera sezione e il CSS degli elementi in quella sezione. Dividere le sezioni in più sezioni ti aiuterà a evitare che troppi elementi vengano trattati come se fossero above the fold.

Evita le animazioni in Hero per evitare ritardi

È bene evitare qualsiasi cosa above the fold che possa causare un ritardo nel tempo di caricamento. Questo include le animazioni. Questo, tuttavia, non significa che dovresti evitarlo del tutto. Puoi facilmente utilizzare le animazioni lungo la pagina e/o limitare le animazioni che usi all'interno del tuo eroe. Trovare un buon equilibrio è fondamentale.

Modifica dei contenuti above the fold su tablet e dispositivi mobili

L'ultima cosa importante da menzionare riguardo a Critical CSS è la modifica del tuo design su schermi di dimensioni più piccole. È importante assicurarsi che i contenuti above the fold siano ottimizzati per schermi di diverse dimensioni. Si tratta di modificare il design in modo da poter raggiungere un ottimo punteggio di velocità della pagina sia su desktop che su dispositivi mobili. Puoi, ad esempio, nascondere l'intera immagine dell'eroe sui dispositivi mobili per aumentare la velocità della tua pagina su schermi di dimensioni più piccole.

2. Utilizzo di stili intelligenti

Come funzionano gli stili intelligenti

Con il nuovo aggiornamento delle prestazioni, Divi è stato ottimizzato riducendo gli stili duplicati. Per attivare stili intelligenti, dovrai immergerti nel mondo dei Divi Presets. Le preimpostazioni fondamentalmente ti consentono di condividere stili con elementi diversi senza dover effettivamente assegnare un blocco di stili univoco a ciascun elemento che ha lo stesso stile.

Utilizzo di 1 o 2 preset per sezioni e righe

Sezioni e righe sono due tipi di elementi che spesso sembrano essere dimenticati quando si parla di preset. Proprio come i moduli, puoi assegnare i preset a sezioni e righe. Questo non solo ti aiuterà a limitare il CSS generato, ma ti aiuterà anche a mantenere la coerenza del design a livello di pagina. Supponiamo, ad esempio, di voler utilizzare costantemente un'imbottitura superiore e inferiore di 100 pixel per ogni sezione, per creare un ritmo verticale, non c'è motivo per cui non dovresti beneficiare dei preset Divi nel processo. Crea un nuovo predefinito per una sezione che utilizza questi valori di riempimento e assegnalo a ogni nuova sezione che aggiungi o rendilo il predefinito di sezione predefinito.

Puoi anche impostare una riga preimpostata con una larghezza e una larghezza massima di tua scelta e che sia lo standard. Gioca con questi preset e scopri come non solo semplificano il tuo processo di progettazione, ma ti aiutano anche a migliorare i punteggi di velocità della pagina.

Usa i preset per i moduli

Ovviamente, ti consigliamo di utilizzare stili intelligenti anche per i moduli. Nell'esempio seguente, noterai che l'aspetto generale di ciascun modulo è simile. La creazione di un predefinito per il Modulo Blurb ti aiuterà a mantenere piccolo il file CSS della tua pagina.

Sovrascrivere un preset o no?

Ma non dovresti creare un nuovo preset per ogni piccola modifica. Nell'esempio sopra, ad esempio, puoi notare che gli ultimi due moduli Blurb hanno un colore del testo diverso. Puoi creare un nuovo preset per questo, duplicando quello vecchio, oppure puoi decidere di sovrascrivere il preset. In questo caso, ha più senso sovrascrivere semplicemente il colore del testo (che porta a una riga in più di codice CSS) anziché creare un nuovo preset e aggiungere più righe di codice CSS.

3. Abbinare le scelte di design con la velocità

Limita la selezione dei moduli che desideri utilizzare (moduli dinamici)

Quando selezioni i moduli che desideri utilizzare per la pagina che stai costruendo, è bene tenere presente che questi verranno caricati dinamicamente. Ciò significa che se non utilizzi un determinato modulo, non avrà alcun effetto sulla velocità della tua pagina. Ti consigliamo di considerare ogni modulo che aggiungi e vedere se ne "vale la pena". Tuttavia, in uno scenario ideale, ti assicurerai che il resto dei tuoi contenuti Divi sia sufficientemente ottimizzato in modo da non dover sacrificare i moduli.

Trova l'LCP del tuo design e ottimizzalo

Un'altra cosa che può aiutarti a migliorare la velocità della tua pagina è trovare il tuo Paintful più grande e ottimizzarlo. In breve, il tuo LCP è l'elemento più grande della tua pagina che aiuta a determinare il tuo punteggio di velocità della pagina. Puoi leggere di più su questo qui. Assicurandoti che l'LCP del tuo design sia ottimizzato, puoi ridurre drasticamente il tempo di caricamento della tua pagina.

Scelta di uno stile di animazione (funzioni dinamiche)

Proprio come abbiamo moduli dinamici, abbiamo anche funzionalità dinamiche. Ciò significa che se non utilizzi affatto una determinata funzionalità sulla tua pagina, questa non verrà caricata, il che porta a una maggiore velocità della pagina. Per questo motivo particolare, è importante assicurarsi di scegliere uno stile di animazione e attenersi ad esso. Puoi, ad esempio, scegliere di utilizzare gli effetti di movimento e concentrare tutte le animazioni sulla tua pagina attorno a quella funzione. Oppure puoi scegliere le normali impostazioni di animazione e seguire quel percorso. Ciò non solo ti consente di creare una pagina leggera, ma consente anche la prevedibilità, che sul fronte dell'esperienza utente di solito è una buona cosa.

Associazione dei caratteri: attenersi a 1 o 2 famiglie di caratteri

Ti consigliamo inoltre di attenerti a un massimo di 2 famiglie di caratteri per le pagine che progetti. In questo modo, stai limitando il numero di caratteri che devono essere caricati prima di entrare nella pagina.

4. Ottimizzazione manuale

Contenuto reattivo: ridimensiona le dimensioni delle immagini su dispositivi mobili

Un'altra cosa che ti aiuterà a migliorare i punteggi di velocità della pagina mobile è l'utilizzo di contenuti reattivi in ​​Divi. Questa è probabilmente una delle funzionalità che può aiutarti a migliorare al meglio i tuoi punteggi su schermi di dimensioni più piccole. Anche se questo richiede molto più sforzo, ne vale sicuramente la pena. Riduci le dimensioni/dimensioni della tua immagine tramite il software di modifica delle immagini e usa quelle immagini più piccole su dispositivi mobili, al contrario di quelle che mostri sul desktop. Ciò ridurrà drasticamente le dimensioni dei file di immagine e porterà a una maggiore velocità della pagina sui dispositivi mobili.

Tipi di file e compressione

Assicurati di utilizzare anche JPEG il più possibile, poiché tendono ad avere una dimensione del file inferiore. PNG di solito ha senso solo se hai bisogno di trasparenza nell'immagine per elevare il design, ma anche in questo caso puoi provare a trovare un'alternativa per far funzionare il design. Evita anche tipi di file più pesanti, come GIF. Per quanto riguarda il video, di solito non è possibile, soprattutto se vuoi che venga riprodotto in sottofondo. E, naturalmente, assicurati di comprimere i file che utilizzi, anche prima di caricarli nella libreria multimediale di WordPress.

Dietro le quinte

Tutti i suggerimenti di cui sopra possono aiutarti a migliorare la velocità della pagina, ma è, tuttavia, importante ricordare che devi occuparti delle migliori pratiche di ottimizzazione del sito Web al di fuori di Divi. Puoi trovare maggiori informazioni tecniche andando in questa guida definitiva.

Creare pagine veloci con Divi: più facile che mai

Possiamo facilmente giungere alla conclusione che esiste una grande sovrapposizione tra le caratteristiche delle prestazioni di Divi e il modo in cui gestisci la creazione del tuo sito web. Divi si occupa del lato parziale, quindi puoi concentrarti sulle migliori pratiche di frontend necessarie per riunire tutto in un sito web bello e veloce. Se ci sono delle best practice che hanno funzionato bene per te, sentiti libero di condividerle nella sezione commenti qui sotto per continuare la conversazione!