Torna al blog

Come ottenere 100/100 su Google PageSpeed Insights con un sito WordPress e il page builder Elementor

2021-03-075 min di lettura

Volevo verificare se fosse possibile ottenere un punteggio perfetto di 100/100 su Google PageSpeed Insights con un sito web creato con WordPress, il page builder Elementor e il tema Astra.
Ho deciso di costruire il mio sito web https://davidloor.com/ utilizzando WordPress con Elementor e seguendo le raccomandazioni che descriverò di seguito, il mio sito web sta ottenendo 100/100 come potete vedere nello screenshot seguente.

Questa guida presuppone che tu abbia un sito WordPress funzionante.

Crea un account gratuito su Cloudflare

"Cloudflare è una delle più grandi reti che operano su Internet. Le persone utilizzano i servizi Cloudflare per aumentare la sicurezza e le prestazioni dei propri siti web e servizi." Ha una versione gratuita che è quella che sto usando per il mio sito web.
Puoi creare un account gratuito da qui: https://dash.cloudflare.com/sign-up

Per maggiori dettagli su Cloudflare, puoi visitare la loro documentazione su https://www.cloudflare.com/learning/what-is-cloudflare/

Una volta completata la registrazione dell'account, vai su https://dash.cloudflare.com/profile/api-tokens, nella Global API Key, fai clic su Visualizza, inserisci la tua password e copia la Chiave che utilizzeremo nei passaggi successivi.

Installa plugin WordPress gratuiti

Dobbiamo installare due plugin sul nostro sito WordPress. Se non sai come installare un plugin in WordPress, visita questo Link e acquisisci le conoscenze.

1. Autoptimize

Il plugin può essere scaricato da questo Link.

In questa pagina, https://TUO-SITO/wp-admin/options-general.php?page=autoptimize abilita tutte le opzioni abilitate, ma tieni disabilitate le seguenti:

  1. Ottimizza anche per editor/amministratori connessi?
  2. Mantieni i commenti HTML?

In questa pagina, https://TUO-SITO/wp-admin/options-general.php?page=autoptimize_imgopt abilita tutte le opzioni.

In questa pagina, https://TUO-SITO/wp-admin/options-general.php?page=autoptimize_extra abilita tutte le caselle di controllo e, se non stai utilizzando i Google Fonts, seleziona l'opzione Rimuovi Google Fonts e fai clic su Salva.

2. WP Cloudflare Super Page Cache

Il plugin può essere scaricato da questo Link.

In questa pagina, http://TUO-SITO/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index inserisci l'email che hai utilizzato per creare l'account Cloudflare e la chiave API che hai ottenuto come spiegato sopra.

In questa pagina, https://TUO-SITO/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index assicurati che l'opzione Abilita cache di fallback della pagina sia abilitata, in modo che nel caso in cui la pagina non possa essere memorizzata nella cache di Cloudflare, possa essere utilizzata la cache dal disco.

3. Disabilita i font predefiniti dal tema Astra e dal plugin Elementor

Inserisci i seguenti filtri nel file functions.php del tuo tema.

/**
 * Disabilita i font predefiniti di Astra.
 */
add_filter( 'astra_enable_default_fonts', '__return_false' );
/**
 * Disabilita i Google Fonts di Astra.
 */
add_filter('astra_google_fonts_selected', function($fonts) {
    return [];
});
/**
 * Disabilita i Google Fonts da Elementor.
 */
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Aggiornamento del 02/12/2022

Sono passato dal tema Astra al tema Hello Elementor, https://elementor.com/hello-theme/, e questo ha aiutato a ottenere 100/100 anche su mobile.