Ottimizzazione del front-end in Speed Optimizer
Questo tutorial riguarda i seguenti argomenti:
In questa pagina troverai diverse ottimizzazioni per le parti CSS, JavaScript e HTML del tuo sito web.
Minifica CSS, JS e HTML
Abilitare tutte e tre le funzioni migliorerà notevolmente la velocità di caricamento del tuo sito rimuovendo tutti i caratteri non necessari dai tuoi file CSS e JS e dall’output HTML del tuo sito. Puoi anche usare la funzionalità di esclusione se vuoi escludere specifici script dalla minificazione.
Puoi trovare ogni funzionalità nella rispettiva scheda:
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.
Puoi anche aggiungere un valore precaricato al file css combinato, che indicherà che si tratta di una risorsa importante e assolutamente necessaria per rendere la pagina correttamente. Usa questa opzione se dopo aver combinato i file CSS il tuo sito web non appare correttamente.
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 Rinvio del blocco di visualizzazione JS”.
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.
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 link preconnect nel tag “head” della tua pagina web.
Precaricamento dei font
Con questa impostazione puoi caricare preventivamente i font che stai usando per un rendering più veloce e migliori prestazioni del sito web. Assicurati di pre-caricare solo i font che stai effettivamente usando. Nella maggior parte dei casi puoi trovare quei font quando fai un test di PageSpeed e ti verrà richiesto di pre-caricare quelle risorse. Puoi farlo qui, nel nostro plugin.
Questo aggiungerà il link della precarica nella sezione head del tuo sito per assicurare un caricamento più veloce di quelle risorse. Quando aggiungi fonts alla precarica, assicurati di incollare l’url intero del font.
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.
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 automaticamente.
