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.

Pas si vite !

Elementor – Changer la couleur de son header au scroll

SubMagic : G√©n√©rer des sous-titres √† vos vid√©os avec l’IA

Stripe : du devis au paiement en ligne, la solution idéale