En plus de ses nombreuses fonctionnalités, Google fournit un outil qui permet d’analyser les performances d’un site web : Google PageSpeed Insights (ou PSI). Le but de l’outil ? Noter sur 100 les performances d’un site Web. Qu’est-ce qui peut motiver Google à noter les sites ?
La plupart des internautes trouvent que les pages qui chargent lentement ne permettent pas une bonne expérience. Selon une étude récente, 38% des internautes quittent la page ou changent de site lorsqu’une page prend plus de cinq secondes à se charger. Alors qu’une enquête réalisée par Unbounce a révélé que seulement 15% des sites ont un temps de chargement acceptable par les utilisateurs. Ce sont des données à prendre en compte si l’on considère que le temps de chargement est un paramètre essentiel à la conversion des prospects. La question à se poser est quelle est exactement la bonne vitesse de chargement des pages ?
La réponse est donnée par Google PageSpeed Insights. Si vous avez un score supérieur à 90. Cela est considéré comme acceptable.
Comment améliorer votre score Google PageSpeed Insights ?
1. Compressez vos images
Dans le monde d’aujourd’hui, l’esthétique compte beaucoup. Cela pourrait inciter certains d’entre vous à placer des images de haute qualité sur votre site Web. Bien qu’il n’y ait rien de mal à cette étape, et que la qualité de vos images compte, ne confondez pas des images de qualité avec des images haute résolution.
Vous pouvez toujours obtenir une excellente qualité sans utiliser la plus haute résolution disponible. En fait, un excellent moyen d’améliorer la vitesse du site Web consiste à compresser vos images. Il s’avère que vous pouvez utiliser des outils de compression pour réduire la taille de l’image jusqu’à 50% sans compromettre sa qualité.
Par exemple, pour ceux qui ont un site Web WordPress, un plugin appelé WP Smush Image Compression and Optimization peut être un outil pratique, d’autant plus que le plugin est gratuit !
De plus, si votre site Web n’est pas créé sur WordPress, vous pouvez utiliser divers autres plugins disponibles. Bien que Crush.pics soit un excellent outil, les outils Shopify, Compress JPEG et Optimizilla sont des options intéressantes.
2. Éliminer les redirections inutiles
Un autre gros désagrément pour un utilisateur de site Web, mis à part les pages à chargement lent, est que les sites Web continuent de rediriger vers d’autres pages lorsque vous cliquez sur le lien de la page de destination.
Il s’avère que les deux désagréments sont liés ! Plus vos pages ont de redirections, plus la vitesse de chargement de la page sera élevée. Vous pouvez facilement faire d’une pierre deux coups en éliminant les redirections inutiles de votre page.
Pour cela, vous avez besoin d’un design réactif. Selon Infront, plus de 77% des adultes possèdent un smartphone et 60% des personnes accèdent à des sites Web via un téléphone. Une conception réactive permet qu’un site Web reste accessible, quel que soit l’appareil sur lequel l’utilisateur le consulte.
Selon Google, les pages avec un faible score PageSpeed Insights ont tendance à avoir un certain schéma de redirection. Voici quelques-uns des modèles qui peuvent être exposés :
- xyz.com -> www.xyz.com -> m.xyz.com. Ces sites Web offrent une expérience très lente sur les appareils mobiles.
- xyz.com -> m.xyz.com/home. Cela offre une expérience considérablement plus lente qu’une conception réactive.
Vous vous demandez à quoi ressemblera une conception Web réactive ? Eh bien, son URL (dans ce cas, xyz.com) chargera la page de destination, quel que soit l’appareil sur lequel elle est accessible, sans aucune redirection. C’est ce que vous devriez viser.
3. Supprimer toutes les ressources bloquant le rendu
Un autre moyen sûr d’augmenter le score de vitesse de la page consiste à supprimer toutes les ressources bloquant le rendu de votre site Web. Ces ressources jouent également un rôle dans la réduction de la vitesse des pages.
À moins que vous ne soyez un geek en informatique, il y a de fortes chances que vous n’ayez aucune idée de ce que nous entendons par ressources bloquant le rendu. Ne vous inquiétez pas, nous avons dû nous renseigner aussi !
Fondamentalement, ces ressources font référence à des scripts CSS et JavaScript qui agissent comme des obstacles au chargement rapide des pages. En effet, le navigateur de chaque visiteur est chargé de télécharger d’abord ces scripts, puis de les traiter avant que la page entière puisse être affichée.
Avoir de telles ressources placées au-dessus de la section de pliage de la page peut être préjudiciable au site Web. Google lui-même propose une solution à ce problème. Ceci comprend :
- Utiliser des plugins comme Autoptimize (si votre site Web est petit) pour incorporer votre CSS ou JavaScript dans des fichiers HTML. Cette méthode est réservée aux petits sites Web, car elle sera en fait contre-productive pour les sites Web plus importants avec une pléthore de scripts.
- Différer votre JavaScript permet à votre fichier JavaScript d’être téléchargé pendant le processus d’analyse HTML et d’être exécuté une fois le processus d’analyse terminé. Il permet également aux scripts de se charger en termes d’ordre d’apparition sur une page donnée.
C’est un domaine assez technique ; par conséquent, vous aurez besoin d’un guide dédié pour lutter contre cela.
4. Améliorez vos performances perçues
Un rapport MOVR a mis en lumière le comportement particulier des consommateurs. Plus de 11% des utilisateurs de téléphones mobiles commencent à parcourir un site Web, de haut en bas, dans les quatre secondes suivant le chargement de la page. Et même si la page entière n’a pas été chargée, 9% défilent toujours vers le bas.
Cela signifie que vous n’avez pas nécessairement à vous assurer que l’intégralité de votre page se charge rapidement. Au lieu de cela, vous devez optimiser ses performances perçues. Faites-le en donnant la priorité au chargement rapide du contenu au-dessus de la ligne de flottaison. Cela augmentera également automatiquement le score de vitesse de votre page.
Qu’est-ce que la performance perçue ?
Il fait référence à la perception que les utilisateurs ont de la rapidité du temps de chargement de votre site Web. Cette vue peut en fait être différente du temps de chargement réel de votre site Web ! Par exemple, les sites Web qui se chargent de haut en bas peuvent se charger globalement en cinq secondes, mais ont une performance perçue de trois secondes.
Autorisez le chargement de vos éléments principaux au-dessus de la ligne de flottaison avant les publicités et les widgets tiers. Assurez-vous que le contenu qui structure votre site se charge avant les éléments esthétiques. Au moment où les utilisateurs traitent les informations fournies, le reste de votre site Web peut se charger.
5. Utilisez la mise en cache du navigateur
Selon Neil Patel, un autre outil qui peut aider à augmenter votre score Google PageSpeed Insight est la mise en cache du navigateur. Par rapport aux autres pratiques mentionnées dans ce guide, celle-ci est très simple et ne nécessite pas beaucoup d’efforts.
Généralement, une page a tendance à prendre beaucoup de temps à se charger car elle récupère les ressources requises. Par exemple, chaque fois qu’un site Web est revisité, il doit récupérer et charger chaque image et les autres éléments de la page. Ensuite, il doit gérer tout le HTML lourd et le codage.
Comme vous pouvez le constater, cette tâche est assez répétitive. Certes, n’importe quel moyen de réduire la redondance des efforts peut améliorer les performances du site Web, n’est-ce pas ? C’est là que la mise en cache du navigateur entre en jeu.
Il permet aux navigateurs de se souvenir des pages et des ressources qui ont été précédemment chargées. Cela signifie qu’il n’a pas besoin de tout recharger à partir de zéro.
De plus, cela permet aux visiteurs du site Web qui commencent leur voyage sur la page de destination de ne pas avoir à attendre que les données répétitives, comme les logos et les pieds de page, se rechargent lorsqu’ils cliquent sur d’autres pages.
Contrairement à la croyance populaire, vous n’avez pas besoin de connaître le codage pour utiliser cette tactique. Au lieu de cela, il existe des outils disponibles pour cela. Pour WordPress, vous pouvez utiliser W3 Total Cache.
Alors, comment le mettre en œuvre ? Heureusement, il existe un plugin pour cela. Vous n’avez pas besoin d’être un expert en codage pour le faire.
6. Utilisez AMP
Accelerated Mobile Pages est une solution open source utilisée par Google pour permettre aux pages mobiles de se charger plus rapidement. Il le fait en éliminant le contenu inutile sur un site Web pour s’assurer qu’il se charge instantanément. Vous avez peut-être vu les initiales apparaître sur divers résultats de recherche Google.
La plateforme offre une navigation fluide aux utilisateurs mobiles après avoir supprimé les fonctionnalités encombrantes qui sont incompatibles avec une expérience mobile idéale.
La version simplifiée du site Web permet aux utilisateurs de faire défiler différentes histoires et contenus sur un site sans quitter une page donnée et rediriger vers une autre. Par exemple, vous pouvez facilement balayer vers la droite ou vers la gauche pour lire d’autres articles, qui apparaîtront instantanément, avec un formatage très minimal.
Une étude de cas rapportée par Neil Patel révèle que Gizmodo a triplé sa vitesse de chargement en utilisant la fonction AMP. Vous pouvez facilement l’implémenter et en bénéficier également.
