PageSpeed Insights est un des meilleur outils de test de performance de site web.
C’est un outil majoritairement utilisé par les développeurs et il n’est pas toujours destiné au propriétaire moyen d’un site WordPress. Même avec l’introduction récente de certains messages spécifiques à WordPress, de nombreux aspects du rapport sont trop techniques pour être clairement exploitables.
Dans ce guide, je vais essayer de traduire ce dont PageSpeed parle et vous faire savoir quels facteurs vous pouvez contrôler afin d’optimiser votre site, et lesquels vous ne pouvez pas.
Les principes de base que PageSpeed Insights essaie de communiquer sont les suivants :
- Gardez vos pages légères et simples.
- Évitez toute fantaisie inutile.
- Tenez compte des utilisateurs mobiles, en particulier ceux qui paient pour chaque octet de données.
Ce sont des principes solides, mais PageSpeed les communique de manière quelque peu obscure.
Sommaire
Comprendre et utiliser Page Speed Insight
Ces dernières années, la popularité de WordPress et d’autres systèmes de gestion de contenu a permis à des personnes ayant des compétences minimales, voire inexistantes en matière de développement, de créer très facilement des sites surchargés qui violent toutes les règles de base en matière de performances. Les pages Web sont devenues gonflées et lentes.
PageSpeed met en lumière ces problèmes d’optimisation.
En fait, si vous construisez une page simple et légère, elle obtiendra automatiquement un meilleur score et, surtout, votre site sera plus rapide.
Prendre en compte les données mobiles
Vous devriez faire de même afin de comprendre qui est votre public. Si vos visiteurs utilisent des appareils mobiles pour accéder à l’internet et si les données leur coûtent cher, vous devrez prendre certaines recommandations plus au sérieux. Je ne me préoccupe peut-être pas de supprimer 20 Ko de données supplémentaires sur ma page, mais vous devrez peut-être le faire.
Vous pouvez utiliser Google Analytics pour en savoir plus sur les appareils utilisés par votre public et leur localisation.
Il existe également des considérations environnementales pour réduire la quantité de données sur votre page.
Une remarque sur le contenu tiers
Je vais souvent faire référence au contenu tiers dans cet article. Le contenu tiers désigne les fichiers chargés sur votre site à partir de domaines qui ne sont pas les vôtres.
Lorsque vous étendez un message PageSpeed et qu’une liste de fichiers vous est présentée, il suffit de regarder le domaine pour déterminer si le contenu provient de votre propre domaine ou de sources externes tierces. Les types de contenu tiers les plus courants sont les widgets de médias sociaux et les boutons de partage, les scripts de suivi comme Google Analytics et les scripts publicitaires. Trop de contenu tiers rendra votre site plus lent.
Que fait PageSpeed ?
PageSpeed Insights, qui est désormais alimenté par l’outil Lighthouse de Google, évalue chaque site Web en fonction d’un ensemble de règles. Les mêmes règles sont appliquées à tous les sites Web, quels que soient leur public, leur contenu ou leur objectif.
La note globale
L’un des principaux problèmes de l’outil PageSpeed est que, si un score codé en couleur est facile à comprendre pour presque tout le monde, les recommandations ne le sont pas. Par conséquent, les gens sont frustrés de voir que leur site semble mal fonctionner, mais ils n’ont aucune idée de la façon de le réparer.
Comme la plupart des gens ont été conditionnés à penser que tout ce qui n’est pas vert n’est pas bon, ils ont tendance à mal comprendre. Si vous obtenez un score “vert”, cela signifie que votre site se situe dans un percentile très élevé.
100 est le meilleur score possible, qui représente le 98e percentile, un site très performant. Un score de 50 représente le 75e percentile.
Cela signifie que la plupart des sites n’obtiendront pas un score dans le vert. Et le site WordPress moyen, construit par un utilisateur moyen de WordPress ayant des compétences techniques moyennes, a peu de chances de créer un site qui obtienne un score élevé dès le départ. Même avec des optimisations, de nombreux propriétaires de sites ont ajouté trop d’éléments négatifs pour obtenir un score dans le vert sans effectuer quelques changements.
Données de laboratoire
La section des données de laboratoire fournit des temps réels basés sur le moment où votre page est à la fois visible et utilisable. Ce sont les mesures spécifiques qui affectent votre score global.
Premier tableau de contenu
Un navigateur doit traiter le code de votre page afin de l’afficher. “Paint” fait référence au processus d’affichage effectif des pixels visibles sur l’écran. Le “First Contentful Paint” vous indique le temps nécessaire pour qu’un contenu, texte ou image, s’affiche à l’écran.
First Contentful Paint
Cette mesure tente d’identifier “le moment où l’utilisateur a le sentiment que le contenu principal de la page est visible”. Bien sûr, un test de vitesse ne peut pas “sentir” ce qu’est le contenu primaire, cette mesure n’est donc pas précise. Cela ce produit lorsque la partie supérieure de votre page est en grande partie chargée.
Indice de vitesse
Cet indice mesure “la rapidité avec laquelle le contenu d’une page est visiblement rempli“. Il est similaire aux deux mesures précédentes dans la mesure où il est lié à la vitesse à laquelle la page est visible pour l’utilisateur.
Première inactivité du CPU
Cette mesure et le temps d’interaction ci-dessous sont liés à la rapidité avec laquelle un utilisateur peut interagir confortablement avec la page. Lorsque le navigateur est occupé à traiter le code d’une page, si vous essayez de cliquer sur des éléments, tels qu’un menu ou un bouton, vous aurez un retard important ou rien ne se produira.
Le temps d’inactivité du processeur est le temps nécessaire pour que la page soit “minimalement” interactive, c’est-à-dire que vous pouvez interagir avec la plupart des éléments avec un temps de réponse raisonnable.
Temps d’interaction
Il s’agit du temps nécessaire pour que la page soit totalement interactive et réponde rapidement (dans les 50 ms) à vos clics/touches.
Délai maximal potentiel de la première entrée
Le délai maximal d’interactivité est lié à la durée de la “tâche” la plus longue que le navigateur doit exécuter et qui l’empêcherait de répondre au clic ou à la touche de l’utilisateur. En gros, si le navigateur est occupé à traiter du JavaScript (également appelé JS, en abrégé) sur votre page, il ne pourra pas répondre à votre clic tant que le traitement ne sera pas terminé.
L’objectif de toutes les mesures Lab ci-dessus est d’obtenir des temps de réponse aussi rapides que possible.
Opportunités
Ces messages n’affectent pas directement votre score, mais leur amélioration devrait conduire à des améliorations dans les mesures Lab ci-dessus qui affectent le score.
Évitez les redirections de pages multiples
Qu’est-ce que cela signifie ? En gros, testez la version correcte de votre URL. Si c’est https, utilisez https et non http. Si vous utilisez www, utilisez cette version de l’URL, pas la version sans www.
En réalité, il n’y a pas de problème à ce que les autres versions de votre URL redirigent vers la version principale – c’est souhaitable pour que si un visiteur, pour une raison quelconque, essaie d’utiliser la mauvaise version, il aboutisse à la version correcte.
Mais comme ces redirections prennent du temps, tous les liens vers votre site devraient, dans la mesure du possible, utiliser la version primaire afin que les utilisateurs ne subissent aucun retard inutile. Lorsque vous testez votre site sur un outil, quel qu’il soit, vous devez utiliser la version primaire pour éviter d’ajouter du temps inutile.
Pouvez-vous et devez-vous le réparer ? Oui ! Vous devez savoir quelle est la version principale de votre URL, sinon tous les tests de vitesse que vous ferez seront faussés. Heureusement, c’est très facile à corriger : il suffit de taper l’URL correcte !
Réduire le temps de réponse du serveur
Qu’est-ce que cela signifie ? Votre serveur est lent.
Plus votre serveur répond rapidement, plus la page web peut être délivrée rapidement au visiteur. Il y a beaucoup de raisons possibles pour lesquelles le serveur est lent. En ce qui concerne les sites WordPress, les plus courantes sont les suivantes :
- Absence de mise en cache
- Hébergement médiocre
- Des plugins lents
- Une base de données gonflée
Si vous disposez déjà d’un système de mise en cache et que vous obtenez ce message, essayez de relancer le test au cas où une page non mise en cache aurait été trouvée auparavant. Si vous n’avez pas de cache au niveau du serveur (demandez à votre hébergeur), ajoutez un plugin de mise en cache des pages (par exemple WP Rocket, Fastest Cache, etc.).
Pouvez-vous et devez-vous le réparer ? Oui !
Taille correcte des images
Qu’est-ce que cela signifie ? Les images de votre page sont trop grandes pour l’espace dans lequel elles sont affichées. Par exemple, les vignettes de vos produits peuvent être affichées en 100 x 100 pixels, mais l’image fait en réalité 300 x 300 et est redimensionnée par le navigateur.
Cela peut se produire si vous téléchargez des images trop grandes et/ou si votre thème ou un plugin n’a pas spécifié de taille d’image personnalisée pour les différents endroits où il peut utiliser la même image.
Pouvez-vous et devez-vous corriger ce problème ? Certainement ! Assurez-vous que vous redimensionnez correctement les images avant de les télécharger sur WordPress, et que votre thème utilise correctement les tailles d’image.
Optimiser les images / coder efficacement les images
Qu’est-ce que cela signifie ? La taille des fichiers des images de votre page est trop importante.
Les images volumineuses sont l’une des principales causes de la lenteur des pages Web, mais heureusement, il est facile de les contrôler. Cette recommandation est très importante, sauf lorsqu’elle se plaint de quelques octets de données.
Vous devez donc vraiment faire attention à la quantité de données que vous pouvez économiser. Cela peut être particulièrement vrai si vous avez déjà optimisé vos images, il peut encore se plaindre de quelques octets ici et là. Examinez la quantité totale à économiser, puis les économies par image, pour décider si vous pouvez et devez agir. Il y a de fortes chances que si vous n’avez rien fait pour optimiser vos images, vous deviez agir ici.
Dans l’exemple suivant, l’impact en termes d’économies de vitesse et de taille de fichier est significatif et doit absolument être mis en œuvre :
PageSpeed signalera toutes les images présentes sur votre site, même si elles proviennent de tiers. Par exemple, si vous avez un widget Instagram sur votre site, ces images seront probablement répertoriées. Mais vous ne pouvez pas les optimiser car vous n’avez aucun contrôle sur elles, seul Instagram le fait.
Donc, soit vous les supprimez de votre site, soit vous en réduisez la quantité, soit vous acceptez qu’elles ralentissent votre page et PageSpeed vous en avertira toujours.
Pouvez-vous et devez-vous les réparer ? Absolument ! L‘optimisation de vos images est une opération facile à réaliser et que vous pouvez contrôler, c’est pourquoi vous devez absolument agir.
Servez les images dans des formats de nouvelle génération
Les formats d’image les plus courants sont jpg et png, mais Google a lui-même introduit un nouveau format, webp. Il produit généralement des fichiers de plus petite taille et est donc plus efficace et plus rapide.
Pouvez-vous et devez-vous réparer ?
Si vous pouvez économiser beaucoup d’argent, cela vaut la peine de le faire, surtout si votre site contient beaucoup d’images.
Divers plugins peuvent vous aider à cet égard, comme Imagify, WebP Express et d’autres. Sinon, si votre site ne contient pas beaucoup d’images ou si les économies sont très faibles, ne vous inquiétez pas trop de l’utilisation de WebP. Assurez-vous simplement que vos images sont correctement optimisées en termes de compression et de dimensions – c’est ce qui aura le plus grand impact.
Report des images hors écran ou LazyLoad
Qu’est-ce que cela signifie ?
LazyLoad est une technique qui consiste à ne charger les images que lorsque le visiteur fait défiler la page et a besoin de les voir. C’est un gaspillage de ressources et de données que de charger toutes les images d’une page si l’on risque de ne jamais atteindre le bas de la page pour les voir toutes. Cela peut contribuer à accélérer l’affichage initial d’une page puisque moins d’actifs doivent être chargés.
Lazyload est facile à mettre en œuvre à l’aide d’un plugin et, idéalement, vous devriez le faire. Cependant, il s’agit d’une fonctionnalité qui peut ne pas être compatible avec tous les thèmes et plugins et qui, dans certains cas, peut entraîner un retard excessif des images. Vous devriez donc l’appliquer lorsque vous le pouvez, et lorsque vous ne le pouvez pas, ou lorsque l’expérience utilisateur est moins bonne, assurez-vous que les images sont optimisées.
Activez la compression de texte
Qu’est-ce que cela signifie ?
La compression, que ce soit au moyen de GZIP ou de Brotli, est un moyen de réduire la taille des fichiers lorsqu’ils sont transférés du serveur au navigateur du visiteur.
Si les fichiers sont servis depuis votre domaine, vous pouvez et devez y remédier. Des fichiers plus petits signifient un transfert plus rapide et un temps de chargement plus rapide. Il s’agit donc d’une fonction très importante à avoir sur votre site. La plupart des plugins de mise en cache appliqueront les règles htaccess nécessaires pour compresser vos fichiers, et la plupart des serveurs prennent en charge cette fonction par défaut de nos jours.
Si ce n’est pas le cas, vous devriez sérieusement envisager de changer d’hébergeur – c’est aussi important et rudimentaire que cela.
Cependant, vous ne pouvez pas appliquer la compression aux fichiers provenant de tiers. Si la liste des fichiers externes est courte (disons 2 ou 3), ne vous inquiétez pas et passez à autre chose. Si la liste est assez longue, vous ne pouvez pas appliquer la compression à ces fichiers et tout ce que vous pouvez faire est de réévaluer si vous en avez besoin.
Réduire les ressources – HTML, JS, CSS
Qu’est-ce que cela signifie ? La réduction des ressources consiste à supprimer les espaces et les commentaires superflus des fichiers HTML, CSS et JavaScript. Cela permet de réduire la taille des fichiers et, en théorie, de les télécharger plus rapidement.
On pourrait comparer cela à l’utilisation d’un espacement simple au lieu d’un espacement double lors de la rédaction d’un document, pour économiser du papier.
En réalité, il est peu probable qu’elle permette d’économiser une quantité de données suffisamment importante pour avoir un impact réel sur le temps de chargement. De plus en plus de thèmes et de plugins réduisent la taille de leurs fichiers dès la sortie de l’emballage. Parfois, la réduction de la taille des fichiers peut entraîner des problèmes sur votre site, et vous devez donc y faire attention.
Si l’un de vos fichiers est signalé comme tel, vérifiez la quantité de données pouvant être sauvegardées pour voir si elle est significative et ne vous inquiétez pas si elle ne l’est pas ou si elle provient d’une ressource tierce que vous ne pouvez pas contrôler.
Pouvez-vous et devez-vous le réparer ?
C’est une solution facile à mettre en œuvre et de nombreux plugins existent à cet effet, notamment des plugins de mise en cache. Plus les données peuvent être sauvegardées, plus vous devez vous en préoccuper. Mais dans la plupart des cas, cela n’affecte pas le temps de chargement réel de la page, donc à moins que l’économie globale ne soit significative, ou que cela n’entraîne des problèmes d’affichage sur votre site, ne perdez pas le sommeil.
Éliminer les ressources qui bloquent le rendu
Qu’est-ce que cela signifie ?
Le processus d’affichage d’une page Web dans votre navigateur est appelé “rendu”. Pour que vos visiteurs aient l’impression qu’un site est rapide, le rendu doit être aussi rapide que possible et le contenu initial doit être affiché à l’écran sans trop de retard.
Les fichiers CSS et JavaScript ralentissent le processus de rendu car, lorsque le navigateur rencontre de tels fichiers, il doit arrêter ce qu’il est en train de faire, traiter le fichier, puis passer au suivant. C’est ce qu’on appelle le “blocage du rendu”. Si ces arrêts et démarrages sont trop fréquents, le rendu est ralenti et vos visiteurs sont frustrés.
Pour éviter cela, il est possible de charger les fichiers CSS et JS d’une manière qui ne bloque pas le rendu. Cette technique est appelée “différer”.
Charger les CSS sans bloquer le rendu
Qu’est-ce que cela signifie ?
Les fichiers CSS sont nécessaires pour que votre site Web soit joli. Si nous demandons simplement au navigateur de charger les fichiers CSS plus tard, c’est-à-dire en différé, votre page sera laide et sans style jusqu’à ce que le “plus tard” arrive.
Pour éviter cela, nous devons charger uniquement le CSS nécessaire à la partie supérieure de la page, appelé CSS du chemin critique, et tout le reste peut être chargé plus tard. Il est assez complexe de mettre en œuvre cette technique sans être un développeur, mais il existe des plugins qui peuvent aider.
Tout outil qui tente de créer le chemin critique CSS pour votre site de manière automatisée ne sera pas parfait et les possibilités d’erreur sont nombreuses.
Charger JavaScript sans bloquer le rendu
Qu’est-ce que cela signifie ?
Le code JavaScript ajoute de l’interactivité et des fonctionnalités à votre site. Il n’est pas strictement nécessaire d’avoir du JS sur votre site de la même manière que les CSS/HTML sont fondamentaux. Le problème de trop de JavaScript est que non seulement il doit être téléchargé, mais que le navigateur doit ensuite l’exécuter. Selon le code, cela consomme les ressources du navigateur et du processeur, ce qui ralentit votre site.
Pour atténuer certains de ces problèmes de performance, le traitement du JavaScript peut être retardé, c’est-à-dire reporté après le chargement du reste de la page.
La mise en œuvre de cette méthode est un peu plus simple. Les plugins peuvent ajouter une balise “defer” ou “async” à vos fichiers JavaScript pour indiquer au navigateur de saisir le fichier, mais de le traiter plus tard.
Le problème est que cela peut perturber l’ordre des choses et que des erreurs peuvent parfois se produire sur votre site. Lorsque vous utilisez ce type de plugins, testez soigneusement votre site pour vous assurer que rien n’est cassé.
Pouvez-vous et devez-vous les réparer ?
Ces deux options amélioreront les performances perçues de votre site, en particulier sur les mobiles. Mais il s’agit d’optimisations très techniques et avancées qui peuvent donc entraîner des problèmes d’affichage ou de fonctionnalité. Vous devriez donc essayer de les mettre en œuvre en utilisant des plugins, mais gardez à l’esprit que si vous n’êtes pas technique et n’avez pas accès à un développeur, vous devrez peut-être faire des compromis ici.
Ces techniques sont une autre solution de fortune pour les pages complexes. Ce que vous pouvez donc essayer de faire, c’est de simplifier vos pages en supprimant les éléments inutiles. Les types de sites les plus susceptibles d’être signalés sont ceux qui sont inutilement fantaisistes – qui ont des curseurs ou d’autres fonctions dépendant de Javascript en haut de page. Donc, par exemple, si vous avez quelque chose comme un curseur en haut de la page, essayez de le remplacer par une image statique.
Supprimez les CSS inutilisés
Presque tous les propriétaires de sites WordPress verront ce message. Il s’agit de l’une des recommandations les plus avancées sur le plan technique, en particulier lorsque vous utilisez un système comme WordPress où presque tout est préconstruit et n’est pas entièrement sous votre contrôle (à moins que vous ne soyez un développeur).
Qu’est-ce que cela signifie ? L’affichage visuel de votre site est contrôlé par des fichiers CSS. Votre thème chargera généralement au moins un fichier CSS, parfois plus, et presque tous les plugins qui font quelque chose sur le front-end de votre site chargeront au moins un fichier CSS.
Sur les sites WordPress, les thèmes et les plugins doivent tenir compte du fait qu’ils ne contrôlent pas le résultat final. Chaque propriétaire de site peut utiliser ses fonctionnalités différemment, donc les fichiers CSS contiendront du code qui peut être utilisé sur l’ensemble du site. Mais la quantité de ce code nécessaire varie d’une page à l’autre.
Supposons que vous ayez une barre de défilement sur la page d’accueil, mais nulle part ailleurs. Le fichier CSS contient du code pour styliser le curseur. Il n’est nécessaire que sur la page d’accueil, mais le fichier CSS est chargé sur toutes les pages. Ainsi, sur une page sans curseur, Google considérerait qu’il y a du code inutilisé.
Pouvez-vous et devez-vous corriger ce problème ?
Réponse courte : vous ne pouvez probablement pas le corriger complètement.
Le seul moyen de contourner ce problème est de développer votre site de manière à savoir exactement quel code est nécessaire pour quelle page et de le charger en conséquence.
L’impact négatif de cette situation sur les performances est probablement cumulatif en fonction du nombre de plugins que vous avez. Plus il y en a, plus il est probable qu’il y ait du code inutilisé sur la page.
Dans certains cas, les plugins et les thèmes chargent des fichiers entiers sur des pages qui ne sont pas nécessaires. Dans ce cas, vous pouvez utiliser Asset CleanUp ou Gonzales pour contrôler cela.
Diagnostics
Le texte doit rester visible pendant le chargement de la police Web
Qu’est-ce que cela signifie ?
Il s’agit des polices que vous utilisez sur votre site. Certaines polices sont accessibles à tous les utilisateurs car elles sont installées sur leur ordinateur – Times New Roman par exemple. Mais si vous souhaitez utiliser des polices plus uniques et plus sophistiquées sur votre site, il y a de fortes chances que vous utilisiez une police web, de Google Fonts, Typekit, etc.
Comme les polices Web ne sont pas installées sur l’ordinateur de votre visiteur, elles doivent être transmises d’un serveur Web au navigateur. Cela signifie qu’il faut un peu de temps avant que la police ne s’affiche. Pendant ce temps, le texte stylisé avec cette police ne sera pas affiché. L’utilisateur aura l’impression que le site est lent, car une partie du contenu est pratiquement invisible.
Google recommande d’utiliser une police de secours facilement disponible jusqu’à ce que la police Web soit disponible. Cela signifie que le site est utilisable plus rapidement puisque le texte est visible immédiatement. L’inconvénient est qu’il en résulte une permutation visible des polices lorsque la police de secours est remplacée par la police fantaisie. Certaines personnes n’apprécient pas ce problème d’affichage.
Ironiquement, jusqu’à récemment, si vous utilisiez Google Fonts, vous n’aviez pas la possibilité d’appliquer la solution recommandée par Google. Cependant, à partir de mai 2019, Google prend en charge la propriété font-display nécessaire pour résoudre ce problème.
Vous aurez peut-être besoin de l’aide de votre développeur pour le mettre en œuvre si votre thème/plugins ne se met pas à jour en conséquence. Ne perdez pas trop le sommeil à cause de cela, cette optimisation est de toute façon une question de préférence et d’opinion – tout le monde n’aime pas le résultat final.
Les deux diagnostics suivants, Minimiser le travail du fil principal et Réduire le temps d’exécution du JavaScript, sont similaires et concernent tous deux l’impact du JavaScript sur votre page. Vous devez en savoir un peu plus sur JavaScript pour comprendre ces messages.
L’impact négatif de JavaScript
Alors que HTML et CSS sont les éléments fondamentaux d’une page Web, JavaScript n’est pas un ingrédient indispensable à votre page. Il est utilisé uniquement pour ajouter des éléments interactifs fantaisistes. Par exemple, des curseurs, des animations (certaines peuvent être réalisées avec CSS), des lecteurs vidéo, des cartes interactives, etc.
S’il y a trop de JavaScript sur votre site, il risque de le ralentir. C’est parce que le code JS doit être :
- Téléchargé du serveur vers le navigateur
- Analysé, c’est-à-dire lu, par le navigateur.
- Exécuté par le navigateur
Selon le code lui-même et ce qu’il fait, cette troisième étape peut être très consommatrice de temps et de ressources pour votre navigateur. Les répercussions négatives sont accrues de façon exponentielle sur les appareils mobiles, dont la puissance de traitement est moindre au départ.
Si vous n’êtes pas le développeur du code, la seule véritable façon d’éviter l’impact négatif de JavaScript est de le supprimer !
Minimisez le travail du fil principal
Qu’est-ce que cela signifie ?
Imaginez votre navigateur comme une voie ferrée. La page Web qu’il essaie d’afficher est le train. Il n’y a qu’une seule voie. Si quelque chose se trouve sur la voie, le train doit s’arrêter et attendre qu’il soit dégagé avant de pouvoir continuer.
Qu’est-ce qui se trouve sur la voie et cause un blocage ? JavaScript.
JavaScript empêche votre train d’aller de A à B. Vous savez à quel point c’est exaspérant lorsque votre train est arrêté juste à l’extérieur de votre gare et que vous devez attendre ? C’est comme essayer d’interagir avec une page alors que le fil principal est occupé.
Vous subissez des retards dans les réponses de la page, ce qui est exaspérant et conduit à ce que l’on appelle le clic rageur ! Pouvez-vous et devez-vous y remédier ? Oui, en supprimant le JavaScript excessif de votre site. Cela signifie qu’il faut supprimer certains plugins ou désactiver les options interactives de votre thème/concepteur de page.
Réduire le temps d’exécution de JavaScript
Qu’est-ce que cela signifie ? Cela signifie que le code JavaScript de votre site prend beaucoup de temps à être exécuté par le navigateur. Vous pouvez voir cette recommandation sur le rapport mobile mais pas sur le rapport de bureau. Cela s’explique par le fait que les appareils mobiles n’ont pas la même puissance de traitement que les ordinateurs de bureau et que l’exécution du code prend encore plus de temps.
Pouvez-vous et devez-vous corriger ce problème ? Oui, en supprimant l’excès de JavaScript de votre site. Si vous n’êtes pas le développeur du code, la seule façon d’éviter l’impact négatif de JavaScript est de le supprimer !
Si vous n’êtes pas le développeur du code, la seule façon d’éviter l’impact négatif de JavaScript est de le supprimer. Lorsque vous cliquez sur cette recommandation, vous verrez une liste de fichiers pour savoir quels sont les pires contrevenants.
Généralement, jQuery.js se trouve en tête de liste. C’est normal, car presque tous les plugins utilisant JavaScript reposent sur ce fichier. Mais regardez les autres fichiers de la liste et voyez si vous pouvez en supprimer.
En passant la souris sur le nom du fichier, une info-bulle affiche le chemin d’accès complet du fichier. Dans l’exemple ci-dessous, nous pouvons voir que Revolution Slider est en tête de liste (ce n’est pas une surprise). Viennent ensuite jQuery (là encore, rien de surprenant puisque d’autres fichiers en dépendent), t
Servez des ressources statiques avec une politique de cache efficace
Qu’est-ce que cela signifie ? La mise en cache du navigateur améliore les performances pour les visiteurs qui consultent plusieurs pages de votre site ou le visitent plusieurs fois. Elle permet à leur ordinateur de stocker les fichiers les plus utilisés dans le navigateur, ce qui signifie que les pages peuvent s’afficher plus rapidement lors de ces visites répétées. La plupart des serveurs le prennent en charge par défaut.
Si les fichiers sont servis à partir de votre domaine, vous devez y remédier. Comme la compression, il s’agit d’une technique d’optimisation fondamentale. La plupart des plugins de mise en cache l’appliqueront pour vous. Mais comme pour les autres règles, elle ne peut être appliquée qu’aux fichiers servis depuis votre propre site, et non à ceux provenant de tiers.
Si la liste des fichiers tiers est longue, c’est un indicateur que vous avez trop de contenu tiers et que vous devriez envisager d’en supprimer certains.
Qu’est-ce qui est excessif ? Cela peut varier en fonction du contenu, mais s’il y a plus de quatre fichiers répertoriés, cela peut être un élément à prendre en compte.
Évitez les énormes charges utiles du réseau
Qu’est-ce que cela signifie ? Il s’agit essentiellement de la taille globale de la page. La taille de la page est constituée de tous les fichiers individuels utilisés : images, fichiers CSS, fichiers JS, fichiers de police, etc.
L’objectif de PageSpeed est de réduire la taille de la page à moins de 1,6 Mo, mais j’essaierais d’atteindre 1 Mo si vous voulez vraiment une page rapide, surtout pour les mobiles.
J’ai un guide plus approfondi sur la résolution du problème “éviter les énormes charges utiles du réseau” ici.
Éviter la taille excessive du DOM
Qu’est-ce que ça veut dire ?
C’est une question qui concerne les développeurs. Le DOM (document object model, si vous voulez savoir) est la structure sous-jacente du code de la page. Chaque élément que vous ajoutez à une page ajoute un ou plusieurs “nœuds” DOM. Plus le DOM est grand et complexe, plus il sera long à télécharger et à traiter par le navigateur.
Les thèmes et les plugins contribuent au DOM. Tout ce que vous ajoutez à votre page, qu’il s’agisse d’une image, d’une barre de défilement, d’une colonne ou d’une ligne, etc. Certains créateurs de pages, par exemple, ajoutent beaucoup d’éléments DOM en raison de la structure de leur code.
Pouvez-vous et devez-vous le corriger ? Ce message est un indicateur de la complexité globale de votre page. En simplifiant et en rationalisant le contenu, en supprimant les éléments inutiles, etc., vous répondrez indirectement à cette recommandation.
Cependant, si vous avez fait tout ce que vous pouviez ou vouliez faire et que vous obtenez toujours ce message, vous ne pourrez pas le corriger sans le travail personnalisé d’un développeur.
Minimiser la profondeur des demandes critiques
Qu’est-ce que cela signifie ?
Il s’agit d’une autre recommandation très technique qui est liée aux recommandations ci-dessus concernant le chargement des CSS/JS sans blocage du rendu.
Le chemin de rendu critique est constitué des ressources nécessaires pour afficher la page (ou du moins la partie initialement visible) le plus rapidement possible. Pour ce faire, certains fichiers doivent être prioritaires tandis que d’autres peuvent être différés puisqu’ils ne sont pas nécessaires dans l’immédiat.
En tant que propriétaire d’un site WordPress, le mieux que vous puissiez faire ici est d’essayer et de mettre en œuvre des techniques pour supprimer les CSS et JS qui bloquent le rendu, comme indiqué ci-dessus.
Si vous n’êtes pas un développeur et que vous n’avez pas codé votre site sur mesure, il vous sera difficile d’utiliser et de mettre en œuvre cette recommandation. La simplification de la mise en page et du contenu de votre site vous aidera.
Dernier mot sur PageSpeed
En général, PageSpeed a une certaine utilité pour le propriétaire de site moyen, mais en raison de la simplification excessive de la couleur et du score, tout en rendant très techniques les raisons et les actions qui permettraient de l’améliorer, il pourrait confondre plus qu’il ne peut aider.
Les rapports doivent donc être utilisés avec précaution et comme un outil parmi d’autres pour obtenir une image complète des performances de votre site.
Assurez-vous que vous utilisez également un véritable outil de test de vitesse.
