Ik wilde controleren of het mogelijk is om een perfecte score van 100/100 te behalen op Google PageSpeed Insights met een website gebouwd met WordPress, de page builder Elementor en het Astra-thema.
Ik besloot mijn eigen website te bouwen https://davidloor.com/ met behulp van WordPress met Elementor en door de aanbevelingen te volgen die ik hieronder zal beschrijven, scoort mijn website 100/100, zoals u kunt zien in de volgende screenshot.

Deze handleiding gaat ervan uit dat u een WordPress-site hebt draaien.

Maak een gratis account aan op Cloudflare

"Cloudflare is een van de grootste netwerken die op het internet actief zijn. Mensen gebruiken de diensten van Cloudflare om de beveiliging en prestaties van hun websites en diensten te verbeteren." Het heeft een gratis versie, die ik gebruik voor mijn website.
U kunt hier een gratis account aanmaken: https://dash.cloudflare.com/sign-up

Voor meer details over Cloudflare kunt u hun eigen documentatie bezoeken op https://www.cloudflare.com/learning/what-is-cloudflare/

Nadat u de accountregistratie hebt voltooid, gaat u naar https://dash.cloudflare.com/profile/api-tokens. Klik bij Global API Key op Bekijken, voer uw wachtwoord in en kopieer de sleutel die we in de volgende stappen zullen gebruiken.

Installeer gratis WordPress-plugins

We moeten twee plugins op onze WordPress-site installeren. Als u niet weet hoe u een plugin in WordPress installeert, bezoek dan deze link en leer hoe het moet.

1. Autoptimize

De plugin kan worden gedownload van deze link.

Op deze pagina, https://UW-SITE/wp-admin/options-general.php?page=autoptimize, schakelt u alle opties in, maar houdt u de volgende opties uitgeschakeld:

Optimaliseer ook voor ingelogde editors/beheerders?
HTML-opmerkingen behouden?

Op deze pagina, https://UW-SITE/wp-admin/options-general.php?page=autoptimize_imgopt, schakelt u alle opties in.

Op deze pagina, https://UW-SITE/wp-admin/options-general.php?page=autoptimize_extra, schakelt u alle selectievakjes in en als u geen Google Fonts gebruikt, selecteert u de optie Verwijder Google Fonts en klikt u op opslaan.

2. WP Cloudflare Super Page Cache

De plugin kan worden gedownload van deze link.

Voer op deze pagina, http://UW-SITE/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index, de e-mail in die u hebt gebruikt om het Cloudflare-account aan te maken en de API-sleutel die u hierboven hebt verkregen.

Zorg ervoor dat op deze pagina, https://UW-SITE/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index, de optie Fallback page cache inschakelen is ingeschakeld, zodat de cache van de schijf kan worden gebruikt als de pagina niet in Cloudflare kan worden gecached.

3. Schakel de standaardlettertypen van het Astra-thema en de Elementor-plugin uit

Plaats de volgende filters in het functions.php-bestand van uw thema.

/**
 * Schakel standaard Astra-lettertypen uit.
 */
add_filter( 'astra_enable_default_fonts', '__return_false' );
/**
 * Schakel Astra Google Fonts uit.
 */
add_filter('astra_google_fonts_selected', function($fonts) {
    return [];
});
/**
 * Schakel Google Fonts uit Elementor uit.
 */
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Update op 02/12/2022

Ik ben overgestapt van het Astra-thema naar het Hello Elementor-thema, https://elementor.com/hello-theme/, en dat heeft geholpen om ook op mobiel 100/100 te scoren.

#Elementor

Hoe je 100/100 scoort op Google PageSpeed Insights met een WordPress-site en de page builder Elementor