Performance Max : guide complet
Dans cet article, nous allons vous guider pour maitriser nos fonctionnalités Performance Max.
Performance max est un ensemble de fonctionnalités que vous allez typiquement retrouver dans des extensions de performance ou de cache. Nous les proposons nativement chez Copilhost, toujours dans l'objectif de simplifier votre travail tout en ayant les sites WordPress les plus performants possibles.
Vous trouverez les fonctionnalités suivantes :
Minification HTML
Minification CSS
Lazy load pour vos images et iframes
Désactiver le script des emojis
Héberger vos polices Google localement
Supprimer les polices Google
Retarder vos scripts JS (Delay JS)
Par défaut, lorsque vous activez Performance Max, vous allez activer toutes les fonctionnalités sauf "Supprimer les polices Google". Vous pouvez ensuite décider de vous rendre dans les réglages de votre site > Performance > Performance Max afin d'activer ou désactiver les fonctionnalités que vous souhaitez.
Nous allons vous accompagner sur chaque fonctionnalité, comment les manipuler et quelles sont les conséquences.
Veillez toujours à vérifier votre site en onglet privé et vous assurer que rien n'est "cassé" une fois Performance Max activé.
Pas d'inquiétudes, rien n'est irréversible.
Si vous rencontrez des bugs sur votre site suite à l'activation de Performance Max, désactivez-le.
Ensuite, activez chaque fonctionnalité une par une, jusqu'à trouver celle qui pose problème. Une fois repérée, laissez-la désactivée. Il n'y a rien à faire, ce sont des conflits naturels qui peuvent survenir dû à une infinité de configurations possibles d'un site à un autre.
Profitez des autres optimisations. 😊
Vous avez la possibilité d'activer Performance Max dès la création de votre site WordPress, mais ce n'est généralement pas conseillé si vous êtes dans une phase de création de votre site.
Nous vous conseillons de terminer la création de votre site puis en dernière étape, d'activer Performance Max dans Gérer ce site > Tableau de bord > Général et vérifier sa compatibilité avec votre site et vos extensions.
Si vous rencontrez des problèmes, vous pouvez vous référer à la section précédente "Précautions générales".
#1 Gérer du cache
Lorsque vous activez ou désactivez des fonctionnalités, il y a une purge de notre CDN Cloudflare et du cache de page intégré dans notre CDN.
Ce qui signifie que si vous faites immédiatement des tests dans un outil comme PageSpeed Insights (PSI), le premier résultat pourrait être mauvais car il n'a pas bénéficié du cache, le cache n'ayant pas été chargé par une première visite sur votre page.
Avant de faire vos tests avec des outils comme PageSpeed Insights (PSI) ou GTMetrix, nous vous recommandons donc d'aller une première fois sur votre site en onglet privé pour charger le cache.
Vous constaterez vite qu'une fois votre première visite effectuée sur chaque page, les pages se chargent beaucoup plus vite. C'est parce que vous profitez du meilleur système de cache au monde chez Copilhost. 🤗
#2 Comment bien utiliser des outils d'audit de performance
Il faut toujours effectuer plusieurs tests avec PSI, il peut y avoir des fluctuations importantes d'un test à un autre. Pour une meilleure appréciation de votre score et de l'état de votre site, nous vous recommandons de lancer PSI 2 à 3 fois.
Vous êtes désormais prêt pour scorer votre site sur PSI ! 🎉
La minification HTML optimise le code HTML de votre site en réduisant les espaces, l'indentation, les commentaires et tout ce qui est "superflu" et non nécessaire au bon fonctionnement de votre code.
Cette fonctionnalité pose rarement de problème et peut être activée sans trembler. 😮💨
Vous ne gagnez pas énormément de points dans PSI mais l'impact peut être intéressant, en particulier pour de grosses pages, et l'activer ne demande aucun effort.
La minification fait partie des fonctionnalités incontournables lorsqu'on cherche à optimiser le chargement de ses pages.
La minification CSS optimise le code CSS de votre site en réduisant les espaces, l'indentation, les commentaires et tout ce qui est "superflu" et non nécessaire au bon fonctionnement de votre code.
Cette fonctionnalité peut occasionnellement causer des soucis de webdesign, il est recommandé de vérifier votre site en onglet privé une fois activée. Cette recommandation est généralement valable pour toute forme de minification (HTML, CSS, JS).
Si tout semble normal sur votre site, alors vous pouvez profiter de légers gains que peuvent vous apporter la minification CSS. 🎉
Vous ne gagnez pas énormément de points dans PSI mais l'impact peut être intéressant, en particulier pour de grosses pages, et l'activer ne demande aucun effort.
Notre fonctionnalité lazy load utilise les attributs natifs de HTML5 pour charger vos images en différé.
Concrètement, cela signifie que les premières images qui apparaissent dans l'écran du visiteur chargent instantanément, mais les images suivantes en dehors de l'écran ne chargent pas immédiatement. Ce qui permet un chargement initiale de la page plus rapide pour vos visiteurs. ✨
Nous ajoutons ces attributs sur les balises iframes également.
Il y a un support natif de WordPress pour le lazy load de HTML 5, de nombreux thèmes embarquent donc déjà du lazy load sur toutes vos pages. Si c'est le cas sur votre site, activer le lazy load Copilhost ne fera aucune différence.
Si vous utilisez un thème qui n'embarque pas de lazy load natif, activer cette fonctionnalité est une excellente option.
Pour afficher des emojis sur votre site, WordPress embarque un fichier JavaScript (JS) qui se charge automatiquement sur toutes vos pages. Ce fichier sert principalement pour les anciens navigateurs, la plupart des navigateurs modernes (Chrome, Firefox, Safari, Edge) n'en ont pas besoin.
Une astuce simple qui impacte toutes vos pages consiste à éliminer ce fichier "wp-emoji-release.min.js" au chargement de vos pages. Dans 99% des cas, la désactivation de ce fichier ne posera aucun problème car les emojis sont intégrés aux systèmes récents.
Et si vous n'utilisez pas d'emojis, la question ne se pose même pas : désactivez ce fichier pour améliorer le chargement de vos pages.
C'est ce que vous pouvez faire en 1 clic avec cette fonctionnalité !
La plupart des thèmes et pages builders embarquent des polices Google, très utilisées partout sur le web.
Le problème de ces polices, c'est qu'elles font des appels à des serveurs externes (ceux de Google, fonts.googleapis.com) :
Ces appels font parties des requêtes bloquantes pour le rendu de votre page, comme le signale bien souvent PageSpeed Insights dans ses avertissements :
Le résultat est assez spectaculaire pour une simple histoire de police ; une chute de plusieurs points de vos scores, jusqu'à une dizaine de points en moins déjà observé par nos équipes. 🤐
Sans compter que ces appels aux serveurs Google ont été considérés comme non conformes au RGPD européen.
Une première solution simple consiste à héberger vos polices "localement", c'est-à-dire directement dans vos fichiers WordPress (wp-content/uploads/...), sur votre hébergement. Ainsi, chaque chargement de page ne chargera pas vos polices depuis les serveurs de Google mais simplement depuis votre site.
Vous pouvez le faire en 1 clic avec notre fonctionnalité "Héberger les Google fonts en local", qui va scanner toutes vos polices à la recherche de polices Google et les rapatrier sur votre site en automatique, pour un chargement plus rapide, moins bloquant au rendu de votre page et conforme RGPD.
Une option encore plus radicale, qui demande de faire l'impasse sur de belles polices Google mais qui permet aussi le plus de gains sur des outils comme PSI, c'est de supprimer vos polices Google.
Dans le cas où vous utilisez bien des polices Google, c'est l'option qui impactera le plus vos résultats, avec des gains possibles de près de 10 points déjà observés.
Cette option n'est pas adaptée à la plupart de nos utilisateurs qui souhaitent utiliser des polices Google, raison pour laquelle elle est désactivée par défaut.
Dans le cas où vous décidez de privilégier la performance et d'activer cette option, c'est la police système par défaut du navigateur de l'appareil du visiteur qui sera utilisée sur votre site à la place. Cette option peut ressembler au réglage "hériter" ou "inherit" dans votre thème/page builder.
A noter que vous pouvez aussi simplement choisir vous-même une police système dans les réglages de vos thèmes et pages builders, le résultat sera le même.
Une police système est une police déjà installée sur l'appareil de votre visiteur, les performances sont donc maximales.
Ces polices sont bien connues, Arial, Times New Roman, Segoe UI ou encore Impact pour n'en citer que quelques-unes.
Cette fonctionnalité peut s'avérer très puissante sur des sites lourds, avec beaucoup de scripts JavaScript (JS) qui se chargent sur vos pages, pour vos scores PSI. Par expérience, plus on travaille sur de gros sites avec une multitudes d'animations et 30 ou 40 extensions en back-office, plus on tombe dans ce cas de figure.
L'idée est simple mais redoutable : tous les scripts JS non critiques ne chargent pas immédiatement mais seulement à la première interaction du visiteur (clic, scroll, déplacement de souris...).
Ce qui signifie que pour des outils comme PSI, qui envoient un simple robot pour charger votre page et analyser les performances, ces scripts n'existent pas. 😎
C'est un code triche régulièrement utilisé par les webmasters chevronnés qui peut faire un bon spectaculaire sur vos scores PSI sur certains sites.
Si vous ne voyez peu ou pas de différence, c'est que vous avez un site qui charge peu de JS sur la page que vous testez.
Vous pouvez activer cette fonctionnalité "Retarder les scripts JS", dans Performance Max. Si quelque chose ne fonctionne pas bien sur votre site après activation, vous avez deux options :
Désactiver cette fonctionnalité pour ne plus avoir de problème. Elle n'est pas indispensable à la vie de votre site, c'est davantage une fonctionnalité pour les outils de performance comme PSI.
Vous pouvez exclure les fichiers JS qui vous posent problème dans Copilhost pour que leur chargement ne soit pas retardé (destiné aux utilisateurs avancés).
Il y a plusieurs raisons possibles à un score moins bien ou identique sur PSI.
Si vous avez un score plus faible, cela signifie que vous devez recommencer votre test. Il se peut que ce soit une fluctuation naturelle des résultats, faites deux ou trois tests pour vérifier le comportement. Une autre raison possible est l'absence de cache bien chargé lors du premier test, comme expliqué plus haut dans la section "Savoir utiliser PageSpeed Insights".
Pensez à vous rendre au moins une fois sur votre page en onglet privé pour charger le cache.
Si vous avez un score identique ou proche, cela signifie que votre site est peu impacté par :
La minification HTML et CSS : ces optimisations sont toujours marginales, c'est courant de ne pas voir de différence.
Le lazy load : vous deviez certainement déjà en avoir par défaut.
Désactiver les emojis : Ici aussi, il s'agit d'une optimisation marginale, l'objectif n'est pas d'augmenter votre score de plusieurs points mais de "faire le ménage". 🧹
Héberger vos polices Google en local : Vous n'utilisez pas ou peu de polices Google ? L'impact peut être faible.
Retirer les polices Google : Un impact inexistant est impossible à moins de ne pas utiliser de polices Google.
Retarder le JS : Votre site ne charge pas beaucoup de JS sur vos pages, c'est fréquent sur de petits sites WordPress. L'impact est très variable d'un site à un autre.
Que vous soyez un site faiblement impacté par Performance Max, ou que vous soyez positivement impacté mais bloqué à 94 ou 95... vous vous demandez s'il est possible d'atteindre un score de 100 sur mobile sur PSI ?
Oui, c'est possible. 🎉
Tout d'abord, lorsque vous avez déjà un bon score, n'oubliez pas qu'il s'agit souvent d'un objectif purement cosmétique car l'impact sur la vie réelle du site et de l'entreprise est inexistant. Mais pour un professionnel qui gère des sites pour ses clients, c'est toujours intéressant de savoir aller plus loin pour votre crédibilité.
Officiellement, PSI simule une très mauvaise connexion 3G pour être certain que votre site charge rapidement en toutes circonstances.
Si vous faites votre propre simulation avec une connexion 3G lente, vous constaterez tout de même des résultats bien meilleurs dans la vraie vie que sur PSI, gardez à l'esprit : PSI, ce n'est pas la vraie vie. ❌
Ils "exagèrent" volontairement les résultats pour vous forcer à donner le meilleur de vous-même.
Un score moyen sur mobile ne vous empêche pas réellement d'avoir un bon SEO, d'autant que le score de votre page d'accueil ne reflète pas le score de chacune de vos pages, la page d'accueil est généralement la plus lente. Bien plus lente qu'une simple page de contenu comme un article.
Voici nos observations et conseils chez Copilhost pour décrocher un score PSI 100 sur mobile.
Si vous avez beaucoup d'extensions, posez-vous la question de l'utilité réelle de chacune d'entre elles.
N'hésitez pas à faire le ménage, car chaque extension activée peut charger du code inutilement sur toutes vos pages (CSS, JS).
Des extensions comme Perfmatters permettent d'activer ou désactiver le chargement du code sur chaque page pour optimiser votre performance, mais c'est un travail de fourmis et nous vous recommandons avant tout de prendre le temps de supprimer les extensions qui ne sont pas indispensables.
Vos images sont automatiquement compressées et converties en .webp (format d'image nouvelle génération plus léger) par notre CDN, Cloudflare.
Cette fonctionnalité, appelée Polish, détermine de manière algorithmique quelle image compresser et quelle image laisser dans son format original (jpg, png).
D'un point de vue expérience client, la compression et la conversion sont bien automatiquement prise en charge par Copilhost, mais PSI n'en a pas conscience lors de vos audits car les URLs continuent d'être servies en .jpg alors que c'est un .webp qui est retourné au visiteur.
Si votre objectif est simplement d'optimiser l'expérience de vos visiteurs, vous pouvez vous reposer sur Copilhost.
Si votre objectif est de maximiser votre score PSI et qu'il vous reste des avertissements dans PSI qui demandent de servir des images plus compressées ou en webp, alors il faudra servir des .webp (ou .avif, un format encore plus moderne et léger) depuis le serveur d'origine, c'est-à-dire depuis votre site directement sans compter seulement sur notre CDN.
Pour faire ce travail, vous pouvez le faire en amont via Photoshop, Lightroom ou encore des services en ligne gratuits comme TinyPNG pour la compression ou Convertio pour la conversion en webp.
Bien sûr, vous pouvez opter directement pour des extensions d'optimisation de vos images dans WordPress comme Imagify.
N'oubliez jamais de dimensionner correctement vos images également, évitez d'importer des images en 1920x1080 dans un emplacement de 300x300 !
WordPress a des fonctionnalités natives pour "rattraper" cette erreur, mais ce n'est pas parfait.
Bien souvent, après avoir optimisé vos images et activé Performance Max, le responsable principal qui vous empêche d'avoir 10, 15 ou 20 points supplémentaires est votre LCP.
Le LCP (Largest Contentful Paint) est le plus gros élément qui charge dans votre page dans l'écran du visiteur.
Ca peut être un titre, un paragraphe, ou même un conteneur (div)... mais le plus souvent, il s'agit d'une image, une image de fond ou une vidéo.
C'est beaucoup plus simple qu'il n'y paraît de remédier au LCP. Vous pouvez optimiser votre image au maximum :
Compressez au maximum avec un outil comme TinyPNG (passez 2 ou 3 fois votre image)
Convertissez en webp ou avif avec un outil comme Convertio
Redimensionnez votre image si elle est trop grande (très fréquent sur mobile) avec un outil comme Image Resizer
Ce dernier point est particulièrement important, la plupart des webmasters laissent une grande image au format paysage qu'ils ont mis sur PC sur leur version mobile, qui est donc recadrée en beaucoup plus petite et au format portrait. C'est une erreur qui vous coûte très cher sur PSI.
Mettez une image différente et parfaitement adaptée et optimisée sur mobile, en format portrait.
Vous allez gagner énormément de points. 🎉
Si Performance Max ne vous aide pas, c'est probablement à cause de votre LCP.
Une dernière astuce ? Vous pouvez faire exploser votre LCP à la hausse en supprimant l'image sur mobile 🤫 votre LCP deviendra alors un simple titre ou paragraphe.
Enfin, il est toujours possible d'expérimenter davantage avec des extensions de performance pour plus de fonctionnalités, comme Perfmatters ou encore WP Rocket.
Certaines fonctionnalités additionnelles peuvent vous aider à obtenir un ou deux points supplémentaire(s) ici ou là, notamment en cas de CSS bloquant.
Il existe la combination de fichiers CSS qui fusionne toutes vos feuilles de styles CSS en une seule, mais le résultat est parfois moins bon avec cette fonctionnalité active.
Il existe également d'autres fonctionnalités intéressantes comme la désactivation du CSS inutile, la minification JS, ou encore le Defer JS (charger votre JS non critique le plus tard possible) qui est parfois très utile sur certains sites mais ne devrait pas vous aider si vous avez déjà du Delay JS actif, ce que nous vous proposons sur Copilhost.
Performance Max, c'est quoi ?
Performance max est un ensemble de fonctionnalités que vous allez typiquement retrouver dans des extensions de performance ou de cache. Nous les proposons nativement chez Copilhost, toujours dans l'objectif de simplifier votre travail tout en ayant les sites WordPress les plus performants possibles.
Vous trouverez les fonctionnalités suivantes :
Minification HTML
Minification CSS
Lazy load pour vos images et iframes
Désactiver le script des emojis
Héberger vos polices Google localement
Supprimer les polices Google
Retarder vos scripts JS (Delay JS)
Par défaut, lorsque vous activez Performance Max, vous allez activer toutes les fonctionnalités sauf "Supprimer les polices Google". Vous pouvez ensuite décider de vous rendre dans les réglages de votre site > Performance > Performance Max afin d'activer ou désactiver les fonctionnalités que vous souhaitez.
Nous allons vous accompagner sur chaque fonctionnalité, comment les manipuler et quelles sont les conséquences.
Comment utiliser Performance Max
Précautions générales
Veillez toujours à vérifier votre site en onglet privé et vous assurer que rien n'est "cassé" une fois Performance Max activé.
Pas d'inquiétudes, rien n'est irréversible.
Si vous rencontrez des bugs sur votre site suite à l'activation de Performance Max, désactivez-le.
Ensuite, activez chaque fonctionnalité une par une, jusqu'à trouver celle qui pose problème. Une fois repérée, laissez-la désactivée. Il n'y a rien à faire, ce sont des conflits naturels qui peuvent survenir dû à une infinité de configurations possibles d'un site à un autre.
Profitez des autres optimisations. 😊
Quand activer Performance Max
Vous avez la possibilité d'activer Performance Max dès la création de votre site WordPress, mais ce n'est généralement pas conseillé si vous êtes dans une phase de création de votre site.
Nous vous conseillons de terminer la création de votre site puis en dernière étape, d'activer Performance Max dans Gérer ce site > Tableau de bord > Général et vérifier sa compatibilité avec votre site et vos extensions.
Si vous rencontrez des problèmes, vous pouvez vous référer à la section précédente "Précautions générales".
Savoir utiliser PageSpeed Insights
#1 Gérer du cache
Lorsque vous activez ou désactivez des fonctionnalités, il y a une purge de notre CDN Cloudflare et du cache de page intégré dans notre CDN.
Ce qui signifie que si vous faites immédiatement des tests dans un outil comme PageSpeed Insights (PSI), le premier résultat pourrait être mauvais car il n'a pas bénéficié du cache, le cache n'ayant pas été chargé par une première visite sur votre page.
Avant de faire vos tests avec des outils comme PageSpeed Insights (PSI) ou GTMetrix, nous vous recommandons donc d'aller une première fois sur votre site en onglet privé pour charger le cache.
Vous constaterez vite qu'une fois votre première visite effectuée sur chaque page, les pages se chargent beaucoup plus vite. C'est parce que vous profitez du meilleur système de cache au monde chez Copilhost. 🤗
#2 Comment bien utiliser des outils d'audit de performance
Il faut toujours effectuer plusieurs tests avec PSI, il peut y avoir des fluctuations importantes d'un test à un autre. Pour une meilleure appréciation de votre score et de l'état de votre site, nous vous recommandons de lancer PSI 2 à 3 fois.
Vous êtes désormais prêt pour scorer votre site sur PSI ! 🎉
Nos fonctionnalités Performance Max
Minification HTML
La minification HTML optimise le code HTML de votre site en réduisant les espaces, l'indentation, les commentaires et tout ce qui est "superflu" et non nécessaire au bon fonctionnement de votre code.
Cette fonctionnalité pose rarement de problème et peut être activée sans trembler. 😮💨
Vous ne gagnez pas énormément de points dans PSI mais l'impact peut être intéressant, en particulier pour de grosses pages, et l'activer ne demande aucun effort.
La minification fait partie des fonctionnalités incontournables lorsqu'on cherche à optimiser le chargement de ses pages.
Minification CSS
La minification CSS optimise le code CSS de votre site en réduisant les espaces, l'indentation, les commentaires et tout ce qui est "superflu" et non nécessaire au bon fonctionnement de votre code.
Cette fonctionnalité peut occasionnellement causer des soucis de webdesign, il est recommandé de vérifier votre site en onglet privé une fois activée. Cette recommandation est généralement valable pour toute forme de minification (HTML, CSS, JS).
Si tout semble normal sur votre site, alors vous pouvez profiter de légers gains que peuvent vous apporter la minification CSS. 🎉
Vous ne gagnez pas énormément de points dans PSI mais l'impact peut être intéressant, en particulier pour de grosses pages, et l'activer ne demande aucun effort.
Lazy load
Notre fonctionnalité lazy load utilise les attributs natifs de HTML5 pour charger vos images en différé.
Concrètement, cela signifie que les premières images qui apparaissent dans l'écran du visiteur chargent instantanément, mais les images suivantes en dehors de l'écran ne chargent pas immédiatement. Ce qui permet un chargement initiale de la page plus rapide pour vos visiteurs. ✨
Nous ajoutons ces attributs sur les balises iframes également.
Il y a un support natif de WordPress pour le lazy load de HTML 5, de nombreux thèmes embarquent donc déjà du lazy load sur toutes vos pages. Si c'est le cas sur votre site, activer le lazy load Copilhost ne fera aucune différence.
Si vous utilisez un thème qui n'embarque pas de lazy load natif, activer cette fonctionnalité est une excellente option.
Désactiver les emojis
Pour afficher des emojis sur votre site, WordPress embarque un fichier JavaScript (JS) qui se charge automatiquement sur toutes vos pages. Ce fichier sert principalement pour les anciens navigateurs, la plupart des navigateurs modernes (Chrome, Firefox, Safari, Edge) n'en ont pas besoin.
Une astuce simple qui impacte toutes vos pages consiste à éliminer ce fichier "wp-emoji-release.min.js" au chargement de vos pages. Dans 99% des cas, la désactivation de ce fichier ne posera aucun problème car les emojis sont intégrés aux systèmes récents.
Et si vous n'utilisez pas d'emojis, la question ne se pose même pas : désactivez ce fichier pour améliorer le chargement de vos pages.
C'est ce que vous pouvez faire en 1 clic avec cette fonctionnalité !
Héberger les Google fonts en local
La plupart des thèmes et pages builders embarquent des polices Google, très utilisées partout sur le web.
Le problème de ces polices, c'est qu'elles font des appels à des serveurs externes (ceux de Google, fonts.googleapis.com) :
Ces appels font parties des requêtes bloquantes pour le rendu de votre page, comme le signale bien souvent PageSpeed Insights dans ses avertissements :
Le résultat est assez spectaculaire pour une simple histoire de police ; une chute de plusieurs points de vos scores, jusqu'à une dizaine de points en moins déjà observé par nos équipes. 🤐
Sans compter que ces appels aux serveurs Google ont été considérés comme non conformes au RGPD européen.
Une première solution simple consiste à héberger vos polices "localement", c'est-à-dire directement dans vos fichiers WordPress (wp-content/uploads/...), sur votre hébergement. Ainsi, chaque chargement de page ne chargera pas vos polices depuis les serveurs de Google mais simplement depuis votre site.
Vous pouvez le faire en 1 clic avec notre fonctionnalité "Héberger les Google fonts en local", qui va scanner toutes vos polices à la recherche de polices Google et les rapatrier sur votre site en automatique, pour un chargement plus rapide, moins bloquant au rendu de votre page et conforme RGPD.
Retirer les Google fonts 🔥
Une option encore plus radicale, qui demande de faire l'impasse sur de belles polices Google mais qui permet aussi le plus de gains sur des outils comme PSI, c'est de supprimer vos polices Google.
Dans le cas où vous utilisez bien des polices Google, c'est l'option qui impactera le plus vos résultats, avec des gains possibles de près de 10 points déjà observés.
Cette option n'est pas adaptée à la plupart de nos utilisateurs qui souhaitent utiliser des polices Google, raison pour laquelle elle est désactivée par défaut.
Dans le cas où vous décidez de privilégier la performance et d'activer cette option, c'est la police système par défaut du navigateur de l'appareil du visiteur qui sera utilisée sur votre site à la place. Cette option peut ressembler au réglage "hériter" ou "inherit" dans votre thème/page builder.
A noter que vous pouvez aussi simplement choisir vous-même une police système dans les réglages de vos thèmes et pages builders, le résultat sera le même.
Une police système est une police déjà installée sur l'appareil de votre visiteur, les performances sont donc maximales.
Ces polices sont bien connues, Arial, Times New Roman, Segoe UI ou encore Impact pour n'en citer que quelques-unes.
Retarder les scripts JS 🔥
Cette fonctionnalité peut s'avérer très puissante sur des sites lourds, avec beaucoup de scripts JavaScript (JS) qui se chargent sur vos pages, pour vos scores PSI. Par expérience, plus on travaille sur de gros sites avec une multitudes d'animations et 30 ou 40 extensions en back-office, plus on tombe dans ce cas de figure.
L'idée est simple mais redoutable : tous les scripts JS non critiques ne chargent pas immédiatement mais seulement à la première interaction du visiteur (clic, scroll, déplacement de souris...).
Ce qui signifie que pour des outils comme PSI, qui envoient un simple robot pour charger votre page et analyser les performances, ces scripts n'existent pas. 😎
C'est un code triche régulièrement utilisé par les webmasters chevronnés qui peut faire un bon spectaculaire sur vos scores PSI sur certains sites.
Si vous ne voyez peu ou pas de différence, c'est que vous avez un site qui charge peu de JS sur la page que vous testez.
Vous pouvez activer cette fonctionnalité "Retarder les scripts JS", dans Performance Max. Si quelque chose ne fonctionne pas bien sur votre site après activation, vous avez deux options :
Désactiver cette fonctionnalité pour ne plus avoir de problème. Elle n'est pas indispensable à la vie de votre site, c'est davantage une fonctionnalité pour les outils de performance comme PSI.
Vous pouvez exclure les fichiers JS qui vous posent problème dans Copilhost pour que leur chargement ne soit pas retardé (destiné aux utilisateurs avancés).
Mon score PSI est moins bien ou identique après avoir activé Performance Max ?
Il y a plusieurs raisons possibles à un score moins bien ou identique sur PSI.
Si vous avez un score plus faible, cela signifie que vous devez recommencer votre test. Il se peut que ce soit une fluctuation naturelle des résultats, faites deux ou trois tests pour vérifier le comportement. Une autre raison possible est l'absence de cache bien chargé lors du premier test, comme expliqué plus haut dans la section "Savoir utiliser PageSpeed Insights".
Pensez à vous rendre au moins une fois sur votre page en onglet privé pour charger le cache.
Si vous avez un score identique ou proche, cela signifie que votre site est peu impacté par :
La minification HTML et CSS : ces optimisations sont toujours marginales, c'est courant de ne pas voir de différence.
Le lazy load : vous deviez certainement déjà en avoir par défaut.
Désactiver les emojis : Ici aussi, il s'agit d'une optimisation marginale, l'objectif n'est pas d'augmenter votre score de plusieurs points mais de "faire le ménage". 🧹
Héberger vos polices Google en local : Vous n'utilisez pas ou peu de polices Google ? L'impact peut être faible.
Retirer les polices Google : Un impact inexistant est impossible à moins de ne pas utiliser de polices Google.
Retarder le JS : Votre site ne charge pas beaucoup de JS sur vos pages, c'est fréquent sur de petits sites WordPress. L'impact est très variable d'un site à un autre.
Que faire pour vous rapprocher d'un score PSI 100 sur mobile ?
Que vous soyez un site faiblement impacté par Performance Max, ou que vous soyez positivement impacté mais bloqué à 94 ou 95... vous vous demandez s'il est possible d'atteindre un score de 100 sur mobile sur PSI ?
Oui, c'est possible. 🎉
Tout d'abord, lorsque vous avez déjà un bon score, n'oubliez pas qu'il s'agit souvent d'un objectif purement cosmétique car l'impact sur la vie réelle du site et de l'entreprise est inexistant. Mais pour un professionnel qui gère des sites pour ses clients, c'est toujours intéressant de savoir aller plus loin pour votre crédibilité.
Pourquoi les scores sont-ils souvent faibles sur mobile ?
Officiellement, PSI simule une très mauvaise connexion 3G pour être certain que votre site charge rapidement en toutes circonstances.
Si vous faites votre propre simulation avec une connexion 3G lente, vous constaterez tout de même des résultats bien meilleurs dans la vraie vie que sur PSI, gardez à l'esprit : PSI, ce n'est pas la vraie vie. ❌
Ils "exagèrent" volontairement les résultats pour vous forcer à donner le meilleur de vous-même.
Un score moyen sur mobile ne vous empêche pas réellement d'avoir un bon SEO, d'autant que le score de votre page d'accueil ne reflète pas le score de chacune de vos pages, la page d'accueil est généralement la plus lente. Bien plus lente qu'une simple page de contenu comme un article.
Voici nos observations et conseils chez Copilhost pour décrocher un score PSI 100 sur mobile.
Faites le ménage
Si vous avez beaucoup d'extensions, posez-vous la question de l'utilité réelle de chacune d'entre elles.
N'hésitez pas à faire le ménage, car chaque extension activée peut charger du code inutilement sur toutes vos pages (CSS, JS).
Des extensions comme Perfmatters permettent d'activer ou désactiver le chargement du code sur chaque page pour optimiser votre performance, mais c'est un travail de fourmis et nous vous recommandons avant tout de prendre le temps de supprimer les extensions qui ne sont pas indispensables.
Optimiser (encore) vos images
Vos images sont automatiquement compressées et converties en .webp (format d'image nouvelle génération plus léger) par notre CDN, Cloudflare.
Cette fonctionnalité, appelée Polish, détermine de manière algorithmique quelle image compresser et quelle image laisser dans son format original (jpg, png).
D'un point de vue expérience client, la compression et la conversion sont bien automatiquement prise en charge par Copilhost, mais PSI n'en a pas conscience lors de vos audits car les URLs continuent d'être servies en .jpg alors que c'est un .webp qui est retourné au visiteur.
Si votre objectif est simplement d'optimiser l'expérience de vos visiteurs, vous pouvez vous reposer sur Copilhost.
Si votre objectif est de maximiser votre score PSI et qu'il vous reste des avertissements dans PSI qui demandent de servir des images plus compressées ou en webp, alors il faudra servir des .webp (ou .avif, un format encore plus moderne et léger) depuis le serveur d'origine, c'est-à-dire depuis votre site directement sans compter seulement sur notre CDN.
Pour faire ce travail, vous pouvez le faire en amont via Photoshop, Lightroom ou encore des services en ligne gratuits comme TinyPNG pour la compression ou Convertio pour la conversion en webp.
Bien sûr, vous pouvez opter directement pour des extensions d'optimisation de vos images dans WordPress comme Imagify.
N'oubliez jamais de dimensionner correctement vos images également, évitez d'importer des images en 1920x1080 dans un emplacement de 300x300 !
WordPress a des fonctionnalités natives pour "rattraper" cette erreur, mais ce n'est pas parfait.
Le véritable coupable : votre LCP
Bien souvent, après avoir optimisé vos images et activé Performance Max, le responsable principal qui vous empêche d'avoir 10, 15 ou 20 points supplémentaires est votre LCP.
Le LCP (Largest Contentful Paint) est le plus gros élément qui charge dans votre page dans l'écran du visiteur.
Ca peut être un titre, un paragraphe, ou même un conteneur (div)... mais le plus souvent, il s'agit d'une image, une image de fond ou une vidéo.
C'est beaucoup plus simple qu'il n'y paraît de remédier au LCP. Vous pouvez optimiser votre image au maximum :
Compressez au maximum avec un outil comme TinyPNG (passez 2 ou 3 fois votre image)
Convertissez en webp ou avif avec un outil comme Convertio
Redimensionnez votre image si elle est trop grande (très fréquent sur mobile) avec un outil comme Image Resizer
Ce dernier point est particulièrement important, la plupart des webmasters laissent une grande image au format paysage qu'ils ont mis sur PC sur leur version mobile, qui est donc recadrée en beaucoup plus petite et au format portrait. C'est une erreur qui vous coûte très cher sur PSI.
Mettez une image différente et parfaitement adaptée et optimisée sur mobile, en format portrait.
Vous allez gagner énormément de points. 🎉
Si Performance Max ne vous aide pas, c'est probablement à cause de votre LCP.
Une dernière astuce ? Vous pouvez faire exploser votre LCP à la hausse en supprimant l'image sur mobile 🤫 votre LCP deviendra alors un simple titre ou paragraphe.
Expérimenter avec une extension de performance supplémentaire
Enfin, il est toujours possible d'expérimenter davantage avec des extensions de performance pour plus de fonctionnalités, comme Perfmatters ou encore WP Rocket.
Certaines fonctionnalités additionnelles peuvent vous aider à obtenir un ou deux points supplémentaire(s) ici ou là, notamment en cas de CSS bloquant.
Il existe la combination de fichiers CSS qui fusionne toutes vos feuilles de styles CSS en une seule, mais le résultat est parfois moins bon avec cette fonctionnalité active.
Il existe également d'autres fonctionnalités intéressantes comme la désactivation du CSS inutile, la minification JS, ou encore le Defer JS (charger votre JS non critique le plus tard possible) qui est parfois très utile sur certains sites mais ne devrait pas vous aider si vous avez déjà du Delay JS actif, ce que nous vous proposons sur Copilhost.
Mis à jour le : 07/03/2025
Merci !