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.
- La versione gratuita di Autoptimize offre una serie completa di funzionalità per ottimizzare il vostro sito WordPress.
- 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
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
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
Dopo aver generato il CSS critico, copiatelo e incollatelo nelle impostazioni di 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.
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.
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.
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.
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.
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
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.comhttps://www.google-analytics.comhttps://www.googletagmanager.com
Questi tre domini possono essere aggiunti alla lista di pre-connessione di Autoptimize.
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 utilizza WordPress da oltre 10 anni e si diverte a condividere le sue conoscenze con la community. Nel tempo libero, Brian ama suonare il pianoforte ed esplorare Tokyo con la sua macchina fotografica. Potete mettervi in contatto con Brian sul suo sito web all'indirizzo brianli.com.
Ciao,
ho seguito la configurazione ma le immagini del mio blog, in questo modo, non vengono visualizzate. O meglio, vengono visualizzate solo dopo refresh della pagina.
Quale funzione devo settare per trovare un giusto compromesso tra velocità e caricamento immagini?
Ciao Marica. Probabilmente c’è qualche script che non fa funzionare il plugin come dovrebbe. Potrebbe essere un altro plugin attivo o il tema. Adesso, però, con WordPress 5.5 c’è il lazy load nativo. Potresti anche disabilitare questa opzione in Autoptimize