Durante l’ultimo Google Developer I/O la case made di Mountain View ha dato spettacolo rilasciando molteplici novità. Dalle tecnologie futuristiche dei computer quantici, alle grandi ottimizzazioni di Google Workspaces, all’arrivo del nuovo Algoritmo MUM, sempre più versato sulla ricerca vocale, le Long Tail Keywords (ecco perché abbiamo sviluppato i Conversion Engines) ed all’importanza della User Experience come fattore determinante nel ranking sulla SERP. Ecco che l’Ottimizzazione Core Web Vitals Wordpress per la SEO nel 2021 è diventato un argomento fondamentale e scottante.

Il problema è reale; lo afferma anche Bruce Clay, considerato “il Padre della SEO”, e spiega molto bene i Core Web Vitals e come stiano già avendo effetto come segnale di Ranking per la tua SEO. Per vostra comodità abbiamo inserito qui sotto un Webinar gratuito.

In Fuel LAB ci occupiamo di questo tipo di ottimizzazione per i nostri clienti ogni giorno, ma abbiamo pensato anche di mettere a disposizione di tutti una rapida guida su cosa fare e come farlo, e con quali strumenti.

Ottimizzazione Core Web Vitals Wordpress per la SEO 2023

• Il problema: Theme Builders (Divi, Elementor, Wp Bakery…)
  
• Quali strumenti di misurazione utilizzare
  
• Defer dei Javascript per ridurre il blocco del rendering
• Disabilitare dozzine di setting inutili in Wordpress
• Eliminare il CSS inutilizzato che il Builder continua a caricare
• Isolare e precaricare il Largest Contentful Paint e altre risorse chiave

Il Problema: I Theme Builders (Divi, Elementor, ecc)

Come è tristemente noto, i CMS sono il new-normal del web development e design da ormai una decina d’anni. Wordpress, Magento, Wix, Shopify, Webflow, chi più ne ha più ne metta. E’ innegabile che il mercato si sia evoluto e sia oggi necessario sviluppare siti web dal grande appeal molto in fretta; purtroppo, di rado i web designer oggi giorno sono in grado di scrivere in codice, il che li rende sempre più dipendenti da due cose che sono mortali per la velocità dei siti web: Temi e Plug-in.

Nello specifico, il CMS Wordpress dipende fortemente da Temi e Plug-in scritti in PHP, che richiedono moltissime richieste HTTP, un’intensa attività del server e del Database, e che rallentano moltissimo frontend e backend del sito web. In aggiunta a tutto questo, i Theme Builder associati a questi temi, fanno il resto del lavoro, aggiungendo una quantità mostruosa di bloat (codice inutilizzato in avanzo) che viene comunque letto e caricato dal browser. Per fare un esempio su tutti, Fuel LAB utilizza un Child Theme Divi per Wordpress.

Se Fuel LAB caricasse un blogpost con un semplice modulo di testo del builder Divi, qualche immagine ottimizzata, una sidebar con qualche plugin per la gestione dello share sui social e poco altro, la pagina raggiungerebbe già un Core Web Vital negativo per il First Contentful Paint, superando i 2.5 secondi necessari per avere la green light.

Questo perché il CSS di Divi, anche se avete utilizzato solo un misero blocco di testo, viene interamente caricato dal browser, insieme ad ogni singolo Javascript legato ai vostri tag di marketing e servizi esterni connessi. In poche parole, ogni risorsa non statica inserita nelle vostre pagine, andrà ad appesantire il motore di rendering del Browser, che di default renderizza tutti i contenuti allo stesso tempo.

Quello che è necessario fare è quindi:

• Armarsi di molta pazienza, perché ogni sito web è diverso e sarà un’attività lunga e frustrante.
• Scegliere un rendering asincrono delle risorse, prioritizzando quelle critiche ed il LCP, e lasciando per ultime quelle meno importanti (Defer)
• Individuare il CSS inutilizzato, creare un foglio di stile a parte con solo il CSS in uso, e modificare le regole in functions.php
• Rimuovere tutto il bloat già presente di default in Wordpress, ed identificare i plugin che non servono.
• Attivare selettivamente funzioni e plugin solo su certe pagine.

Esempio di un e-commerce, già con buone prestazioni, che monta Divi come tema e builder.

Ecco come sono i segnali dopo il nostro intervento.

Quali strumenti di misurazione utilizzare

Esistono tanti strumenti diversi per misurare le performance del sito web. La differenza principale tra i vari strumenti è la capacità di eseguire un test di tipo “LAB”, quindi si tratta di Lab Data che simulano il rendering da mobile tramite un throttling della connessione (come ad esempio Google Lighthouse), ed i tools che si basano sui Field Data (Lighthouse li incorpora entrambi) ovvero dati che si basano sul reale uso storico da parte degli utenti per la specifica URL (i dati sono sempre anonimizzati ed aggregati).

Ecco perché ti ritrovi spesso a confrontare i test su diverse piattaforme, come quelle che elenchiamo di seguito, e vedi risultati contrastanti.

Ti consigliamo di guardare il video incorporato qui sotto dal Google Developer I/O 2019, che ti fornirà una conoscenza approfondita di come funziona il metering delle performance web per Google.

I tool più frequentemente usati per questi test sono:

• Google Pagespeed Insight
• Lighthouse in Chrome Dev Tools
• GT Metrix
• Pingdom

Noi ti consigliamo di usare la misurazione Lighthouse interna a Google Chrome, alla quale puoi accedere tramite la console Chrome Dev Tools (Click destro, ispeziona elemento), navigando verso l’ultima tab a destra (Lighthouse). Questo perché se l’obbiettivo è l’Ottimizzazione Core Web Vitals Wordpress per la SEO, dovrai leggere i dati che Google effettivamente utilizza e considera realmente.

Defer dei Javascript per ridurre il blocco del rendering

Fai un test del tuo sito web con Lighthouse. Non prendere paura per i risultati, e scorri più in basso per identificare i problemi segnalati. Quasi certamente, individuerai problemi di questo tipo:

Senza soffermarci sul fatto che le Best Practice relative alle immagini ottimizzate, leggere e delle dimensioni corrette, andiamo a notare che ci sono una quantità enorme di Javascript inutili per quella pagina, e lo stesso vale per il CSS. Accidenti, solo queste due ottimizzazioni arrecano più di 2 secondi di ritardo nel caricamento.

Quello che devi fare è andare a selezionare quegli script .js di troppo, e creare una regola “Defer” per spingerli alla fine della coda di priorità di attivazione. Se non sai come farlo manualmente, c’è un ottimo plugin che noi abbiamo comprato e testato, che si chiama Perfmatters.

Il plugin (molto leggero) ti permette, tra le varie cose di eseguire sia un defer dei Javascript che un Delay selettivo degli script che scegli tu. E poi tra le altre cose permette di attivare un Lazy Loading dei contenuti, precaricare i Google Font o inserirli in Locale, e tantissime altre ottimizzazioni. Out of the box, abbiamo testato il plugin su 3 siti web e abbiamo notato un jump nel performance score tra il +30% e +60%.

Se vai di fretta o non sai codificare functions.php, questo plugin potrebbe essere parte della tua soluzione.

Clicca qui se vuoi vedere il sito web del plugin.

Disabilitare i setting superflui di Wordpress

Come dicevamo un’altra cosa importante che ridurrà significativamente il tempo di caricamento del sito è una serie di elementi che Wordpress aggiunge e ha di default, ma che nel 90% dei casi non ti servono. Solo tu sai quali sono essenziali per il tuo sito web. Nel nostro caso, abbiamo manutenuto attivi solo quelli relativi al feed RSS.

• Libreria Emoj
• Embeds
• XML-RPC
• jQuery MIgrate
• Versione WP
• Link wlwmanifest
• Feed RSS
• Link del Feed RSS
• Self Pingbacks
• RSD Link
• Shortlink
• REST API
• Wordpress Heart Beat
• Dashicons
• Google Maps
• Numero massimo di revisioni dei post

Tieni presente che il plugin al quale abbiamo accennato si occupa anche di tutte queste cose.

Eliminare il CSS inutilizzato che il Builder continua a caricare

Un altro problema bello grosso dell’utilizzare i Theme Builder è che hanno il brutto vizio di caricare tutto il CSS di tutti i widget ed i moduli del Builder stesso. Ecco che ti accorgerai che almeno il 40% del codice CSS che viene scandito e letto dal browser, è tutto bloat.

C’è un fantastico tool gratuito che puoi utilizzare per vedere quanto CSS bloat hai, ed esportare la versione “pulita” della tua pagina. Si chiama CSS Purify e ti consigliamo di provarlo.

Ora , il problema è che anche se hai ottenuto uno stylsheet molto più leggero, è necessario scrivere una regola in Functions.php del tuo Child Theme (perché se non stai ancora usando un Child Theme, non puoi fare questa operazione) che vada a fare un “dequeue” del CSS Parent, per poi fare un “enqueue” del CSS che vuoi venga letto. Questa pratica è molto complessa e ti consiglio di farti aiutare da noi o da un altro sviluppatore skillato.

Se ti senti abbastanza sicuro delle tue capacità, ti segnaliamo una guida (solo in inglese) che spiega come utilizzare lo strumento e quali script scrivere in PHP. Buona fortuna!

Guida per il Dequeue del CSS parent 

Isolare e precaricare il Largest Contentful Paint e altre risorse chiave.

Ora, sappiamo che i tre Core Web Vitals che sono diventati determinanti per la loro influenza sul Ranking sono Largest Contentful Paint, Time to Interactive e Cumulative Layout Shift. Se il tuo Largest Contentful Paint è ancora lento, devi dargli assoluta priorità nel caricamento.

Questo si ottiene effettuando il “preload” della risorsa in questione. Per identificare qual’è il Largest Contentful Paint (in genere una hero o la sezione principale della pagina), usa ancora una volta i Chrome Web Tools (click destro, ispeziona elemento). Questa volta spostati sulla tab “Performance” e clicca il pulsante “record”. A quel punto fai un refresh della pagina. Quando è tutto caricato, interrompi la registrazione ed esamina il grafico.

Trova il valore LCP nel grafico con gli screenshots, ed esso verrà evidenziato sulla tua pagina. Nel caso di Fuel LAB; fortunatamente, è un blocco di testo sulla homepage corrispondente ad H1.

A questo punto puoi pescare l’url della risorsa, ed inserirla in una serie di regole di precaricamento del sito web. Anche in questo caso, se non sei in grado di farlo manualmente, puoi affidarti ad uno dei tanti plugin di Wordpress (attenzione però, meglio usarne il meno possibile) che svolgono questa funzione (Perfmatters fa anche questo, e ci piace proprio un bel pò).

Conclusioni

Il modo migliore di affrontare questa ottimizzazione è senz’altro, nel caso in cui non disponiate di uno sviluppatore capace, di affidarsi ad un’agenzia specializzata oppure di tentare di farsi aiutare da dei plugin. Un’altro plugin freemium che consigliamo è Asset Cleanup, che permette anche di attivare selettivamente e solo su alcune pagine script e plugins.

Se avete domande o commenti su questo argomento, ricordate di farcelo sapere nei commenti!