Inizio
/
Tutorial WordPress
/
Tutorial sul Plugin SiteGround Optimizer
/
Ottimizzazione del front-end in SiteGround Optimizer

Ottimizzazione del front-end in SiteGround Optimizer

Minifica HTML, CSS e JS e combina Google Fonts

Per trovare queste funzionalità, vai nella Bacheca di WordPress > SiteGround Optimizer > Ottimizzazione del front-end. 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 JavaScript

Combinare i file CSS e JavaScript 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 front-end 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 funzionalità 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 front-end del tuo sito. Se noti alcun problema con questa funzionalità, usa l’opzione “Escludi dal caricamento asincrono dei file JS”.

Attiva la Ottimizzazione dei font web

Con la Ottimizzazione dei font web, 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 caricati in anticipo in modo che i browser richiedano il meno tempo possibile per metterli in cache e visualizzarli.

Per attivare l’ottimizzazione, vai alla Bacheca di WordPress > SiteGround Optimizer > Ottimizzazione del front-end. Scorri in basso fino alla sezione Ottimizzazione dei font web e clicca sull’interruttore.

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 abilitata l’Ottimizzazione dei font web. 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 aggiungerà 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, farai 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.

Menu dei Tutorial

Condividi questo articolo