Objectif 100% sur Google PageSpeed Insights : maximisez les performances de votre site web

La performance en ligne est un facteur déterminant pour le succès des entreprises sur le web à la fois selon les exigences des moteurs de recherche et des clients.

Un site web rapide, réactif et performant est essentiel pour offrir une expérience utilisateur optimale, générer du trafic qualifié et, dans le cas de site de e-commerce, convertir les visiteurs en clients. En proposant des temps de chargement rapides, une navigation fluide et des fonctionnalités réactives, vous augmentez les chances de retenir l'attention des utilisateurs pour les encourager à explorer davantage votre site. Un site web qui se veut rapide et performant offre une expérience utilisateur fluide et agréable. Des temps de chargement lents, des fonctionnalités défaillantes et une navigation confuse peuvent rapidement décourager les visiteurs et les inciter à abandonner votre site pour se tourner vers la concurrence.

Dans cet article, nous vous guiderons à travers les aspects clés de la performance en ligne, en mettant en avant l’importance d’optimiser son site web pour qu’il soit rapide et performant. C'est dans cette optique que nous abordons le sujet de la réflexion sur la conception de sites web. Nous verrons que le choix des bonnes techniques et frameworks lors de la création de votre site sur-mesure peut vous aider à atteindre une performance de 100% selon les critères des moteurs de recherche.

création de votre site sur-mesure

Qu’est-ce qu’un site performant d’après Google ? 

Avec la montée en puissance de Google en tant que moteur de recherche dominant, il est primordial de se conformer à ses exigences en matière de performance web. En tant que leader des moteurs de recherche, Google accorde une grande importance à la performance des sites web dans son algorithme de classement. Le moteur de recherche se montre intransigeant par rapport à l’expérience utilisateur dans son algorithme d’indexation des sites web.

Google PageSpeed Insights est un outil qui évalue les sites web en fonction de leur rapidité de chargement, de leur temps de réponse et autres nombreux autres critères selon si le site est consulté sur mobile ou bureau. Il vous permet de visualiser les points d’amélioration des performances de votre site web. Il fournit des recommandations et des suggestions pour optimiser la vitesse de chargement des pages, ce qui est crucial pour offrir une bonne expérience utilisateur et pour le référencement.

Lorsqu’un site web obtient un bon score avec l'outil Google PageSpeed, il est performant et bien optimisé. Cela se traduit par :

• Un meilleur référencement : travailler sur le SEO (Search Engine Optimization) implique une attention particulière sur la sélection des mots-clés et à la structure du contenu de votre site. Lorsque vous optimisez votre site pour de bonnes performances sur PageSpeed Insights, vous êtes amené à optimiser votre contenu pour les mots-clés pertinents. Cela inclut l'utilisation appropriée des balises HTML, l'optimisation des titres et des descriptions, et l'intégration de mots-clés dans le contenu de manière naturelle et pertinente. En alignant votre contenu sur les mots-clés recherchés par votre public cible, vous améliorez les chances de votre site d'apparaître dans les résultats de recherche. L’indicateur SEO, qui apparaît dans votre score PageSpeed Insights, vous indique si vous suivez les bonnes pratiques. Faire appel à une agence spécialisée en référencement naturel (SEO) vous propose des solutions pour vous aider à générer plus de trafic organique et augmenter la visibilité de votre site.
• Une expérience utilisateur agréable : quand votre site charge rapidement, cela contribue à offrir une expérience utilisateur fluide et agréable. Google accorde une importance à la vitesse de chargement des pages dans son algorithme de classement des résultats de recherche. Les visiteurs sont plus susceptibles de rester sur votre site, d'explorer davantage de pages et de revenir à l'avenir si votre site se charge rapidement.
• Une réduction du taux de rebond : lorsque les utilisateurs rencontrent des temps de chargement lents, ils sont plus susceptibles de quitter votre site avant même qu'il ne se charge complètement. En optimisant la vitesse de chargement conformément aux recommandations de PageSpeed, vous pouvez effectuer une analyse du taux de rebond. Cela permet de réduire ainsi le pourcentage d'utilisateurs qui quittent votre site après avoir consulté une seule page.
• Une bonne accessibilité sur les appareils mobiles : un bon score PageSpeed ​​mobile est particulièrement important étant donné que de plus en plus de personnes naviguent sur Internet via des appareils mobiles. Un chargement rapide des pages sur les appareils mobiles garantit que votre site est accessible et utilisable pour un large public.
• Une économie de bande passante : un site bien optimisé selon PageSpeed Insights vise à minimiser le nombre de requêtes nécessaires pour charger une page. Cela peut être réalisé en combinant des fichiers CSS et JavaScript, en évitant les redirections inutiles par exemple. En optimisant les ressources de votre site, vous pouvez réduire la quantité de données transférées entre le serveur et le navigateur de l'utilisateur. Cela peut conduire à une économie de bande passante, ce qui peut être avantageux pour les sites ayant un trafic élevé ou pour les utilisateurs ayant des limitations de données.
• Un meilleur référencement : travailler sur le SEO (Search Engine Optimization) implique une attention particulière sur la sélection des mots-clés et à la structure du contenu de votre site. Lorsque vous optimisez votre site pour de bonnes performances sur PageSpeed Insights, vous êtes amené à optimiser votre contenu pour les mots-clés pertinents. Cela inclut l'utilisation appropriée des balises HTML, l'optimisation des titres et des descriptions, et l'intégration de mots-clés dans le contenu de manière naturelle et pertinente. En alignant votre contenu sur les mots-clés recherchés par votre public cible, vous améliorez les chances de votre site d'apparaître dans les résultats de recherche. L’indicateur SEO, qui apparaît dans votre score PageSpeed Insights, vous indique si vous suivez les bonnes pratiques. Faire appel à une agence spécialisée en référencement naturel (SEO) vous propose des solutions pour vous aider à générer plus de trafic organique et augmenter la visibilité de votre site.
• agence spécialisée en référencement naturel (SEO)
• Une expérience utilisateur agréable : quand votre site charge rapidement, cela contribue à offrir une expérience utilisateur fluide et agréable. Google accorde une importance à la vitesse de chargement des pages dans son algorithme de classement des résultats de recherche. Les visiteurs sont plus susceptibles de rester sur votre site, d'explorer davantage de pages et de revenir à l'avenir si votre site se charge rapidement.
• Une réduction du taux de rebond : lorsque les utilisateurs rencontrent des temps de chargement lents, ils sont plus susceptibles de quitter votre site avant même qu'il ne se charge complètement. En optimisant la vitesse de chargement conformément aux recommandations de PageSpeed, vous pouvez effectuer une analyse du taux de rebond. Cela permet de réduire ainsi le pourcentage d'utilisateurs qui quittent votre site après avoir consulté une seule page.
• analyse du taux de rebond
• Une bonne accessibilité sur les appareils mobiles : un bon score PageSpeed ​​mobile est particulièrement important étant donné que de plus en plus de personnes naviguent sur Internet via des appareils mobiles. Un chargement rapide des pages sur les appareils mobiles garantit que votre site est accessible et utilisable pour un large public.
• Une économie de bande passante : un site bien optimisé selon PageSpeed Insights vise à minimiser le nombre de requêtes nécessaires pour charger une page. Cela peut être réalisé en combinant des fichiers CSS et JavaScript, en évitant les redirections inutiles par exemple. En optimisant les ressources de votre site, vous pouvez réduire la quantité de données transférées entre le serveur et le navigateur de l'utilisateur. Cela peut conduire à une économie de bande passante, ce qui peut être avantageux pour les sites ayant un trafic élevé ou pour les utilisateurs ayant des limitations de données.

Comment tester les performances de son site ? 

En quelques étapes, vous pouvez identifier les performances de votre site web. Lorsque vous ouvrez Google PageSpeed Insights, il vous faut saisir l'URL de la page que vous souhaitez analyser et améliorer dans la barre de recherche. À partir d’un clic, l’outil procède à l’analyse pendant quelques instants. Une fois terminée, les résultats de PageSpeed seront affichés. Vous obtiendrez deux scores : un pour la version mobile et un autre pour la version bureau de votre site, ainsi que des suggestions spécifiques pour améliorer les performances. Il est important d'examiner attentivement les recommandations fournies par PageSpeed. Ces recommandations peuvent inclure des optimisations d'images, la mise en cache, la compression, l'optimisation du code, et bien plus encore. Chaque suggestion est conçue pour vous aider à améliorer les performances de votre site. Vous pouvez par la suite appliquer les recommandations qui vous semblent pertinentes pour votre site. 

Selon les conseils donnés, vous devrez peut-être modifier le code, optimiser les images, configurer votre serveur, utiliser des plugins ou des outils d'optimisation, et ainsi de suite. En apportant ces modifications, vous optimiserez la performance de votre site selon les recommandations de Google PageSpeed. L'amélioration des scores de PageSpeed ​​peut nécessiter des connaissances techniques et un certain niveau de développement web. Si vous n'êtes pas à l'aise avec ces aspects techniques et le développement web, vous pouvez envisager de faire appel à notre agence pour vous aider à optimiser votre site.

Test de performance du site Abris LabelBleu sur Google PageSpeed Insights 

(version desktop à gauche et version mobile à droite)

Depuis 2021, les Core Web Vitals, “Signaux Web Essentiels” ont été intégrés à cet outil pour visualiser les métriques prises en compte dans l’expérience utilisateur. Elles montrent combien il est important de viser la conception d’un site de haute performance. Ces métriques reposent sur :

• L'indicateur LCP (“Largest Contentful Paint”) est une mesure du temps de chargement des éléments contenus dans la page. Il détecte les lenteurs de réponse du serveur. Si le serveur met du temps à lire les éléments à l’écran, les secondes dans la métrique LCP augmentent - l’expérience utilisateur se voit alors affectée puisque la page n’est pas aussi rapide qu’elle le devrait.
• L'indicateur FID (“First Input Delay”), traduit par « délai de première entrée » indique la réactivité de la page Web. Cela correspond au temps écoulé entre l'action de l’utilisateur, comme un clic, et le moment où le navigateur répond à cette interaction.
• L'indicateur CLS (“Cumulative Layout Shift”) est l'indicateur de stabilité visuelle, il quantifie la fréquence et l’ampleur avec laquelle les changements se produisent lors de la consultation d'une page. Il est fréquent que les éléments d'une page se déplacent au fur et à mesure que le contenu se charge et s'affiche sur l'écran. Cela qui peut être une expérience frustrante pour les utilisateurs et entraîner de nombreux clics accidentels, nuisant ainsi à leur expérience de navigation. Google donne un score de 0 à 10 à votre page.
• L'indicateur LCP (“Largest Contentful Paint”) est une mesure du temps de chargement des éléments contenus dans la page. Il détecte les lenteurs de réponse du serveur. Si le serveur met du temps à lire les éléments à l’écran, les secondes dans la métrique LCP augmentent - l’expérience utilisateur se voit alors affectée puisque la page n’est pas aussi rapide qu’elle le devrait.
• L'indicateur FID (“First Input Delay”), traduit par « délai de première entrée » indique la réactivité de la page Web. Cela correspond au temps écoulé entre l'action de l’utilisateur, comme un clic, et le moment où le navigateur répond à cette interaction.
• L'indicateur CLS (“Cumulative Layout Shift”) est l'indicateur de stabilité visuelle, il quantifie la fréquence et l’ampleur avec laquelle les changements se produisent lors de la consultation d'une page. Il est fréquent que les éléments d'une page se déplacent au fur et à mesure que le contenu se charge et s'affiche sur l'écran. Cela qui peut être une expérience frustrante pour les utilisateurs et entraîner de nombreux clics accidentels, nuisant ainsi à leur expérience de navigation. Google donne un score de 0 à 10 à votre page.

Affichage des Core Web Vitals dans les résultats de l'analyse de Google PageSpeed Insights

Quels sont les choix stratégiques pour concevoir un site performant ?

Faire plus avec moins pour gagner en performance

Au cours des dernières décennies, nous avons pu constater une croissance exponentielle du poids du web. Frédéric Bordage, un spécialiste en éco-conception des sites web et des systèmes numériques, explique qu’en l’espace de 20 ans, le poids du web a été multiplié par 115. Pour l’affirmer, il s’appuie sur une étude de Sanders (2014). De même, selon le rapport de HTTP Archive nous donne un ordre d’idée sur l’augmentation significative du poids moyen des pages. En 2000, le poids moyen d’une page web atteignait 89 Ko (images et scripts compris) tandis qu’en 2015, le poids moyen arrivait déjà à 2,6 Mo. Leur poids a été multiplié par trente en l’espace de quinze ans et le nombre de requêtes a quant à lui été multiplié par 10 ! Un tel poids s’explique par une tendance à la multiplication des animations, des scripts, des images et des vidéos en exploitant toutes les possibilités du web pour épater les internautes. Néanmoins, cette maximisation des éléments peut entraîner des lenteurs sur les sites et des baisses de performance.

L’étude Exceeding value menée en 2014 par Standish Group a montré que 50% des fonctionnalités pour le développement d'applications personnalisées sont rarement utilisées et n’apportent pas de valeur ajoutée, tandis que seulement 20% des fonctionnalités sont fréquemment utilisées. En effet, celles-ci ne sont que quelquefois utilisées. Au fur et à mesure des années, les besoins des internautes ont tendance à se stabiliser. L’expérience utilisateur n’en est pas pour le moins délaissée puisque le site gagne en lisibilité, accessibilité et vitesse d’affichage. Le plus important est de créer une interface utilisateur cohérente et homogène. En plaçant les besoins réels des utilisateurs au centre de la conception d'un site web, on crée une expérience utilisateur positive, ce qui se traduit par une meilleure performance en termes de satisfaction des visiteurs, de rétention, de référencement et de conversions.

Gardons à l’esprit le fameux concept “Keep it simple, stupid !” (KISS) prononcée par Kelly Johnson qui signifie que la complexité apporte du superflu si celle-ci n'apporte rien. En adoptant un style minimaliste sur son site web, les chances d’orienter l’attention des internautes vers votre produit ou service sont plus importantes, car il accède aux informations strictement nécessaires.

La phase de réflexion et la formulation des besoins pour la rédaction du cahier des charges (voir nos articles liés) est indispensable pour faire des choix qui répondent aux besoins de façon efficiente avant de se lancer dans le développement du site web. Cette étape de conception impacte directement l’empreinte carbone future d’un projet web : en identifiant et réfléchissant à l’ensemble des éléments à afficher et les fonctionnalités dont disposent les internautes pour l’alléger au maximum.

voir nos articles liés

Vers une éco-conception des sites web ?

Au-delà de ces aspects purement pragmatiques, l'optimisation des performances joue également un rôle crucial dans l'éco-conception. En effet, le web consomme une part significative de l'énergie mondiale et cette consommation est en grande partie déterminée par l'efficacité des sites web. L'éco-conception d'un site web concerne l'ensemble des stratégies et techniques mises en œuvre pour minimiser l'impact environnemental d'un site web tout en optimisant sa performance. Dès la phase de conception et de design ou d’expression des besoins, vous avez tout intérêt à réfléchir en vous plaçant dans une posture de “sobriété numérique”. En effet, un site web bien optimisé consommera moins de ressources à la fois côté serveur et côté client, réduisant ainsi son empreinte environnementale.

En d'autres termes, optimiser les performances ne signifie pas seulement rendre un site web plus rapide ou plus efficace : cela signifie aussi le rendre plus respectueux de l'environnement. Les outils et techniques que nous utilisons pour optimiser les performances peuvent donc être vus comme une partie intégrante de l'éco-conception des sites web. S’orienter vers la conception d’un site web écoresponsable s’articule autour de trois axes : la réduction du nombre de requêtes (un code développement propre et sans surcharge), la diminution du volume de données échangées (réduction du poids des médias par exemple) et enfin, la limitation du traitement des informations statiques (possible grâce au cache). Si vous cherchez à accroître les performances web de votre site, la réduction de la taille des fichiers et l'utilisation du langage JavaScript avec parcimonie sont des facteurs-clés. C'est notamment ce qu'affirme Tom Greenwood dans son ouvrage “Sustainable Web Design” sorti en 2021.

Lors de la conception de votre site, il est important d’alléger au maximum vos pages web en réduisant la taille des images, d'utiliser des formats appropriés et des outils de compression d'images. Réduire une page de centaines de Ko a des effets mesurables sur la consommation de ressources et les émissions de CO² générées par la consultation du site web. Suivant le nombre de consultations, l’alourdissement d’un site engendre une lente exécution sur le navigateur, entre autres.

Les développeurs apportent justement leur expertise pour optimiser la gestion du cache et de minimiser l'envoi de requêtes aux serveurs, afin de réduire la consommation énergétique de ces derniers. En optimisant l'utilisation de ces ressources, un site éco-conçu peut fonctionner de manière plus efficace, ce qui se traduit par des temps de chargement plus rapides et une meilleure expérience utilisateur. Écartons une idée reçue cependant : la rapidité n’atteste pas que votre site est respectueux de l’environnement. En revanche, un site dit écoresponsable a de grandes chances d’être performant puisqu’il est plus léger.

Il est possible d’avoir une visibilité sur l’empreinte carbone de votre site en vous dirigeant vers des outils mesurant l’empreinte écologique tels que : Ecoindex, GreenIT Analysis, WebsiteCarbon, GTmetrix ou encore Webpagetest.

Test de l’éco-conception du site Les-Ateliers-Jehanno.fr sur WebsiteCarbon et Ecoindex

Pour déployer un site web performant, nous choisissons la technologie la plus adaptée pour votre site web pour les moteurs de recherche et une maintenance du site web facilitée. En faisant appel à ID Interactive, vos besoins constituent le point de départ pour la conception d’un site entièrement sur-mesure. En utilisant des techniques d'optimisation des performances, vous pouvez non seulement améliorer l'expérience utilisateur et le référencement, mais aussi contribuer à réduire l'impact environnemental de votre site web. Nous pouvons notamment vous proposer de réaliser votre site sur-mesure avec des frameworks tels que Strapi ou Astro, dont l'essor est croissant.

Choisir des techniques adaptées : cas de l’utilisation de Strapi et Astro

Lorsqu'il s'agit de créer un site web performant, le choix des outils et des technologies est crucial. Parmi les options disponibles, nous nous tournons notamment vers le framework Strapi, qui connaît une croissance importante dernièrement. Strapi est un système de gestion de contenu (CMS) headless open source qui permet aux développeurs de créer, gérer et distribuer du contenu de manière efficace et optimisée. Contrairement aux CMS traditionnels constitués par un backend accompagné d'un front end unique au format web, cette approche exige de disposer d'une expertise technique en intégration.

• Optimisation de la gestion du contenu : Grâce à son architecture headless, Strapi permet aux développeurs de ne servir que le contenu nécessaire aux utilisateurs, sans le surpoids associé à la présentation ou à la logique front-end. Cela peut minimiser la quantité de données transférées, ce qui est bénéfique à la fois pour l'éco-conception et pour la performance.
• APIs (Application Programming Interface) personnalisables : Strapi offre la possibilité de créer des API entièrement personnalisables. Cela signifie que les développeurs peuvent optimiser précisément quelles données sont envoyées et comment elles sont structurées, réduisant encore davantage la quantité de données inutiles.
• Optimisation de la gestion du contenu : Grâce à son architecture headless, Strapi permet aux développeurs de ne servir que le contenu nécessaire aux utilisateurs, sans le surpoids associé à la présentation ou à la logique front-end. Cela peut minimiser la quantité de données transférées, ce qui est bénéfique à la fois pour l'éco-conception et pour la performance.
• APIs (Application Programming Interface) personnalisables : Strapi offre la possibilité de créer des API entièrement personnalisables. Cela signifie que les développeurs peuvent optimiser précisément quelles données sont envoyées et comment elles sont structurées, réduisant encore davantage la quantité de données inutiles.

Astro est un framework front-end qui se concentre sur la performance et l'optimisation de la livraison de contenu.

• Rendu côté serveur : Astro utilise le rendu côté serveur (SSR) pour générer des pages statiques au moment de la construction. Cela signifie que le navigateur de l'utilisateur n'a pas besoin de traiter du JavaScript supplémentaire pour générer le contenu de la page, ce qui peut améliorer les temps de chargement et minimiser l'utilisation des ressources client.
• Livraison optimisée du JavaScript : Astro n'envoie du JavaScript au client que lorsque c'est nécessaire (appelé "Island Architecture"). Cela réduit la quantité de code que le navigateur de l'utilisateur doit traiter, ce qui peut améliorer la performance et minimiser l'utilisation des ressources.
• Optimisation des ressources : Astro propose des fonctions intégrées pour l'optimisation des images et des polices, ce qui peut réduire la taille des fichiers et améliorer les temps de chargement.
• Rendu côté serveur : Astro utilise le rendu côté serveur (SSR) pour générer des pages statiques au moment de la construction. Cela signifie que le navigateur de l'utilisateur n'a pas besoin de traiter du JavaScript supplémentaire pour générer le contenu de la page, ce qui peut améliorer les temps de chargement et minimiser l'utilisation des ressources client.
• Livraison optimisée du JavaScript : Astro n'envoie du JavaScript au client que lorsque c'est nécessaire (appelé "Island Architecture"). Cela réduit la quantité de code que le navigateur de l'utilisateur doit traiter, ce qui peut améliorer la performance et minimiser l'utilisation des ressources.
• Optimisation des ressources : Astro propose des fonctions intégrées pour l'optimisation des images et des polices, ce qui peut réduire la taille des fichiers et améliorer les temps de chargement.

La combinaison de Strapi et Astro semble se démarquer comme une solution puissante pour atteindre une performance maximale. Elle permet aux développeurs de contrôler avec précision les données et le code qui sont livrés aux utilisateurs, évitant le gaspillage de ressources à la fois sur le serveur et sur le client. Cela permet d'obtenir un site web rapide, facile à déployer, tout en offrant une expérience de gestion de contenu dynamique grâce à Strapi. Cette combinaison permet de créer des sites web qui offrent une expérience utilisateur rapide et réactive tout en minimisant leur impact environnemental. En testant un des sites produits par l’agence sur Google PageSpeed Insights, nous pouvons constater de bonnes performances à la fois pour la version mobile et bureau. Résultat ? Un chargement instantané des pages !

Test de performance du site Les-Ateliers-Jehanno.fr sur Google PageSpeed Insights

(version desktop à gauche et version mobile à droite)

Le choix de techniques appropriées, telles que Strapi et Astro, peut jouer un rôle déterminant dans la création d'une expérience utilisateur fluide et efficace avec un chargement des pages immédiat. En combinant une approche axée sur la performance, une optimisation pour les moteurs de recherche et l'utilisation de technologies modernes, nous sommes en mesure de proposer des sites web performants et esthétiquement plaisants. En adoptant ces principes, nous pouvons offrir à nos utilisateurs une expérience en ligne agréable en répondant aux critères de Google avec des scores qui avoisinent les 100%.

Si vous envisagez de faire appel à un prestataire, demandez dès maintenant votre devis pour la création d’un site internet professionnel hautement performant avec l’une de ces technologies.

votre devis pour la création d’un site internet professionnel