Cosa fa OLObuild da solo
Alcune ottimizzazioni sono sempre attive e non hanno interruttori.
- Solo il necessario. Fogli di stile e script di OLObuild si caricano solo nelle pagine fatte con OLObuild, e gli script di una tile, per esempio quelli della mappa, solo se la tile è nella pagina.
- Caratteri dal tuo server. I Google Fonts usati dal sito vengono scaricati una volta e serviti dal sito, senza chiamate a Google a ogni visita. Se lo scaricamento non riesce, la pagina usa i caratteri di sistema.
- Contenuto a richiesta. Dalla quarta tile in poi il contenuto viene montato quando sta per entrare nello schermo. Le prime 3 tile, i form, le mappe e i menu sono sempre pronti.
- Immagini pigre. Le immagini si caricano quando stanno per diventare visibili.
- Video leggeri. La tile Video, con Lazy Load (Facade) attivo come di serie, mostra la copertina e carica il lettore di YouTube o Vimeo solo al clic.
- Animazioni senza peso. Le animazioni d'ingresso partono quando l'elemento entra nello schermo. Chi ha chiesto al sistema operativo di ridurre il movimento vede gli elementi subito, senza animazione.
Le impostazioni Performance & Cache
Si trovano in Sistema › Configurazione › Prestazioni & Servizi › Performance & Cache, e dalla scheda Performance della bacheca.
- Defer JavaScript — Gli script di OLObuild si scaricano senza fermare la pagina e partono quando è pronta. (di serie: Attiva)
- Cache CSS su file statici — Mette lo stile di ogni template in un file che il browser conserva, invece di riscriverlo nella pagina. (di serie: Attiva)
- Minifica CSS — Toglie spazi e commenti dai fogli di stile di OLObuild. (di serie: Attiva)
- Preload font custom — Avvia subito il download dei caratteri di testo e titoli, al peso usato: il testo compare con il suo carattere, senza cambiare aspetto dopo un attimo. (di serie: Attiva)
- fetchpriority hero image — La prima immagine della prima sezione si carica subito e con priorità alta. Le altre restano pigre. (di serie: Attiva)
- Lazy load video self-hosted — I video caricati sul sito, in riproduzione automatica e senza audio, partono quando entrano nello schermo. (di serie: Attiva)
- Full-page cache — Salva le pagine già pronte e le serve ai visitatori senza ricostruirle. Leggi il capitolo 3 prima di attivarla. (di serie: Spenta)
- UIkit subset — Riduce il foglio di stile UIkit alle parti che le pagine usano davvero. Impara visitando le pagine e si corregge da solo. (di serie: Spenta)
- CSS per-tile — Carica lo stile di alcune famiglie di tile solo dove servono, come mappe, gallerie e menu. (di serie: Spenta)
- Cache browser per i media (.htaccess) — Dice al browser di conservare a lungo immagini, caratteri, CSS e JS. Funziona sui server Apache e LiteSpeed. (di serie: Spenta)
- DNS prefetch & preconnect automatici — Prepara in anticipo la connessione a YouTube e Vimeo nelle pagine che li contengono. I domini scritti in Domini custom escono sempre. (di serie: Attiva)
- Pulizia head — Toglie script e stili di WordPress che molti siti non usano: jQuery Migrate, emoji, stili dei blocchi e del tema classico. (di serie: Spenta)
- Critical CSS — Scrive nella pagina lo stile delle prime sezioni (2, in Sezioni above-the-fold) e carica il resto subito dopo. Si rifà dopo i giorni di Durata cache e quando salvi il template. Rigenera critical CSS lo ricostruisce subito. (di serie: Spenta)
Attenzione. Rimuovi Block CSS toglie anche gli stili globali di WordPress. Con un tema a blocchi, dopo averlo attivato controlla che il sito abbia ancora i suoi colori e i suoi caratteri.
In cima alla scheda, Stato cache conta le pagine in full-page cache, i file di stile e le pagine con Critical CSS, e dice quando la cache è stata svuotata l'ultima volta. Svuota tutto li cancella tutti insieme, con il subset UIkit e i dati temporanei di OLObuild.
La full-page cache
La full-page cache salva ogni pagina già pronta e la serve ai visitatori senza ricostruirla. È la regolazione che conta di più su un sito con molte visite.
- Non vale per chi ha fatto l'accesso, per carrello e cassa di WooCommerce, per le sitemap e per gli indirizzi con parametri diversi da quelli di tracciamento.
- Tiene versioni separate per computer e telefono, e per lingua.
- Ogni pagina resta in cache per 8 ore.
- Si svuota da sola quando salvi nel builder o in WordPress, cambi menu, tema, header o footer attivi, colori e caratteri globali, regole di assegnazione o impostazioni Performance, e a ogni aggiornamento di OLObuild.
Attenzione. Non attivarla se il sito usa già un plugin di cache come LiteSpeed Cache o WP Rocket. In quel caso OLObuild non la installa, e accanto all'interruttore la scheda dice perché.
Cache esterne e pulizia
OLObuild non comanda le cache esterne. Se il sito usa LiteSpeed Cache, WP Rocket, la cache dell'hosting o Cloudflare, svuotala tu dopo aver cambiato colori, caratteri, header o footer: altrimenti i visitatori possono vedere ancora la versione precedente.
Sistema › Strumenti › Cache di OLObuild › Cancella file e dati cancella i file di stile generati, la full-page cache e i dati temporanei di OLObuild, che si ricreano alla visita successiva. Serve quando una pagina mostra uno stile vecchio. Fa lo stesso di Svuota tutto nella scheda Performance.
Una pagina veloce, in pratica
- Immagini alla misura giusta. Carica immagini larghe al massimo quanto lo spazio che occupano, 2000 pixel per una foto a tutta larghezza, in formato WebP o JPEG compresso.
- La prima immagine subito. Con fetchpriority hero image attivo, come di serie, la prima immagine della prima sezione parte da sola con priorità alta. Se la foto principale sta più in basso, nella sua tile Immagine apri Avanzate › SEO & Accessibilità e scegli Eager in Caricamento immagine e High in Fetch Priority.
- Pochi caratteri. Bastano 2 famiglie, con 3 o 4 pesi in tutto. Ogni peso in più è un file da scaricare.
- Video con copertina. Usa la tile Video con Lazy Load (Facade) attivo, invece di incollare il codice di YouTube in una tile HTML.
- Effetti dove servono. Sfondi animati, parallasse e video di sfondo pesano più di una foto. Usali nei punti in cui raccontano qualcosa.
Misurare
Misura la pagina con PageSpeed Insights di Google o con Lighthouse, negli strumenti per sviluppatori di Chrome. Fai la prova in una finestra anonima: da collegato vedi la pagina senza full-page cache, più lenta di quella dei visitatori.
Ripeti la misura 2 o 3 volte e guarda soprattutto il caricamento dell'elemento più grande (LCP) e la stabilità del layout (CLS). Il punteggio cambia da una prova all'altra, e da un telefono all'altro.