Ottimizzare le prestazioni dei siti WordPress sfruttando le potenzialità di Autoptimize plugin permette di velocizzare il rendering delle pagine, migliorando l’esperienza utente e il posizionamento nelle ricerche organiche.
Grazie alla minimizzazione dei codici di script e ad altre funzioni base e avanzate, questo plugin, facile da impostare e ricco di funzioni gratuite, si colloca fra i migliori nel suo genere.
In grado di soddisfare tanto gli utenti privi di esperienza quanto quelli esperti, Autoptimize dà il meglio di sé quando installato insieme a un caching plugin come Cache Enabler o WP Rocket.
Di seguito, una panoramica delle caratteristiche e delle funzionalità che mette a disposizione.
Indice
Autoptimize: le caratteristiche principali
Autoptimize non è un caching plugin. Seppure anch’esso disponga di una cache, non la utilizza per salvarvi pagine da inviare ai visitatori.
Tra le caratteristiche più interessanti vi sono:
– minimizzazione degli script HTML, CSS e JS;
– aggregazione di JS e CSS;
– Lazy Load;
– gestione dei Google Fonts;
– possibilità di connessione a un CDN;
– rimozione delle emoji.
Come installare Autoptimize
Per installare il plugin, accedere al pannello di controllo di WordPress e cliccare su “Plugin ? Aggiungi nuovo”. Digitare “Autoptimize” nella casella di ricerca e dare invio.
Una volta identificato il plugin che si desidera installare, cliccare su “Più dettagli” per leggere le opinioni di altri utenti e qualche informazione sulle caratteristiche.
Per installare, fare click su “Installa adesso”.
Al termine dell’installazione, ricordarsi di cliccare su “Attiva” per rendere operativo il plugin.
Per accedere al pannello di controllo e iniziare a personalizzare il plugin, fare click su “Impostazioni”.
Il pannello di controllo
Il pannello di controllo di Autoptimize è formato da cinque schede:
– JS, CSS & HTML: mette a disposizione impostazioni fondamentali per ottimizzare CSS, HTML e JS, nonché per abilitare il CDN;
– Immagini: permette di attivare la funzione Lazy Load;
– Critical CSS: questa è una funzione avanzata per l’inserimento di API Key create con il servizio a pagamento di Critical CSS;
– Extra: oltre ad alcune funzioni avanzate, tra gli extra si trovano anche la gestione dei Google Fonte la rimozione delle emoji di WordPress;
– Ottimizza ancora di più: in questa scheda vengono suggeriti alcuni plugin e servizi a pagamento che possono migliorare ulteriormente le prestazioni dei siti web.
Di seguito, una panoramica dettagliata delle funzioni messe a disposizione da Autoptimize e qualche consiglio di personalizzazione.
JS, CSS & HTML
È innanzitutto grazie all’ottimizzazione di JS, CSS e HTML che Autoptimize migliora le prestazioni dei siti WordPress, rendendo più veloce il caricamento delle pagine.
Per ottenere buoni risultati, è importante non attivare in modo indiscriminato tutte le funzioni offerte da questa scheda, in quanto alcune potrebbero rallentare il caricamento delle pagine oppure non essere adatte ad alcuni siti.
Le prime impostazioni riguardano JavaScript:
– Ottimizzare il codice Java Script: l’ottimizzazione è consigliata. Dopo che si sarà checkata la casella, il plugin minificherà i file JS e si avrà accesso a una serie di ulteriori impostazioni;
– Aggrega i file JS: permette di unire tutti i codici JavaScript in un unico file, alleggerendo e velocizzando i siti web. Se il sito internet non si trova su un host che utilizza l’HTTP/2, l’attivazione è consigliata;
– Do not aggregate but defer: questa funzione permette di differire il caricamento di Javascript anziché aggregarlo in un unico file. La sua attivazione disabilita l’aggregazione dei file e la forzatura in. È consigliabile non attivarla in quanto è meglio aggregare i file piuttosto che differirli;- Aggregare anche il JavaScript inline: attivando questa opzione, il plugin estrarrà tutti i codici JS inline, ossia inseriti nell’HTML in corrispondenza di singoli elementi, e li inserirà nel file unico. In presenza di molti codici inline, si rischia di sovraccaricare e riempire rapidamente la cache di Autoptimize. Funzione non consigliata;- Forza JavaScript nell’: attivando questa funzione, si corre il rischio di rallentare o bloccare il caricamento della pagina. Non attivare;- Escludi script da Autoptimize: in questa casella di testo è possibile indicare i file js che non si desidera vengano ottimizzati dal plugin;- Aggiungi try-catch wrapping: questa funzione permette di bypassare i problemi di bloccaggio dei codici js. Attivare nel caso in cui il sito, dopo l’ottimizzazione, tendesse a bloccarsi.
A seguire, sarà necessario personalizzare l’ottimizzazione dei Fogli Stile:
– Ottimizzare il codice CSS: anche l’ottimizzazione dei CSS è consigliata. Come per i JS, una volta selezionata la casella, il plugin minificherà i CSS e si potrà procede alla personalizzazione di altre impostazioni;
– Aggrega i file CSS: riunisce tutti gli script CSS in un unico file. Impostazione consigliata prevalentemente per i siti che non utilizzano l’HTTP/2;
– Aggregare anche il CSS inline: estrae gli script CSS inline e li inserisce nel file unico. Impostazione non consigliata in quanto si corre il rischio di riempire la cache di Autoptimize;
– Generare i data URLs per le immagini: include eventuali immagini di sfondo nel file CSS. Testare il sito per valutare se attivare o meno questa funzione;
– Incorpora e differisci i CSS: questa funzione permette di caricare subito i CSS “above the fold”, ossia quelli appartenenti ai primi elementi renderizzati e visualizzati dai visitatori, posticipando il caricamento del file principale. Attivando la funzione, apparirà una casella di testo entro la quale sarà possibile indicare i CSS da caricare inline. Tale operazione può essere eseguita automaticamente nella scheda “Critical CSS”, sfruttando uno strumento a pagamento;
– Incorpora tutti i CSS: questa opzione, inserendo inline tutti i CSS, può far aumentare le dimensioni delle pagine, rallentandone il caricamento. L’attivazione non è consigliata;
– Escludi CSS da Autoptimize: inserire nella casella di testo gli stili CSS che si desidera escludere dal processo di ottimizzazione.
Molto più breve l’ottimizzazione dell’HTML, per la quale vengono messe a disposizione solo due impostazioni:
– Ottimizzare il codice HTML: l’ottimizzazione dei codici HTML tramite minimizzazione è sempre consigliata per alleggerire e velocizzare il caricamento dei siti web;
– Mantenere i commenti HTML: permette di mantenere i commenti negli script HTML delle pagine minificate.
Terminata l’ottimizzazione dei codici, è possibile collegare un CDN inserendo l’URL nella casella di testo. Se si utilizza Cloudflare, questo passaggio può essere saltato.
L’ultima sezione della pagina mette a disposizione ulteriori impostazioni attive di default:
– Salva script/css aggregati come file statici: gli script aggregati vengono salvati come file statici. Disabilitare nel caso in cui si verificassero problemi;
– Minificare file CSS e JS esclusi: questa funzione minifica anche i file JS e CSS che si è deciso di escludere dal processo di ottimizzazione. Tali file saranno quindi esclusi unicamente dall’integrazione, mentre verranno minificati. Disabilitare se non si vuole minificare tali file;
– Enable 404 fallbacks: risolve alcuni problemi di caricamento delle pagine, reindirizzando i file non trovati per evitare il bloccaggio del sito;
– Also optimize for logged in editors/administrators: ottimizza le pagine anche per gli utenti connessi.
Al termine, fare click su “Salva modifiche” oppure, se si desidera anche cancellare la cache di Autoptimize, scegliere “Salva modifiche e svuota cache”.
Immagini
Oltre che attraverso l’ottimizzazione dei codici, le prestazioni del sito possono essere migliorate anche grazie alle immagini.
Autoptimize permette di attivare la funzione Lazy Load, grazie alla quale le immagini vengono inviate al browser e caricate a mano a mano che l’utente scorre la pagina e le visualizza.
Per attivare la funzione, checkare la casella “Immagini lazy load”. Nel caso in cui si desiderasse escludere alcune immagini, indicarne le classi nella casella di testo “Esclusioni lazy-load”. Le classi possono essere assegnate alle immagini nell’HTML utilizzando il tag “class”. Chi non ha dimestichezza con i codici può indicare direttamente tutti i nomi dei file che desidera escludere.
La funzione “Ottimizza immagini” richiede la registrazione a ShortPixel, il quale, oltre a ridurre significativamente la dimensione delle immagini, convertendole in WebP o AVIF, mette a disposizione un CDN per servire direttamente le immagini agli utenti.
Critical CSS
In questa scheda viene proposto un servizio premium che fa capo al sito Critical CSS e permette di generare automaticamente e inserire delle API key.
Il servizio è piuttosto economico e permette di migliorare ulteriormente le prestazioni del sito.
Extra
Per rendere ancora più veloce il sito web, si possono valutare le impostazioni messe a disposizione fra gli extra:
– Google Fonts: permette di ottimizzare l’utilizzo dei font di Google o di eliminarli se non utilizzati;
– Rimuovi emoji: elimina le emoji di WordPress
– Rimuovi le “query string” dalle risorse statiche: questa opzione non apporta miglioramenti al sito in fatto di velocizzazione;
– “Pre-connessione a domini di terze parti”, “Pre-load specific requests: utenti avanzati” e “File Javascript asincroni”: sono tre impostazioni destinate a utenti esperti;
– Ottimizza video Youtube: consiglia l’installazione di WP Youtube Lyte per effettuare il lazy load sui video provenienti da YouTube.
Fare click su “Salva modifiche” prima di cambiare o aggiornare la pagina per non perdere le impostazioni selezionate.
Autoptimize: pro e contro
Autoptimize è un buon plugin, in grado di alleggerire le pagine, rendendone più rapido il caricamento e migliorando le prestazioni dei siti sui quali viene installato.
Abbinarlo a un caching plugin, free o premium, è un’ottima soluzione per migliorare ulteriormente l’esperienza utente.
La scelta delle migliori impostazioni di base non è particolarmente complessa, anche grazie ai numerosi tutorial disponibili e alle brevi spiegazioni che le accompagnano.
Oltre all’ottimizzazione degli script tramite minificazione e aggregazione, molto utile la possibilità di abilitare il Lazy Load per le immagini, così da rendere ancora più rapida la prima visualizzazione della pagina sul browser.
La compresenza di scritte in italiano e inglese può generare un po’ di confusione.
