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.
WP Super Cache
Un motore di caching molto veloce per WordPress che produce file html statici.
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.
Spostandoci ora sulla scheda Avanzato troviamo probabilmente l'impostazione più importante dell'intero plugin.
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:
server {
listen 80;
root /var/www/html/example.com;
index index.php index.html index.htm;
server_name wordpress.example.com;
client_max_body_size 500M;
location / {
try_files $uri $uri/ /index.php?$args;
}
location = /favicon.ico {
log_not_found off;
access_log off;
}
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires max;
log_not_found off;
}
location = /robots.txt {
allow all;
log_not_found off;
access_log off;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}Dobbiamo ora aggiungere le direttive relative alla cache in modalità esperto.
NGINX:
# WP Super Cache
set $cache_uri $request_uri;
# Le richieste POST e le query string devono sempre essere servite dal php
if ($request_method = POST) {
set $cache_uri 'null cache';
}
if ($query_string != "") {
set $cache_uri 'null cache';
}
# Non usare la cache per gli URL contententi questi segmenti
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
set $cache_uri 'null cache';
}
# Non usare la cache per gli utenti loggati o che hanno commentato
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
set $cache_uri 'null cache';
}
location / {
try_files /wp-content/cache/supercache/$http_host/$cache_uri/index-https.html $uri $uri/ /index.php$is_args$args;
}
# Fine WP Super CachePrestiamo attenzione a questa riga
NGINX:
location / {
try_files /wp-content/cache/supercache/$http_host/$cache_uri/index-https.html $uri $uri/ /index.php$is_args$args;
}
NGINX:
try_files /wp-content/cache/supercache/$http_host/$cache_uri/index.html $uri $uri/ /index.php?$args ;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:
# WP Super Cache
set $cache_uri $request_uri;
# Le richieste POST e le query string devono sempre essere servite dal php
if ($request_method = POST) {
set $cache_uri 'null cache';
}
if ($query_string != "") {
set $cache_uri 'null cache';
}
# Non usare la cache per gli URL contententi questi segmenti
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/checkuot/|/cart/|/my-account/|/thank-you|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
set $cache_uri 'null cache';
}
# Non usare la cache per gli utenti loggati o che hanno commentato (inclusi i cookies woocommerce)
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|woocommerce_cart_hash|woocommerce_items_in_cart|wp_woocommerce_session_|woocommerce_recently_viewed|store_notice[notice id]|wordpress_logged_in") {
set $cache_uri 'null cache';
}
location / {
try_files /wp-content/cache/supercache/$http_host/$cache_uri/index-https.html $uri $uri/ /index.php$is_args$args;
}
# Fine WP Super CacheLa 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.
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:
/checkuot/
/cart/
/my-account/
/thank-youMentre in Rejected Cookies inseriamo
Codice:
woocommerce_cart_hash
woocommerce_items_in_cart
wp_woocommerce_session_
woocommerce_recently_viewed
store_notice[notice
id]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).
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
Autoptimize
Autoptimize speeds up your website by optimizing JS, CSS, images (incl. lazy-load), HTML and Google Fonts, asyncing JS, removing emoji cruft and more.
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
Nelle Opzioni CSS attiviamo
- Ottimizzare il codice CSS
- Aggrega i file CSS
- Aggregare anche il CSS inline
- Generare i data: URIs per le immagini
- Ottimizzare il codice HTML
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
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
Imagify – Optimize Images & Convert WebP & AVIF | Compress Images Easily
Compress images & convert WebP and AVIF with the best WordPress image optimization plugin. Optimize images in 1-click & resize images with our …
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.
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.
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.
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.