Novità
Come aumentare gratuitamente la velocità di WordPress

Guida Verificata Come aumentare gratuitamente la velocità di WordPress

Una guida verificata è stata controllata dallo staff punto per punto e se ne attesta la sua validità.

WordPress-logotype-alternative.png

Introduzione​

Quando si parla di CMS il pensiero va immediatamente a WordPress, potente Software in grado di semplificare esponenzialmente la creazione di un sito web, dal semplice blog personale ad un complicato e-commerce. Di tutti i siti esistenti, si stima che circa il 43% sia realizzato con Wordpress!!

Questa enorme presenza, porta ad una varietà di siti, con diverse esigenze e settaggi, dunque anche a modi diversi per ottimizzarli. Esistono svariati strumenti professionali che garantiscono un'ottimizzazione delle prestazioni definitiva, ma spesso è richiesto il pagamento di cifre che difficilmente si è disposti a pagare, specie se il vostro progetto è appena partito.

In questa piccola guida cercherò di presentarvi alcuni plugin che, se settati a dovere, nella loro forma gratuita sono in grado di accelerare significativamente il vostro sito. Partiamo dal presupposto di avere già familiarità con WordPress, la guida non coprirà alcune operazioni come caricare plugins e mettere il sicurezza l'intero CMS.

In particolare analizzeremo WP Super Cache, Autoptimize e Imagify. Il primo totalmente gratuito, gli ultimi 2 nella loro forma gratuita (più che sufficienti, fidatevi).

WP Super Cache​

Primo fra tutti, il famoso plugin realizzato dallo stesso team che sta dietro WordPress. Probabilmente è anche il più importante dei 3 e il più difficile da configurare a dovere.
Accedi o Registrati per vedere questo link.

Questo plugin ci permette di utilizzare la server cache (da non confondere con la browser cache), in modo che il server dove è ospitato il nostro sito non debba ogni volta generare le pagine partendo da complessi file php, operazione che richiede molte risorse e aumenta il tempo di risposta del sito. Ciò influisce negativamente sulla navigazione e potenzialmente allontana utenti.

La prima cosa da fare, naturalmente, è attivare la cache dalle impostazioni del plugin nella schermata iniziale. Una volta fatto, clicchiamo in basso su Test Cache per verificare che le directory siano scrivibili e tutto funzioni a dovere.
1.jpg


Spostandoci ora sulla scheda Avanzato troviamo probabilmente l'impostazione più importante dell'intero plugin.
2.jpg


Dobbiamo stabilire se usare il plugin in modalità Semplice o Esperto. In modalità esperto, si escluderà completamente l'uso del php nella cache e le pagine verranno servite totalmente in html, ciò influisce notevolmente sulla CPU del server, servendo le pagine in modo decisamente rapido.

Se vogliamo attivare la modalità Esperto dobbiamo agire direttamente sul web-server. Non analizzeremo tutti i web-server esistenti, ma solo i maggiori, ovvero Apache e Nginx.

Apache​

Nel caso di server apache, dobbiamo assicurarci intanto di utilizzare il modulo mod_rewrite (se usate i permalink e tutto funziona lo avete già!)

Una volta selezionato esperto, in basso comparirà automaticamente la scritta Update Mod_Rewrite Rules, cliccandoci verrà aggiornato il file .htaccess automaticamente. Nel caso dovessimo ottenere un messaggio d'errore, dobbiamo procedere manualmente alla modifica del file aggiungendo il codice che ci viene fornito. Questo codice cambierà in base ad alcuni settaggi che vedremo più avanti (indipendentemente dal web-server utilizzato).

Nginx​

In questo caso, dobbiamo procedere manualmente alla modifica del file di configurazione di nginx relativo al nostro sito. Se usiamo già i permalink, il nostro file sarà già qualcosa del genere:
NGINX:
Accedi o Registrati per vedere questo contenuto.
Naturalmente il file è generato con contenuti di esempio.

Dobbiamo ora aggiungere le direttive relative alla cache in modalità esperto.
NGINX:
Accedi o Registrati per vedere questo contenuto.

Prestiamo attenzione a questa riga
NGINX:
Accedi o Registrati per vedere questo contenuto.
In molte guide questa parte è espressa diversamente, ovvero in questo modo:
NGINX:
Accedi o Registrati per vedere questo contenuto.
Ma a nostro parere, ciò potrebbe causare problemi con alcuni plugins, incluso il popolare Woocommerce. Lasciamo a voi la scelta, vi esortiamo a fare i dovuti test.

In ogni caso vi ricordo che la suddetta riga andrà sostituita con quella presente nella location / che dovrebbe essere già presente nel nostro file in questa forma: try_files $uri $uri/ /index.php?$args;

Se appunto usiamo Woocommerce, ricordiamo di escludere dalla cache le pagine relative al carrello, checkout, ringraziamenti e account personale, aggiungendole al file nginx fornito sopra. Dobbiamo inoltre aggiungere alle esclusioni i cookies relativi a Woocommerce. Dunque il codice presentato soprà (SOLO NEL CASO DI WOOCOMMERCE) sarà
NGINX:
Accedi o Registrati per vedere questo contenuto.
Dove correggiamo eventuali altri nomi dati alle pagine di woocommerce.

La parte complicata è finita! Possiamo ora procedere con le altre opzioni di WP Super Cache!

  • Cache Restrictions: Disable caching for logged in visitors. Dobbiamo sempre fornire il contenuto aggiornato agli utenti loggati.
  • Non mettere nella cache pagine con parametri GET: ON. I contenuti dinamici dovrebbero essere esclusi dalla cache.
  • Compressione delle pagine: ON.
  • Rigenerazione Cache: ON.
  • Cache intestazioni HTTP (Modalità Semplice): ON.
  • 304 Browser caching (Modalità Semplice): ON.
  • Imposta gli utenti conosciuti come anonimi (Modalità Semplice): OFF.
  • Enable dynamic caching (Modalità Semplice): ON. Dare uno sguardo alle note del plugin per capirne il funzionamento.
  • Mobile device support: OFF. Impostarlo su ON SOLO se usate un tema diverso per i dispositivi mobili. A oggi è buona norma rendere il sito responsive, in questo caso NON bisogna attivare questa opzione.
  • Rimuovi il supporto UTF8/blog charset dal tuo .htaccess: OFF. Attivarlo solo se compaiono strani caratteri nel testo.
  • Pulisci tutti i file di cache quando un articolo o una pagina è pubblicata o aggiornata: ON.
  • Controllo homepage extra: ON.
  • Ricarica la sola pagina in uso quando vengono effettuati dei commenti: ON.
  • Elenca su questa pagina la lista delle nuove pagine cache: OFF.
  • Coarse file Blocco: OFF.
  • Inizializzazione in ritardo: OFF.
E in questa sezione abbiamo finito, salviamo e proseguiamo in basso dove troviamo le impostazioni del Garbage Collection

Come impostazione predefinita, troviamo il Cache timeout a 1800 secondi, ovvero 30 minuti. Dovremmo settarlo ad almeno 2 ore, ovvero 7200, anche se questa impostazione verrà disattivata dopo in quanto è preferibile usare il Pre-caricamento.


Ora, nel caso usassimo la Modalità Semplice dobbiamo inserire le pagine e i cookies che vogliamo escludere dalla cache. Buona norma è inserire le pagine gestite da Woocommerce, come indicato nella modalità Esperta.

Dunque nel caso usassimo Woocommerce, in Rejected URL Strings inseriamo le pagine
Codice:
Accedi o Registrati per vedere questo contenuto.
(Da correggere se i nomi delle pagine sono diversi)

Mentre in Rejected Cookies inseriamo
Codice:
Accedi o Registrati per vedere questo contenuto.

Salviamo e proseguiamo alla pagina successiva, ovvero CDN. In realtà non c'è molto da fare qui, se possedete una CDN (non Cloudflare) ad esempio KeyCDN, inserite i dati, altrimenti passiamo alla schermata Pre-carica.
Il Pre-caricamento della cache è molto utile, ma consuma risorse. Attivandolo si disattiverà automaticamente la Garbage Collection, ed è consigliato esclusivamente se possiamo "permettercelo". Se il vostro sito gira sotto una VPS o comunque non un hosting condiviso con limitate risorse, attiviamolo e impostiamo il ricaricamento a 1 volta al giorno (1440 minuiti).
3.jpg

Salviamo pure, e con WP Super Cache abbiamo finito! Naturalmente testiamo a dovere il sito, verificando che tutto funzioni a dovere.

Autoptimize​

Altro plugin molto utile nella sua forma gratuita è Autoptimize
Accedi o Registrati per vedere questo link.

Questo plugin ci aiuterà ad ottimizzare il nostro codice CSS, JS e HTML. Una volta installato e attivato, verrà automaticamente caricata una configurazione di default. Ad ogni modifica è altamente consigliato fare un test del sito perché potrebbe incidere sul nostro tema, dunque prestiamo cautela

Vediamo le impostazioni della schermata iniziale

Nelle Impostazioni Javascript è consigliato attivare solo
  • Ottimizzare il codice JavaScript
  • Aggrega i file JS
Se usiamo cloudflare, disattiviamo ogni forma di minificazione del codice, in quanto se ne occuperà questo plugin.

Nelle Opzioni CSS attiviamo
  • Ottimizzare il codice CSS
  • Aggrega i file CSS
  • Aggregare anche il CSS inline
  • Generare i data: URIs per le immagini
Nelle Opzioni HTML attiviamo
  • Ottimizzare il codice HTML
Nelle Opzioni CDN, inseriamo una nostra eventuale CDN usata, altrimenti proseguiamo

Opzioni varie
  • Salva script/css aggregati come file statici
  • Minificare file CSS e JS esclusi
  • Also optimize for logged in editors/ administrators
  • Enable configuration per post/ page
Salviamo e con questa schermata abbiamo finito. Queste impostazioni sono valide per la maggior parte delle installazioni WP e non dovrebbero causare problemi.

In ottimizzazione delle immagini NON facciamo niente, in quanto useremo un terzo plugin. Mentre in Critical CSS il discorso cambia. Diversi servizi a pagamento permettono di generare il CSS critico per il nostro sito, da incollare nella relativa pagina per aumentare le prestazioni. Esistono anche alcuni servizi gratuiti che permettono la generazione del codice ma sconsigliamo l'utilizzo in quanto spesso creano problemi.

Nelle altre schermate del plugin possiamo anche lasciare tutto com'è e proseguire.

Imagify​

Qui entra in gioco la preferenza. Diversi plugin permettono di ottimizzare le nostre immagini, convertendole in formati più moderni orientati al web e riducendo le loro dimensioni senza alterare eccessivamente la qualità. Ho scelto Imagify in quanto il piano gratuito permette un discreto numero di modifiche al mese, più che sufficienti per molti siti
Accedi o Registrati per vedere questo link.

Una volta installato, ci verrà richiesto di inserire la mail per ottenere un codice API (gratuitamente), proseguiamo pure per attivare le funzionalità. Con la versione gratuita possiamo convertire 20 immagini al mese, poche per un blog fotografico, abbastanza per un sito generico.
4.jpg

L'impostazione Lossless compression l'abbiamo lasciata disattivata in quanto è consigliato controllare la qualità delle immagini prima. Se siamo soddisfatti della normale compressione, lasciamolo disattivato per risparmiare qualche KB.
5.jpg


Per quanto riguarda il formato, è raccomandato l'uso del WEBP, alcuni browser web potrebbero non supportare il formato AVIF. Anche qui, se possediamo una CDN possiamo inserire i dati, altrimenti salviamo.

Dobbiamo ora spostarci nella scheda MEDIA di Wordpress, consiglio una visualizzazione a lista. Abbiamo la possibilità di ottimizzare ogni immagine, partiamo dalle più pesanti presenti nella homepage e a cascata quelle che riteniamo fondamentali.
6.jpg


Cliccando su Ottimizza ci verranno forniti i risultati della conversione e quanto abbiamo salvato. Se usiamo il piano gratuito, attenti a non sforare il limite mensile. Consiglio una particolare attenzione al LOGO del nostro sito: con temi custom, spesso il logo viene caricato da una posizione precisa e ottimizzandolo perdiamo le dimensioni predefinite. Come sempre, un controllo dell'intero sito è obbligatorio per accertarci che tutte le immagini si vedano correttamente e le loro dimensioni sono corrette.

Anche per questa volta, abbiamo finito! Sono stati presentati diversi metodi gratuiti e sicuri per velocizzare notevolmente il nostro sito. Per un risultato ottimale, dovremmo necessariamente affidarci a servizi a pagamento, come una CDN (spesso consigliata nella guida). Altro strumento gratuito che sarà trattato in un'altra guida è Cloudflare.
Autore
Anyma
Visite
74
Primo rilascio
Ultimo aggiornamento
Valutazione
0.00 stella(e) 0 valutazioni

Più risorse di Anyma

Indietro
Alto