Comment avoir un score de 100/100 sur PageSpeed Mobile ?

La vitesse est importante lorsqu’il s’agit de conversions de sites Web et d’optimisation des moteurs de recherche. Si votre site Web n’est pas rapide, les internautes le quitteront rapidement. Cependant, il peut être difficile d’accélérer votre site Web. Le problème peut venir d’un code mal écrit, d’images ou d’éléments de page trop volumineux.

Vous devez résoudre les problèmes de votre site Web rapidement, car Google diminuera votre positionnement si vous ne le faites pas.

La vitesse de votre site Web est très importante. Plus votre site se charge rapidement, moins les internautes sont susceptibles de le quitter (ou « rebondir« ). Si votre site est rapide, vous avez plus de chances d’être mieux classé sur Google que les sites lents qui ont un taux de rebond élevé.

Heureusement, Google propose l’outil PageSpeed Insights pour déterminer ce que vous devez corriger. Malheureusement, il ne vous donne pas les meilleures instructions pour que votre score atteigne 100% facilement.

Vous allez découvrir, dans cet article, comment obtenir un score parfait de 100% sur Google PageSpeed Insights et pourquoi il est si important de le faire.

Si vous n’avez pas le temps ni l’envie de lire cet article, n’hésitez pas à vous tourner vers le support technique d’EasyHoster qui saura vous donner des conseils personnalisés pour améliorer votre score Google PageSpeed Insights et GTmextrix !

💡 Résumé des questions et éléments à aborder pour avoir un score PageSpeed de 100 :

Pourquoi avoir un site rapide n’est plus une option en 2024 ?	L’importance de la vitesse de chargement pour l’expérience utilisateur et le classement SEO. Impact négatif d’un site lent sur la fidélité des utilisateurs.
Lien entre vitesse de chargement et référencement Google (SEO)	L’impact de la vitesse de chargement sur le classement SEO. Comment un site lent peut frustrer les utilisateurs.
Les performances influencent-elles l’UX de votre site ?	Importance de la vitesse du site pour l’expérience utilisateur selon les moteurs de recherche. Les utilisateurs quittent rapidement les sites à chargement lent.
Comment vérifier la vitesse de chargement de votre site WordPress ?	Utilisation d’outils comme Google PageSpeed Insights pour tester la vitesse du site. Importance de l’emplacement du serveur de test.
Obtenir un bon score Google PageSpeed Insights améliore-t-il votre CRO (Conversion Rate Optimization) ?	L’amélioration de la vitesse du site peut augmenter le taux de conversion. L’amélioration du classement SEO et de l’UX peut également augmenter les conversions.
Est-il possible d’avoir un score Google PageSpeed situé entre 90 et 100% avec WordPress et Divi ?	Modifications de configuration et de code nécessaires pour améliorer le score avec Divi. Comment décharger le fichier CSS Divi/style-static.min.css peut améliorer le score. |
Comment décharger le parent style-static.min.css et charger votre propre fichier CSS à la place dans Divi ?	Solutions proposées pour décharger le fichier CSS parent et charger votre propre fichier CSS.
Questions à se poser pour améliorer son résultat Google PageSpeed avec Divi ?	Liste de questions à se poser pour améliorer le score Google PageSpeed avec Divi.
Votre site a-t-il un mauvais score Google PageSpeed sur mobile ?	Comment des éléments tels qu’une vidéo en arrière-plan trop lourde peuvent affecter négativement le score mobile.

Pourquoi avoir un site rapide n’est plus une option en 2024 ?

La vitesse de chargement d’un site WordPress est importante car elle influe sur la manière dont les utilisateurs interagissent avec votre site Web. Si vos pages sont lentes à charger, les utilisateurs quitteront votre site Web avant qu’il n’ait eu le temps de se charger complètement. Cela peut nuire au classement de votre site dans les moteurs de recherche et inciter des clients potentiels à se rendre sur le site d’un concurrent.

La vitesse des pages est l’un des facteurs les plus importants pour le référencement en plus de la qualité des contenus proposé (update Helpful content). Lorsque vos pages se chargent rapidement, vous êtes mieux classé, les utilisateurs ont une meilleure expérience et vous convertissez plus de visiteurs en clients.

C’est un exemple rare d’une mesure de référencement qui aide tout le monde !

Lien entre vitesse de chargement du site et votre référencement Google (SEO) ?

Les moteurs de recherche comme Google veulent offrir à leurs utilisateurs la meilleure expérience possible. C’est pourquoi ils examinent désormais la rapidité de chargement de vos pages pour les classer. En effet, les pages qui se chargent lentement peuvent être frustrantes pour les utilisateurs et les inciter à quitter votre site.

La mise à jour de l’expérience des pages de Google est devenu un facteur encore plus important depuis mai 2021.

Personnellement, nous avons réussi à atteindre un score situé entre 90 et 100% sur mobile via Google PageSpeed Insights avec un site Web Divi assez lourd ! Vous pourrez donc le faire aussi.

Si vous vous êtes longtemps concentré sur d’autres éléments de votre site en vous disant que le score Google PageSpeed Insight n’avait que peu d’importance pour le SEO… Ou si pendant longtemps vous n’avez pas fait confiance aux Core Vitals pour votre SEO…

Aujourd’hui, vous devriez changer d’avis ! Si vous appliquer les conseils contenu dans cet article, vous pourrez voir l’impact des avertissements de votre Search Console sur le classement de votre site sur Google !

Du coup, il est temps pour vous aussi, si vous êtes là, d’apprendre à bien gérer Divi & PageSpeed. Bien sûr, Divi reste un thème un peu plus « lourd », et sa complexité rend difficile la personnalisation de son code. Cela nécessitera donc des interventions un peu technique.

Les performances influencent-elles l’UX de votre site ?

Les moteurs de recherche considèrent que la vitesse des sites Web est un facteur important car elle affecte l’expérience des utilisateurs. C’est pourquoi la vitesse des sites Web fait partie de leurs algorithmes de classement.

En général, les internautes ne restent que quelques secondes sur un site Web si celui-ci est trop long à charger. Donc, si votre page Web prend plus de 3 secondes, la plupart des gens ne l’attendront pas.

Vous devez être vraiment intéressé par ce contenu pour attendre aussi longtemps.

Les sites Web qui se chargent rapidement offrent une meilleure expérience aux utilisateurs. Plus le site est rapide, plus l’utilisateur a de chances de rester sur le site. Les moteurs de recherche tiennent compte de cet aspect lorsqu’ils classent les sites Web.

Comment vérifier la vitesse de chargement de votre site WordPress ?

Il existe de nombreux outils permettant de tester la vitesse de chargement de votre site Web. Un bon outil gratuit est Google PageSpeed Insights. Cet outil vous indiquera la qualité du chargement de votre site Web et vous donnera également des suggestions sur la manière d’améliorer la vitesse.

Notez que pour obtenir un score précis sur PageSpeed, vérifiez que vous êtes biens sur un serveur de test Européen si votre site est hébergé en Europe. Si vous êtes actuellement à l’étranger, utilisez un VPN.

Obtenir un bon score Google PageSpeed Insights pourrait-il améliorer votre CRO (Conversion Rate Optimization) ?

L’un des trois principaux avantages de l’accélération de votre site Web est l’optimisation du taux de conversion. L’optimisation du taux de conversion s’améliore souvent lorsque vous accélérez votre site Web, car les internautes ne quitteront pas votre site parce qu’il est lent. Au total, l’accélération de votre site Web vous aidera à obtenir un meilleur classement, offrira à vos utilisateurs une meilleure expérience et améliorera vos chances d’obtenir cette conversion si importante.

Est-il possible d’avoir un score Google PageSpeed situé entre 90 et 100% avec WordPress et Divi ?

Pour obtenir un score PageSpeed de 90 ou plus avec Divi, vous devrez apporter quelques modifications à la configuration de votre site Web. Nous allons vous donner quelques idées dans cet article afin que vous atteignez de tels résultats sur votre site.

Par exemple, il serait nécessaire d’enlever de « la file d’attente » (dequeue) le fichier CSS Divi/style-static.min.css pour supprimer la police d’icônes FontAwesome de Divi… En appliquant cette modification sur votre site WordPress doté du thème Divi, cela devrait déjà vous faire gagner 5 bons points sur notre résultat Google PageSpeed Insights ! C’est déjà un premier pas !

Bien sûr, il sera nécessaire de faire quelques autres changements en utilisant votre propre fichier CSS style-static-child.css codé en dur (hardcodé), pour le rendre plus léger !

Là où cela devient plus compliqué, c’est lorsque vous voudrez dequeue / décharger votre fichier CSS hardcodé. C’est ce que nous allons voir dans le point suivant.

Comment décharger le parent style-static.min.css et charger votre propre fichier CSS à la place dans Divi ?

Vous savez déjà probablement comment décharger une feuille de style en utilisant wp_dequeue_style, mais il semble que Divi étant plus complexe, le wp_dequeue_style classique de WordPress ne fonctionne pas très bien.

1ère solution

La meilleure solution à envisager est de décharger le divi-style-parent et d’intégrer sa feuille de style avec une balise HTML dans Child/header.php… Ce n’est pas la façon la plus propre de faire, par contre.

Voici ce que contiendrait alors votre fichier functions.php:

function dequeue_divi_style() {

if(!is_search())

{

wp_dequeue_style('divi-style-parent');

wp_deregister_style('divi-style-parent');

// wp_enqueue_style( 'divi', get_stylesheet_directory_uri() . '/divi-style-static-4.18.0.css' ); Does not works, temporarily included via header.php

}

}

add_action( 'wp_enqueue_scripts', 'dequeue_divi_style', 15 );

2ème solution

Vous pourriez également utiliser ce code :

/**

* Constructor

*

* @since 1.0.0

*/

public function __construct()

{

/**

* Call the main controller

*

* @since 1.0.0

*/

$this->initialize();

} //end constructor

/**

* Initialize

*

* @since 1.0.0

*/

public function initialize()

{

if ( ! is_admin() ) :

add_action( 'wp_enqueue_scripts', [ $this, 'enqueue' ], PHP_INT_MAX );

endif;

} // end initialize

/**

* Enqueeu Styles and Scripts

*

* @since 1.0.0

*/

public function enqueue()

{

// Dequeue Google Fonts, scripts and styles

wp_dequeue_style( 'divi-fonts' ); // Open Sans

wp_dequeue_style( 'divi-style' ); // Childtheme Default Style

// Do some other stuff related to pages, taxonomies etc. like enqueue, register and so on..

} // end enqueue

3ème solution

Cette troisième solution peut également s’avérer très utile (placez ce code dans initialize) :

add_action( 'init', [ $this, 'removeActions' ] );

/**

* Remove unneeded actions

*

* @since 1.0.0

*/

public function removeActions()

{

// all actions related to emojis

remove_action( 'admin_print_styles', 'print_emoji_styles' );

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );

remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );

remove_action( 'wp_print_styles', 'print_emoji_styles' );

remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );

remove_filter( 'the_content_feed', 'wp_staticize_emoji' );

remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );

} // end removeActions

4ème solution

Il est également possible de charger se propre feuille de style via un plugin personnalisé (c’est facile). Mettez ce code dans votre plugin :

$plugin_url = plugin_dir_url( __FILE__ );
wp_enqueue_style( 'myown-divi', $plugin_url . 'divi-custom-style-static-4.18.0.css' );

7 questions à se poser pour améliorer son résultat Google PageSpeed avec Divi

1. Avez-vous bien configuré un système de cache et d’optimisation des performances efficace, comme WP Rocket, sur votre site WordPress ?
2. Quel est votre TTFB actuel ?
3. Votre base de données ne contient-elle pas de nombreuses données inutiles ?
4. Utilisez-vous le format Webp pour vos images ?
5. Vos images ont-elles de bonnes dimensions sur ordinateur ? et sur mobile ? Ne sont-elles pas trop grandes ?
6. Hébergez-vous localement vos polices d’écriture ou d’icônes ?
7. Pouvez-vous décharger certains scripts sur certaines pages de votre site ? Exemple, si vous utilisez Contact Form 7 sur votre site, les scripts liés à celui-ci ne devraient être activé que sur la page de contact par ailleurs.

Votre site a-t-il un mauvais score Google PageSpeed sur mobile ?

Si la version mobile de votre site obtient un plus mauvais score que la version ordinateur, c’est peut-être parce qu’elle utilise une vidéo en arrière-plan qui occupe beaucoup d’espace ? C’est le cas de nombreux sites. C’est vrai qu’une vidéo en en-tête, c’est très joli.

Par contre, niveau performance, ce n’est malheureusement pas terrible.

Pour réussir à faire gagner un site en performance, il est parfois nécessaire d’évaluer la balance rentabilité et performance d’un plugin et/ou d’une fonctionnalité. Si elle est vitale à la rentabilité de votre projet, bien sûr, vous devez la conserver. Par contre, s’il s’agissait d’esthétisme uniquement…. à vous de voir.

Votre hébergeur vous permet-il d’avoir un bon score PageSpeed ?

En réalité, vous aurez beau optimiser les performances de votre site WordPress, si votre hébergeur n’est pas à la hauteur, il sera compliqué (voire impossible) d’avoir un bon score PageSpeed.

Il devient donc essentiel de choisir un hébergement WordPress qui prend en compte la vitesse de chargement de sites et surtout qui saura vous conseiller pour les optimisations de votre WordPress.

Par exemple, si vous utilisez actuellement un petit VPS DigitalOcean allemand avec Apache. Votre TTFB sera correct, mais il est probable qu’il n’encaisse pas beaucoup de charge. Si vous souhaitez absolument rester sur un tel VPS, il serait probablement nécessaire de passer de Apache à Litespeed pour pouvoir encaisser plus de trafic.

Pour encaisser plus de trafic, si votre site parvient à générer du trafic depuis Google Discover par exemple, vous pourriez envisager un serveur dédié OVH Bare Metal à 200$/mois, par exemple. Par contre, ce tarif ne vous permettrait de disposer que d’une machine « nue ». Il faudrait compter un budget supplémentaire pour des logiciels tiers comme cPanel, CloudLinux… Ce serveur Bare Metal de coeurs 16 CPU, 64 Go de RAM avec Apache vous permettrait de grimper facilement jusqu’à 200.000 visites quotidienne sans que votre serveur ne surcharge. Ce qui est mieux qu’un VPS qui n’est parfois pas beaucoup moins cher.

Veillez également à utiliser la version 10.5 de MariaDB comme gestionnaire de base de données.

Enfin, pensez à monitorer votre TTFB avec un outil comme UptimeRobot. Attention, comme expliqué précédemment, le TTFB indiqué dans un test Googe PageSpeed dépend toujours de la localisation du serveur. Vous pouvez le vérifier ​​en survolant l’icône Wifi, sous les résultats.

Si vous n’êtes pas satisfait des performances de votre hébergeur actuel ou cherchez à obtenir de l’aide auprès d’un support technique prêt à discuter « PageSpeed » avec vous, nous vous recommandons de tester les services d’EasyHoster qui est bien plus qu’un hébergeur.

EasyHoster met en avant le fait d’être un hébergeur PageSpeed. Pour prouver qu’ils sont prêts à conseiller leurs clients pour les aider à atteindre un résultat « dans le vert », ils ont monté un site hébergé sur leur infrastructure sur lequel ils ont appliqués tous leurs conseils… et ils vous l’expliquent sous forme de slides !

Et après vérification sur Google PageSpeed, en effet, leur site de test construit avec WordPress, le thème Astra et le constructeur de page Elementor… il atteint bien un score de 100 sur PageSpeed Mobile !

Si vous n’avez pas spécialement envie de « discuter TTFB / PageSpeed » avec votre hébergeur mais souhaitez malgré tout héberger votre site chez un fournisseur de qualité, consultez notre article de fond sur les meilleurs hébergeurs WordPress de 2022.

Les 12 optimisations à appliquer sur votre site WordPress pour atteindre un score de 100% sur Google PageSpeed

1. La mise en cache

Pour cela, nous vous recommandons d’utiliser :

• WP Rocket, pour le cache de fichiers
• et OPCache (bien configuré, pas la configuration par défaut) pour le cache serveur
• et Redis Object Cache (un vrai must pour booster la vitesse du tableau de bord) également pour le cache serveur

2. Le Report d’exécution du JavaScript tant qu’il n’y a pas eu d’interaction sur votre site

Pour cela, nous vous recommandons d’utiliser :

• WP Rocket
• ou Meteor
• ou FlyingPress

3. Le nettoyage et l’optimisation de votre base de données

Supprimer régulièrement les anciennes révisions et transients, ainsi que les tables inutilisées des plugins supprimés.

De même, convertir toutes vos tables en InnoDB est un plus.

4. Un scan des performances de votre site (PHP X-Ray)

Si vous avez la chance d’avoir accès à l’outil premium PHP X-RAY (un véritable must !) de CloudLinux, ils saura vous aider à surveiller les latences des plugins/requêtes de votre site WordPress afin d’identifier lequel consomme le plus vos ressources.

Certains hébergeurs comme EasyHoster mettent à votre disposition cet outil fantastique gratuitement.

5. La compression GZIP

Afin de servir des pages statiques compressées pensez à activer la compression GZIP via WP Rocket et du côté de votre serveur.

6. Les CRONs et le Heartbeat

Évitez le chargement pas admin-ajax en front-end en repérant, avec PHP X-Ray, si l’un de vos plugins lance des tâches CRONs en frontend.

Si vous ne pouvez pas l’empêcher de faire cela, ou si vous ne pouvez pas vous passer de ce plugin, ce qui peut aider, c’est de prendre le contrôle sur vos CRONs WordPress. Pour cela mettez en place, si vous êtes sur cPanel, de véritables CRONs cPanel via un outil comme WordPress Toolkit.

Pensez également à contrôler le Heartbeat de votre WordPress avec un plugin comme WP Rocket ou Heartbeat control (de WP Rocket).

7. Les Webp

Bien sûr, passez vos images en Webp, Google adore ça.

Vous pouvez convertir vos images en WebP avec le plugin gratuit WebP Express.

Pensez à activer l’option WebP de WP Rocket afin qu’il les servent à vos visiteurs, si vous avez optez pour celui-ci comme plugin de performance.

8. Les dimensions des images

Servez la bonne taille d’images aux bons écrans !

WP Rocket ajoute des tailles dans les médias. Alternativement, nous avons découvert Specify Missing Image Dimensions qui ajoute la largeur/hauteur manquante, mais c’est moins bien que WP Rocket.

Faites de votre mieux pour sélectionner des images plus petites pour une vue mobile above the fold (au dessus de la ligne de flottaison), dans le Divi Builder.

De plus, si vous souhaitez afficher des icônes above the fold, plutôt que charger une police d’icône, convertissez-les en SVG. Cela vous permettra d’alléger votre critical content.

9. Les CDN

L’utilisation d’un CDN comme KeyCDN peut également vous faire gagner quelques points sur votre score Google PageSpeed.

10. Les polices d’écritures et d’icônes

Si vous utilisez FontAwesome, envisagez de l’auto-héberger et de le servir de manière asynchrone à partir de votre CDN (nous ne recommandons pas le CDN de FontAwesome).

D’ailleurs, attention, certains plugins embarquent aussi leur propre police FontAwesome.

Du coup, vous chargez la vôtre et la leur ! Ce sont des fichiers qui sont lours et longs à charger. Sur ordinateur, nous ne nous en rendons pas compte mais sur une connexion mobile lente, cela peut rendre le site invisitable !

Pensez donc à les décharger quand c’est possible.

Cette remarque est similaire à la précédente, n’utilisez qu’une seule police Google sur votre site ! C’est vrai c’est joli de mettre les titres dans une police, le corps du texte dans une autre et les boutons dans une autre… mais cela fait 3 polices d’écriture à charger ! Pensez aux pauvres mobinautes 🙁

11. Le WP jQuery

Pensez à remplacer le WP jQuery par le Google CDN jquery. D’après notre expérience, PageSpeed ​​a l’air d’aimer ça.

12. Les assets et plugins

Désactiver de manière sélective les assets et les plugins où ils sont inutiles.

Utilisez le plugin Asset CleanUp pour décharger les nombreux JS/CSS inutiles sur certaines pages, c’est un must ! Vous pourriez également essayer le plugin Plugin Organizer pour décharger le code PHP de manière sélective. Ce second plugin, réservé aux experts, demande un peu plus de travail et il n’affecte pas les pages statiques en cache.

Par contre, il reste très utile en complément d’Asset CleanUp pour par exemple, désactiver / réactiver des plugins faisant des appel à l’admin-ajax

En bref, que devez-vous retenir pour l’amélioration de votre score Google PageSpeed ?

Lorsque vous construisez un site Web, vous voulez qu’il soit parfait. Vous voulez que chaque image, chaque élément et chaque icône soient parfaits. Mais parfois, cela rend le site Web plus lent que ce que Google recommande.

Les internautes ne veulent pas attendre longtemps le chargement de votre site Web. S’il prend plus de 10 secondes, ils risquent de se rendre sur un autre site.

L’une de vos principales priorités lorsque vous essayez d’améliorer votre site Web devrait être d’obtenir de bons résultats au test PageSpeed Insights. Pour commencer, vous devez identifier les problèmes à l’origine des mauvaises performances de votre site.

Quelle est la cause de la mauvaise présentation de votre site Web ? S’agit-il des images, des éléments de la page ou du texte ? Est-ce dû à un mauvais codage ? Tous ces éléments peuvent être des facteurs.

Vous pouvez utiliser l’outil Google PageSpeed Insights pour voir où se situe le problème. Ensuite, vous pouvez travailler à le résoudre. Vous pouvez notamment réduire le code, compresser les images, ajouter un système de mise en cache, bref, appliquer tous les conseils que nous vous avons présentés ici.

Ce sont des mesures qui peuvent réellement contribuer à améliorer votre score PageSpeed Insight. Elles peuvent paraitre complexes à mettre en, et certaines le sont effectivement…

N’hésitez donc pas à vous tourner vers le support d’EasyHoster si vous souhaitez obtenir des conseils personnalisés et de l’assistance pour enfin obtenir 100% sur Google PageSpeed pour votre site WordPress.

En veillant à ce que votre site obtienne un score parfait de 100 % sur PageSpeed Insights de Google, vous lui donnerez le coup de pouce dont il a besoin pour vous amener vers le succès.