TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come impostare correttamente l’ottimizzazione automatica nel sito WordPress?

20

Autoptimize è uno dei plugin popolari per velocizzare il tuo sito WordPress. Ci sono più di 1 milione di installazioni attive di questo plugin con una valutazione media di 4,7 da 1K+ utenti. Non può essere falso che così tante persone installino e utilizzino questo plugin per ottimizzare il proprio sito. Tuttavia, devi assicurarti la corretta configurazione per far funzionare il plugin per te.

Correlati: i migliori 8 plugin per la memorizzazione nella cache per WordPress.

Cosa fa l’ottimizzazione automatica?

Innanzitutto, devi capire che Autoptimize non è un plug-in di memorizzazione nella cache come WP Rocket o W3 Total Cache. È un plugin di ottimizzazione che aiuta a fare le seguenti cose:

  • Combina tutti i file CSS e JavaScript
  • Minimizza i file compressi e mettili nella cache, minimizza anche l’HTML rimuovendo commenti e spazi
  • Aggiungi l’intestazione della scadenza ai file per servire la versione memorizzata nella cache
  • Sposta CSS nell’intestazione e gli script nel piè di pagina

Successivamente, lo sviluppatore ha incluso anche l’ottimizzazione delle immagini per il caricamento lento e la pubblicazione di immagini WebP per accelerare i file multimediali. Come menzionato nella pagina del plugin su WordPress.org, i server HTTP/2 possono fare automaticamente molte delle cose che fa questo plugin. Pertanto, dovresti testare con prove per assicurarti che il plug-in aggiunga effettivamente valore alla tua installazione.

Come impostare correttamente l’ottimizzazione automatica in WordPress?

Autoptimize è uno dei plugin più semplici da configurare. Dopo aver installato e attivato il plugin, vai al menu "Impostazioni > Ottimizzazione automatica". Ha le opzioni per ottimizzare JS, CSS, HTML e immagini sul tuo sito.

Come impostare correttamente l'ottimizzazione automatica nel sito WordPress?

Impostazioni di ottimizzazione automatica

Impostazioni JS, CSS e HTML

Questa scheda ha più opzioni per separare e ottimizzare i file sul tuo sito. Autoptimize aggregherà e minimizzerà script, CSS e HTML dal tuo tema e plugin. Pertanto, la scelta di alcune delle opzioni potrebbe danneggiare il tuo sito, in particolare se utilizzi un tema basato su jQuery.

Opzioni JavaScript

  • Ottimizza codice JavaScript – Abilita questa opzione per minimizzare i file JavaScript. Questo comprimerà e ridurrà la dimensione dei file di script sul tuo sito.
  • File JS aggregati? – abilita questa opzione per combinare tutti i file JavaScript e il server in modo asincrono durante il caricamento delle pagine sul tuo sito. Questo ti aiuterà a rimuovere il problema dello script di blocco del rendering nello strumento Google PageSpeed ​​Insights. Tuttavia, nella maggior parte dei casi interromperà il tuo sito. L’opzione migliore è abilitare questa opzione e fornire le eccezioni in modo che la pagina possa caricarsi senza interruzioni. Tuttavia, porterà a problemi di blocco del rendering in PageSpeed ​​Insights. Puoi disabilitare questa opzione e abilitare solo "Ottimizza codice JavaScript" per minimizzare solo i file.
  • Aggrega anche JS in linea? – ti consigliamo di disabilitare questa opzione quando il tuo tema o plugin inietta molti script in modo dinamico. L’abilitazione di questo può portare la dimensione della cache a crescere più velocemente e più grande, influenzando così le prestazioni invece di migliorare.

Come impostare correttamente l'ottimizzazione automatica nel sito WordPress?

Opzioni JavaScript

  • Forza JavaScript in ? – la migliore pratica è caricare i file JavaScript nel piè di pagina in modo che vengano caricati alla fine del caricamento della pagina. Ciò rimuoverà efficacemente il blocco del rendering e i problemi relativi agli script mostrati negli strumenti di misurazione della velocità. Tuttavia, se vedi che le opzioni precedenti interrompono il tuo sito, abilitalo per caricare gli script nell’intestazione per verificare se aiuta. Ancora una volta, il caricamento degli script nell’intestazione mostrerà un avviso di blocco del rendering nello strumento PageSpeed ​​Insights.
  • Escludi script da Autoptimize: il plug-in per impostazione predefinita riempie questa casella con jquery.js e altri file importanti sul tuo sito. Se noti che un tema specifico o un file plug-in sta danneggiando il tuo sito, puoi includere il file qui. Ricordati di compilare il percorso relativo del file ignorando il nome a dominio. inoltre, come menzionato nella descrizione, il plugin minimizzerà comunque i file esclusi a meno che non li escludi nella sezione "Varie". Dopo aver testato con temi diversi, ti consigliamo di escludere jquery.js per evitare problemi di interruzione del layout sul tuo sito. A volte, potresti non notare il problema sul sito, tuttavia puoi vedere l’errore della console negli strumenti per sviluppatori di Google Chrome. L’errore mostrerà qualcosa come "$ o jQuery non è definito" o "funzione sconosciuta".
  • Aggiungere il wrapping di prova? – abilita questa opzione quando trovi che il plugin interrompe il tuo sito. Ti consigliamo di disabilitare questa opzione ed escludere il file che interrompe l’eccezione.

Opzioni CSS

Le opzioni CSS sono quasi simili alle opzioni JavaScript.

  • Ottimizzare il codice CSS? – abilita questa opzione per comprimere e minimizzare i file CSS sul tuo sito.

Come impostare correttamente l'ottimizzazione automatica nel sito WordPress?

Opzioni CSS

  • Aggregare i file CSS? – abilita questa opzione per combinare tutti i file CSS sul tuo sito e servire come un singolo file CSS compresso e minimizzato.
  • Aggrega anche CSS in linea: abilitalo per includere CSS in linea per l’aggregazione. Se il tuo tema o plugin inietta molti CSS in linea, questa opzione aumenterà la dimensione della cache.
  • Generare dati: URI per le immagini? – abilita questa opzione in modo che Autoptimize possa incorporare le piccole immagini scaricate dal tuo tema e dai tuoi plugin.
  • Inline e differisci CSS: per abilitare questa opzione, devi prima conoscere il CSS critico per il tuo sito. Sfortunatamente, non è facile ottenere CSS critici poiché ogni modello sul tuo sito necessita di CSS critici separati. Ad esempio, quando hai WooCommerce sul tuo sito, non puoi utilizzare il CSS critico per i post o le pagine per le pagine dei prodotti WooCommerce. A nostro avviso, dovresti disabilitare questa opzione in Autoptimize. Altrimenti, puoi ottenere l’API premium da criticalcss.com e integrarla con Autoptimize nella scheda "Critical CSS".
  • Inline all CSS: abilita questa opzione per inline tutti i CSS invece di collegarli come file. Dopo aver abilitato questa opzione, puoi visualizzare il codice sorgente del tuo sito per vedere l’enorme quantità di CSS. L’inserimento della lattina CSS migliorerà drasticamente la velocità, tuttavia potrebbe influire negativamente se si dispone di file CSS di grandi dimensioni.
  • Escludi CSS da Autoptimize: se trovi che il sito non funziona, puoi escludere i file CSS specifici in questa casella di testo. Simile ai file JavaScript, è necessario fornire il percorso relativo ignorando il nome del dominio. L’ottimizzazione automatica escluderà anche la cache, le icone e altri CSS per impostazione predefinita. Puoi anche fornire le cartelle relative come "wp-content/uploads/" per escludere tutti i file CSS in quella cartella.

Impara WordPress: dai un’occhiata a oltre 400 tutorial gratuiti su WordPress.

Opzioni HTML

Simile a JS e CSS, abilita l’opzione "Ottimizza codice HTML" per comprimere e minimizzare il contenuto HTML sul tuo sito. Puoi anche abilitare o rimuovere i commenti usando "Mantieni commenti HTML?" opzione. Si consiglia di abilitare entrambe queste opzioni.

Come impostare correttamente l'ottimizzazione automatica nel sito WordPress?

Opzioni HTML

Opzioni CDN

Se stai utilizzando CDN che crea l’URL della zona, devi inserire l’URL radice qui nella casella di testo "URL di base CDN". Tuttavia, puoi ignorarlo se non stai utilizzando CDN o Cloudflare o qualsiasi altro CDN che utilizza server dei nomi DNS.

Come impostare correttamente l'ottimizzazione automatica nel sito WordPress?

Opzioni CDN

Informazioni sulla cache

Nella sezione "Informazioni cache" puoi trovare lo stato della memorizzazione nella cache di Autoptimize. Ti mostrerà il percorso, la dimensione e il numero di file memorizzati nella cache.

Come impostare correttamente l'ottimizzazione automatica nel sito WordPress?

Informazioni sulla cache

Opzioni varie

  • Salvare script/CSS aggregati come file statici? – questo dovrebbe essere abilitato per impostazione predefinita poiché i file compressi devono essere serviti come risorsa statica per migliorare la velocità. Come menzionato nella descrizione, se c’è un problema di visualizzazione, disabilita questa opzione e prova che aiuta.

Come impostare correttamente l'ottimizzazione automatica nel sito WordPress?

Opzioni varie

  • Minimizza i file CSS e JS esclusi? – il plugin minimizza automaticamente tutti i file CSS e JS anche se hai escluso file specifici nelle impostazioni CSS o JS. Disabilita questa casella di controllo, se vuoi disabilitare la minimizzazione dei file CSS e JS esclusi.
  • Ottimizzare anche per gli editor/amministratori registrati? – si consiglia di disabilitare questa opzione in modo da poter visualizzare il sito reale senza Autoptimize quando si effettua l’accesso come amministratore o editor. In caso contrario, potresti notare problemi di funzionamento con i plug-in del generatore di pagine.

Salva tutte le modifiche affinché il plugin inizi a funzionare sul tuo sito.

immagini

La scheda "Immagini" offre opzioni per l’ ottimizzazione delle immagini.

  • Ottimizza immagini: questa opzione ti aiuta a utilizzare la CDN globale Shortpixel per ottimizzare e servire le tue immagini in movimento. Shortpixel è una soluzione di compressione delle immagini premium che ti consente di ottimizzare 150 immagini al mese. È possibile visualizzare lo stato corrente e l’utilizzo della quota in questa sezione.

Come impostare correttamente l'ottimizzazione automatica nel sito WordPress?

Ottimizzazione dell’immagine

  • Qualità di ottimizzazione dell’immagine: puoi scegliere una delle opzioni lucida, con perdita di dati o senza perdita di dati. Puoi controllare le differenze tra queste opzioni e testare le tue immagini sulla pagina Shortpixel. Questo ti aiuterà a selezionare l’opzione migliore per le tue esigenze.
  • Caricare WebP nei browser supportati? – scegli questa opzione per fornire immagini WebP per Chrome e altri browser supportati.
  • Immagini a caricamento lento? – il caricamento lento ritarderà le immagini fuori schermo e caricherà solo quando l’utente raggiunge la posizione dell’immagine sul browser. Abilita questa opzione per migliorare la velocità di caricamento e migliorare il punteggio sullo strumento Google PageSpeed ​​Insights.
  • Esclusioni dal caricamento lento: qui puoi inserire i tipi di immagine o i nomi dei file per escluderli dal caricamento lento.

Tieni presente che la maggior parte dei plugin e dei temi viene fornita con il caricamento lento come opzione integrata. Ad esempio, il tema del giornale, il plug-in Jetpack, il plug-in WP Smush e il plug-in SG Optimizer per gli utenti di SiteGround hanno tutti l’opzione di caricamento lento. Ti consigliamo di utilizzare il caricamento lento solo quando non utilizzi opzioni simili su altri plugin o temi sul tuo sito. Allo stesso modo, abilita Shortpixel solo quando non disponi di CDN esterno per la memorizzazione nella cache delle immagini. Inoltre, usalo con cautela poiché ha restrizioni sull’uso.

Extra

L’utilizzo di risorse di terze parti sul sito influirà sulla velocità di caricamento della pagina. La scheda "Extra" offre opzioni aggiuntive per l’ottimizzazione di alcuni contenuti standard di terze parti sul tuo sito.

  • Google Fonts: se stai utilizzando Google Fonts sul tuo sito, hai opzioni per disabilitare o combinare.
  • Rimuovi emoji: WordPress per impostazione predefinita utilizza lo script emoji Unicode per aggiungere simboli emoji sul tuo sito. Se non stai utilizzando gli emoji, ti consigliamo di abilitare questa opzione per disabilitare gli emoji.
  • Rimuovi le stringhe di query dalle risorse statiche: i file CSS e JS utilizzano il controllo della versione e aggiungono un parametro nell’URL utilizzando "ver". Se disponi di un sito Web statico (questo è il caso della maggior parte dei siti WordPress ad eccezione dei forum e dei siti personalizzati), non è necessario utilizzare il controllo delle versioni poiché anche i file sono di natura statica. Quando si aggregano tutti i file CSS e JS, automaticamente il plug-in servirà il file memorizzato nella cache come risorsa statica. Tuttavia, se hai escluso alcuni file o non hai aggregato CSS o JS, abilita questa opzione per rimuovere le versioni dall’URL.

Come impostare correttamente l'ottimizzazione automatica nel sito WordPress?

Opzioni extra

  • Preconnessione a domini di terze parti: la preconnessione consente di connettersi con il server di terze parti prima di inviare effettivamente la richiesta del browser HTTP. puoi aggiungere i domini che desideri preconnettere in questa casella di testo.
  • Precarica richieste specifiche: il precaricamento aiuta a caricare gli URL collegati, aumentando in anticipo la velocità di caricamento della pagina. Inserisci eventuali domini di terze parti come fonts.google.com da precaricare.
  • File JavaScript asincroni: inserisci file JS di terze parti che desideri caricare in modo asincrono utilizzando la proprietà "async".
  • Ottimizza i video di YouTube: questa opzione richiede un plug-in aggiuntivo per caricare lentamente i video di YouTube.

Problemi frequenti con Autoptimize

Se ottimizzato correttamente, il plug-in Autoptimize può migliorare la velocità e il punteggio del tuo sito nello strumento Google PageSpeed ​​Insights. Tuttavia, ha pochi problemi quando lo si utilizza come soluzione per l’ottimizzazione della velocità.

1 Utilizzo con altri plugin

Il problema con Autoptimize è che non si tratta di una memorizzazione nella cache, ma include metà delle opzioni di ottimizzazione offerte da un plug-in di memorizzazione nella cache completo. Devi scegliere plugin come WP Super Cache per lavorare con Autoptimize per evitare opzioni ridondanti. Altrimenti, non hai bisogno di usare Autoptimize quando hai plugin come W3 Total Cache o WP Rocket.

2 integrazioni upselling

Con le poche opzioni disponibili, puoi vedere il plug-in upsell l’integrazione con Shortpixel, WP YouTube Lyte e criticalcss.com. ogni integrazione richiede plug-in o account aggiuntivi che non sono necessari quando si sceglie un plug-in di cache premium come WP Rocket con un buon CDN. Inoltre, c’è un separato "Ottimizza di più!" scheda per la vendita dei prodotti partner.

3 CSS critici

Il CSS critico è il CSS necessario per caricare il contenuto above the fold su una pagina. Il problema è che ogni layout di pagina come post, pagina, prodotto, portfolio, ecc. ha bisogno di CSS critici separati per caricare correttamente above the fold. Questo è un compito complicato per generare CSS critici utilizzando un altro plug-in "Autoptimize criticalcss.com power-up" e una chiave API premium da crticialcss.com.

4 Rompere il layout del sito

Nella maggior parte dei casi il plugin interromperà il layout del tuo sito. Devi controllare e analizzare manualmente per trovare lo script o l’opzione che interrompe il tuo sito ed escluderli dal plug-in Autoptimize.

5 Dimensioni della cache in crescita

L’inlining di CSS e JS farà crescere drasticamente le dimensioni della cache. Abbiamo testato con il popolare tema Giornale per trovare che la dimensione della cache raggiunge il 100% in un solo giorno. Il problema è che il plugin fornisce queste opzioni senza l’eliminazione automatica della cache. Ciò significa che è necessario accedere manualmente alla dashboard ed eliminare la cache ogni volta che le dimensioni aumentano.

Come impostare correttamente l'ottimizzazione automatica nel sito WordPress?

Ottimizza automaticamente la cache piena

Conclusione

A nostro avviso, questo plugin funziona bene quando si dispone di un tema semplice e si utilizzano semplici plugin di memorizzazione nella cache come WP Super Cache. Tuttavia, la maggior parte degli utenti utilizzerà i plug-in standard come Jetpack o W3 Total Cache sul proprio sito. In questo caso, Autoptimize sarà un’opzione ridondante che o non completi il ​​plug-in o disabiliti determinate opzioni.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More