PageSpeed Insights : Passer de 54 à 94 avec Crocoblock

Cet article abordera, en détail, les étapes nécessaires pour augmenter significativement votre score sur l'outil Google PageSpeed Insights avec les sites utilisant la suite de plugins Crocoblock.

Google PageSpeed Insights, c'est quoi ?

Google PageSpeed Insight est un outil de diagnostic en ligne qui permet aux propriétaires de sites web de mesurer la vitesse et la performance de leur site sur mobile et ordinateur.

 

Cet outil fournit une analyse détaillée de la vitesse de chargement des pages, de la taille des fichiers, du nombre de requêtes HTTP, ainsi que des suggestions pour optimiser les performances du site.

 

Les résultats de Page Speed Insight sont basés sur une évaluation de plusieurs facteurs clés tels que la taille du contenu, la complexité de la page, la configuration du serveur et la qualité du réseau. En utilisant cet outil, vous pouvez améliorer l’expérience utilisateur en optimisant la vitesse de votre site, ce qui a un impact positif sur le référencement et le trafic organique.

Comprendre la structuration de votre site

Dans cette partie, vous serez en mesure – étape par étape – d’améliorer significativement votre score. La règle d’or : connaître de A à Z votre site internet, afin de prendre les décisions appropriées.

 

L’ensemble des recommandations portées ci-dessous ne sont en aucun cas un jugement sur les plugins évoqués. Crocoblock, comme tout outil à des avantages et des inconvénients. La faiblesse majeure de Crocoblock réside dans la capacité de ses plugins à évoluer afin de proposer une rapidité de chargement.

Les étapes évoquées ci-dessous ont été réalisées sur le site topicimes.fr, un portail pour réserver des activités de pleine nature en France.

1. Trier les extensions

Cette étape est primordiale, sans cela votre score n’augmentera pas significativement.

 

Regardez avec attention l’ensemble des plugins utilisés sur votre site. Etablissez une liste reprenant pour chacun des plugins les fonctionnalités qui y sont proposées ainsi que l’auteur.

 

Une fois votre liste terminée regardez si des fonctionnalités sont en double. C’est le cas ? Alors un ménage s’impose.

Exemple

Elementor :

  • Accordéon
  • Onglets
  • Slider
 

JetTabs :

  • Accodéon
  • Onglet

Dans notre exemple Elementor et JetTabs propose des fonctionnalités similaires, même si dans l’utilisation concrète chacun à ses propres avantages. Posez-vous la question : puis-je supprimer un plugin sans faire disparaître des fonctionnalités indispensables ?

 

La réponse est positive ? Supprimez le plugin et transformez les widgets en utilisant le plugin qui sera conservé.

Cas concret

Utilisant la très grande majorité des plugins de la suite de crocoblock, et après avoir supprimé ceux jugés inutiles étant en doublon avec Elementor PRO, cela a permis de gagner +20 points sur le score de Google PageSpeed Insights.

2. Avoir un hébergeur performant

Soyons honnête, vous pourrez faire toutes les tâches du monde, si votre hébergeur n’est pas performant la rapidité de votre site sera, quoi qu’il arrive, impactée.

 

Chez Topicimes, nous utilisons deux hébergeurs : Elementor Hosting & Kinsta. Ces hébergeurs sont très performants car ils proposent de nombreuses fonctionnalités basées sur les dernières technologies. 

 

Reprenons notre cas, topicimes.fr, site hébergé chez Kinsta, un hébergeur premium spécialisé WordPress.

L’abonnement Kinsta inclus :

  • CDN : propulsé par Cloudfare
  • Stockage SSD
  • Sauvegarde automatique
  • 35 centres de données dans le monde
  • Environnement de staging
  • Cache du site
  • Early Hints
  • Edge Caching
  • Etc.

Kinsta remplace bon nombre d’extensions d’optimisation ce qui améliore considérablement la vitesse de chargement et les performances au global.

Apprenez aujourd'hui à utiliser les outils de demain 🚀

Rejoignez les professionnels du marketing qui ont une longueur d’avance

3. Plugin d'optimisation : la fausse bonne idée

Un plugin d’optimisation de la vitesse pour WordPress tel que WP Rocket est un outil de gestion de cache qui permet d’optimiser les performances d’un site WordPress en réduisant le temps de chargement des pages.

 

Ce plugin utilise diverses techniques pour améliorer la vitesse de chargement du site telles que la compression de fichiers, la minification des codes HTML, CSS et JavaScript, la mise en cache des pages pour éviter les requêtes excessives au serveur et l’optimisation des images pour réduire leur taille sans compromettre leur qualité.

 

Cependant il faut être bien vigilant ! En effet, un plugin d’optimisation peut avoir l’effet inverse sur votre site et le ralentir. L’optimisation dépend de nombreux facteurs : librairies utilisées, configurations techniques du serveur, extensions, etc.

Typiquement, sur Topicimes, l’utilisation de WP Rocket faisait perdre jusqu’à 10 points.

Recommandations

Utilisez des extensions alternatives reprenant uniquement les fonctionnalités nécessaires.

Heartbeat Control par WP Rocket

L’API WordPress Heartbeat est une fonctionnalité intéressante qui permet une communication en temps réel entre le serveur et le navigateur lorsque vous êtes connecté à votre panneau d’administration WordPress. Elle utilise le fichier /wp-admin/admin-ajax.php pour lancer des appels AJAX depuis le navigateur. Par défaut, les requêtes AJAX sont envoyées toutes les 15 secondes sur les pages d’édition des articles, et toutes les 60 secondes sur le tableau de bord.

 

C’est en effet utile ; mais si vous laissez votre administration WordPress ouverte pendant de longues périodes (par exemple lorsque vous écrivez ou éditez des articles), les requêtes AJAX de l’API peuvent s’accumuler et générer une utilisation élevée du processeur, conduisant à des problèmes de performance du serveur et même à des suspensions de compte d’hébergement.

 

Avec Heartbeat Control de WP Rocket, vous pouvez facilement choisir de limiter ou d’arrêter complètement l’activité de l’API WordPress Heartbeat. Vous pouvez également ajouter des règles pour des emplacements spécifiques uniquement (tableau de bord, frontend ou éditeur d’articles).

Réglages

Une fois l’extension téléchargée, réglez la fréquence de pulsation à 300 pour l’ensemble des modules.

Imagify

Le plugin vous permet d’optimiser les images en une seule fois grâce à son option d’optimisation en masse asynchrone. Redimensionnez et optimisez automatiquement vos images au meilleur niveau de compression. Si nécessaire, vous pouvez toujours restaurer vos images dans leur version originale.

 

Imagify convertit également vos images en WebP, un format de nouvelle génération pour des images plus légères qui accélérera votre site WordPress, améliorera l’expérience utilisateur et même le référencement.

Recommandations

Cochez la case « Conserver une copie des images d’origine » afin de ne jamais perdre le fichier original.

Native Lazyload

Native Lazyload est une extension développée par Google qui utilise le chargement paresseux des médias en utilisant la fonction native du navigateur.

Si l’attribut de chargement n’est pas supporté par le navigateur, le plugin se rabat sur une solution JavaScript basée sur IntersectionObserver. Dans le cas où JavaScript est désactivé, mais que l’attribut de chargement est supporté par le navigateur, une variante noscript de l’élément concerné sera ajoutée et inclura également l’attribut de chargement sans aucun autre changement.

Recommandations

Aucun réglage, l’extension s’occupe du travail pour vous.

Résumé

Vous savez à présent les étapes nécessaires afin d’augmenter significativement votre score sur Google PageSpeed Insights en utilisant la suite crocoblock.

 

Cette méthode peut s’appliquer à n’importe quel site internet, il suffit d’être vigilant aux fonctionnalités utilisées lors du basculement d’un plugin à un autre.

Les étapes listées ci-dessous doivent être réalisées par le webmaster, qui connaîtra au mieux la configuration technique de votre site internet.

Articles similaires

Submagic : Générer des sous-titres à vos vidéos avec l’IA

Shots.so : Créer des mockups pour vos réseaux sociaux