Ottimizzare un sito web fatto con WordPress 5.5 e novità

Di 12 Agosto 2020Wordpress

Disclaimer: Questo articolo vuole aggiornare il contenuto del mio precedente post sul come ottimizzare un sito web fatto con WordPress. Il precedente articolo è ancora valido sotto molti aspetti, ma ha bisogno di aggiornare alcuen cose inerenti all’ultima versione di WordPress (5.5 al momento).

I’M BACK.

Non potete immaginare da quanto volevo scrivere ciò. Mi siete mancati davvero tanto, ma spero di poter riprendere con voi questo cammino su WordPress. Soprattutto per coloro che, anche senza aggiornamenti dall’ormai lontano 2018, continuano a cercare i miei articoli (vi adoro) nella speranza che possa esserci qualche aggiornamento. Siete circa 20, non tanti per molti, ma tantissimi per me. Vi voglio bene.

Detto ciò, ho atteso a fondo l’uscita di WordPress 5.5 per la sua grande peculiarità lato ottimizzazione e aggiornamento di alcune librerie usate, tra cui PHPMailer e Dashicons.

Aggiornamento delle prestazioni e funzionalità

LazyLoad

Sappiamo tutti che WordPress, anche aggiornandolo quotidianamente e ottimizzandone ogni sua parte, è comunque pesante. Gli sviluppatori si sono accorti di ciò ed hanno integrato nel core di WP la fantomatica funzionalità di LazyLoad per le immagini. Per i neoentrati in questo mondo, sappiate che il funzionamento del LazyLoading è molto semplice: Fino a quando non scrollate con il mouse o con il dito verso un determinato contenuto, quel contenuto (solitamente immagini), non viene caricato.

Questo fa sì che una pagina piena di immagini, esempio da 10MB, possa caricare inizialmente solo una piccola parte, tipo 300kb, che sta per l’above-the-fold, ovvero il primo contenuto visibile di un sito web. Ciò aiuta moltissimo nell’ottimizzazione del sito ed evita caricamenti lunghi, soprattutto a connessioni lente.

Descrizione di LazyLoading by AddyOsmani

Una rappresentazione di LazyLoading fatto da Addy Osmani

Immagine presa da Addy Osmani

Sitemap

Molti di noi utilizzano o utilizzavano Yoast SEO. Il plugin è ormai davvero famoso ed aggiorna le sue funzionalità rapidamente. Tra le sue funzionalità, vi è senza alcun dubbio quella di generare una Sitemap XML dinamica, basata sui contenuti che inseriamo in WordPress.

Con WordPress 5.5 questo non sarà più un problema visto che gli sviluppatori ne hanno integrato tutte le funzionalità. Per vedere la sitemap generata da WordPress, basta aggiungere “/wp-sitemap.xml” al vostro dominio. Semmai abbiate aggiornato Yoast alla versione 14.5, sappiate che quest’ultimo la disabilità di default, quindi avrete il classico errore 500 o 404.

È davvero valida? Direi che la base c’è, ma non tutto è accettato. Ad esempio, le immagini non sono supportate, quindi se volete indicizzarle, credo proprio che abbiate ancora bisogno di Yoast. Se avete invece altri plugin, come Google XML Sitemap, potete disabilitare voi stessi la sitemap di WordPress usando questo semplice codice nel vostro functions.php:

add_filter( 'wp_sitemaps_enabled', '__return_false' );

Ottimizzare al massimo WordPress 5.5

La sicurezza prima di tutto

Prima di ottimizzare qualsiasi sito web fatto con WordPress, la prima cosa da fare è pensare alla sicurezza. Rimuovere le versioni di WordPress, WooCommerce e dei plugin utilizzati è il primo step da seguire per evitare di far sapere quali bug siano presenti nel vostro sito web, soprattutto se non aggiornate spesso per colpa di temi che non vengono più supportati (Farò una guida su questo).

Rimuovere le versioni di WordPress e WooCommerce

Per rimozione delle versioni si intende ciò che si può cogliere nell’ispeziona elemento del vostro browser, ovvero name tag generator; il codice è simile a questo:

Per rimuovere le versioni, vi basterà inserire nel vostro functions.php questo codice:

Tralasciando i millemila codici che ci sono in giro per rimuovere le versioni di WP, questo ne è uno molto semplice che non fa altro che ritornare un campo vuoto quando trova i tag “generator“. Testato da me su 6 e-commerce differenti. In caso, comunque, potete commentare l’articolo e vi aiuterò.

Rimuovere le versioni JS e CSS

Molti temi, soprattutto se presi da Themeforest o simili, hanno questa funzionalità di inserire nei CSS o JS la versione del tema stesso. Un esempio ne è WoodMart, che nella sua funzionalità di generazione CSS, inserire la versione del tema usato. Questo è un grande problema, soprattutto se il tema non viene più supportato. Per rimuovere queste versioni, vi basterà aggiungere questo codice nel functions.php:

Essenzialmente, questo codice ha un funzionamento molto semplice: Se trovare script o stili CSS, cerca la parola “ver” e la sostituisce con un campo vuoto. I numeri alla fine indicano la priorità, usatela soprattutto se avete temi child (cosa che consiglio, SEMPRE). Per chi conosce un po’ di PHP, la funzionalità è simile a quella di str_replace, ma usando un hook presente in WP.

Rimuovere i Feed RSS

Un’altra cosa realmente importante, soprattutto se non siete un publisher o editore, come le testate giornalistiche, sono i Feed RSS. Questi ultimi possono essere usati da tantissime persone per ricevere aggiornamenti oppure per copiare il vostro contenuto e creare un sito copia in pochi secondi. Quindi consiglio di usarlo SOLO se non avete un piano editoriale, quindi non scrivete articoli per la vostra attività.

Purtroppo non è possibile disabilitarli realmente, quindi abbiamo bisogno di inserire un codice sempre nel nostro functions.php:

Questo semplice codice vi permetterà di rimuovere la funzione di generazione dei Feed RSS, evitando che il vostro sito aziendale venga copiato in pochissimi secondi.

Render-blocking CSS and JS

Un altro grande problema di WordPress in aggiunta ad un tema acquistato, è la mole di JS caricati in contemporanea. Questo fa sì che il sito web non faccia uscire alcun contenuto senza prima aver caricato tutti i JS o CSS del caso. Una soluzione rapida potrebbe essere quella di aggiungere un tag “async” o “defer” a tutti i JS caricati, dare priorità ad alcuni CSS e disabilitarne altri.

Per quanto possiate sforzarvi, questo non potrete MAI ottimizzarlo al 100%, salvo mettere mano al codice e costruirvi un tema con JS e CSS personalizzato, disabilitando tutte le funzionalità di WP. Cosa impossibile. WordPress 5.5 si avvia verso l’eliminazione di jQuery, programmata per la versione 5.7, ma non è detto che riescano a farlo, visto che molte funzionalità dipendono da questa libreria; sono però curiosi di vedere come si evolverà la situazione.

WP deregister + Async e Defer JS

Per il codice JS ci sono svariate strade da percorrere e già il tutto diventa complesso se non utilizzate plugin come Autoptimize (descritto nel precedente articolo); ma se siete fan del “non voglio i plugin brutti e cattivi” come il sottoscritto, allora vorrete percorrere questa strada tortuosa e ricca di pericoli (lol).

1) Rimuovere i JS che NON ci servono realmente. Nel mio caso, ad esempio, ho rimosso tanti JS da WoodMart. Per farlo, dobbiamo prima capire quali utilizziamo e quali no. Per scoprirlo, andate sulla home del vostro sito web, tasto destro su una parte bianca —> Ispeziona Elemento.

Ispeziona Elemento

Cerca i file JS tramite ispeziona elemento

Cerchiamo i file JS cercando “.js” ed eliminiamo il contenuto del link, dopo “href=”.

Una volta trovati, dobbiamo cercare DOVE questi JS vengono richiamati. Nel mio caso nel functions.php del tema genitore. In caso abbiate difficoltà, scrivete un commento e vi aiuterò. Ora possiamo andare nel nostro file functions.php ed inserire il seguente codice:

Come vedi, questo codice è stato inserito da me in WoodMart, su di un sito web che non utilizzava determinate funzionalità. Così facendo, ho alleggerito il sito di 3 richieste inutili. Il restante viene fatto su Elementor, che ti spiegherò in un articolo dedicato.

2) Quelli che ci servono, invece, dovranno essere caricati in modo asyncrono o defer. Utilizziamo quindi il codice qui sotto, sempre nel functions.php:

Questo codice, spiegato semplicemente, prende una lista di JS inseriti in un array() e vi aggiunge Async o Defer, a seconda di quale lista scegliete. Fate molta attenzione con gli array, sono codici puri e se errate anche solo una virgola, non funzioneranno. Il tutto, viene poi inserito in un loop di dati. Se non siete abbietti in questo mondo, commentate l’articolo e vi aiuterò, gratuitamente.

Preload + Dequeue CSS

Una funzionalità particolare relativa al CSS è la possibilità di utilizzare il Preload. Personalmente non approfondirò questo tematica, visto che è consigliabile usare determinate cose solo tramite CDN e non tutti hanno la possibilità di averla. In caso, comunque, sarò ben lieto di aiutarti.

Il discorso per quanto concerne il CSS è simile a quello fatto sopra, quindi prima eliminare i CSS NON utilizzati, poi… niente. Il CSS per sua natura non può essere async, ma possiamo migliorare molto se abbiamo tanta pazienza.

Anzitutto, facciamo lo stesso discorso del JS, quindi Ispeziona Elemento e cerchiamo “.css”. In questo caso elimineremo il link al file CSS e vedremo se la pagina ne risente o meno.
Una volta fatto ciò, inseriamo questo codice nel file functions.php:

Vi anticipo una piccola modifica di Elementor che vi elimina le animazioni e le icone se siete in frontend. Inoltre ho utilizzato un’ulteriore funzionalità di WordPress, ovvero “is_front_page”. In questo caso stiamo dicendo a WordPress che se la pagina è quella relativa al sito web, allora deve rimuovere quei CSS. In caso contrario, deve rimanerli. Si può semplificare comunque con questo codice:

Rimuovi i commenti HTML di Yoast

A prescindere se abbiamo o meno la versione di WordPress 5.5, in molti ormai sappiamo che Yoast adora farsi pubblicità tramite il nostro codice; infatti quest’ultimo inserisce un commento HTML con su scritto “Ottimizato by Yoast SEO” e la sua versione. Per rimuovere questi commenti, basta inserire nel file functions.php questo codice:

//YOAST
// Credit @devendrabhandari (https://gist.github.com/paulcollett/4c81c4f6eb85334ba076#gistcomment-3303423)
add_filter( 'wpseo_debug_markers', '__return_false' );

I font di Google

Molti di noi, quindi compreso il sottoscritto, ha un font di Google. Può essere Roboto (il mio) oppure Montserrat (usato nei titoli). Il problema di questi fonts è che vengono caricati dal loro server madre e molte volte si caricano insieme alla pagina. Non dovrebbe essere così.

Il font ha un ruolo fondamentale in un sito web e deve essere caricato prima di tutto. Per fare ciò, solo in questo caso, consiglio un plugin. Esatto. Potrei farvelo fare tramite functions.php, ma lo sviluppatore di questo plugin ha inserito realmente SOLO l’essenziale.

Il plugin si chiama Swap Google Fonts Display. Pesa SOLO 2,6kb. Ho detto tutto. Offritegli anche un caffè se volete, se lo merita!

Utilizza un tema Lightweight

Se dopo tutte queste ottimizzazioni e pulizie di codice, ancora il sito ne risente… due sono le cose: O sei su un condiviso davvero scarso (il mio è sul condiviso, ad esempio) oppure il tema usato è TROPPO pesante e mal ottimizzato. Se il tuo problema ricade sul primo, non puoi fare altro che cambiare Hosting provider. Se il tuo problema è il secondo, potresti non avere soldi per acquistare altri temi.

In questo caso, esistono temi gratuiti denominati “Lightweight”, ovvero leggeri. Come codice, hanno solo funzionalità di base, quindi niente cose particolari o pagine personalizzate. Funzionano molto bene però con i builder, come Elementor. Se utilizzi uno di questi, allora potresti pensare ad avere “Hello Elementor”, tema fatto appositamente per questo builder.

Altri temi lightweight sono “Ocean WP”, GeneratePress (un vero e proprio framework con tanto di builder) oppure Astra.

Conclusioni

Oggi vi ho spiegato un po’ le novità di WordPress 5.5 e come ottimizzare al meglio senza usare plugin. Ti invito a leggere il mio articolo precedente per ulteriori informazioni utili all’ottimizzazione di WordPress!

Finalmente son tornato a scrivere articoli e spero di continuare il più possibile. Sicuramente questo articolo sarà aggiornato con nuovi contenuti, quindi tenetevi pronti. Se hai avuto problemi o altro, scrivi pure nei commenti e sarò lieto di aiutarti!

A presto.

Rating: 5.0/5. From 1 vote.
Please wait...
Agostino Costantino

Informazioni Agostino Costantino

Appassionato di informatica, mi diletto a scrivere articoli utili per i miei lettori.

Lascia un commento