Tutoriel, 100% sur PageSpeed : Mod PageSpeed, Plugins gratuits… (sans WP Rocket)

WP Rocket serait le meilleur plugin de cache WordPress pour atteindre 100/100 sur PageSpeed Mobile ? C’est ce que nous allons vérifier en cherchant à remplacer WP Rocket par des alternatives 100% gratuites, en visant le 100% sur PageSpeed Mobile !

Soulignons déjà que WP Rocket est plus qu’un simple “Plugin de cache”. C’est plutôt une « Suite de Performance complète », car WP Rocket embarque bien plus qu’un système de caching des pages, mais aussi de nombreuses autres optimisations de performances.

Donc, en toute logique, WP Rocket embarque aussi un prix !

Des tarifs en phase avec ses excellents résultats sur PageSpeed et le temps économisé lors des travaux d’optimisation.

Néanmoins, WP Rocket étant payant et les plugins gratuits faisant aussi partie de l’aventure WordPress, surtout en début de projet, nous ne pouvions passer à côté de cette étude complète “Alternatives Gratuites à WP Rocket”, consistant à développer une méthode et de vrais conseils pratiques pour Atteindre 100% sur PageSpeed Mobile, sans WP Rocket ! 😉

Dans ce dossier spécial PageSpeed, vous découvrirez :

1. Notre présentation et avis complet sur WP Rocket : est-il vraiment indispensable ? ↓
2. Notre solution alternative gratuite, basée sur les fonctionnalités du Mod PageSpeed de votre Hébergement Web, ainsi que quelques plugins WordPress bien choisis – Tutoriel complet et illustré ↓
3. La liste des meilleurs plugins de cache et d’optimisation des performances (alternatifs à WP Rocket), tous gratuits et open source ! ↓
4. Un vrai métier avec un gros marché se cache dans cet article pour les prestataires motivés qui voudraient proposer leurs services d’optimisation PageSpeed… ↓ 

Si vous étudiez attentivement cet article, vous allez comprendre que votre score PageSpeed Mobile (visons les 100/100) ne dépend pas que du plugin de cache utilisé, mais également de votre propre compréhension de la logique du scoring PageSpeed.

En conclusion de cet article, vous découvrirez qu’un vrai métier peut naître de ce dossier complet : Consultant Web Perf ↓

Avant d’entrer dans le vif du sujet, essayons de déterminer si oui ou non, cela vaut la peine de dépenser autant de temps et d’énergie à optimiser votre site pour PageSpeed Mobile.

Tout d’abord, un site rapide sur mobile aura plus de chance de conserver son trafic, et ce, grâce à une Meilleure Expérience Utilisateur. 

Vos visiteurs seront moins nombreux à quitter vos pages avant qu’elles ne finissent d’être chargées et vos utilisateurs resteront plus longtemps à naviguer agréablement à travers vos contenus.  

Tout cela paraît évident…

Mais un autre critère pourrait être encore plus important à vos yeux que le confort de navigation sur votre site… 🙂
Il s’agit de l’intérêt d’un bon score PageSpeed Mobile, pour votre Référencement sur Google !

Donc, avant de rentrer dans la technique, interrogeons-nous sur l’impact potentiel d’un bon score PageSpeed, notamment pour le référencement Google du site ayant été optimisé.

Un score de 100/100 sur PageSpeed Mobile, une technique SEO utile pour son référencement Google ?

Comme beaucoup de monde, pendant des années, le score PageSpeed Mobile n’était pas une priorité pour nous et paraissait presque inaccessible aux sites “complexes”.

“ Un score vert sur Desktop, c’est bien suffisant madame ! ”

Mais aujourd’hui, il y a un mais…
En mai 2021, Google a annoncé officiellement prendre en compte les « Core Web Vitals » pour le Ranking SEO (ou les « Signaux Web essentiels » en français).

“ Les annonces de Google, il faut savoir les lire entre les lignes, hein, monsieur ! ” 

On pensait comme vous !

Mais coïncidence mystique SEO, ou pas… pour nos propres sites enregistrés dans la Search Console, nous avons très souvent expérimenté des “yo-yo” dans nos positions qui semblaient “trop bien alignés” aux avertissements Core Web Vitals de nos consoles Google…

De plus, en 2021, tout l’écosystème WordPress anglo-saxon s’est arraché les cheveux pour mettre ses Thèmes & Plugins aux normes : Divi, Elementor et même Avada… 😁

Tous performent bien sur PageSpeed aujourd’hui !

Pourquoi tous ces développeurs de thèmes WordPress auraient-ils dépensé autant d’énergie ? 

Pour leur marketing ? Pour faire plus de ventes de Thèmes WordPress ?

Non, détrompez-vous, c’est pour le SEO de leurs utilisateurs !

“ Si un thème WordPress fait perdre du trafic Google à ses utilisateurs, sa mort est assurée ”

Pour tenter d’élucider ce mystère « PageSpeed, utile pour le SEO », voyons ce que pense la communauté SEO de Twitter concernant l’intérêt d’optimiser ses meilleurs sites pour PageSpeed, en vue d’améliorer son référencement Google… 

L’avis des référenceurs (SEO) sur l’impact de PageSpeed sur le référencement Google

En octobre 2022, soit plus de 16 mois après la prise en compte du score PageSpeed par Google Search, nous avons sondé la communauté SEO de Twitter pour connaître leur avis sur la question…

“ Visez-vous un score de +90/100 sur PageSpeed Mobile pour avoir un bon référencement Google ? ”

C’est la question qui a été posée.

Résultats des PageSpeed Awards :

Voici comment se sont répartis les votes…

   ① 46,6% pensent que le score PageSpeed n’est pas une priorité pour ranker

   ② 31,2% pensent qu’il faut mettre toutes les chances de son côté

   ③ 22,2% pensent qu’il est difficile d’atteindre +90% sur mobile, mais qu’il faudrait y arriver !

1. Les sceptiques.
Un peu moins de la moitié des SEO votants (46,6%) semblent se concentrer sur d’autres leviers pour faire grimper leurs sites sur Google.

2. Les convaincus et convertis.
Pour 31,2% des votants, il est évident que Google Search impose de nouvelles contraintes, probablement encore plus strictes pour percer sur des requêtes concurrentielles. 

3. Les convaincus prêts à s’y mettre.
Pour les 22,2% restants, l’optimisation de PageSpeed Mobile est très importante, mais les obstacles techniques sont encore trop importants.

Laissez-nous donc vous donner notre avis sur cette question SEO…

Une chose est sûre concernant la nécessité d’obtenir +90/100 sur PageSpeed Mobile,

L’ambiance est palpable dans la communauté WordPress et la sphère SEO White Hat, où l’on n’a jamais autant parlé de Qualité des Contenus et d’Expérience Utilisateur, y compris pour être référencé dans Google Discover.

Il nous semble donc évident que Google Search impose de nouvelles contraintes, surtout pour percer sur des requêtes « commerciales ».

“ En plus du contenu et des liens, ne faudrait-il pas cumuler un maximum de Signaux Positifs pour dépasser la Page 2 sur des requêtes intéressantes qui rapportent des clients ? ”

Sans ces optimisations réalisées sur tous les fronts, il serait toujours nécessaire de « compenser » encore et encore en forçant sur un maximum d’autres leviers ; comme la création de Contenus en Masse ou le Netlinking… n’est-ce pas ?

De notre côté chez EasyHoster, nous croyons au “principe de précaution” et nous n’avons pas 9 mois pour évaluer l’impact de chacune de nos actions SEO 😁

Donc, en ce qui nous concerne, nous allons tenter de maintenir notre site commercial à +90/100 sur PageSpeed Mobile, tout au long de l’année.

Nous vous encourageons à vous aussi, méditer sur ce principe de précaution qui consiste à optimiser tous les leviers d’optimisation pour les moteurs… et d’après Google, le score PageSpeed Mobile en fait partie !
Dans tous les cas, un site rapide offrira une meilleure Expérience aux Utilisateurs. Ils auront donc tendance à visiter plus de pages, ce qui sera un autre bon signal que Google ne manquera pas d’identifier pour évaluer la qualité de votre site !

Autrement dit, dans tous les cas, l’optimisation des performances de votre site (y compris pour le mobile) est sans aucun doute un indispensable, et ce, depuis au moins 2021 déjà ! 

Si vous n’avez pas de temps à perdre et que vous avez un petit billet à débourser, le moyen le plus simple et rapide d’obtenir un score de +90/100 sur PageSpeed Mobile avec un site WordPress passe, entre autres, par l’installation et la configuration de WP Rocket.

Bien sûr, veillez aussi à Bien choisir votre Hébergeur Web !

Cependant, si votre site est plutôt complexe, l’installation d’un Plugin de Cache ne suffira pas, même s’il s’agit du meilleur ! C’est pour cela que cet article contient La liste (presque) exhaustive des Optimisations possibles ↓ pour votre score PageSpeed.

Notre avis sur WP Rocket : peut-on le remplacer gratuitement ou est-il vraiment indispensable ?

Pour tout savoir sur WP Rocket et connaître notre avis sur cet excellent plugin de cache premium, consultez notre article dédié :

Pour faire court, en regard des fonctionnalités de WP Rocket et du temps qu’il peut vous faire gagner, on peut dire que ce plugin est effectivement irremplaçable. Cependant, son tarif n’est pas accessible à tous. C’est pourquoi nous tenions à vous partager une méthode vous permettant de vous approcher des résultats de WP Rocket, mais sans avoir à débourser un centime en plugins WordPress.

Si malgré tout vous souhaitiez vous orienter vers la référence en termes d’optimisation des performances Web, ne manquez pas cette promo :

Pourquoi chercher une alternative gratuite à WP Rocket ?

Certains de nos utilisateurs n’ont pas encore le budget pour un plugin premium tel que WP Rocket.

Cela nous pousse donc, en tant qu’Hébergeur Web, à partager nos meilleures alternatives à WP Rocket… c’est-à-dire, notre méthode complète avec le Mod PageSpeed, et les meilleurs plugins alternatifs gratuits pour remplacer WP Rocket.

En tant qu’utilisateur de WordPress, le premier réflexe pour son projet est souvent de chercher le Meilleur Hébergeur Web, le Meilleur Thème WordPress, le Meilleur Plugin de Cache, etc.

Cependant, il est aussi normal, en tant qu’utilisateur, de se poser des questions sur les tarifs des solutions qu’on choisit pour son projet WordPress.

Voici le genre de questions que chacun devrait se poser avant de choisir un fournisseur…

• La gamme de prix de cet Hébergeur Premium est-elle accessible pour débuter et celui-ci va-t-il me faire économiser du temps ou de l’argent ?
• Les prix de ces Thèmes + Builders Premium sont-il adaptés à mon projet, pour créer un réseau de plusieurs sites ?
• Les tarifs des licences WP Rocket sont-ils actuellement à ma portée, dans les premières phases de mon projet ?

Par exemple, si vous ambitionnez de créer tout de suite un réseau composé de nombreux sites, il est compréhensible que vous ne puissiez pas immédiatement investir dans une licence de plusieurs centaines d’euros par an pour un plugin de performance… même si celui-ci vous faisait gagner du temps et de la visibilité sur Google en vous offrant des optimisations très rapides et efficaces.

Si vous êtes à vos débuts, rassurez-vous…

“ Pour débuter dans la création de sites Internet ou pour les projets plus petits, de très bonnes alternatives gratuites à WP Rocket existent ! ”

Nous aimons WP Rocket… et si vous avez déjà eu l’occasion de l’utiliser, il y a de fortes chances que vous l’aimiez aussi. Mais cela ne veut pas dire qu’il est parfait pour tout le monde, en particulier pour ceux qui ont un budget limité. 

Autrement dit, si vous cherchez un plugin gratuit pour accélérer un site, le prix de WP Rocket, de 59€ à 299€ par an, risque de vous rebuter.
Si vous voulez passer le moins de temps possible à optimiser votre site WordPress, tout en obtenant les meilleurs résultats, le meilleur plugin est WP Rocket. Mais si vous n’êtes pas prêt à dépenser un tel budget, ou si vous désirez en savoir plus sur les rouages de l’optimisation des « Web Perfs », ne manquez pas nos recommandations ↓ ci-dessous.

Si vous n’êtes pas encore sûr de savoir quels sont les meilleurs plugins de mise en cache alternatifs à WP Rocket, ne manquez pas la méthode ↓ décrite ci-dessous. 

Vous risquez fort d’adopter cette alternative gratuite à WP Rocket et vous pourriez bien en faire votre nouveau processus phare pour toutes vos prochaines optimisations du score PageSpeed… des optimisations 100% gratuites !

Donc, pour commencer, assurons-nous que nous sommes sur la même longueur d’onde.

En effet, nous avons cherché à répondre à une question qui nous titillait depuis longtemps pour aider nos utilisateurs ayant des budgets limités.

Tâchons donc de répondre à ces questions…

Quelle est la meilleure solution pour améliorer son score PageSpeed Mobile, au meilleur tarif (gratuit), donc sans WP Rocket ?

Un ou plusieurs plugins de cache gratuits ; des réglages côté serveur web, ou les deux ?

Quelle est la meilleure alternative pour remplacer gratuitement WP Rocket ?

Optimiser votre score PageSpeed à 100% : EasyHoster peut vous aider, avec ou sans WP Rocket !

En effet, puisque nous nous intéressons nous-mêmes à PageSpeed, nous pouvons faire profiter de notre expérience à nos utilisateurs en les aidant autant que possible à obtenir un score au  Vert  sur PageSpeed Mobile.

Bien sûr, nous n’allons pas nous substituer aux « Développeurs WordPress Spécialisés en Optimisation des Web Perfs », mais nous pouvons aiguiller ; répondre à des questions, et ouvrir le débat en tant qu’Hébergeur Web. Dans les faits, cela permet souvent à nos utilisateurs les plus motivés d’obtenir des scores PageSpeed Mobile de +90/100, suite à quelques échanges avec le support technique et rien qu’en suivant nos conseils.

De plus, au-delà de l’assistance technique, proposée par le support EasyHoster, nos solutions d’hébergement web sont conçues pour vous offrir immédiatement d’excellentes performances !

L’Hébergement Web EasyHoster, sous le capot…

Pour en savoir plus sur le « Potentiel PageSpeed » de nos solutions d’Hébergement Web, commencez par consulter notre page dédiée à nos caractéristiques techniques et nos performances :

Si vous pensez que les « Performances Web » figurent aujourd’hui parmi les incontournables pour réussir sur Internet, n’hésitez pas à Prendre contact avec le support EasyHoster pour en discuter.

Comment EasyHoster se défend sur PageSpeed en tant qu’Hébergeur Web ?

En termes d’assistance WordPress pour PageSpeed, vous constaterez ci-dessous que les membres de notre équipe connaissent un peu le sujet…

En effet, le découpage en 6 étapes de notre méthode d’optimisation PageSpeed, sans WP Rocket ↓, va vous permettre de comprendre la logique qui se cache derrière le scoring des tests PageSpeed Insights. 

Accessoirement, cette méthode va aussi vous permettre de Comprendre TOUT le travail que WP Rocket fait pour nous, sans même que nous ayons à y penser.

En termes de Performances Serveur, vous découvrirez ici que l’équipe EasyHoster veille au grain :

Rappelons que le score PageSpeed, tout comme la vitesse de chargement, dépendent en grande partie du développement du site. À savoir, son code source ; le thème choisi ; les plugins installés, etc. 

Autrement dit, un site mal codé ou mal optimisé ne pourra être rapide, même sur le Meilleur Hébergement Web qui puisse exister.

Cela étant dit, sachez que l’infrastructure EasyHoster a été conçue pour offrir le meilleur contexte possible aux utilisateurs de WordPress dans le cadre d’un hébergement mutualisé, afin d’obtenir un bon temps de réponse (TTFB) ; une bonne expérience globale sous WordPress (partie publique et tableau de bord…) ; et une bonne stabilité, même en cas de pic de trafic relativement conséquent : +50k visiteurs/jour !

Comment atteindre un score de 100/100 sur PageSpeed sans WP Rocket ?

Ci-dessous, nous allons décortiquer de façon exhaustive, la liste des optimisations possibles en vue d’obtenir un score de 100% sur PageSpeed Mobile.

Vous allez rapidement comprendre que WP Rocket couvre la majorité des optimisations citées ci-dessous →
Cependant, le but de cet article est de vous proposer une alternative gratuite à WP Rocket. 

Nous allons donc voir en détail, comment remplacer presque complètement WP Rocket gratuitement, grâce à quelques plugins et quelques réglages du côté de votre hébergement mutualisé. 

Ci-dessous, nous allons premièrement voir comment reproduire ces 6 optimisations gratuitement, sans WP Rocket :

1. Mise en Cache “Fichiers” ↓
2. LazyLoad des médias ↓
3. Optimisations JS/CSS ↓
4. Optimisations HTML ↓
5. Règles htaccess ↓
6. Report du JavaScript ↓

Bien sûr, nous verrons ensuite l’Optimisation des images ↓ (compression, conversion WebP…), la Compression des fichiers ↓ et quelques autres Bonnes pratiques ↓ plus ou moins complexes applicables gratuitement !

Quelle est la meilleure alternative pour remplacer gratuitement WP Rocket ?

Pour cette expérience, nous avons voulu remonter à la source.

En tant qu’Hébergeur Web, il est intéressant pour EasyHoster de comprendre toute la mécanique qui se cache derrière les optimisations que l’on peut trouver dans des plugins comme WP Rocket. 

Pour décortiquer tout cela, quoi de mieux que d’expérimenter ces optimisations, directement avec un Module pour Serveurs Web partagé par Google en 2010 et qui reste toujours maintenu aujourd’hui ? 

Vous l’avez compris, nous parlons ici des « PageSpeed Modules de Google », c’est-à-dire, le Mod PageSpeed !

Qu’est-ce que le mod_pagespeed et les « PageSpeed Modules » ?

Google PageSpeed est une famille d’outils proposée par Google en 2010, lors de sa grande conférence annuelle destinée aux développeurs Web. 

Cette grande initiative « PageSpeed» comprenait plusieurs composants et outils comme :

1. L’extension « PageSpeed Chrome DevTools » (aujourd’hui, les développeurs privilégient l’intégration Chrome de Lighthouse)
2. L’outil d’analyse en ligne « PageSpeed Insights » (celui qui rend fous les SEO 🙂)
3. Le mod_pagespeed ou « PageSpeed Modules » pour serveurs Web Apache & NGINX

Tous ces outils ont été créés pour aider les développeurs à rendre leurs sites plus rapides et donc, offrir une meilleure expérience aux utilisateurs, en particulier ceux qui naviguent sur mobile ou avec des connexions bas débit.

Google a d’ailleurs fait un pas supplémentaire en mai 2020 lorsqu’il a présenté sa nouvelle initiative, les « Core Web Vitals ». Des données de Signaux Web essentiels qui se retrouvent notamment intégrées sous forme d’avertissements dans la Google Search Console.

Les Core Web Vitals prennent en compte une série de critères qui peuvent être diagnostiqués avec un outil comme PageSpeed Insights ou l’onglet Lighthouse des outils pour développeurs de Google Chrome.

Parmi ces critères, citons par exemple le LCP, FID et le CLS… tous peuvent être mesurés grâce à ces outils :

Le mod_pagespeed est composé de modules open source qui appliquent des “Filtres” aux pages et aux ressources (assets), tels que le JavaScript, les feuilles de style CSS, le HTML et même les images !

Ces filtres d’optimisation agissent automatiquement côté serveur pour servir des pages et des ressources (assets) mieux optimisées, présentant des fichiers modifiés directement à l’utilisateur. 

Il existe plus de 40 filtres pouvant être appliqués par mod_pagespeed et chacun correspond à l’une des bonnes pratiques de performance que vous pouvez trouver dans vos rapports Pagespeed Insights lorsque vous analysez vos pages web.

Enfin, pour ne rien gâcher, ce Set de modules pour serveurs d’hébergement web porte le même nom et est issu de la même initiative que celle qui nous occupe aujourd’hui : le score PageSpeed calculé par PageSpeed Insights !

Le module PageSpeed étant une bibliothèque open source, il est fréquemment mis à jour par de nombreux développeurs du monde entier et peut théoriquement être déployé par n’importe quel Hébergeur Web, CDN ou propriétaire d’un serveur dédié ou VPS. C’est pourquoi EasyHoster ne pouvait pas passer à côté de l’implémentation du Mod PageSpeed sur son infrastructure afin d’aider ses utilisateurs dans l’amélioration de leurs performances. 

Maintenant que les présentations sont faites, nous pouvons siffler le début du match…

“ WP Rocket VS le Mod PageSpeed et les plugins sélectionnés par EasyHoster, le match peut commencer ! ”

Méthodologie pour remplacer WP Rocket grâce aux PageSpeed Modules

Dans les 6 premiers points de cette méthodologie, vous allez découvrir notre méthode exclusive pour les optimisations essentielles du score PageSpeed sans WPRocket et grâce au “PageSpeed Modules” de votre Hébergement EasyHoster ! 

1. Mise en Cache “Fichiers” ↓
2. LazyLoad des médias ↓
3. Optimisations JS/CSS ↓
4. Optimisations HTML ↓
5. Règles htaccess ↓
6. Report du JavaScript ↓

Cette méthode basée sur le Mod PageSpeed de votre serveur d’hébergement web est plus particulièrement destinée aux utilisateurs ayant quelques compétences en développement web, car elle nécessite de Modifier le fichier .htaccess présent à la racine de votre site Web.

Si vous ne vous sentez pas à l’aise avec la modification du fichier htaccess de votre site, il vous faudra soit vous orienter vers une solution plus facile à prendre en main. C’est-à-dire, WP Rocket de préférence, ou alternativement, vous devrez vous retrousser les manches et vous plonger dans le bain pour écrire vos premières lignes de code htaccess.

Pour vous exercer, il vous suffira de Créer une copie de Sauvegarde de votre fichier htaccess original, ce qui vous permettra de revenir en arrière au cas où vous auriez créé une erreur sur votre site WordPress.  

Pour nous aider dans nos tests, nous avons créé 2 sites « laboratoires » identiques, sauf que le premier a été optimisé avec WP Rocket et le second a été optimisé avec notre méthode basée sur PageSpeed Modules. 

Vous pouvez visiter ces 2 sites de laboratoire… ils restent en ligne pour vous permettre de les analyser et les tester vous-même sur PageSpeed Insights :

1. speed.easyhoster.net : Premier site optimisé grâce à WP Rocket. Vous pouvez retrouver le détail de nos réglages sous forme de diaporama en visitant directement le site.
2. mod-pagespeed.easyhoster.net : Second site optimisé en priorité grâce aux PageSpeed Modules d’un Hébergement EasyHoster et quelques réglages complémentaires. La méthode y est aussi résumée sous forme de diaporama. 

Notre objectif était d’optimiser au mieux la version du site avec WP Rocket, pour ensuite tenter d’obtenir le même score PageSpeed, mais sans WP Rocket ni faire appel à d’autres plugins payants. Le score PageSpeed optimal devait être obtenu uniquement grâce à des solutions 100% gratuites.

Sans optimisation de performances, notre site de test hébergé par EasyHoster obtenait un score PageSpeed Mobile de  75/100  :

 75/100  sur PageSpeed Mobile, c’est assez éloigné du score de  90  à  100  sur  100  que nous visons, pour ce test d’optimisation sans WP Rocket et avec les « PageSpeed Modules ».

La suite de l’audit PageSpeed présente une série « d’Opportunités d’Optimisations ». Ces opportunités concernent notamment un “TTFB lent”, ce qui est typique pour un site WordPress “sans plugin de cache”. On notera aussi un manque d’optimisation des Assets « CSS, JavaScript & Polices d’écriture / d’icônes ».

À noter aussi, 53 requêtes et 449 ko de transfert !

Commençons notre liste de 6 étapes indispensables pour remplacer les optimisations de base de WP Rocket…

1. Utiliser un plugin de File Cache et activer le Mod PageSpeed via htaccess

Parmi toutes les étapes abordées dans ce guide ultime des alternatives à WP Rocket, pour améliorer la vitesse de votre site WordPress, il existe Une Optimisation Essentielle qui les surpasse toutes : 

« La mise en cache des pages ! »

L’utilisation d’un plugin de cache WordPress est purement et simplement indispensable !

D’ailleurs, si vous n’étiez en mesure d’effectuer qu’une seule optimisation sur votre site WordPress, la mise en cache des pages est celle qui ferait la plus grande différence ; que cela soit pour la vitesse de chargement ou même la réduction des ressources utilisées par votre compte d’hébergement web.

Qu’est-ce que la mise en cache des pages ?

Le dossier “cache” est l’endroit où les données temporaires sont stockées sous forme de contenu plus léger, prêt à l’emploi et rapidement lisible.

Lorsque votre site web est “mis en cache”, cela signifie que vos pages, vos images et autres fichiers sont stockés dans un emplacement temporaire et dans un format plus rapide à transférer et à lire, du côté navigateur et/ou du côté serveur web. 

La mise en cache crée des fichiers statiques / prégénérés et s’applique pour les données qui changent rarement comme les articles et les pages d’un site WordPress. En effet, ces types de contenus ne sont pas très dynamiques, contrairement à un panier d’achats eCommerce par exemple. 

La mise en cache permet donc de servir vos contenus plus rapidement à toute personne qui navigue au travers des pages de votre site web en leur permettant de télécharger plus rapidement les ressources qui les composent.

Cela vaut mieux que d’exécuter à chaque fois de longs scripts PHP et de lourdes requêtes MySQL pour récupérer encore et encore les mêmes données stockées sur votre Hébergement Web. Le plugin de cache s’occupera de livrer très rapidement les contenus prégénérés au préalable et stockés dans votre “dossier cache”. Ce qui est beaucoup plus efficace et économique que de régénérer à chaque fois la page.

Même principe avec le cache côté navigateur qui permet d’éviter de télécharger à chaque fois l’ensemble de vos images (logo du site, images d’arrière-plan, polices d’icônes, etc), lorsqu’un visiteur charge ou actualise l’une de vos pages.

Voilà ! Avec tout ça, vous comprenez parfaitement ce qu’un système de cache fait pour vous et pourquoi c’est lui qui est le plus essentiel pour charger vos contenus rapidement.

Donc, si vous n’avez pas encore installé et configuré de plugin de cache sur votre site WordPress, il est évident que c’est la première étape que vous devriez suivre à la suite de cette lecture. 

De nombreux autres « Plugins de Cache » concurrents à WP Rocket existent, offrant tous plus ou moins de fonctionnalités, et ce gratuitement !

Donc ne manquez pas, dans cet article…

Vous découvrirez ensuite Quel plugin de cache ↓ nous avons choisi pour remplacer le File Cache de WP Rocket dans ce test du Mod PageSpeed.

Démarrons notre optimisation du score PageSpeed Mobile, sans WP Rocket ! 

Pour rappel, l’un des avertissements les plus critiques que nous avions en analysant « mod-pagespeed.easyhoster.net », notre site de test “non optimisé”, concernait le « Temps de Réponse » du site (TTFB), qui était de 1.3 s. 

À noter que dans la plupart des cas, un mauvais TTFB est rarement lié à l’Hébergement Web, mais à l’optimisation du site, côté développement web.

Pour résoudre le problème de Temps de Réponse du site (TTFB), un plugin de “file cache” fait partie des indispensables !

Pour ce test, nous avons choisi d’opter pour WP Super Cache !

C’est un plugin gratuit très “standard”, car développé par la société à l’origine de WordPress, Automattic.

Ce choix de plugin de cache “minimaliste” nous permettra d’éviter d’éventuels conflits avec notre Thème Astra, notre Page Builder Elementor ou d’autres plugins tiers. De plus, WP Super Cache ne s’occupe que du File Caching. Donc, il ne risque pas d’interférer dans les futures optimisations de nos PageSpeed Modules.

Dans les paramètres de WP Super Cache, quelques options recommandées peuvent être activées.

C’est l’occasion de vérifier que le File Cache est bien activé :

Voilà ! Nous disposons maintenant d’un système de File Cache élémentaire permettant de réduire le TTFB…

Appliquons maintenant les optimisations PageSpeed Modules “de base” (CoreFilters), en activant simplement mod_pagespeed via le fichier htaccess de ce site (code complet disponible ci-dessous ↓), grâce à la directive « ModPagespeed on » :

Comment vérifier que le Mod PageSpeed est bien actif via le code source du site ?

Pour vérifier que le mod_pagespeed est bien actif sur votre site, suite à la modification de votre fichier htaccess, il vous faut d’abord afficher votre code source HTML. Dans Google Chrome, cliquez sur « Afficher > Options pour développeurs > Code source ». Ensuite, faites une recherche dans le code source affiché en cherchant simplement “pagespeed” et vous devriez voir apparaître des bouts de code similaires à ceux présentés sur la capture d’écran ci-dessous.

Alternativement, un outil en ligne de type « HTTP Header Checker ↗︎ » comme celui d’Uptrends devrait faire apparaître la ligne « X-Mod-Pagespeed » dans le résultat renvoyé, comme illustré ci-dessous.

Parfait, le File Cache et le Mod PageSpeed sont activés !

Ces 2 optimisations basiques nous permettent d’atteindre un score de  85/100  :

 Cela fait déjà 10 points de gagnés ! 

Passons à la suite de nos premières optimisations de base.

Lorsque vous testez votre site sur PageSpeed Insight, faites défiler la fenêtre vers les « Opportunités PageSpeed » pour y voir clair sur les optimisations qui sont encore possibles pour s’approcher du 100/100 :

“ Les « Opportunités » présentées sous le résultat du test PageSpeed Insight sont votre meilleure source d’information pour débusquer les Optimisations à mettre en place en priorité pour atteindre un score de 100/100 ! ”

Commençons par différer le chargement des images “hors écran” grâce au Lazy Load !

2. Différer le chargement des images grâce au Lazy Load 

Comme vous pouvez l’imaginer, les fichiers les plus lourds à télécharger par les internautes sont souvent les images, car ces illustrations “pèsent plus lourd” que le texte qui compose vos pages et vos articles de blog.

Alors que le texte d’une page Web pèse rarement plus de 500 Ko, il est courant qu’un article de blog intègre plus de 10 images sur la même page, soit un total d’environ 3 Mo de fichiers à télécharger.

Autrement dit, dans cet exemple, les « données d’images » pèsent 6 fois plus lourd que le texte !  

Heureusement, il n’est plus obligatoire aujourd’hui d’imposer le téléchargement de l’ensemble des images avant de pouvoir commencer la lecture d’un article, car il existe maintenant une technologie qui permet de “retarder” / “différer” le téléchargement de ces images. 

Cette technologie, c’est le « Lazy Loading » !

De nombreux autres plugins que WP Rocket existent pour le « Lazy Loading » et offrent tous plus ou moins de fonctionnalités, et ce gratuitement !

Donc ne manquez pas, notre article dédié aux plugins de Lazy Load :

Il est à noter que le Mod PageSpeed dispose d’une fonctionnalité de Lazy Load relativement basique. Néanmoins, pour ce test et afin de disposer de plus de fonctionnalités accessibles depuis le tableau de bord WordPress, nous avons choisi de faire appel à un plugin gratuit entièrement dédié au Lazy Loading. 

Il est conseillé de choisir le plugin de Lazy Load le plus adapté à votre projet en consultant l’article dédié cité ci-dessus, mais vous vous demandez probablement…

Quel plugin de Lazy Loading a été choisi pour ce Speed Test…

Pour notre test d’Optimisation PageSpeed “sans WP Rocket”, nous choisissons le plugin “a3 Lazy Load” :

Comme son nom l’indique, « a3 Lazy Load » ne gère “que” le Lazy Load, mais propose des options pour les exclusions (entre autres), faciles à utiliser depuis le dashboard WordPress.

De son côté, un plugin moins “minimaliste” tel que Smush embarque en plus, de nombreuses autres options en complément du Lazy Load. Cependant, comme indiqué précédemment, nous cherchons à séparer nos optimisations et les distribuer à des plugins spécialisés, comme pour le « File Cache » qui a été confié à WP Super Cache pour ce test ↗︎

Activons donc ce plugin minimaliste qui ne gérera “que” le Lazy Load !

Ensuite, c’est le moment de vérifier les options avancées de ce plugin…

Voyons maintenant le résultat de cette optimisation (activation du Lazy Load) sur le score PageSpeed Mobile de notre site de test…

L’activation du chargement différé des images nous permet de gagner +3 points sur PageSpeed et réduit encore un peu plus le temps de chargement ressenti par les mobinautes avec -0,5s de LCP.

De même, l’activation du plugin de Lazy Load a fait disparaître l’avertissement sur les images hors écran à différer :

Notre page est de plus en plus légère au chargement, au fur et à mesure des optimisations.

Passons à la suite, car il reste encore des opportunités que nous allons optimiser avec les PageSpeed Modules, entre autres !

3. Optimiser les Assets JavaScript & CSS (minification, etc) 

L’optimisation basique à mettre en place ensuite consiste à diminuer la taille du code CSS,  JavaScript et même HTML, en réduisant leur poids. Autrement dit, optimiser les ressources pour que leur taille soit moins lourde à télécharger par l’utilisateur.

Ce type de pratique comprend notamment « la minification », et cette dernière consiste à supprimer tous les caractères inutiles présents dans les fichiers JS/CSS/HTML, tels que les espaces superflus, les sauts de lignes et les commentaires destinés aux codeurs… Tant de caractères inutiles au bon fonctionnement du site Web.

Encore une fois, il existe des plugins gratuits qui vous permettent de « minifier » ces fichiers JS,  CSS et HTML. Ces plugins parcourent vos fichiers et suppriment toute une série de caractères inutiles. 

WP Rocket offre un performant service de minification du HTML / JS / CSS qui est très facile à configurer, même par les débutants.

Généralement, pour minimiser le code de leurs ressources sans WP Rocket, les utilisateurs WordPress ont tendance à faire appel à un plugin gratuit. Pour cela, l’une des alternatives à WP Rocket qui semble s’imposer est le plugin Autoptimize (vu précédemment dans le Top 10 des Suites de Performance →).

Ce plugin gratuit vous offre des fonctionnalités similaires à celles de WP Rocket, comme la minification et le report du chargement des ressources JS/CSS. 

Autoptimize propose aussi la concaténation des fichiers pour les utilisateurs utilisant l’ancien protocole HTTP/1. Cette concaténation sert à créer un seul “.css” ou “.js” sur base de plusieurs fichiers. Il s’agit cependant d’une optimisation qui était optimale il y a quelques années, mais qui est devenue contre-productive (obsolète) avec les innovations apportées par le protocole HTTP/2.

Revenons à nos optimisations du Mod PageSpeed !

Souvenez-vous, en début de fichier était renseignée la directive “ModPagespeed on”. Cette directive servait à activer le mod_pagespeed pour ce site, ainsi que les filtres par défaut disponibles dans les PageSpeed Modules, les « CoreFilters ». 

Dans la capture ci-dessus, vous pouvez aussi noter la présence de la directive « ModPagespeedEnableFilters », suivie d’une longue liste de filtres avancés : responsive_images,combine_heads,outline_css,outline_javascript,move_css_above_scripts,move_css_to_head,rewrite_style_attributes,prioritize_critical_css,make_google_analytics_async,make_show_ads_async,include_js_source_maps,canonicalize_javascript_libraries,inline_google_font_css,local_storage_cache,insert_ga,insert_image_dimensions,resize_mobile_images,remove_comments,collapse_whitespace,elide_attributes,extend_cache_pdfs,sprite_images,rewrite_domains,trim_urls,pedantic,remove_quotes,add_instrumentation,dedup_inlined_images,insert_dns_prefetch

Pour définir la liste des filtres avancés compatibles avec notre site de test « mod-pagespeed.easyhoster.net », il nous a d’abord fallu consulter la « Documentation Officielle » présentée sur le site ModPageSpeed.com, dont voici un aperçu :

Voici les URLs du site ModPageSpeed.com les plus intéressantes à consulter pour déterminer les Filtres Avancés que vous devriez activer sur votre site, en veillant à vérifier leur compatibilité, au cas par cas…

• Liste des filtres classés par catégories :
  www.modpagespeed.com/doc/filters
• Débuter avec les filtres, suivi d’un tableau reprenant tous les filtres accompagnés d’une courte description :
  www.modpagespeed.com/doc/config_filters

Liste des Filtres du Mod PageSpeed en français

Pour vous aider à sélectionner les filtres adaptés à vos besoins, et donc, compatibles avec votre site, nous partageons ci-dessous une version traduite en français des filtres du Mod PageSpeed :

Le fichier htaccess partagé ci-dessous ↓ contient des conseils, des commentaires écrits en  « Gris » , ainsi que des “Directives” à copier pour de bons résultats sur PageSpeed, sans détériorer le site. Bien sûr, chaque site étant unique, il vous faudra peut-être exclure certaines Directives de vos optimisations. De plus, vous serez peut-être en mesure d’activer des directives complémentaires à celles qui étaient compatibles avec notre site mod-pagespeed.easyhoster.net. Donc, pensez à tester chacun des filtres cités ci-dessus, les uns après les autres 😉

Comme évoqué ci-dessus, dans la première partie du code, un long commentaire vous rappelle les Filtres activés grâce au mode « par défaut » des PageSpeed Modules, à savoir les « CoreFilters ».

Ces CoreFilters sont les directives de base activées par défaut via « ModPageSpeed on », car elles ne représentent (presque) jamais de risque de casse pour votre webdesign ou les fonctionnalités de votre site. 

Nous y retrouverons par exemple les directives “rewrite_javascript” et “rewrite_css”, qui servent à « minifier » le code JS/CSS de notre site, comme nous pourrions le faire avec les plugins Autoptimize ou WP Rocket.

Plus bas, dans la seconde partie du code htaccess ↓, nous retrouvons une impressionnante Liste de Filtres écrite en noir. Il s’agit de filtres qui ne sont pas activés dans les CoreFilters et que nous avons choisi d’activer sur notre SpeedTest mod-pagespeed.easyhoster.net grâce à la directive « ModPagespeedEnableFilters »…

Code htaccess complet pour activer et configurer le Mod PageSpeed

Pour vous aider à comprendre la mécanique qui se cache derrière la configuration du Mod PageSpeed via le fichier .htaccess, lisez attentivement les commentaires placés dans ce code source :

Dans les filtres activés par « ModPagespeedEnableFilters », nous retrouvons par exemple la directive “remove_comments”, qui sert à supprimer les commentaires HTML inutiles au fonctionnement du site, ainsi que “collapse_whitespace”, qui supprime les espaces superflus présents dans le code source.

Encore une fois, pour déterminer la liste des filtres à activer, nous avons utilisé la Liste de tous les filtres disponibles ↑ dans les PageSpeed Modules, présente ci-dessus et dans la documentation officielle du site ModPageSpeed.com

Comme vous l’avez compris, nous avons activé certains filtres, les uns après les autres, en vérifiant à chaque fois qu’ils ne détérioraient pas le fonctionnement de notre site de test. 

Enfin, pour un maximum de résultats sur PageSpeed Insights, nous avons conservé uniquement la liste des 29 filtres qui ne causaient aucun dommage au site de test.

Bien sûr, pour vous faciliter la tâche, nous mettons à votre disposition le code complet ↓ à ajouter au fichier .htaccess de votre site. Pour démarrer sur la même base que nous, il vous suffit de télécharger le fichier htaccess sur GitHub :

Vous y retrouverez de précieux Commentaires et des Exemples très utiles qui vous aideront à écrire facilement votre propre configuration personnelle, comme vous pouvez le voir sur l’illustration suivante :

Grâce à l’activation du Mod PageSpeed avec un maximum de filtres, nous obtenons déjà notre premier test au  « Vert »  sur PageSpeed Mobile, avec un score de  91/100 . C’est donc 3 précieux points de gagnés en activant la plupart des filtres avancés du Mod PageSpeed !

Notez que nous avons écarté volontairement quelques filtres tels que “defer_javascript” et “lazyload_images”.

Notre objectif est de confier ces 2 optimisations plus spécifiques à des plugins gratuits qui font bien le job sous WordPress. Cette approche aura l’avantage de nous offrir plus de paramètres pouvant être configurés au travers d’une interface graphique. Donc, via le Tableau de bord de WordPress, pour personnaliser le fonctionnement du Report du JavaScript ↓ et du Lazy Loading ↑ (chargement différé des images, déjà abordé ci-dessus).

4. Nettoyer ou optimiser le code HTML (dimensions des images, préchargement des polices, etc) 

Une autre façon d’améliorer votre score PageSpeed est de nettoyer ou d’optimiser son code HTML. Il s’agit de supprimer toutes les balises HTML redondantes, les attributs et autres éléments qui ne sont pas nécessaires au bon fonctionnement du site.  Sans oublier d’optimiser ce qui peut l’être au niveau du HTML, en suivant les quelques bonnes pratiques abordées ci-dessous.

Nettoyage du code HTML inutile

Comme vu précédemment, une série de filtres issus du mod_pagespeed ont déjà été appliqués grâce à la configuration de notre fichier .htaccess.

Nous citions par exemple les directives “remove_comments” et “collapse_whitespace” ↑ qui servent respectivement à supprimer les commentaires HTML inutiles, ou supprimer les espaces superflus présents dans le code HTML.

Pour l’optimisation du code HTML, l’utilisation des filtres du Mod PageSpeed nous permet d’éviter d’installer une Suite d’Optimisation complète telle qu’Autoptimize, ou encore WP-Optimize. D’ailleurs, faites attention à ne pas confondre ces 2 plugins qui ont des noms assez similaires.

Nous pouvons donc partir du principe que les PageSpeed Modules ont réalisé un travail plutôt exhaustif pour l’optimisation de notre code HTML. Mais peut-être ne désirez-vous pas utiliser le mod_pagespeed ? Donc, ne nous arrêtons pas en si bon chemin…

Asset CleanUp, un coup de cœur qui propose aussi des optimisations du code HTML

L’un de nos plugins coup de cœur dispose aussi de quelques options intéressantes pour le nettoyage du code HTML. Il s’agit du plugin Asset CleanUp →, dont l’objectif est principalement de pouvoir décharger certaines ressources ↓ sur certaines pages de votre choix.

Asset CleanUp permet aussi de supprimer quelques tags HTML inutiles à la plupart des sites (wlwmanifest.xml, shortlink, prev/next, generator tags…), ainsi que les commentaires HTML inutiles au fonctionnement du site qui pèsent sur le poids de la page HTML.

Nous n’utilisons pas Asset CleanUp sur mod-pagespeed.easyhoster.net, mais si vous avez un site de grande envergure, ce plugin pourrait figurer parmi vos indispensables, en particulier pour ses fonctionnalités permettant de Décharger des Ressources JS/CSS ↓ sur les pages de votre choix ! 

Cela étant dit, il nous manque encore une dernière optimisation HTML un peu plus spécifique à réaliser…

L’ajout des dimensions des images dans le code HTML

En effet, pour un score PageSpeed optimal, il est important de veiller à ce que les images de votre site web soient intégrées en renseignant de bonnes dimensions explicites grâce aux attributs « width= » et « height= ».

Sans renseigner ces attributs HTML dans vos balises d’images, <img>, c’est le navigateur qui devra prendre le temps de calculer ces dimensions, après leur téléchargement et à chaque chargement de page… Un processus de calcul qui ne manquera pas de ralentir l’affichage initial de vos pages.

Cette optimisation est primordiale pour obtenir de meilleurs résultats aux tests PageSpeed et supprimer l’avertissement indiquant…

Les éléments d’images ne possèdent pas de width ni de height explicites.

WP Rocket dispose d’une fonctionnalité d’ajout automatique des dimensions d’images. Pour notre expérience « alternative à WP Rocket », il nous est donc nécessaire de trouver un remplaçant qui se chargera de réaliser cette optimisation pour nous.

En effet, pour notre site mod-pagespeed.easyhoster.net, nous cherchons à tirer le maximum des PageSpeed Modules en les complétant par des solutions open source ou du code perso lorsque cela s’avère plus efficace. 

C’est ce que nous allons faire pour les opportunités restantes :

Nous commençons par les attributs width/height manquants dans les images, en cherchant un plugin alternatif à WP Rocket, qui pourra ajouter ces attributs width/height à notre place lorsqu’ils ont été oubliés…

Belle trouvaille !

D’après nos tests, le petit plugin “Specify Missing Image Dimensions” fait bien son travail. Il est gratuit, open source et téléchargeable librement sur WordPress.org !

L’un de ses avantages est de permettre aux utilisateurs de configurer facilement quelques exceptions :

Par exemple, vous pourriez avoir besoin d’exclure une image spécifique de l’optimisation, comme le logo de votre site. Cela est rendu très facile grâce au plugin SMID (Specify Missing Images Dimensions).

L’ajout des attributs width/height manquants nous fait gagner  +1  point symbolique sur PageSpeed, ce qui nous offre un score de  92/100  :

De plus, l’avertissement a bien disparu pour les éléments ne possédant pas de largeur/hauteur spécifiques :

Le préchargement des polices d’écriture (Fonts Preloading)

En effet, parmi les optimisations HTML indispensables, il est important de citer le Préchargement des Polices d’écriture !

Certains diront qu’il est préférable de charger les “Fonts” de manière asynchrones, un peu à la façon du Lazy Loading, afin d’afficher quelque chose à l’utilisateur le plus rapidement possible. Cependant, cela est faux…

Google PageSpeed préconise lui-même le Preload des Polices d’écriture !

Dans le diagnostic Lighthouse, cela se traduit par cet avertissement :

« Préchargez les demandes clés : envisagez d’utiliser <link rel=preload> pour hiérarchiser la récupération des ressources actuellement requises pour le chargement ultérieur de la page »

Le « Font Preloading » permet que ces « Polices » puissent être utilisées très rapidement, lorsque le reste du webdesign aura été téléchargé.

Concrètement pour vous, il s’agit simplement de vérifier dans votre code HTML que les Polices d’écriture et Polices d’icônes réellement utilisées sont préchargées grâce à l’attribut HTML “preload”.

Sur notre site de test, cela passe par la balise suivante :

<link rel="preload" as="font" href="/wp-content/astra-local-fonts/…lato.woff2" crossorigin>

En effet, l’option adéquate a bien été cochée dans notre thème Astra :

Cela vaut aussi pour les polices intégrées depuis Google Fonts :

<link rel="preload" as="font" href="https://fonts.gstatic.com/s/…montserrat.woff2" crossorigin>

Ainsi que pour les polices d’écriture qui sont en réalité les icônes du thème WordPress (exemple avec Divi) :

<link rel="preload" as="font" href="https://cdn.easyhoster.com/wp-content/themes/Divi/…modules.ttf" crossorigin>

La plupart du temps, si vous utilisez un Bon thème WordPress, ou si vous avez fait un copier-coller de la balise <link> depuis Google Fonts, vous n’aurez pas à vous inquiéter de cette optimisation, car le développeur du thème et Google auront déjà ajouté l’attribut rel="preload" à votre intégration HTML pour vous !

Cependant, il est toujours utile de vérifier manuellement que toutes vos polices d’écriture et d’icônes réellement utilisées sont bien préchargées pour ne pas retarder inutilement le chargement de vos pages.

Foncez donc analyser votre code source HTML à la recherche de vos polices et de l’attribut rel="preload" 😉

Si ce n’est pas le cas, renseignez-vous en consultant la documentation de votre thème WordPress ; relisez vos bouts de code HTML customs ; et dans le pire des cas, envisager d’utiliser le filtre hint_preload_subresources du mod_pagespeed. Ce dernier peut vous aider à précharger les éléments critiques sans que vous n’ayez à mettre les mains dans le code source de votre site WordPress…

5. Règles .htaccess (prolonger le cache navigateur, etc) 

Comme nous l’avons vu dans la présentation de WP Rocket, via le fichier .htaccess, il est également possible de mettre en place des règles pour indiquer aux navigateurs combien de temps ils doivent conserver les informations dans leur cache, afin qu’elles n’aient pas à être téléchargées à chaque fois qu’un internaute visite votre site web.

Par exemple, vous pouvez étendre la durée du “cache navigateur” avec des règles htaccess, pour obtenir de meilleurs résultats sur PageSpeed et éliminer l’avertissement relatif au cache côté navigateur :

Utiliser des règles de cache efficaces sur les éléments statiques.

Traitons donc maintenant l’avertissement sur les règles de cache efficaces pour les fichiers statiques. Ça se passe, encore une fois, dans le fichier htaccess. L’idée ici est de réincorporer manuellement des règles htaccess similaires à celles de WP Rocket.

Attention, on ne triche pas en allant piquer les règles .htaccess d’un site où WP Rocket est installé, cela serait trop facile 😁

Voici la version EasyHoster des règles d’expiration des caches côté navigateur pouvant aussi être téléchargée sur GitHub ↗︎ en suivant le lien précédent :

Les règles de cache efficaces du htaccess (Expires Headers, Cache-Control…), nous font également gagner  +1  joli point pour nous amener à  93/100  :

Cela fait également passer notre LCP sous la barre des 3s sur PageSpeed Mobile !

Le dernier avertissement critique (cf. règles de cache) a bien disparu :

Depuis mi-2023, PageSpeed Insights a fait évoluer cet avertissement concernant la réduction du nombre de requêtes et la taille des transferts, vers une opportunité indiquant « Éviter d’énormes charges utiles de réseau La taille totale était de 321 Kio », comme illustré sur la capture ci-dessous.

Notre score PageSpeed Mobile est maintenant de 93/100, mais aucun autre avertissement n’apparaît dans les Opportunités proposées par PageSpeed.
Nous n’avons pas non plus de CLS à corriger.

La question qui nous vient est donc… 

Comment s’approcher du score de 100/100 sur PageSpeed Mobile, sans autres recommandations de la part de Google ?

Il existe un moyen ! Il s’agit de diminuer encore le poids de l’ensemble des fichiers et du code source à télécharger par le navigateur. Donc, réduisons encore les ressources nécessaires au chargement initial de la page…

Pour cela, nous allons nous aider de « l’Inspecteur Réseau » de notre navigateur Web !

Pour apprendre à utiliser l’Inspecteur Réseau de Google Chrome, ne manquez pas ce tutoriel :

Une analyse de Network Waterfall issue des outils pour développeur de Google Chrome, démontre que des fichiers « .js » sont chargés avec et en même temps que le design HTML/CSS au lieu d’être reportés :

La dernière carte “simple” à jouer pour réduire les ressources est de “Différer” et si possible “Retarder“ le JavaScript et son exécution par le navigateur.

Saviez-vous que PageSpeed Insights dispose d’un outil de Waterfall ?

Il s’agit de la carte proportionnelle PageSpeed, aussi appelée Lighthouse Treemap, dont vous pouvez trouver un aperçu ci-dessous.

Cette « Carte proportionnelle » vous donne le détail des ressources et scripts lourds à charger. Cela est présenté sous forme d’un graphique très clair et simple à analyser.

Des données essentielles pour vous aider à identifier les éléments qui pèsent encore sur votre score PageSpeed !

Pour afficher le Waterfall de Lighthouse, en dessous de vos analyses PageSpeed Insights, cherchez un bouton semblable à celui-ci :

6. Reporter le chargement du JavaScript (defer + delay)

Si vous cherchez à optimiser la vitesse de votre site web sans WP Rocket, là où cela risque de coincer, c’est lorsque vous allez chercher des plugins proposant des techniques de chargement JavaScript telles que « defer » et « delay ». 

En effet, le Delay JavaScript est une fonctionnalité rare, car elle engendre un développement complexe pour l’éditeur du plugin et WP Rocket est l’un des meilleurs sur cette optimisation !

Mais commençons par aborder la question du Defer JavaScript…

En ajoutant des attributs « Defer » aux balises de scripts dans votre code HTML, les navigateurs vont charger les scripts JS après les autres éléments (HTML, CSS…). 

Il faut cependant comprendre la Différence entre le “Defer” JavaScript et le “Delay” JavaScript !

• Defer JavaScript sert à « Différer » le téléchargement des fichiers .js, en bas de page / en fin de chargement
• Delay JavaScript sert à « Retarder » l’exécution logicielle des scripts JS… une technologie beaucoup plus évoluée et donc beaucoup plus rare 

Par exemple, le plugin Autoptimize dispose d’une fonction permettant de Déplacer le Chargement de vos Fichiers JS en fin de page (defer), mais ne dispose pas de la technologie de Retardement de l’Exécution des Scripts JS (delay).
Encore une fois, sur ce point, WP Rocket figure parmi les précurseurs.

Comme vu ci-dessus, une analyse du Network Waterfall via Chrome a démontré que des fonctions JavaScript étaient chargées avec le HTML/CSS. La dernière carte “simple” à jouer pour réduire les ressources est donc de “Reporter“ l’exécution de ces Scripts JS, après le chargement de la mise en page et/ou après la première interaction de l’utilisateur avec la page.

Heureusement, pour cela, il existe « WP Meteor ↗︎ », un plugin unique, gratuit et open source qui a le pouvoir de nous rendre ce service de « Reporter l’exécution du JavaScript »… Une Pépite !

En effet, le plugin « WP Meteor » est totalement spécialisé dans l’exécution du JavaScript après interaction de l’utilisateur (Delay JS)… une fonctionnalité rare pour laquelle WP Rocket a encore une fois de l’avance sur tous ses petits concurrents.

WP Meteor offre la possibilité d’exécuter les fonctions JavaScript plus tard : après 1 ou 2 secondes suite au chargement du Webdesign complet (HTML/CSS), ou mieux encore, uniquement après la première interaction de l’utilisateur avec la page, grâce au « Zero delay mode » de Meteor… exactement comme peut le faire WP Rocket, mais ici, gratuitement !

Comme illustré sur la capture d’écran suivante, des Exclusions peuvent être ajoutées à WP Meteor comme cela peut se faire aussi via WP Rocket :

Il s’agit sur cette capture, d’un simple exemple fourni à titre d’information, car notre site de test du mod_pagespeed était parfaitement compatible avec WP Meteor sans ajouter d’exclusion. Dans les faits, nous avons laissé ce champ vide, pour le plus grand plaisir de PageSpeed Insights.

Enfin, nous ne pouvons pas conclure sans vous en dire un peu plus sur l’un de nos plugins de performance préférés…

Asset CleanUp !

Il a définitivement sa place dans cette étude de cas « PageSpeed Modules », car c’est l’un des meilleurs dans sa spécialité. C’est-à-dire, offrir la possibilité de Décharger les Assets CSS/JS ↓, « À la carte »… Entre autres ! Car Asset CleanUp est une vraie boîte à outils de performance offrant de nombreuses autres fonctionnalités.
Par exemple, en complément du déchargement des assets, « À la carte », Asset CleanUp offre une excellente fonctionnalité de Defer JS qui peut remplacer le defer_javascript des PageSpeed Modules.

Cette fonctionnalité peut vous servir en cas de conflit ou pour profiter des avantages du Defer JS d’Asset CleanUp, tout simplement. 

Premières conclusions sur les 6 optimisations « indispensables » pour obtenir +90/100 sur PageSpeed Mobile

Grâce aux dernières optimisations réalisées parmi ces “basiques”, c’est-à-dire…

1. Le Defer du JavaScript, obtenu grâce au filtre mod_pagespeed « defer_javascript »
2. Le Delay du JavaScript, obtenu grâce au plugin WordPress « WP Meteor »

…nous avons maintenant un score de  99/100  sur PageSpeed Mobile ! 🎉

Le chargement différé et l’exécution retardée/asynchrone du JavaScript nous font gagner 6 points 😮

Rien que ça 😉

Conclusion du test PageSpeed Modules…

Pour un score optimal sur mobile, il est nécessaire de Réduire au maximum le Nombre de Requêtes et la Taille des transferts ! C’est-à-dire, les données à transférer lors du chargement initial de la page. 

C’est la voie royale vers le score de 100/100 sur PageSpeed Mobile.

Comme vous pouvez le voir sur la capture ci-dessus, nous avons Réduit par 3 le nombre de Requêtes et la Taille des données à transférer !

C’est là que vous comprenez tout l’intérêt du travail qui a été fait tout au long de ce tutoriel : Alléger tout ce qui peut l’être pour un chargement plus rapide sur mobile !

On récapitule les optimisations majeures !

Voici le récapitulatif des 6 optimisations principales à mettre en place sur tout site WordPress :

1. Utiliser un plugin de File Cache
2. Charger les images en Lazy Load
3. Optimisation d’Assets JS/CSS (minification…)
4. Nettoyage ou optimisation HTML (dimensions des images…)
5. Règles .htaccess (prolonger le cache navigateur…)
6. Reporter le chargement du JavaScript (defer + delay)

Bravo 🎉 Vous êtes maintenant parfaitement conscient des optimisations de base à réaliser sur tout site WordPress !

Cependant, si vous pensiez être arrivé au bout de ce qu’il est possible d’optimiser, détrompez-vous…

Il existe au moins 8 autres points d’optimisation ↓ auxquels s’intéresser pour augmenter encore plus vos chances d’obtenir un score de  100/100 sur PageSpeed Insights , en particulier pour le score Mobile, et surtout si vous avez un site relativement complexe.

Ne manquez donc pas nos optimisations et conseils avancés présentés ci-dessous !

7. Optimiser les images (compression et/ou conversion en WebP) ↓
8. Compression Gzip et/ou Brotli des fichiers (économie de bande passante idéale avec une connexion mobile) ↓
9. Éviter les plugins non essentiels et/ou faire le ménage ↓
10. Privilégier un thème WordPress rapide et des plugins légers ↓
11. Mettre à jour WordPress, le thème et les plugins régulièrement ↓
12. Décharger des fichiers JS/CSS et des polices d’écriture (niveau intermédiaire à expert) ↓
13. Configurer un CDN (recommandé pour les sites internationaux) ↓
14. Bien choisir son Hébergeur Web (rapide et avec un bon support WordPress) ↓

Voyons maintenant ces optimisations avancées, qui devraient vous permettre de décrocher la lune sur PageSpeed Insights…

Optimisations avancées pour décrocher un 100% sur PageSpeed Mobile !

Puisque maintenant, nous avons les bases, nous allons pouvoir rentrer encore un peu plus profondément dans le sujet et aller chercher les éventuels derniers points qu’il nous manque pour atteindre les  100/100  sur PageSpeed Mobile…

Commençons par une optimisation indispensable qui vous offrira une importante réduction du délai de chargement de vos pages.

7. Optimiser les images (compression et conversion en WebP)

Nous n’insisterons jamais assez sur l’importance d’optimiser les images. Le poids des images est l’un des facteurs les plus déterminants pour la vitesse de chargement des pages. Si vous avez une image de plusieurs mégas au début de votre article, vous pourrez mettre en place toutes les autres optimisations de cet article, vous continuerez d’avoir un temps de chargement exécrable. 

Les images doivent être de la bonne taille. 

Donc, évitez les photos HD de votre appareil photo ou réduisez-les avant de les envoyer dans votre bibliothèque WordPress. Si c’est déjà trop tard, un plugin comme Imsanity vous permettra de réduire la taille de l’ensemble de vos images de manière groupée, et ce, en quelques minutes seulement.

Les images doivent être dans le bon format.

De préférence, JPG pour les photos et PNG ou SVG pour les illustrations vectorielles. 

Le format WebP créé par Google a aussi créé sa petite révolution et sera souvent plus léger que ses prédécesseurs. 

Les images doivent être compressées.

Bien sûr, il sera nécessaire d’atteindre un niveau de compression maximum, tout en évitant qu’elles ne perdent en qualité à l’œil nu. 

Encore une fois, pour cet usage, il existe de nombreux plugins qui pourront vous aider à obtenir des images compressées sans perte de qualité. 

L’équipe derrière WP Rocket a aussi pensé à la compression des images en créant un autre service premium. Il s’agit du plugin Imagify, qui permet de compresser les images sans perte de qualité, mais aussi de les convertir en WebP, le format très prisé par PageSpeed Insights.

Cependant, notre but aujourd’hui est de ne pas dépenser 1 centime dans les optimisations de notre score PageSpeed. Donc, nous n’opterons pas pour Imagify, mais l’une des « Alternatives Gratuites » listée dans l’article ci-dessous.

Nous vous recommandons fortement de prendre connaissance de l’article complet, partagé ci-dessus ↑ pour passer maître en matière de Compression & Conversion d’images sous WordPress, et ce, gratuitement…

Cependant, pour les pressés, vous pourriez vous intéresser à ces 2 plugins gratuits qui font bien l’affaire :

• Pour la Compression d’images PNG/JPEG : le plugin TinyPNG ↗︎
  Gratuit jusqu’à 100 images par mois, car il utilise l’API externe de TinyPNG
• Pour la Conversion des images en WebP : le plugin WebP Express ↗︎
  100% gratuit, car il utilise les extensions PHP de votre Hébergement EasyHoster (GD, Imagick…)

8. Compression Gzip et/ou Brotli des fichiers (économie de bande passante idéale avec une connexion mobile)

L’une des optimisations indispensables à mettre en place pour bénéficier d’un bon score PageSpeed est la Compression des Ressources Statiques !

Mais peut-être vous demandez-vous quel type de compression choisir entre « Gzip » et « Brotli » ?

Pas de souci, nous avons un article dédié à cette question :

En résumé, Gzip et Brotli offrent des optimisations comparables en termes de vitesse de chargement, mais Brotli est plus complexe à mettre en œuvre et peut nécessiter l’utilisation d’un outil tiers, comme un CDN (KeyCDN par exemple).

Pour en savoir plus sur l’activation de la compression Gzip ou Brotli, ne manquez pas cet article dédié :

À noter que toutes les solutions d’Hébergement EasyHoster sont bien sûr compatibles Brotli !

9. Éviter les plugins non essentiels et/ou faire le ménage

Pour obtenir une première amélioration rapide de son score PageSpeed, rien de tel que de d’abord vérifier sa liste de plugins installés, à l’affût d’extensions non-essentielles à la rentabilité du site.

Il est recommandé de régulièrement relire la liste des plugins installés sur votre WordPress afin de désactiver toutes les extensions n’étant pas essentielles pour la rentabilité de votre projet.

Autrement dit, si l’impact d’un plugin n’est pas très important pour les bénéfices que vous allez tirer du site, il est temps d’envisager de désinstaller celui-ci complètement du site. Par exemple, évitez les plugins de « Statistiques » et privilégiez un outil externe comme Google Analytics.

De même, évitez les plugins de Widgets et autres Gadgets non essentiels, car ceux-ci vont alourdir la génération de vos pages par PHP, et très probablement ajouter leurs propres ressources : CSS, JavaScript, Polices d’icônes, etc, ce qui peut avoir un impact considérablement négatif sur votre score PageSpeed.

Enfin, nous ne pouvons pas conclure ce point sans vous en dire un peu plus sur l’un de nos plugins de performance préférés…

Asset CleanUp permet de désactiver les assets JS/CSS de certains plugins, au cas par cas !

Il est impossible de ne pas mentionner « Asset CleanUp ↗︎ » dans cet article dédié à l’optimisation du score PageSpeed, car c’est l’un des meilleurs dans sa spécialité. C’est-à-dire, permettre de Décharger les Assets CSS & JavaSript, « à la carte », sur certaines pages ou sur certains articles, lorsque ceux-ci ne sont pas nécessaires !

Par exemple, si vous disposez d’un plugin de formulaires de contact comme « Contact Form 7 », celui-ci ne doit peut-être pas être chargé sur toutes vos pages, mais uniquement sur votre page de contact !

C’est là qu’Asset CleanUp intervient, en vous permettant de n’activer les assets de Contact Form 7, que sur les pages où cela est nécessaire, comme vous pouvez le voir ci-dessus.

Plugin Organizer, une alternative à Asset CleanUp pour décharger des plugins sur certaines pages

En effet, alternativement, il existe aussi l’extension « Plugin Organizer ↗︎ » qui permet aussi de décharger complètement les plugins de votre choix, sur certaines zones de votre site.

À noter que « Plugin Organizer » désactive complètement le plugin sur les pages de votre choix, et ce, même au niveau du PHP. Alors que de son côté, Asset CleanUp désactive seulement les ressources JS/CSS qui pèsent sur la vitesse de chargement et le score PageSpeed.

Autrement dit, « Plugin Organizer » peut s’avérer plus performant sur les pages « non mises en cache » où le Temps de réponse (TTFB) serait élevé. Mais ce dernier est aussi plus complexe à configurer qu’Asset CleanUp, qui se montrera bien suffisant dans la plupart des cas.

10. Privilégier un thème WordPress rapide et des plugins légers

Si vous utilisez actuellement un thème n’étant pas optimisé pour les Core Web Vitals et/ou des plugins lourds, mal codés ou mal optimisés qui créent des ralentissements sur votre site, les meilleures optimisations CSS ou JavaScript ne pourront pas compenser ces ralentissements. C’est pourquoi l’utilisation, dès le départ, d’un thème WordPress rapide est primordiale. 

Si vous êtes hébergé chez EasyHoster, n’hésitez pas à lancer ou à demander un audit de performance gratuit PHP X-RAY. Il s’agit selon nous du meilleur outil côté hébergement web, pour détecter les sources de surcharge sur un compte d’hébergement cPanel.

En ce qui concerne le choix de votre thème WordPress, ne manquez pas notre classement des thèmes les plus rapides…

11. Mettre régulièrement à jour WordPress, le thème et les plugins 

Lorsqu’un problème de performance est détecté dans un thème ou dans un plugin, celui-ci est rapidement signalé au développeur par l’un de ses utilisateurs. 

Le développeur du thème ou du plugin peut alors effectuer un correctif dans son code source pour éviter les surcharges serveur. 

C’est la raison pour laquelle il est recommandé de toujours utiliser la dernière version de ses extensions, comme de son thème WordPress. Sans oublier bien sûr que les dernières versions de votre thème ou de vos plugins contiennent souvent des correctifs de sécurité qui comblent des failles pouvant conduire à un piratage du site Web. 

Donc, vraiment, faites les mises à jour de votre site WordPress aussi souvent que possible 😉

12. Décharger des fichiers JS/CSS et des polices d’écriture (niveau intermédiaire à expert)

Pour aller plus loin et garantir un score PageSpeed optimal, il peut être grandement utile de décharger certains éléments de votre site, en fonction du contexte, car tous les fichiers et tous les bouts de codes ne sont pas utiles sur absolument toutes les pages de votre site. Par exemple, les fichiers CSS et JavaScript de votre formulaire de contact ne sont utiles que sur les pages où apparaissent des formulaires, etc.

Vous avez compris la logique ! 

Donc, en complément, pour bénéficier d’un temps de chargement aussi rapide que l’éclair pour votre site, n’oubliez pas ces quelques points essentiels…

• Décharger les Assets JS & CSS
• Décharger les Fonts

Décharger les Assets JS & CSS…

Il existe deux plugins gratuits fabuleux qui figurent parmi nos indispensables pour décharger, « à la carte », certains fichiers CSS ou JavaScript, il s’agit de Asset CleanUp ↑ et de Plugin Organizer ↑…

Enfin, il existe aussi la possibilité de ‘dequeue’ des Assets JS/CSS WordPress, via du code PHP placé dans un plugin “custom” ou dans le fichier functions.php de votre child-theme WordPress, et ce, sur certaines pages seulement, ou sur Desktop/Mobile uniquement (au choix). Tout cela en utilisant des règles de programmation conditionnelles “If/Else…”.

Ces optimisations sont très avancées et plutôt destinées aux experts en développement Web. Nous ne pourrons donc pas rentrer plus dans les détails, mais sachez qu’un excellent article complémentaire à celui-ci a été publié sur le blog « Mister WordPress ». Vous pouvez le retrouver en suivant ce lien :

Décharger les Fonts…

Les « Fonts », autrement dit, les « Polices » peuvent aussi lourdement peser sur le score PageSpeed Mobile. 

Il convient donc de limiter au maximum l’utilisation des Polices d’écriture et Polices d’icônes au maximum !

Le meilleur moyen pour cela est soit de n’utiliser qu’une seule police spéciale (Google Font par exemple), ou mieux pour un maximum de performances, utiliser une police d’écriture native de l’ordinateur, comme “Arial, sans serif” ou le “Times, serif” par exemple. 

Cette dernière option aurait le mérite de ne charger strictement aucune police supplémentaire, vous donnant la possibilité d’offrir une expérience utilisateur ultra-rapide, mais au détriment de l’aspect esthétique et personnalisé de votre webdesign.

Pour détecter la présence de polices d’écriture et d’icônes sur votre site, vous pouvez l’analyser grâce aux outils pour développeur du navigateur Google Chrome, onglet Network :

Commencez donc par vérifier la configuration de votre Thème et de vos pages construites avec un Page Builder pour n’intégrer qu’une seule police d’écriture. Par exemple, même si c’est joli, évitez d’utiliser une police avec empattement « Serif » de type Playfair Display pour les intertitres, et une « Sans-serif » de type Open Sans pour le texte principal.

De même, certaines polices d’icônes superflues peuvent être incluses par votre thème ou certains de vos plugins. En effet, certains plugins viennent embarquer tout un jeu de polices d’icônes comme FontAwesome, alors que votre thème WordPress intègre déjà ses propres icônes, ce qui peut grandement affecter votre score sur PageSpeed Insights.

Décharger des ressources grâce aux fonctions PHP “dequeue” et “deregistrer”

Grâce à du code PHP inclus dans le fichier functions.php, il est possible de Décharger certains Styles CSS et certains fichiers JavaScript, au cas par cas. Pour cela, il est nécessaire d’utiliser les fonctions wp_dequeue_style(), wp_deregister_style(), wp_dequeue_script() et wp_deregister_script().

L’utilisation du PHP peut s’avérer très puissante pour réaliser des optimisations très spécifiques. Par exemple, dans le code suivant, si le navigateur est un Smartphone ou une Tablette, nous déchargeons les Styles et les fonctions JavaScript liés au plugin « Plugin-Example »…

function wp_dequeue_style_script() {

  if(wp_is_mobile()) { // Si le visiteur est sur mobile

    wp_dequeue_style( 'plugin-example-css' );  // On décharge les Styles CSS de ce plugin
    wp_deregister_style( 'plugin-example-css' );

    wp_dequeue_script( 'plugin-example-js' );  // On décharge les Scripts JS de ce plugin
    wp_deregister_script( 'plugin-example-js' );

  }
}
add_action( 'wp_print_scripts', 'wp_dequeue_style_script', 1 );

Encore une fois, les conditions PHP peuvent vous donner accès à des optimisations très avancées et spécifiques à votre propre site. Le bout de code suivant pourrait vous permettre de décharger une feuille de style sur une ou deux pages en particulier, portant les IDs “1234” et “5678”.

function wp_dequeue_style_script() {
  $current_post_id = get_current_page_ID(); // Récupérons l'ID de la page
  if($current_post_id==1234 || $current_post_id==5678){ // S'il s'agit des pages 1234 ou 5678
    wp_dequeue_style( 'plugin-example-css' );  // On décharge les Styles CSS du plugin "example"
    wp_deregister_style( 'plugin-example-css' );
  }
}
add_action( 'wp_print_scripts', 'wp_dequeue_style_script', 1 );

Vous avez compris la logique ? 😉

Si oui, il vous suffit de détecter les plugins qui peuvent être masqués sur mobile et/ou sur certaines pages, pour les décharger grâce à des conditions PHP et les fonctions wp_dequeue_style, wp_deregister_style, wp_dequeue_script et wp_deregister_script.

13. Configurer un CDN (indispensable pour les sites internationaux)

À la base, un CDN est un réseau de serveurs Web répartis sur tous les continents du monde, qui se chargent de mettre en cache vos pages, afin de les livrer beaucoup plus rapidement aux internautes du monde entier.

Au fil du temps, les services de CDN se sont mis à offrir de nombreuses autres fonctionnalités avancées, liées aux Performances Web.

Les CDN peuvent réellement apporter leur lot d’améliorations pour les performances de votre site WordPress, ainsi que réduire la charge qui pèse sur votre compte d’Hébergement Web, pour pouvoir accueillir plus de visiteurs avec un excellent Temps de réponse du site. 

Pour retrouver notre avis sur les meilleurs CDN du marché, y compris quelques CDN gratuits ou vraiment pas chers, consultez cet autre article dédié :

Pour résumer, vous pourriez vous intéresser en priorité aux solutions suivantes :

• Jetpack CDN : 100% gratuit, il est accessible aux utilisateurs de WordPress, le CDN de Jetpack vous propose d’héberger gratuitement vos images et fichiers statiques (JS, CSS…).
  Jetpack est la solution la moins qualitative, car sa compression d’images peut altérer la qualité de vos illustrations.
  Plus d’infos sur Jetpack dans notre article sur les plugins de webperf →
• KeyCDN : serveurs CDN pro à tarif très abordable, avec configuration simple et efficace.
  KeyCDN offre un bon compromis entre budget et qualité de service.
  10$ de crédits offerts sans engagement sur KeyCDN →
• Cloudflare : versions gratuites et payantes disponibles, avec serveurs CDN frontaux, avec en option, des optimisations dynamiques de performance très efficaces, ainsi que des protections anti-DDoS et plus encore, pour la sécurité de votre site. 

Dans sa version « Pro », CloudFlare donne des résultats imbattables en termes de performance, avec des fonctionnalités avancées, comme le support du HTTP/3 et des optimisations « à la volée » comme celles incluses dans son « Rocket Loader ».

14. Choisir un Hébergeur Web rapide et avec un bon support WordPress

Si votre hébergeur crée des ralentissements systématiques côté serveur lors du chargement de votre site, vous n’aurez aucune chance d’obtenir un bon score PageSpeed, et cela, peu importe les optimisations que vous mettrez en place.
De même, puisque la rapidité de votre site dépend en grande partie de la manière dont vous l’aurez optimisé, plus que de votre Hébergement Web, il est également important de choisir un Hébergeur WordPress qui saura vous apporter une bonne Assistance Technique 7j/7 pour vous aiguiller et vous aider à peaufiner vos derniers réglages pour PageSpeed.

Pour aller plus loin dans votre choix d’Hébergeur Web, ne manquez pas notre article dédié :

Récapitulatif des 8 Optimisations avancées vues ci-dessus :

Récapitulons les 8 optimisations complémentaires ↑ destinées à nous faire côtoyer le score de  100/100 sur PageSpeed Insights , y compris sur Mobile !

7. Optimisation des images (compression/WebP)
8. Compression Gzip ou Brotli (bande passante)
9. Réduction du nombre de plugins (ou chargement sélectif)
10. Choix de son thème et de ses plugins (rapides et légers)
11. Maintenance WordPress (mise à jour et surveillance régulières)
12. Déchargement des Assets (JS, CSS, Fonts…)
13. Configuration d’un CDN (pour les sites internationaux ou hébergés pour pas cher)
14. Choix d’un Hébergeur Web (rapide et spécialisé WordPress)

Si vous avez lu attentivement tout ce qui précède, tout en réalisant des exercices d’optimisation sur vos sites, vous devriez maintenant être passé maître dans l’Art d’Optimiser vos Performances Web… donc, pourquoi ne pas rentabiliser encore plus ces compétences ? 😉

Idée business pour Développeur Web ou Prestataire WordPress : Devenez « Consultant PageSpeed » en proposant vos services de Web Perfs !

Si vous êtes Prestataire de Services Web, cette opportunité s’adresse à vous !

Proposez-vous déjà, à vos clients, des services d’optimisation des Performances Web ? Est-ce que vous mettez en avant ce service de « Consulting PageSpeed » comme il se doit ? Ou ce service est plutôt proposé “timidement” aux clients qui en font la demande ? 😅

En effet, garantir des résultats au  Vert  à tous vos clients sous WordPress peut sembler audacieux, car l’optimisation des Performances Web peut parfois paraître assez complexe.

Cependant, en suivant scrupuleusement toutes les notions vues dans ce tutoriel…

Garantir un score PageSpeed Mobile de 90/100 ou plus relève du possible !

Tout cela rend la mission de Consultant PageSpeed très agréable pour le prestataire Web.

Mais ce n’est pas tout !

Les services d’un Consultant PageSpeed peuvent être facturés à des tarifs attractifs, autant pour le client que pour le prestataire…

Ci-dessous, voici un exemple de différents « Packs d’intervention » qui pourraient être proposés à différentes typologies de clients.

Ce tableau de tarifs a été publié originellement sur le blog PROduNum.com et représente selon nous des tarifs réalistes pouvant être facturés pour du Consulting PageSpeed, en France ou en Belgique.

En suivant le lien présentant cette opportunité de spécialisation, vous apprendrez en détail comment vous pourriez recentrer votre activité de « Prestataire WordPress » (généraliste), vers une discipline plus ciblée, très demandée et potentiellement très rentable : Consultant en Web Performance !

Vous noterez qu’il est proposé ici d’offrir une Garantie de Résultats « Satisfait ou Remboursé » 😮

Bien sûr, la garantie d’atteindre le score de  90/100  peut être proposée « sous réserve de bonne volonté du client », par exemple, en lui demandant son accord pour remplacer un plugin par un autre, ou effectuer quelques ajustements dans la construction de ses pages. Cela pourrait ressembler à ceci : « il serait nécessaire de supprimer cette vidéo d’introduction présente en arrière-plan en haut de votre page d’accueil ».

Après tout, le spécialiste à qui on demande conseil, c’est vous 😁

Les Hébergés EasyHoster peuvent compter sur notre support !

En effet, si vous vouliez mettre ce type de service en avant sur votre carte et vous faire aider par EasyHoster dans cet exercice, sachez que notre équipe se tiendra toujours à votre disposition…

N’hésitez jamais à faire appel à EasyHoster en renfort !

Nous prenons toujours le temps d’aider nos utilisateurs à gagner quelques points sur PageSpeed. Certes, parfois avec quelques jours de délai pour les cas les plus complexes, le temps d’escalader la demande à nos meilleurs spécialistes, mais toujours avec l’envie d’aller plus loin.

Méditez sur cette opportunité qui pourrait vous permettre d’étendre votre catalogue de prestations, tout en rendant un fier service à vos clients 😉

Conclusion sur le ModPageSpeed inclus dans votre Hébergement Web EasyHoster

Le Mod PageSpeed est gratuit et inclus dans votre Hébergement Web. Il peut améliorer considérablement les performances de votre site web, ainsi que son classement dans les moteurs de recherche. Cependant, sa mise en place reste “plus complexe” et prend plus de temps que la simple installation du plugin premium WP Rocket, pour un résultat similaire, mais à un coût plus élevé avec ce dernier.

Si vous choisissez d’utiliser le ModPageSpeed, soyez prudent lorsque vous activez les filtres et sauvegardez bien votre fichier « htaccess » d’origine…

Activez les Filtres du mod_pagespeed un par un et assurez-vous qu’ils n’endommagent pas votre site. Expérimentez différents filtres et Testez les Performances de votre site web au fur et à mesure via PageSpeed Insights.

Si vous avez besoin d’aide pour optimiser le score PageSpeed de vos sites hébergés sur notre infrastructure, n’hésitez pas à demander conseil au Support EasyHoster.

Si vous avez fait le choix d’utiliser WP Rocket et que vous n’avez pas encore votre licence, n’hésitez pas à passer par notre lien d’affiliation pour bénéficier de -10% de réduction sur le plugin :

FAQ / Questions fréquentes sur WP Rocket et le Mod PageSpeed inclus dans votre Hébergement Web

Ci-dessous, nous avons collecté une série de questions qui nous sont fréquemment posées au sujet de l’optimisation du score PageSpeed, avec ou sans WP Rocket.

Remplacer WP Rocket par un ou des plugins gratuits et obtenir 100/100 sur PageSpeed Mobile, c’est possible ? 

Dans cet article, nous avons vu à quel point il était devenu important d’obtenir un Score PageSpeed correct, y compris sur Mobile. 

Nous avons aussi vu à quel point WP Rocket était puissant et pourquoi ce plugin de cache facilite la vie de millions d’utilisateurs de WordPress à travers le monde. C’est la Suite de Performance la plus puissante et la plus simple à configurer, mais en cas de besoin, EasyHoster peut aussi vous épauler. 

Cependant, WP Rocket n’est pas donné et le budget nécessaire pour s’offrir ce plugin de cache n’est pas accessible à tout le monde, surtout en début de projet. De même, certains apprentis développeurs ont une préférence pour l’open source et apprécient comprendre la logique qui se cache derrière les plugins d’optimisation 

C’est pourquoi nous avons élaboré une méthode d’optimisation PageSpeed un peu plus longue et laborieuse, mais 100% Gratuite, avec des résultats qui s’approchent des miracles que fait WP Rocket pour ses utilisateurs. 

Pour vous prouver l’efficacité de notre Méthode basée sur le Mod PageSpeed, nous avons créé un site avec un webdesign moderne et un Page Builder réputé “lourd”, à savoir, Elementor, et nous avons pu obtenir un score de 98/100 sur PageSpeed Mobile, sans WP Rocket… uniquement avec des plugins gratuits.   

En guise de mémo, revoici la liste des optimisations à implémenter pour obtenir gratuitement des résultats proches de ceux de WP Rocket :

1. Utiliser un plugin de File Cache comme WP Super Cache et activer le Mod PageSpeed via htaccess
2. Différer le chargement des images grâce à un plugin de Lazy Loading comme a3 Lazy Load
3. Optimiser les Assets JavaScript & CSS (minification, etc) grâce aux PageSpeed Modules
4. Nettoyer ou optimiser le code HTML (dimensions des images, etc) grâce à des plugins comme “Specify Missing Image Dimensions” et “Asset CleanUp”
5. Configurer des règles .htaccess, notamment pour prolonger le cache côté navigateur
6. Reporter le chargement du JavaScript avec le plugin WP Meteor (defer + delay)
7. Compresser et/ou convertir les images dans un format moins lourd à télécharger, y compris les WebP
8. Compresser les fichiers grâce à  Gzip ou Brotli pour économiser la bande passante des connexions mobiles
9. Éviter les plugins non essentiels et/ou faire le ménage dans les plugins déjà installés (chaque plugin compte)
10. Privilégier un thème WordPress et des plugins légers, à sélectionner de préférence avant le développement du projet
11. Mettre à jour WordPress, le thème et les plugins régulièrement, car des améliorations arrivent régulièrement
12. Décharger des fichiers JS/CSS et des polices d’écriture avec Asset CleanUp ou du code custom (PHP) 
13. Configurer un CDN, surtout si le site reçoit du trafic issu de l’international
14. Choisir un Hébergeur Web rapide, proposant des outils d’optimisation des performances et offrant un bon support WordPress

Vous avez maintenant tout ce qu’il vous faut pour maintenir un score PageSpeed Mobile de +90/100 sur la durée, même si vous n’avez pas encore les moyens de vous offrir WP Rocket.

Ensuite, avec la croissance de votre projet sur Internet, vous trouverez sans doute pertinent d’investir dans un plugin de cache et de performance complet, comme WP Rocket, qui vous fera gagner un temps considérable et probablement quelques points sur PageSpeed Mobile. 

EasyHoster est peut-être le futur meilleur allié de votre projet sur Internet !

Comme vous l’avez compris, « EasyHoster est bien plus qu’un hébergeur », car nous n’hésitons jamais à nous impliquer massivement dans de nombreux aspects relatifs aux sites de nos hébergés. Donc, si vous pensez que l’aide d’une équipe de passionnés d’Hébergement Web et de WordPress peut vous être utile, n’hésitez pas à prendre contact avec nous pour discuter de vos besoins en termes d’Hébergement Web et d’assistance.

De même, si vous êtes Prestataire Web et que vous désirez proposer des services de Web Perfs à vos clients, EasyHoster peut être l’Hébergeur Web idéal pour vous soutenir dans votre offre de « Consulting PageSpeed ! » 

Le score PageSpeed de +90/100 est-il réservé aux sites presque “vides” ?

Vous vous demandez peut-être si le score  Vert  sur PageSpeed Mobile est uniquement réservé aux sites très Minimalistes ?

Autrement dit, par exemple…

“ Est-ce qu’un site Web avec de Nombreuses Photos et Pages Complexes très travaillées avec Elementor pourrait atteindre +90/100 sur PageSpeed Mobile ? ”

Tout d’abord, vous pourrez noter que Nos 2 sites de tests ont été construits avec le Thème « Astra » et le Constructeur visuel « Elementor », qui sont des solutions très populaires, mais réputées comme étant relativement complexes. Elementor en particulier est assez lourd et embarque beaucoup de balises HTML qui peuvent allonger les délais de chargement. 

Pour rappel, voici les 2 sites qui nous servent de « Speed Test » et nous assurent de maintenir une infrastructure technologique qui a le potentiel d’offrir un bon score sur PageSpeed Insights : 

1. speed.easyhoster.net : Premier site optimisé grâce à WP Rocket. 
2. mod-pagespeed.easyhoster.net : Second site optimisé en priorité grâce aux PageSpeed Modules d’un Hébergement EasyHoster accompagnés des quelques réglages complémentaires vus dans ce guide complet.

Mais ce n’est pas tout…

Vous pouvez aussi tester notre propre site « EasyHoster.com ». C’est-à-dire, celui que vous êtes en train de lire en ce moment. 

Ce site est très lourd et très complexe, car il contient de nombreux outils et zones spécifiques, comme un « Centre d’aide » plein de Tutoriels, des « Pages de vente » construites avec Divi, un « Blog » nécessitant les styles de Gutenberg, des « Avis clients » issus d’un plugin assez lourd, un « Moteur de recherche avancé » basé sur la pertinence des résultats, des « Fonctions PHP personnelles » liées à notre activité d’Hébergeur Web, et ainsi de suite !

Et pourtant…

Le score PageSpeed de notre page d’accueil EasyHoster.com s’en sortait pas mal le 2 mai 2023 (date à laquelle nous avons publié cet article).

Cela étant dit, soyons francs, un site complexe ne sera pas logé à la même enseigne qu’un simple blog minimaliste… 

Comment maintenir un score PageSpeed Mobile de +90/100 sur la durée ?

Pour un site complexe en production, il faut prendre en considération le fait qu’il puisse y avoir « Un Travail d’Entretien Régulier » ou de « Maintenance » à réaliser au fil du temps, car les plugins et le thème WordPress se mettent à jour.

Parfois, il faut souffrir pour être beau 😄

Dans de rares cas, lorsqu’une nouvelle version d’un plugin ou d’un thème apparaît, certaines optimisations peuvent nécessiter d’être remises en place. 

En effet, une update peut faire perdre des points sur un site tel que EasyHoster.com, et nous devons parfois réajuster nos réglages au petit matin pour faire remonter le site au-dessus des 90/100 sur Mobile 🙂

Par exemple, dans de rares occasions, un Script JS déchargé avec Asset CleanUp peut “changer de nom” et devrait être déchargé à nouveau, moyennant quelques clics dans le Tableau de bord WordPress.

Bien sûr, nous parlons ici d’enjeux qui touchent plus particulièrement les sites complexes… et d’à peine quelques jours de maintenance chaque année.

De son côté, un blog plus simple ne devrait pas se soucier d’un tel travail de maintenance ou de réoptimisation aussi régulier.

Plus de questions-réponses sur l’Hébergement PageSpeed et WP Rocket ?

Pour continuer votre lecture, nous vous recommandons cet article sur l’optimisation du chargement de l’interface d’admin de WordPress…

Tableau de bord WP lent, 19 conseils pour accélérer votre Dashboard WordPress

L’objet de cet article était plus particulièrement l’optimisation du chargement de WordPress, sur la partie publique du site…
Mais nous sommes conscients que les problèmes de lenteur au niveau du Tableau de bord de WordPress peuvent faire vivre un véritable enfer aux webmasters qui cherchent à optimiser leur productivité.

C’est pourquoi nous avons également publié un guide complet pour vous aider à accélérer la vitesse de chargement de votre Dashboard WordPress. C’est-à-dire, éliminer les lenteurs au niveau de la zone d’administration de WP :

Parmi nos meilleurs conseils pour résoudre un problème de tableau de bord lent sous WordPress, outre le choix d’un bon Hébergeur Web, ainsi que la recherche de plugins consommateurs grâce notre module cPanel « PHP X-RAY », nous vous recommandons de réaliser en priorité les 2 optimisations suivantes, également présentées dans notre article complet :

• Supprimer les anciennes « Révisions de WordPress » via phpMyAdmin →
• Installer l’Object Cache de Redis grâce aux technologies de votre Hébergement EasyHoster →

Néanmoins, ne manquez surtout pas les 19 conseils de notre Guide d’Optimisation du Chargement de « WP-Admin », incluant entre autres, la détection de plugins consommateurs de ressources grâce à « PHP X-RAY », l’augmentation de la Mémoire RAM allouée à WordPress ou encore le nettoyage avancé de la Base de données MySQL de WP !