Autoptimize è un plugin gratuito per l’ottimizzazione di WordPress. Oltre all’ottimizzazione di HTML, CSS e JavaScript, Autoptimize offre anche funzionalità di ottimizzazione mirate ad altri aspetti dei moderni siti WordPress.

In questo articolo, vi diremo quali sono le impostazioni ottimali del plugin Autoptimize per migliorare le prestazioni e la velocità delle pagine del vostro sito WordPress.

Perché Autoptimize?

Prima di immergerci nella scoperta delle impostazioni ottimali di Autoptimize, esaminiamo rapidamente i tre motivi per cui Autoptimize è un ottimo plugin di ottimizzazione.

  1. La versione gratuita di Autoptimize offre una serie completa di funzionalità per ottimizzare il vostro sito WordPress.
  2. Autoptimize è esclusivamente un plugin di ottimizzazione e non gestisce una cache di pagine HTML. Questo significa che è compatibile con tutti gli host web – anche quelli con configurazioni di cache di pagina personalizzate come Kinsta.

Le impostazioni JS, CSS e HTML di Autoptimize

HTML, CSS e JavaScript sono il meglio di Autoptimize. Come succede per altri plugin di ottimizzazione, scavare nella vasta gamma di funzionalità e impostazioni di Autoptimize può essere un po’ scoraggiante. Per semplificare le cose, abbiamo fatto un elenco delle principali impostazioni di Autoptimize utili a migliorare le prestazioni del vostro sito.

Opzioni JavaScript

Ottimizzazione JavaScript in Autoptimize.
Ottimizzazione JavaScript in Autoptimize.

Optimize JavaScript Code

Consigliamo di attivare questa opzione. Quando “Optimize JavaScript Code” è abilitato, Autoptimize minimizza i file JavaScript.

Aggregate JS Files

L’opzione “Aggregate JS-files” di Autoptimize combinerà tutti i vostri file JavaScript in un unico file. In passato, la combinazione di file JS e CSS era un passaggio fondamentale nell’ottimizzazione di WordPress. Noi di Kinsta utilizziamo i moderni server HTTP/2, che supportano il download parallelo e il multiplexing. Questo significa che la combinazione dei file non è più importante come una volta, perché HTTP/2 permette di scaricare più file contemporaneamente. Detto questo, l’aggregazione di file CSS e JS comporterà comunque un aumento di velocità per alcuni tipi di siti WordPress, per cui consigliamo di testare la velocità delle pagine attivando e disattivando questa opzione.

Also Aggregate Inline JS

L’opzione “Also aggregate inline JS” estrae il JS in linea nel vostro codice HTML e lo combina con il file JS ottimizzato di Autoptimize. Dato che questa opzione può causare un rapido aumento delle dimensioni della cache di Autoptimize, consigliamo di mantenere questa opzione disabilitata a meno che non abbiate un motivo specifico per abilitarla.

Force JavaScript in <head>

Nella maggior parte dei casi, non consigliamo di forzare il caricamento di file JavaScript nell’elemento HTML <head> del vostro sito. Forzare JS perché carichi in anticipo può generare elementi che bloccano il rendering, che possono rallentare la velocità della pagina. Se avete file JavaScript che devono essere caricati nell’elemento <head>, vi raccomandiamo di escludere tali script da Autoptimize.

Exclude Scripts from Autoptimize

Questa opzione consente di escludere dall’aggregazione specifiche directory e file JavaScript. Di default, Autoptimize esclude i seguenti script.

  • wp-include/js/dist/
  • wp-include/js/tinymce/
  • js/jquery/jquery.js

Si noti che l’aggiunta di uno script da escludere, di default ha effetto solo sull’aggregazione. I file JavaScript esclusi saranno comunque minificati, a meno che “minify excluded CSS and JS files” non sia deselezionato nella sezione “Misc Options”.

Add Try-Catch Wrapping

Abilitando l’opzione “Add try-catch wrapping”, il codice JavaScript verrà racchiuso in blocchi try-catch. Questa opzione è utile per i problemi di debug causati dalla minificazione e dall’aggregazione JS. Se il vostro sito funziona solo con “add try-catch wrapping” abilitato, vi consigliamo di contattare uno sviluppatore per esaminare i vostri file JavaScript e identificare quello che causa il problema, perché un uso eccessivo dei blocchi try-catch può ridurre le prestazioni di JS.

Opzioni CSS

Ottimizzazione CSS in Autoptimize
Ottimizzazione CSS in Autoptimize.

Optimize CSS Code

Consigliamo di attivare questa opzione. Quando “Optimize CSS Code” è abilitato, Autoptimize minimizza i file CSS.

Aggregate CSS Files

L’opzione “Aggregate CSS Files” di Autoptimize combinerà tutti i vostri file CSS in un unico file. Come abbiamo accennato in precedenza, questa funzione potrebbe non giovare ai siti che supportano HTTP/2. Raccomandiamo di testare questa opzione sul vostro sito per determinare se c’è un impatto positivo sulla page speed.

Also Aggregate Inline CSS

Questa opzione sposta i CSS in linea sul file CSS di Autoptimize. Anche se lo spostamento dei CSS in linea in un file CSS memorizzabile nella cache del browser può ridurre le dimensioni della pagina, nella maggior parte dei casi è consigliabile di lasciare questa opzione disabilitata.

Generate Data: URIs for Images

Se l’opzione è attiva, Autoptimize effettuarà la codifica base64 su piccole immagini di sfondo e le incorporerà nei CSS. Consigliamo di testare questa opzione per valutare l’impatto sulla velocità della pagina. Anche se la codifica delle immagini in formato base64 riduce il numero di richieste HTTP, i file base64 sono tipicamente più grandi del 20-30% rispetto alle loro controparti binarie.

Inline and Defer CSS

L’integrazione di CSS critici può portare ad un significativo aumento di velocità per alcuni siti. L’idea qui è quella di inserire in linea gli stili richiesti per gli elementi che sono “above the fold”. In pratica, i CSS in linea di solito sono puntati su elementi come elementi strutturali, famiglie e dimensioni globali dei caratteri e stili di navigazione.

Inserendo in linea questi elementi chiave, il più grande file CSS completo può essere caricato in un secondo momento senza influire sull’aspetto della pagina. Anche se è possibile estrarre manualmente gli stili critici, consigliamo di utilizzare uno strumento come questo per generare gli stili come punto di partenza

Generare CSS critici.
Generare CSS critici.

Dopo aver generato il CSS critico, copiatelo e incollatelo nelle impostazioni di Autoptimize.

Inline and defer CSS in Autoptimize
Inline and defer CSS in Autoptimize.

Il passaggio successivo è quello di testare l’esperienza di frontend del vostro sito. Se notate qualche strano lampo di contenuto non stilizzato (flashes of unstyled content – FOUC), dovrete probabilmente identificare quegli elementi non stilizzati e aggiungere gli stili corrispondenti in Autoptimize per l’inserimento in linea.

Autoptimize offre un “power-up” che genera automaticamente i CSS critici per le vostre pagine WordPress. Dalla nostra esperienza, questa funzionalità può occasionalmente rallentare il vostro sito perché utilizza chiamate API esterne per generare i CSS critici. Pertanto, la generazione iniziale dei CSS critici dipende dalla reattività di un server esterno. Nella maggior parte dei casi, il metodo descritto sopra, che non richiede alcuna chiamata API esterna, è una soluzione più pulita.

Tutti i CSS in linea

Per la maggior parte dei siti, non consigliamo di inserire in linea tutti i CSS in quanto questo può aumentare drasticamente le dimensioni delle pagine. Inoltre, l’inlining di tutti i CSS rende impossibile per il browser web mettere in cache i CSS.

Exclude CSS from Autoptimize

Di default, Autoptimize esclude dall’aggregazione le seguenti directory e file CSS. Se volete evitare che Autoptimize aggreghi i vostri file CSS, potete aggiungerli a questo elenco. Simile all’esclusione di JavaScript, il comportamento predefinito di questa funzionalità non impedisce ai file CSS di essere minificati – solo aggregati.

  • wp-content/cache/
  • wp-content/uploads/
  • admin-bar.min.css
  • dashicons.min.css

Opzioni HTML

L’ottimizzazione HTML di Autoptimize può aiutarvi a ridurre le dimensioni delle pagine rimuovendo gli spazi bianchi.

Ottimizzazione HTML in Autoptimize.
Ottimizzazione HTML in Autoptimize.

Optimize HTML Code

Consigliamo di abilitare la funzionalità “Optimize HTML Code” perché riduce le dimensioni delle pagine rimuovendo gli spazi bianchi non necessari nel vostro codice HTML. Anche se questa funzione è compatibile con la maggior parte dei siti, su alcuni siti la rimozione degli spazi bianchi può causare problemi. Pertanto, consigliamo di testare accuratamente l’ottimizzazione del codice HTML prima di utilizzarlo in un ambiente di produzione.

Keep HTML Comments

Attivate questa funzione se volete mantenere i commenti HTML nelle pagine ottimizzate.

Opzioni CDN

Se state usando Kinsta CDN o un servizio proxy con funzionalità CDN come Cloudflare, non è necessario configurare nulla nelle opzioni CDN di Autoptimize. Per un incremento ancora più rapido e semplice dell’ottimizzazione complessiva, potete prendere in considerazione la minificazione del codice. Questo può essere fatto direttamente nel cruscotto di MyKinsta tramite la funzione di minificazione del codice.

Se invece usate un altro servizio CDN per accelerare le vostre risorse, dovrete inserire l’URL del CDN in questo campo.

Se usate Kinsta CDN, non è necessario inserire nulla in Opzioni CDN.
Se usate Kinsta CDN, non è necessario inserire nulla in Opzioni CDN.

Informazioni sulla Cache

La sezione “Cache Info” di Autoptimize mostrano informazioni importanti come la posizione e i permessi della cartella della cache, così come la dimensione totale degli stili e degli script archiviati nella cache. Se vedete “No” accanto a “Can we write?”, dovrete lavorare con il vostro host per sistemare i permessi della cartella.

Informazioni sulla cache di Autoptimize.
Informazioni sulla cache di Autoptimize.

Opzioni Varie

Autoptimize ha anche impostazioni di ottimizzazione varie. Se avete problemi ad ottimizzare i file CSS e JS da caricare sul vostro sito, potrebbe essere necessario riconfigurare alcune delle impostazioni qui sotto.

Ottimizzazioni varie in Autoptimize.
Ottimizzazioni varie in Autoptimize.

Save Aggregated Scripts/CSS as Static Files

Consigliamo di abilitare questa opzione per salvare localmente i file aggregati come file statici. Potrebbe essere necessario disabilitare questa opzione se il server non è configurato per gestire la compressione e la scadenza dei file.

Minify Excluded CSS and JS Files

Consigliamo di abilitare questa opzione per garantire che tutti i file CSS e JS siano minificati. Tuttavia, se si notano problemi di minificazione con alcuni dei file CSS e JS esclusi, sarebbe meglio disattivare questa opzione.

Also Optimize for Logged In Editors/Administrators

Consigliamo di abilitare questa funzionalità per far sì che le risorse siano ottimizzate per editor e amministratori autenticati. Questo è importante se si stanno testando le impostazioni di Autoptimize come utenti connessi.

Ottimizzazione delle Immagini in Autoptimize

Autoptimize offre una possibilità di integrazione con ShortPixel per l’ottimizzazione delle immagini. Oltre a disporre di un’impostazione della qualità delle immagini, l’integrazione di Autoptimize consente anche di generare e servire versioni WEBP delle immagini.

Agli utenti di Kinsta sconsigliamo di utilizzare la funzione di ottimizzazione delle immagini di Autoptimize. Consigliamo invece di utilizzare direttamente i plugin completi ShortPixel o Imagify. Con il plugin completo, avrete un controllo più granulare sulle impostazioni di ottimizzazione, inclusa la riscrittura delle immagini per utilizzare il tag <picture>, necessario per il supporto di WEBP su Kinsta.

Immagini lazy-load con Autoptimize.
Immagini lazy-load con Autoptimize.

Autoptimize include anche la funzionalità di lazy-load delle immagini. Consigliamo di abilitare questa funzionalità per migliorare la velocità delle pagine per le pagine con immagini pesanti. Con il lazy-loading attivo, Autoptimize consente di escludere determinate classi di immagini e nomi di file.

L’impostazione di esclusione è utile per immagini come loghi, icone social e altri importanti elementi immagine che non dovrebbero essere differiti. Se state cercando una soluzione che offra un maggiore controllo sul lazy-loading, date un’occhiata alla nostra guida sul lazy-loading delle immagini e dei video in WordPress.

Ottimizzazioni Extra di Autoptimize

Ottimizzazioni extra di Autoptimizzazione.
Ottimizzazioni extra di Autoptimizzazione.

Google Fonts

Autoptimize ha anche diverse opzioni per ottimizzare i font di Google. L’opzione migliore per voi dipenderà da come il vostro sito utilizza Google Fonts.

  • Lasciare così com’è.
  • Rimuovere i font di Google.
  • Combinare e collegare nell’head.
  • Combinare e precaricare nell’head.
  • Combinare e caricare i font in modo asincrono con webfont.js.

Non consigliamo di utilizzare l’opzione “leave as is” perché non offre alcun vantaggio in termini di velocità.

Se Google Fonts non è un requisito strategico per il vostro sito, rimuoverli e utilizzare uno stack di font di sistema può avere invece un enorme impatto positivo sulla velocità delle vostra pagine.

Se volete mantenere i Google Fonts sul vostro sito, vi consigliamo di provare le ultime tre opzioni per individuare quella che funziona meglio per il vostro sito.

Remove Emojis

Questa opzione di Autoptimize rimuove i CSS e JavaScript relativi agli emojis dal core di WordPress. Si consiglia di abilitare questa opzione perché può contribuire a ridurre le dimensioni delle pagine. Inoltre, la maggior parte dei sistemi operativi mainstream viene fornita con stack di font che includono gli emojis. Naturalmente, ci sono anche altri modi per disabilitare gli emojis sul vostro sito WordPress.

Remove Query Strings from Static Resources

Abilitate questa opzione se volete rimuovere le query string (ad es. ?ver=) dalle risorse statiche. La rimozione delle query string non avrà alcun impatto sul tempo di caricamento, ma può aiutarvi a migliorare il punteggio del vostro sito in GTmetrix, Google Pagespeed e altri servizi di test delle prestazioni.

Preconnect to 3rd Party Domains

La direttiva di preconnect consente al vostro browser di connettersi a determinati domini per elaborare le ricerche DNS e negoziazioni di handshake SSL prima dell’invio di una richiesta HTTP completa.

Ad esempio, se il vostro sito ha un’immagine del logo che è servito da https://site.kinsta.cdn.com/logo.png, potete istruire Autoptimize ad aggiungere una direttiva di preconnect per gestire le connessioni DNS e SSL iniziali nell’elemento <head> prima che la richiesta HTTP sia fatta nell’elemento <body> del vostro HTML.

Potete utilizzare gli strumenti di sviluppo o inspector del vostro browser per trovare importanti domini esterni a cui pre-connettervi. Nella pagina di esempio qui sotto, ci sono richieste esterne ai seguenti domini.

  • https://cdn.brianli.com
  • https://www.google-analytics.com
  • https://www.googletagmanager.com

Questi tre domini possono essere aggiunti alla lista di pre-connessione di Autoptimize.

Trovare risorse esterne con strumenti di sviluppo.
Trovare risorse esterne con gli strumenti di sviluppo.

Per motivi di prestazioni, consigliamo di aggiungere non più di sei domini alla lista preconnect di Autoptimize, perché specificare le direttive preconnect per troppi domini può portare avere un impatto negativo in termini di prestazioni.

Preload Specific Requests

Le direttive preload indicano al vostro browser web di scaricare una risorsa il prima possibile. Questa direttiva è utile per scaricare gli asset che sono necessari molto presto nel processo di caricamento delle pagine. In pratica, il preload viene spesso utilizzato per velocizzare i tempi di caricamento dei font personalizzati, caricandoli prima che vengano richiesti nei CSS delle pagine.

Consigliamo di consultare uno sviluppatore in merito alle risorse, se presenti, da precaricare sul vostro sito WordPress. Come avviene per molte altre modifiche legate alle prestazioni, il preload di troppi asset può rallentare il caricamento del vostro sito.

Async JavaScript Files

La funzione “Async JavaScript files” di Autoptimize consente di specificare alcuni file JavaScript esterni da caricare in modo asincrono tramite il flag HTML async. Anche se il caricamento asincrono dei file JS può migliorare la velocità delle pagine, consigliamo di effettuare test adeguati per assicurarvi che nessuna funzionalità del sito ne venga influenzata.

Riepilogo

Ora che sapete come modificare le impostazioni, il plugin Autoptimize si offre come valida opzione per gli utenti di WordPress che cercano di aumentare le prestazioni del proprio sito.

Con caratteristiche di base come l’ottimizzazione HTML e CSS e quelle più avanzate, come la possibilità di specificare direttive di preconnect e preload, Autoptimize ha tutto il necessario per ottimizzare le prestazioni del frontend del vostro sito WordPress.

Se volete saperne di più sull’ottimizzazione di WordPress e su come ottimizzare il backend del vostro sito, consultate la nostra guida completa alle prestazioni di WordPress.

Brian Li

Brian has been a WordPress user for over 10 years, and enjoys sharing his knowledge with the community. In his free time, Brian enjoys playing the piano and exploring Tokyo with his camera. Connect with Brian on his website at brianli.com.