Inizio
/
Tutorial WordPress
/
Ottimizzazioni Frontend in SG Optimizer

Ottimizzazioni Frontend in SG Optimizer

Minifica HTML, CSS e JS e combina Google Fonts

Per trovare queste funzionalità, vai nella tua Dashboard di WordPress > SG Optimizer > Ottimizzazione Frontend. Abilitando tutte queste funzionalità potrai migliorare la velocità di caricamento del tuo sito rimuovendo tutti i caratteri non necessari dai tuoi file CSS e JS così come l’output HTML per il suo sito. Il plugin combinerà anche tutte le richieste per i Google Fonts in una sola. Questo ridurrà la dimensione delle pagine del sito e migliorerà il tempo di caricamento delle pagine.

Puoi anche escludere file specifici dalle diverse ottimizzazioni se necessario.

Combina file CSS e JS

Combinare i file CSS e JS ridurrà le richieste fatte verso il tuo sito e quindi migliorerà la velocità di caricamento. Il plugin manterrà gli script e styles nella loro posizione originale dopo la combinazione per avere la migliore compatibilità con altri plugin.

Combinare i file JavaScript potrebbe causare problemi con gli script che richiedono un certo ordine di esecuzione. Questo è il motivo per il quale suggeriamo di controllare il frontend del tuo sito dopo aver attivato questa ottimizzazione.

Rinvia il blocco di visualizzazione JS

Questa opzione ti permette di rinviare i file JS che ritardano il rendering del tuo sito sulle visite iniziali. La fuzionalità Rinvia il blocco di visualizzazione JS istruirà il browser di caricare e mostrare risorse che dovrebbero essere immediatamente sui tuoi siti.

Rinviare il blocco di visualizzazione JavaScript potrebbe causare problemi con gli script che richiedono un certo ordine di esecuzione. Una volta attivata questa funzionalità, è raccomandato di controllare attentamente il frontend del tuo sito. Se noti alcun problema con questa funzionalità, usa l’opzione “

Attiva la Web Fonts Optimization

Con la Web Fonts Optimization, cambiamo il modo predefinito di caricare Google fonts per risparmiare richieste HTTP. Addizionalmente, tutti gli altri font che il tuo sito WordPress utilizza saranno correttamente precaricati in modo che i browsers richiedano il tempo più basso possibile per metterli in cache e visualizzarli.

Per attivare l’ottimizzazione, collegati alla tua dashboard WordPress > SG Optimizer > Ottimizzazioni Frontend. Scorri in basso fino alla sezione Web Fonts Optimization e cliccae sull’interruttore per attivarla.

Quando la abiliti, aggiungiamo il cosiddetto link “preconnect” a fonts.gstatic.com in modo da fare il lookup DNS, la negoziazione TLS, e la TCP hanshake, che risulteranno in un download più veloce dei font quando li richiedi. Quando l’ottimizzazione viene attivata e funziona correttamente sarai in grado di vedere il seguente link nel tag “head” della tua pagina web. Puoi trovarlo andando sul tuo sito, click con il tasto destro del mouse e selezionando View Page Source.

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Fonts Preloading

L’opzione Fonts Preloading apparirà una volta abilitato Web Fonts Optimization. Con esso, puoi precaricare i fonts che stai usando per un rendering più rapido e una migliore performance. Assicurati di precaricare solo i font che stai effettivamente usando. Nella maggior parte dei casi, puoi trovare questi font quando fai un test PageSpeed e sarai invitato a precaricare quegli asset. Puoi farlo qui.

Questo aggiungera il preload link nella sezione head del tuo sito per assicurare un caricamento più veloce di quelle risorse. Quando aggiungi fonts al preloading, assicurati di incollare l’url intero del font. Se tutto è correttamente configurato, i link nella tab Fonts Preloading dovrebbero essere visibili nel tag head come nell’esempio qui sotto.

<link rel="preload" as="font" href="https://www.website.com/wp-content/plugins

Se i font non sono usati ci sarà una notifica in giallo nella console entro pochi secondi per avvertirti che il font è stato precaricato ma non usato entro un paio di secondi. Questo significa che il font non è usato e non c’è bisogno di precaricarlo.

Cambiare le proprietà font-display

In aggiunta a questo, se stai usando l’ottimizzazione  Combine CSS, cambieremo la proprietà font-display con swap, in modo da eliminare il blocco di rendering per quei font. Se il font-family non ha una specifica proprietà font-display, la aggiungeremo.

La combinazione di queste ottimizzazioni diminuirù il tempo di render-blocking e aumenterà la velocità di caricamento del tuo sito.

Rimuovi le stringhe di ricerca dalle risorse statiche

Il funzionamento standard del processo di caricamento script di WordPress è quello di aggiungere allo script stesso la sua versione. Rimuovendo il parametro della versione migliorerà la possibilità di caching delle tue pagina sia tramite CDN che quella del browser dei tuoi visitatori. Considera che rimuovere la query string non bloccherà il caricamento di questo risorse qualora apportassi delle  modifiche, pertanto non te ne dovrai preoccupare.

Considera che rimuovere la query string non bloccherà il caricamento di questo risorse qualora apportassi delle  modifiche, pertanto non te ne dovrai preoccupare.

Disabilita Emojis

Di default, WordPress, caricherà alcuni script per identificare e generare automaticamente gli emoji nei tuoi contenuti. Disabilitando questa opzione, farà si che questi script non vengano più caricati e risparmierai così tempo prezioso. Considera che la maggior parte dei browser moderni convertiranno comunque i simboli come 😉 con uno smiley.

 

Condividi questo articolo