Je voulais vérifier s'il était possible d'obtenir un score parfait de 100/100 sur Google PageSpeed Insights avec un site Web construit avec WordPress, le constructeur de pages Elementor et le thème Astra.
J'ai décidé de construire mon propre site Web https://davidloor.com/ en utilisant WordPress avec Elementor et en suivant les recommandations que je décrirai ci-dessous, mon site Web obtient 100/100 comme vous pouvez le voir sur la capture d'écran suivante.

Ce guide suppose que vous avez un site WordPress opérationnel.

Créer un compte gratuit sur Cloudflare

"Cloudflare est l'un des plus grands réseaux opérant sur Internet. Les gens utilisent les services de Cloudflare pour augmenter la sécurité et les performances de leurs sites Web et services." Il existe une version gratuite que j'utilise pour mon site Web.
Vous pouvez créer un compte gratuit ici : https://dash.cloudflare.com/sign-up

Pour plus de détails sur Cloudflare, vous pouvez consulter leur propre documentation à l'adresse https://www.cloudflare.com/learning/what-is-cloudflare/

Une fois l'inscription au compte terminée, allez sur https://dash.cloudflare.com/profile/api-tokens, dans la clé API globale, cliquez sur Afficher, entrez votre mot de passe et copiez la clé que nous utiliserons dans les étapes suivantes.

Installer des plugins WordPress gratuits

Nous devons installer deux plugins sur notre site WordPress. Si vous ne savez pas comment installer un plugin dans WordPress, veuillez visiter ce lien pour acquérir le savoir-faire.

1. Autoptimize

Le plugin peut être téléchargé depuis ce lien.

Sur cette page, https://VOTRE-SITE/wp-admin/options-general.php?page=autoptimize activez toutes les options activées, mais laissez les suivantes désactivées :

Optimiser également pour les éditeurs/administrateurs connectés ?
Conserver les commentaires HTML ?

Sur cette page, https://VOTRE-SITE/wp-admin/options-general.php?page=autoptimize_imgopt activez toutes les options.

Sur cette page, https://VOTRE-SITE/wp-admin/options-general.php?page=autoptimize_extra cochez toutes les cases, et si vous n'utilisez pas les polices Google, sélectionnez l'option Supprimer les polices Google et cliquez sur enregistrer.

2. WP Cloudflare Super Page Cache

Le plugin peut être téléchargé depuis ce lien.

Sur cette page, http://VOTRE-SITE/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index entrez l'e-mail que vous avez utilisé pour créer le compte Cloudflare et la clé API que vous avez obtenue comme expliqué ci-dessus.

Sur cette page, https://VOTRE-SITE/wp-admin/options-general.php?page=wp-cloudflare-super-page-cache-index assurez-vous que l'option Activer le cache de page de secours est activée, afin qu'au cas où la page ne pourrait pas être mise en cache dans Cloudflare, le cache du disque puisse être utilisé.

3. Désactiver les polices par défaut du thème Astra et du plugin Elementor

Placez les filtres suivants dans le fichier functions.php de votre thème.

/**
 * Désactiver les polices astra par défaut.
 */
add_filter( 'astra_enable_default_fonts', '__return_false' );
/**
 * Désactiver les polices Google astra.
 */
add_filter('astra_google_fonts_selected', function($fonts) {
    return [];
});
/**
 * Désactiver les polices Google d'elementor.
 */
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Mise à jour du 02/12/2022

J'ai remplacé le thème astra par le thème hello elementor, https://elementor.com/hello-theme/, et cela a aidé à obtenir 100/100 sur mobile également.

#Elementor

Comment obtenir 100/100 sur Google PageSpeed Insights avec un site WordPress et le constructeur de pages Elementor

Restez Informé