Google PageSpeed Insights est sans aucun doute un outil utile pour les webmasters, les développeurs et les propriétaires de sites de tous types. Cependant, nous avons remarqué que beaucoup de gens passent des heures à être obsédés par l’optimisation de leur site, afin d’essayer d’obtenir un score de 100/100 à ce test.
La vérité est que ce n’est pas la façon dont Google PageSpeed Insights est censé être utilisé, ni n’est une poursuite qui en vaut la peine. Si vous vous concentrez sur la mise en œuvre des recommandations de la plateforme au lieu de vous concentrer sur le chiffre en haut de la page, vous créerez beaucoup plus d’avantages pour votre site.
Cet article est un guide complet sur l’utilisation optimale de Google PageSpeed Insights. Nous vous expliquerons comment Google utilise votre score et comment intégrer les recommandations que vous recevez.
Commençons !
Introduction à Google PageSpeed Insights
Si vous n’êtes pas encore habitué à Google PageSpeed Insights, c’est un outil utilisé pour tester les performances d’un site web. Vous pouvez saisir n’importe quelle URL et la faire analyser :
Google fournit ensuite une note globale sur 100 pour le site web que vous avez testé, en se basant sur plusieurs bonnes pratiques d’optimisation des performances :
En plus de ce résultat, vous verrez également plusieurs recommandations de Google sur la façon d’améliorer vos performances (et donc votre score PageSpeed Insights) :
À partir de 2018, les scores de PageSpeed Insights sont calculés via Lighthouse, l’outil open source et automatisé de Google pour améliorer la qualité globale des pages web. Cette plateforme peut évaluer toutes sortes de facteurs, dont la performance, l’accessibilité, les applications web progressives, et plus encore.
Pour voir l’évaluation complète de votre site par Lighthouse, vous pouvez utiliser l’outil de mesure de Google :
Outre la réalisation d’un audit de performance similaire à celui effectué par Google PageSpeed Insights, vous obtiendrez des notes pour l’accessibilité, les meilleures pratiques et l’optimisation pour les moteurs de recherche (SEO).
La vérité sur le score de 100/100 dans Google PageSpeed Insights
Comme nous l’avons mentionné au début de cet article, nous voyons de nombreux propriétaires et développeurs de sites qui deviennent obsédés par l’obtention d’un score parfait sur PageSpeed Insights. Malheureusement, ces gens ont tendance à négliger l’aspect le plus important des résultats du test : les recommandations.
Bien que vous deviez certainement vous efforcer d’améliorer le plus possible les temps de chargement de votre site web, obtenir un 100/100 dans Google PageSpeed Insights n’est pas vraiment important. Pour commencer, il ne s’agit même pas du test de performance le plus complet.
Contrairement à PageSpeed Insights, Pingdom Tools vous permet de tester les performances de votre site depuis différents endroits :
Vous pouvez également exécuter des tests sur des platesformes telles que GTmetrix (qui combine vos scores de PageSpeed Insights et YSlow) et WebPageTest. Il y a de fortes chances que vos scores dans ces différents outils ne correspondent pas exactement, ce qui vous montre à quel point ces chiffres peuvent être arbitraires.
Ce qui compte vraiment, c’est la vitesse réelle de votre site web. Pour mettre les choses en perspective, nous avons vu des sites avec des temps de chargement moyens de moins de 500 millisecondes (ce qui est extrêmement rapide !) qui n’ont pas un score de 100/100 sur PageSpeed Insights.
L’autre facteur qui devrait influencer votre approche de l’optimisation de la vitesse est la performance perçue de votre site. Vos visiteurs ne se soucient pas de votre score Google PageSpeed Insights. Ils veulent juste pouvoir visualiser votre contenu le plus rapidement possible.
Le but réel de tester les performances de votre site avec Google PageSpeed Insights n’est pas d’obtenir un score élevé. Il s’agit plutôt de trouver des points problématiques sur votre site, afin de les optimiser et de diminuer vos temps de chargement réels et perçus.
Comment Google utilise PageSpeed Insights
En plus d’influencer l’expérience utilisateur de votre site (UX), la performance joue également un rôle dans le référencement. Étant donné que PageSpeed Insights est géré par le moteur de recherche le plus important et le plus populaire au monde, il va sans dire que votre score pourrait avoir un certain effet sur votre classement dans les pages de résultats des moteurs de recherche (SERP) (ou au moins sur Google lui-même).
La réalité est que Google utilise PageSpeed Insights pour déterminer les classements – en quelque sorte. La vitesse du site est un facteur de classement, tout simplement. Votre score au test de performance peut vous donner une assez bonne idée de votre position sur ce front.
Cependant, Google ne prend pas seulement en compte le chiffre dans le cercle en haut de vos résultats PageSpeed. L’atteinte d’un 100/100 ne vous garantit pas une place de choix dans les SERPs.
Cela dit, vous pouvez toujours mettre à profit les résultats de PageSpeed Insights pour améliorer votre référencement. Par exemple, depuis 2018, la vitesse des pages mobiles a été un facteur de classement pour Google. Vous remarquerez que votre test de performance fournit des données à la fois pour la version de bureau et la version mobile de votre site :
Puisque plus de 73 % des utilisateurs d’Internet mobile affirment avoir rencontré un site trop long à charger, les informations de l’onglet Google PageSpeed Insights Mobile sont précieuses. En utilisant les recommandations pour la réduction des temps de chargement sur les smartphones et autres appareils devrait vous donner un avantage concurrentiel.
Recommandations de Google PageSpeed Insights (24 façons d’améliorer les performances)
Nous avons beaucoup parlé des recommandations de Google PageSpeed Insights dans cet article. Ils sont la réelle alimentation de vos résultats de test de performance, et ont beaucoup plus de valeur que votre score réel. C’est pourquoi nous leur avons dédié le reste de cet article.
Avant de nous plonger dans les suggestions individuelles, vous devez cependant comprendre la différence entre vos données de terrain et vos données de laboratoire. Les premières comparent votre site aux autres dans le rapport d’expérience utilisateur Chrome des 30 derniers jours.
Il y a aussi deux graphiques qui montrent où votre moyenne entre le First Contentful Paint (FCP) et le First Imput Delay (FID) tombe :
Dans l’image ci-dessus, le FCP de notre site est à peu près le même que 45 % des sites du 75e percentile, et notre FID est à peu près le même que 9 % du 95e percentile.
Lab Data montre des données spécifiques pour un chargement de page simulé :
Vous remarquerez que nos données de terrain et de laboratoire ne correspondent pas exactement. C’est tout à fait normal. Les données de laboratoire sont créées dans des conditions fixes, tandis que les données de terrain utilisent les vitesses de chargement réelles recueillies au fil du temps.
Lorsqu’on les examine ensemble, les données de terrain et les données de laboratoire devraient vous donner une idée des temps de chargement réels de votre site. Comme nous l’avons déjà mentionné, c’est encore plus important que votre score global de PageSpeed, vous devrez donc faire attention à ces chiffres.
Après avoir pris en compte ces informations, il est temps de commencer à améliorer les performances de votre site grâce aux recommandations de Google PageSpeed.
1. Eliminate render-blocking resources
L’une des recommandations les plus courantes de Google PageSpeed Insights est d’éliminer les ressources qui bloquent le rendu :
Il s’agit de scripts JavaScript et CSS qui empêchent le chargement rapide de votre page. Le navigateur du visiteur doit télécharger et traiter ces fichiers avant de pouvoir afficher le reste de la page, donc en avoir beaucoup « au-dessus du pli » peut avoir un impact négatif sur la vitesse de votre site.
Vous pouvez en apprendre davantage sur cette question dans notre guide pour éliminer les scripts bloquant le rendu. En ce qui concerne Google, il y a deux solutions que vous devriez envisager :
- Si vous n’avez pas beaucoup de JavaScript ou de CSS, vous pouvez les mettre en ligne pour vous débarrasser de cet avertissement. Ce processus consiste à incorporer votre JavaScript ou CSS dans votre fichier HTML. Vous pouvez le faire avec une extension comme Autoptimiser. Cependant, cela n’est vraiment valable que pour les très petits sites. La plupart des sites WordPress ont suffisamment de JavaScript pour que cette méthode puisse réellement vous ralentir.
- L’autre option est de différer votre JavaScript. Cet attribut télécharge votre fichier JavaScript pendant l’analyse HTML, mais ne l’exécute qu’une fois l’analyse terminée. De plus, les scripts avec cet attribut s’exécutent dans l’ordre d’apparition sur la page.
Vous trouverez une liste des ressources les plus touchées par ce problème sous la recommandation dans vos résultats de PageSpeed.
Regardez cette vidéo pour en savoir plus sur la façon d’éliminer les ressources qui bloquent le rendu :
2. Avoid chaining critical requests
Le concept de chaînage des requêtes critiques est lié au Critical Rendering Path (chemin de rendu critique ou CRP) et à la façon dont les navigateurs chargent vos pages. Certains éléments – tels que le JavaScript et le CSS dont nous avons parlé plus haut – doivent être chargés complètement avant que votre page ne devienne visible.
Dans le cadre de cette suggestion, Google PageSpeed Insights vous montrera les chaînes de requête sur la page que vous analysez :
Ce diagramme vous montrera la série de requêtes dépendantes qui doivent être satisfaites avant que votre page ne devienne visible. Il vous indiquera également la taille de chaque ressource. Idéalement, vous souhaitez minimiser le nombre de requêtes dépendantes, ainsi que leur taille.
Plusieurs méthodes permettant d’atteindre ces objectifs sont couvertes par d’autres recommandations dont il est question dans le présent article, notamment
- Éliminer les ressources bloquant le rendu
- Différer les images hors écran
- Réduire le CSS et le JavaScript
En outre, vous pouvez optimiser l’ordre dans lequel les assets sont chargés, afin de raccourcir le CRP. Cela signifie qu’il faut déplacer le contenu au-dessus du pli vers le haut de votre fichier HTML. Vous pouvez en apprendre plus sur l’optimisation du CRP dans notre article, « Comment optimiser le chemin de rendu critique dans WordPress ».
Il est important de noter qu’il n’y a pas un nombre magique de chaînes de requêtes critiques sur lesquelles vous devez travailler. Google PageSpeed Insights ne considère pas cet audit comme « réussi » ou « échoué », contrairement à beaucoup de ses autres recommandations. Ces informations sont simplement mises à disposition pour vous aider à améliorer les temps de chargement.
3. Keep requests counts low and transfer sizes small
Plus les navigateurs doivent faire de requêtes pour charger vos pages, et plus les ressources que votre serveur renvoie en réponse sont importantes, plus votre site web prend du temps à se charger. Par conséquent, il est logique que Google vous recommande de réduire le nombre de requêtes nécessaires et de diminuer la taille de vos ressources.
Comme la recommandation Éviter d’enchaîner les requêtes critiques, celle-ci ne se traduit pas par un « succès » ou un « échec ». Au lieu de cela, vous verrez simplement une liste du nombre de requêtes faites et de leurs tailles :
Il n’y a pas de nombre idéal de requêtes ou de tailles maximales à garder à l’esprit. Google vous recommande plutôt de définir ces normes pour vous-même en créant un budget de performance. Il s’agit d’un ensemble d’objectifs définis qui peuvent être liés à des aspects tels que :
- La taille maximale des images
- Le nombre de polices web utilisées
- Le nombre de ressources externes auxquelles vous faites appel
- La taille des scripts et des frameworks
La création d’un budget de performance vous donne un ensemble de normes auxquelles vous devez vous conformer. Lorsque vous dépassez votre budget, vous pouvez alors décider d’éliminer ou d’optimiser les ressources pour vous en tenir à vos directives prédéterminées. Vous pouvez en savoir plus sur la création d’un tel outil dans le guide de Google.
4. Minify CSS
Les fichiers CSS sont souvent plus volumineux que nécessaire, afin de les rendre plus faciles à lire pour les humains. Ils peuvent inclure divers retours à la ligne et des espaces qui ne sont pas nécessaires pour que les ordinateurs puissent comprendre leur contenu.
La minification de votre CSS est le processus de condenser vos fichiers en éliminant les caractères, les espaces et les doublons inutiles. Google recommande cette pratique car elle réduit la taille de vos fichiers CSS et peut donc améliorer la vitesse de chargement :
Ces avantages en termes de vitesse sont la raison pour laquelle Kinsta a intégré une fonction de minification du code dans le tableau de bord MyKinsta. Les clients peuvent choisir d’opter pour la minification automatique du code pour leurs fichiers CSS et JavaScript, accélérant ainsi leurs sites sans aucun effort manuel.
Si vous n’êtes pas client de Kinsta, nous vous recommandons d’utiliser une extension telle qu’Autoptimize ou WP Rocket pour minifier vos fichiers CSS.
5. Minify JavaScript
Tout comme vous pouvez réduire la taille des fichiers CSS grâce à la minification, il en va de même pour vos fichiers JavaScript :
Autoptimiser ou WP Rocket peut également gérer cette tâche pour votre site WordPress.
6. Remove unused CSS
Tout code dans votre feuille de style est un contenu qui doit être chargé pour que votre page devienne visible aux utilisateurs. S’il y a des CSS sur votre site qui ne sont pas vraiment utiles, cela nuit inutilement à vos performances.
C’est pourquoi Google recommande de supprimer les CSS non utilisés :
La solution ici est essentiellement la même que celle pour éliminer les CSS bloquant le rendu. Vous pouvez mettre en ligne ou différer les styles de la manière la plus logique pour vos pages. Vous pouvez également utiliser un outil tel que Chrome DevTools pour trouver les CSS non utilisés devant être optimisés.
7. Minimize main-thread work
Le « fil conducteur (ou Main Thread) » est l’élément principal du navigateur d’un utilisateur qui est responsable de la transformation du code en une page web avec laquelle les visiteurs peuvent interagir. Il analyse et exécute le HTML, le CSS et le JavaScript. De plus, il est chargé de gérer les interactions avec les utilisateurs.
Cela signifie que, lorsque le fil conducteur travaille dans le code de votre site, il ne peut pas également traiter les requêtes des utilisateurs. Si le travail du fil conducteur de votre site prend trop de temps, cela peut entraîner une mauvaise UX et des temps de chargement de page lents.
Google PageSpeed signale les pages qui prennent plus de quatre secondes pour compléter le travail du fil conducxteur et présenter une page web utilisable :
Certaines des méthodes utilisées pour réduire le travail du fil conducteur ont déjà été couvertes dans d’autres sections de cet article, notamment
- Minification du code
- Suppression du code non utilisé
- Implémenter le cache
Cependant, vous pouvez également envisager de fractionner le code. Ce processus consiste à décomposer votre JavaScript en paquets qui s’exécutent quand ils sont nécessaires, au lieu de demander aux navigateurs de les charger tous avant que la page ne devienne interactive.
Webpack est souvent utilisé pour implémenter le fractionnement de code. Notez qu’il s’agit d’une technique assez avancée et que les débutants devraient généralement l’entreprendre seuls.
8. Reduce JavaScript execution time
L’exécution de JavaScript est souvent le contributeur le plus important au travail sur les fils conducteurs. PageSpeed Insights a une recommandation séparée pour vous alerter si cette tâche a un impact significatif sur la performance de votre site :
Les méthodes suggérées ci-dessus pour réduire le travail du fil conducteur devraient également résoudre cet avertissement dans vos résultats de PageSpeed.
9. Server response times are low (TTFB)
Le délai avant le premier octet (Time to First Byte ou TTFB) est une mesure du temps qu’il faut à un navigateur pour recevoir le premier octet de données en retour du serveur de votre site après avoir fait une requête. Bien que cela ne soit pas la même chose que la vitesse globale de votre site, un faible TTFB est naturellement bon pour les performances de votre site.
Par conséquent, la réduction des temps de réponse des serveurs fait partie des recommandations de Google PageSpeed Insights. Si vous êtes en mesure d’obtenir un faible TTFB, vous verrez ce message sous Vérifications réussies :
Plusieurs facteurs peuvent influencer votre TTFB. Voici quelques stratégies pour les réduire :
- Choisir un hébergeur web de haute qualité qui met l’accent sur la vitesse
- Utiliser des thèmes et des extensions légers
- Réduire le nombre d’extensions installées sur votre site
- Utiliser un réseau de diffusion de contenu (Content Delivery Network ou CDN)
- Mettre en œuvre la mise en cache du navigateur
- Sélectionner un fournisseur de système de noms de domaine (DNS) solide
Notre article sur TTFB est une excellente ressource pour plus de détails sur l’optimisation dans ce domaine.
10. Properly size images
Les fichiers médias tels que les images peuvent être un véritable frein à la performance de votre site. Les dimensionner correctement est un moyen simple de réduire vos temps de chargement :
Si votre page comprend des images plus grandes que nécessaire, le CSS est utilisé pour les redimensionner de manière appropriée. Cela prend plus de temps que le simple chargement des images à la bonne taille au départ, ce qui a un impact sur les performances de votre page.
Pour résoudre ce problème, vous pouvez soit téléverser des images aux tailles appropriées, soit utiliser des « images responsives ». Cela implique la création d’images de tailles différentes pour divers appareils.
Vous pouvez le faire en utilisant l’attribut srcset, qui est ajouté aux balises <img> pour spécifier des fichiers images alternatifs de tailles différentes. Les navigateurs peuvent lire cette liste, déterminer quelle option est la meilleure pour l’écran actuel et fournir cette version de votre image.
Par exemple, disons que vous avez une image d’en-tête et que vous voulez la rendre responsive. Vous pouvez en téléverser trois versions de 800, 480 et 320 pixels de large. Ensuite, vous appliqueriez l’attribut srcset, comme ceci :
<img srcset="header-image-800w.jpg 880w,
Header-image-480w.jpg 480w,
Header-image-320w.jpg 320w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="header-image-800w.jpg">L’attribut srcset spécifie les différents fichiers disponibles, et l’attribut sizes indique aux navigateurs lequel doit être utilisé en fonction de la taille d’écran actuelle.
11. Defer offscreen images
Le processus de différer des images hors écran est plus communément appelé « chargement paresseux (ou Lazy Loading) ». Cela signifie qu’au lieu de faire en sorte que le navigateur charge toutes les images d’une page avant d’afficher le contenu ci-dessus, il ne charge que celles qui sont immédiatement visibles.
Moins de chargement avant que la page ne devienne visible signifie de meilleures performances, c’est pourquoi Google recommande cette méthode :
Il existe de nombreuses extensions WordPress conçues spécialement pour le chargement paresseux, notamment a3 Lazy Load et Lazy Load by WP Rocket. Diverses extensions d’optimisation d’images et de performances tels qu’Autoptimize ont également des fonctions de chargement paresseux. Consultez notre guide complet sur le chargement paresseux d’images et de vidéos sur WordPress.
12. Efficiently encode images
Comme nous l’avons mentionné plus tôt dans cet article, les images ont un impact significatif sur la performance de votre site. Une des meilleures pratiques d’optimisation les plus élémentaires que vous pouvez souhaiter est la compression qui peut aider à réduire la taille de vos fichiers pour qu’ils se chargent plus rapidement. C’est aussi la principale méthode pour suivre la recommandation de Google d’encoder efficacement les images :
L’essentiel est d’obtenir des fichiers de taille aussi réduite que possible, sans sacrifier la qualité des images elles-mêmes. Des extensions telles que Imagify et Smush peuvent vous aider dans cette tâche. Vous pouvez en apprendre davantage plus à leur sujet dans notre guide pour l’optimisation des images.
D’autres recommandations qui influencent la réussite ou l’échec de l’audit d’encodage efficace des images incluent :
- Servir des images à la bonne taille
- Mise en œuvre du chargement paresseux (report des images hors écran)
- Conversion des images aux formats de fichiers de la prochaine génération, comme WebP
- Utilisation de formats vidéo pour le contenu animé, tels que les GIF
En plus de compresser vos images, vous pouvez suivre les étapes pour réaliser ces suggestions comme décrit ailleurs dans cet article.
13. Serve images in next-gen formats
Certains formats de fichier image se chargent plus rapidement que d’autres. Malheureusement, ce ne sont pas les formats PNG ou JPEG les plus courants. Les images WebP deviennent la nouvelle norme, et Google PageSpeed vous informera si vos images n’y adhèrent pas :
Cela peut sembler être une recommandation difficile à suivre, puisque vous avez probablement déjà beaucoup d’images sur votre site WordPress. Heureusement, il existe des extensions qui peuvent aider. Par exemple, Imagify et Smush offrent tous deux une fonction de conversion WebP.
14. Use video formats for animated content
Les GIFs peuvent être une forme efficace de contenu visuel dans une variété de situations. Les parcours de tutoriel, les évaluations de fonctionnalités et même les animations humoristiques peuvent tous élever vos articles et les rendre plus agréables et plus précieux pour les lecteurs.
Malheureusement, ces avantages ont un coût pour votre performance. Les GIFs sont exigeants à charger, c’est pourquoi PageSpeed Insights recommande plutôt de fournir du contenu vidéo :
Malheureusement, la conversion des GIFs en formats vidéo n’est pas le processus le plus simple. Tout d’abord, vous devrez décider quel type de vidéo vous voulez utiliser :
- MP4 : Produit des fichiers légèrement plus volumineux, mais est compatible avec la plupart des principaux navigateurs.
- WebM : Le format vidéo le plus optimisé, bien qu’il soit peu compatible avec les navigateurs.
Une fois que vous avez fait le choix le plus judicieux pour votre site, vous devrez convertir les formats de fichiers. La meilleure façon de le faire est de passer par la ligne de commande. Pour commencer, installez FFmpeg. C’est un outil open-source pour la conversion des formats de fichiers :
Ensuite, ouvrez votre interface de ligne de commande et exécutez la commande suivante :
ffmpeg -i input.gif output.mp4Ceci convertira le GIF avec le nom de fichier input.gif en une vidéo MP4 avec le nom de fichier output.mp4. Le changement de format n’est cependant qu’un début. Vous devez maintenant intégrer la vidéo résultante sur votre site WordPress de manière à ce qu’elle apparaisse comme un GIF animé.
Intégration de contenu vidéo pour les animations
Comme vous l’avez probablement remarqué si vous avez déjà vu un GIF, ils sont légèrement différents des vidéos normales. En général, ils se lancent automatiquement et tournent en boucle, et ils sont toujours sans son. L’intégration de votre nouveau fichier MP4 ou WebM sur votre site WordPress ne produira pas ces fonctionnalités.
Cependant, vous pouvez les recréer avec un code très simple. Téléversez votre vidéo dans votre bibliothèque de médias, puis ajoutez ce qui suit à la page ou à l’article où vous voulez inclure votre GIF :
<video autoplay loop muted playsinline>
<source src="output.mp4" type="video/mp4">
</video>Cela appliquera les attributs spécifiés à votre vidéo, la faisant apparaître plus «comme un GIF ». Il suffit d’adapter le nom et le type de fichier pour qu’il corresponde à celui de votre ressource. Pour plus de détails sur ce sujet, nous vous suggérons de lire le guide de Google sur la conversion des GIFs en vidéos.
15. Ensure text remains visible during webfont load
Comme les images, les polices ont tendance à être de gros fichiers qui prennent beaucoup de temps à charger. Dans certains cas, les navigateurs peuvent masquer votre texte jusqu’à ce que la police que vous utilisez se charge complètement, ce qui entraînera cette recommandation de Google PageSpeed Insights :
Google vous conseille de résoudre ce problème en appliquant la directive swap de Font-Display dans votre style @font-face. Pour ce faire, accédez à votre feuille de style (style.css) et ajoutez ce qui suit après l’attribut src sous @font-face :
font-display: swap
Vous pouvez en apprendre davantage sur l’optimisation des polices web dans notre article « Comment changer les polices dans WordPress » et notre guide approfondi sur l’hébergement des polices locales.
16. Enable text compression
La recommandation de Google PageSpeed Insights relative à l’activation de la compression de texte se réfère à l’utilisation de la compression GZIP :
Dans certains cas (comme vous pouvez le voir dans l’image ci-dessus), la compression de texte sera automatiquement activée sur votre serveur. Si ce n’est pas le cas pour votre site, vous avez plusieurs options pour suivre cette recommandation.
La première consiste à installer une extension avec une fonction de compression GZIP. WP Rocket est une solution viable si vous êtes prêt à payer pour cela.
Vous pouvez également compresser votre texte manuellement. Cela implique de modifier votre fichier .htaccess, ce qui peut être risqué, donc assurez-vous d’avoir une sauvegarde récente sous la main.
La plupart des sites WordPress fonctionnent sur des serveurs Apache. Le code pour l’activation de la compression GZIP ressemble à ceci :
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
Vous devriez l’ajouter après #END dans votre fichier .htaccess. Si vous avez votre site WordPress sur un serveur Nginx, vous devriez plutôt ajouter le code suivant à votre fichier nginx.conf
36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;Si vous souhaitez vérifier la compression du texte de votre site, nous vous suggérons d’utiliser un outil tel que GiftOfSpeed :
Cela vous permettra de savoir si la compression GZIP a bien été implémentée, ainsi que le type de serveur sur lequel votre site tourne et quelques autres détails clés.
17. Preconnect to required origins
Il y a de fortes chances que vous ayez au moins une ressource tierce sur votre site – Google Analytics en est un exemple courant. Les navigateurs peuvent mettre du temps à établir une connexion avec ces ressources, ce qui ralentit la vitesse de chargement.
L’utilisation des attributs de pré-connexion peut indiquer immédiatement aux navigateurs qu’il y a des scripts tiers sur votre page qui doivent être chargés. Le processus de requête peut alors s’enclencher dès que possible, améliorant ainsi votre performance.
Si Google estime que votre page pourrait bénéficier de cette technique, vous verrez la suggestion de pré-connexion aux origines nécessaires :
Il y a plusieurs façons de mettre en œuvre cette stratégie d’optimisation. Si vous êtes à l’aise avec la modification de vos fichiers de thème WordPress, vous pouvez ajouter une balise de lien à votre fichier header.php. Voici un exemple :
<link rel=“preconnect” href=“example.com”>Dans ce cas, la balise indique aux navigateurs qu’ils doivent établir une connexion à exemple.com le plus rapidement possible. Google PageSpeed Insights répertorie toutes les ressources pertinentes pour lesquelles vous devez ajouter des balises de lien avec des attributs de pré-connexion.
L’autre option est d’utiliser une extension pour obtenir le même effet. Perfmatters inclut une fonction de pré-connexion (avertissement : je suis l’un des fondateurs de Perfmatters). WP Rocket et Pré* Party Resource Hints comprennent une fonctionnalité similaire.
18. Preload key requests
Comme pour la recommandation de pré-connexion aux origines nécessaires, suivre cette suggestion vous permet de minimiser le nombre de requêtes que les navigateurs doivent faire au serveur de votre site. Cependant, plutôt que de se connecter à des ressources tierces, le préchargement de requêtes clés se réfère au chargement des ressources critiques sur votre propre serveur :
La mise en œuvre de cette technique est également très similaire à la recommandation précédente. Vous pouvez ajouter à votre fichier header.php des balises de liens spécifiant les ressources listées dans PageSpeed Insights :
<link rel=“preload” href=“example.com”>Vous pouvez également incorporer cette balise en utilisant Perfmatters, WP Rocket ou Pre* Party Resource Hints.
19. Avoid multiple page redirects
Les redirections sont utilisées lorsque vous voulez qu’une URL pointe vers une autre. Elles sont couramment employées lorsque vous déplacez ou supprimez une page de votre site. Bien qu’il n’y ait rien de mal à utiliser les redirections en général, elles causent des retards supplémentaires dans le temps de chargement.
Si vous avez trop de redirections sur votre site, vous pouvez voir cette recommandation dans Google PageSpeed Insights :
La seule chose que vous pouvez faire en réponse à cette recommandation est de vous assurer que vous n’utilisez les redirections que lorsque c’est absolument nécessaire. Vous pouvez en apprendre plus sur le processus de création dans notre article, « Redirections WordPress – Meilleures pratiques pour de meilleures performances ».
20. Serve Static assets with an efficient cache policy
Si vous utilisez Google PageSpeed Insights depuis un certain temps, vous connaissez peut-être mieux cette recommandation sous le nom d’avertissement de influence de mise en cache du navigateur. Dans la version 5, il est maintenant labelisé comme Serve Static Assets With an Efficient Cache Policy :
Cette suggestion comporte quelques couches que nous devons examiner. La première est la signification de la mise en cache. En bref, il s’agit d’un processus par lequel les navigateurs enregistrent des copies de vos pages, afin qu’elles puissent être chargées plus rapidement lors des prochaines visites.
La façon la plus courante dont les sites WordPress implémentent la mise en cache utilise des extensions. WP Rocket et W3 Total Cache sont des options populaires. Cependant, certains fournisseurs d’hébergement – y compris nous ici chez Kinsta – permettent la mise en cache via leurs serveurs. Assurez-vous de vérifier et de voir si c’est le cas pour votre hébergeur avant d’installer une extension de mise en cache.
Une fois que vous avez activé la mise en cache pour votre site, vous pouvez vous préoccuper de la deuxième partie de cette recommandation, qui est l’ « efficacité » de votre politique de cache. Les navigateurs vident périodiquement leurs caches pour les rafraîchir avec des copies mises à jour.
Idéalement, vous voulez que cette période soit élevée plutôt que basse. Si vous videz la mémoire cache de votre site toutes les deux heures, cela va à l’encontre du but recherché par cette technique. Vous pouvez optimiser la période d’expiration de votre cache en utilisant les en-têtes Cache-Control et Expires.
Ajout d’en-têtes de contrôle du cache
Utilisez le code suivant pour ajouter des en-têtes Cache-Control dans Nginx :
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}Vous devriez ajouter ceci au fichier de configuration de votre serveur. Dans l’exemple ci-dessus, les types de fichiers spécifiés sont définis pour expirer après 30 jours.
Ceux qui ont des serveurs Apache devraient plutôt utiliser ce code dans leurs fichiers .htaccess :
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>Ajoutez ce code avant #BEGIN WordPress ou après #END WordPress. Dans cet exemple, la période d’expiration du cache est fixée à 84 600 secondes.
Ajout d’en-têtes Expires
Les en-têtes Cache-Control sont à peu près la norme maintenant. Cependant, certains outils (dont GTMetrix) vérifient encore les en-têtes Expires.
Vous pouvez ajouter des en-têtes expires à un serveur Nginx en incorporant ce qui suit dans votre bloc serveur :
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}Vous devez définir différentes durées d’expiration en fonction des types de fichiers. Les serveurs Apache produiront les mêmes résultats si vous ajoutez ce code à votre fichier .htaccess :
## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##Encore une fois, vous devez ajouter ce code soit avant #BEGIN WordPress ou après #END WordPress.
Mise en cache efficace de Google Analytics
Ironiquement, le script Google Analytics que vous avez peut-être ajouté aux en-têtes de vos pages afin de suivre le comportement des utilisateurs a une période d’expiration du cache de seulement deux heures. Il est probable que, si des mises à jour sont apportées à la plateforme, les utilisateurs auront rapidement accès aux changements.
Ce script apparaîtra dans la liste des ressources nécessitant votre attention sous la rubrique Serve static assets avec une recommandation de politique de cache efficace. Comme il appartient à un tiers, vous ne pouvez pas modifier la période d’expiration avec les en-têtes Cache-Control ou Expires.
Si c’est le seul script listé sous cette recommandation, vous pouvez quand même réussir l’audit :
Cependant, comme nous l’avons noté tout au long de cet aarticle, votre score sur PageSpeed est moins important que votre performance réelle et perçue. Afin de servir efficacement cette ressource, vous pouvez envisager d’héberger Google Analytics localement.
Des extensions telles que Complete Analytics Optimization Suite (CAOS) et Perfmatters vous permettront de le faire. Vous pouvez en savoir plus sur le processus dans notre guide complet pour cette suggestion de PageSpeed.
21. Reduce the impact of third-party code
Nous avons maintenant mentionné quelques façons différentes dont les scripts tiers peuvent avoir un impact négatif sur vos performances et entraîner l’échec des audits de PageSpeed Insights. Idéalement, il est préférable de limiter votre dépendance à ces outils afin de prévenir les effets indésirables.
Cependant, dans certains cas, la meilleure solution pour répondre à un besoin de votre site est d’incorporer un script tiers. Google Analytics en est un excellent exemple. Les autres incluent :
- Boutons de partage sur les réseaux sociaux et les flux
- Intégrations de vidéos YouTube
- iFrames pour les publicités et autres contenus
- Bibliothèques pour JavaScript, les polices et autres éléments
Dans les cas où vous jugez nécessaire l’utilisation d’un script tiers, il est important de réduire quand même son impact sur les performances de votre site, comme vous le diront les résultats de votre analyse PageSpeed :
Pour charger du code tiers plus efficacement, vous pouvez envisager l’une des techniques que nous avons déjà mentionnées dans cet article :
- Différer le chargement de JavaScript
- Utiliser des balises de lien avec des attributs de pré-connexion
- Scripts tiers auto-hébergés (comme nous l’avons décrit ci-dessus avec Google Analytics)
Ces méthodes devraient minimiser l’impact sur la performance de votre site.
22. Avoids enormous network payloads
Cette recommandation est particulièrement pertinente pour vos visiteurs mobiles. Les charges utiles (ou Paypload) importantes peuvent nécessiter l’utilisation d’un plus grand nombre de données mobiles, ce qui coûte de l’argent à vos utilisateurs. La minimisation du nombre de requêtes réseau nécessaires pour atteindre vos pages peut permettre d’éviter cela :
Google recommande de limiter la taille totale de votre octet à 1 600 Ko ou moins. Les méthodes les plus couramment utilisées pour atteindre cet objectif se trouvent tout au long de cet article, notamment :
- Différer les CSS, JavaScript et les images qui se trouvent sous le pli
- Minifier le code
- Compresser les fichiers d’images
- Utiliser le format WebP pour les images
- Implémenter la mise en cache
Suivez les étapes pertinentes pour ces stratégies, et vous devriez réussir cet audit sans effort supplémentaire.
23. User Timing marks and measures
Cette recommandation n’est pertinente que si vous utilisez l’API de synchronisation de l’utilisateur (User Timing). Cet outil crée des horodatages pour vous aider à évaluer la performance de votre JavaScript. Si vous avez configuré l’API pour votre site, vous verrez vos marques et mesures sous cette rubrique dans PageSpeed Insights :
Comme vous pouvez le voir, c’est une autre suggestion de Google qui n’aboutit pas à un « succès » ou à un « échec ». PageSpeed Insights rend simplement ces informations facilement récupérables, de sorte que vous pouvez les utiliser pour évaluer les domaines qui peuvent nécessiter une optimisation.
Si vous êtes intéressé par l’intégration de l’API User Timing dans votre site WordPress, vous pouvez en apprendre plus dans le guide Mozilla sur le sujet.
24. Avoid an excessive DOM size
En termes simples, le DOM est la façon dont les navigateurs transforment le HTML en objets. Elle implique l’utilisation d’une structure arborescente composée de nœuds individuels qui représentent chacun un objet. Naturellement, plus le DOM de votre page est grand, plus le chargement sera long.
Si votre page dépasse certains standards concernant la taille du DOM, il recommandera de réduire le nombre de nœuds ainsi que la complexité de votre style CSS :
Un coupable commun si vous avez « échoué » à cet audit dans PageSpeed Insights est votre thème WordPress. Les thèmes lourds ajoutent souvent de grands volumes d’éléments au DOM, et peuvent également inclure un style alambiqué qui ralentit votre site. Si c’est le cas, vous devrez peut-être changer de thème.
Résumé
Google PageSpeed Insights devrait être un élément essentiel de votre boîte à outils pour webmasters. Cependant, se fixer sur votre score et être obsédé par l’idée d’atteindre les 100/100 tant convoités n’est probablement pas la meilleure utilisation de votre temps. Cela peut vous éloigner d’autres tâches importantes qui pourraient vous apporter des avantages plus significatifs.
Dans cet article, nous avons abordé les façons dont votre score Google PageSpeed est important et ne l’est pas. Nous avons également partagé quelques brèves directives pour mettre en œuvre les recommandations de la plateforme sur votre site WordPress, afin d’améliorer ses performances.
Vous avez des questions sur Google PageSpeed Insights ou sur l’optimisation des performances de votre site ? Posez vos questions dans la section des commentaires ci-dessous !
Brian a une grande passion pour WordPress, l'utilise depuis plus de dix ans et développe même quelques plugins de qualité. Brian aime les blogs, les films et les randonnées. Connectez avec Brian sur Twitter.
Laisser un commentaire