Sachant que les utilisateurs sur Internet s’attendent à ce que leurs pages s’affichent en moins de 2 secondes, il est important de savoir comment avoir un site Internet rapide. D’ailleurs, Google a annoncé que la vitesse de chargement d’un site influence son positionnement référentiel, soit le fameux SEO.
Bien sûr, de nombreux autres facteurs affectent le SEO d’une page ou d’un site. Pour en apprendre davantage, nous avons écrit un article sur le sujet. Néanmoins, s’assurer que son site soit optimisé de plusieurs façons pour favoriser un chargement rapide influence à la fois le positionnement référentiel et l’expérience client. De nos jours, la vitesse de chargement est si importante que Google estime que 53% des utilisateurs sur mobile quittent le site s’il ne charge pas en moins de 3 secondes.
La perte de clients ou lecteurs potentiels due à un site trop lent peut représenter une perte de revenu pourtant évitable. Pourtant, un site peut toujours être optimisé, et ce même s’il est déjà en ligne. Nous vous invitons à lire cet article pour découvrir comment avoir un site Internet rapide!
Poids des images
Premièrement, un facteur important à considérer est le contenu d’un site. En effet, il peut être constitué de textes, d’images et même d’animations. Tous ces éléments représentent une quantité d’information qu’un serveur conserve et achemine à chaque utilisateur visitant votre site.
En conséquence, la quantité d’information doit être considérée lorsque l’on bâtit un site Web.
Pour les images, chaque pixel représente une information sur la couleur qui doit être présentée. Plus il y a de pixels dans une image, plus l’image apparaît détaillée. Cependant, plus il y a de pixels, plus lourde sera l’image :
Cet exemple montre la différence entre une image qui a conservé son information et une image qui fut transformée dans un autre format puis fut compressée. L’image de gauche a un poids de 8 ko, alors que l’image de droite a un poids de 4 ko, soit la moitié.
Alors, comment s’assurer d’avoir un site rapide, tout en ayant des images de qualité? C’est simple, il suffit de mettre des images lorsque c’est approprié. S’il s’agit de votre page d’accueil ou une autre page importante, alors c’est important qu’elle attire l’attention d’un utilisateur. Par contre, s’il s’agit d’un article, alors il est recommandé d’utiliser des images que lorsque le support visuel peut être utile.
Optimisation des formats pour avoir un site Internet rapide
Le format des images influence également la vitesse de chargement. Certains formats conservent davantage d’informations, alors que d’autres compressent leurs images. Alors, assurez-vous de téléverser des images dans un format approprié :
- Format JPEG : Pour toutes vos images détaillées. Le format est conçu pour afficher 16 millions de couleurs, ce qui est supérieur à la capacité de l’œil humain. De plus, JPEG compresse efficacement un fichier pour qu’il ne soit pas trop lourd. Il est parfait pour afficher des photos où les détails doivent apparaître sans surcharger la page avec un énorme poids.
- Format PNG : Un fichier PNG affiche également 16 millions de couleurs, mais il ne compresse pas autant que JPEG. Cependant, le format est employé pour les logos et graphiques. De plus, des blocs d’une couleur peuvent être affichés en PNG pour éviter le « bruit » avec la compression JPEG.
C'est quoi de la compression?
Afin que le poids d’un fichier, comme une image par exemple, soit plus léger, des logiciels peuvent « compresser » le fichier. Plutôt que chaque pixel affiche une couleur précise, la compression force des pixels à imiter des pixels voisins.
Dans le cas de notre logo que nous avons compressé, vous pouvez distinguer des pixels noirs qui dépassent le logo. Le fichier original démarque très bien les pixels blancs autour du logo et les pixels noirs qui forment le logo. Mais, le logiciel de compression a forcé certains pixels blancs autour du logo à imiter ses pixels voisins qui étaient noirs.
Ces pixels dans notre logo compressé qui affichent la mauvaise couleur constituent du « bruit ». Une quantité minime de bruit peut être tolérée par l’œil. Cependant, si le bruit peut être facilement détecté, alors il y en a trop et le fichier fut trop compressé.
Lorsque les lignes sont droites et qu’il n’y a pas beaucoup de couleurs, la compression est un excellent outil pour réduire la taille d’un fichier (son poids). Cependant, dans le cas d’un logo avec de nombreuses lignes courbées et diagonales comme le nôtre, l’effet de la compression est visible et nuit à la qualité de l’image.
D’ailleurs, n’hésitez pas à conserver la qualité des éléments visuels qui importent à votre image de marque. Les logos et photographies ne devraient pas être compressés. En contrepartie, assurez-vous de ne pas ajouter des éléments visuels inutiles ailleurs dans le site, ainsi que de compresser, sans que ça nuise à la qualité visuelle, lorsque possible.
Optimisation du serveur
Le choix du serveur influencera la rapidité de votre site. Certains choisissent d’héberger leur site sur leurs propres serveurs, comme c’est le cas d’énormes sites. Par exemple, Facebook, Amazon et Google possèdent leurs propres serveurs avec des backups qui hébergent l’ensemble de leurs sites. Héberger son propre site requiert des ressources humaines et matérielles avancées. La plupart des sites sont plutôt hébergés par des compagnies qui offrent le service d’hébergement.
Ainsi, il y a 3 mesures à garder en tête lorsque vous comparez différents services d’hébergement :
- Time To First Byte (TTFB) : Cette mesure, la plus importante, détermine combien de temps prend un serveur pour répondre à une requête.
- Le serveur utilise une mémoire mécanique ou une mémoire SSD? Les deux types de mémoire comprennent des avantages et inconvénients différents. Néanmoins, la mémoire SSD est nettement plus rapide qu’une mémoire mécanique. Par conséquent, elle est généralement préférée pour effectuer des commandes rapidement.
- Accounts per Server: Ça signifie combien de sites sont hébergés sur un serveur. Sachant que les ressources d’un serveur sont partagées, il est préférable que votre serveur hôte ne soit pas surchargé par une trop grande quantité de sites.
Avec ces trois mesures en tête, vous avez grandement plus d’informations pour choisir un serveur qui vous convient. Gardez en tête qu’un coût est associé à la qualité d’un serveur. En effet, un serveur qui héberge peu de sites (Accounts per Server) et offre un Time To First Byte (TTFB) très rapide vous chargera davantage afin de tirer profit. Il s’agit de déterminer quelle rapidité réaliste vous convient en fonction du budget que vous allouez au serveur.
Comprendre le cache
Le cache, ce sont des informations d’un site conservées par un navigateur Internet ou l’appareil d’un utilisateur. Il s’agit d’un espace de stockage temporaire.
Quelles informations sont conservées dans le cache? Ça peut être des images du site, des vidéos, du code JavaScript, du code CSS et des fichiers HTML.
Pourquoi ces informations sont-elles conservées sur un navigateur ou même l’appareil d’un utilisateur? Le cache permet aux utilisateurs d’un site de voir le contenu du site bien plus rapidement. Effectivement, si une partie du site est déjà sauvegardée localement, la requête vers le serveur du site est plus petite.
Par exemple, les images, ainsi que le « look » d’une page (son code CSS), seront chargées automatiquement grâce au cache. Le serveur n’aurait qu’à fournir le texte écrit sur la page.
Optimiser le cache
Lorsque vous concevez ou changez votre site, vous avez un certain contrôle sur le cache. Si des éléments sont « persistants », ils peuvent être sauvegardés dans le cache et être chargés plus rapidement.
Pour illustrer les éléments « persistants », prenons l’exemple d’un blogue. Si vous n’en avez pas, on vous donne quatre bonnes raisons d’en débuter un ici. Le problème d’un blogue, c’est que chaque article contient du texte et des images différentes et qu’il est rare qu’un article soit lu plus d’une fois. Alors, comment optimiser le cache lorsqu’un utilisateur lit de nombreux articles sur votre blogue? :
Cette capture d’écran montre deux pages d’articles différents, soit Pourquoi faire du SEO? et Comment incorporer une entreprise? Voyez-vous la similarité entre les deux bannières en en-tête? Il s’agit d’un élément « persistent », soit un élément qui est répété, peu importe la page sur laquelle vous vous trouvez sur notre site. Vous pourrez faire le test vous-même, l’en-tête demeure toujours la même.
Donc, si vous êtes déjà allés sur l’une de nos pages, la bannière est sauvegardée dans le cache d’un navigateur ou votre cache local. Ainsi, même si vous cliquez sur un tout nouvel article de notre blogue, la page s’affichera tout de même plus rapidement, comme si vous l’aviez déjà consultée. La bannière est considérée comme permanente dans notre code et par conséquent elle est sauvegardée pour être chargée plus rapidement.
Alors, dans la conception de votre site, ou même pour améliorer votre site existant, cette technique vous permet d’optimiser votre cache.
Content Delivery Network (CDN) ou comment appliquer le principe du cache à un serveur
Maintenant que vous comprenez davantage le principe du cache local ou sur navigateur, il existe un service de cache appliqué aux serveurs. Voici comment ça fonctionne :
L’Internet peut sembler quasi immatériel par sa capacité à envoyer et recevoir de l’information de façon instantanée. Cependant, l’Internet est supporté par une immense infrastructure bel et bien matérielle. On parle d’immenses câbles sous-marins qui traversent les océans et la terre pour acheminer toute cette information le plus rapidement possible. Lorsque vous consultez un site hébergé en Europe, votre requête et l’information sont physiquement envoyées jusqu’en Europe puis reviennent jusqu’à votre appareil qui affiche le site.
Afin d’alléger ce transport d’information, des entreprises offrent un service qui fonctionne comme un cache. Une partie de l’information d’un site sera conservée en mémoire à différents endroits sur la Terre. Si le même site européen choisit un service de Content Delivery Network (CDN), votre requête ne se déplacera pas jusqu’en Europe. Au contraire, elle sera acheminée jusqu’à la mémoire la plus proche de votre location.
Ainsi, un CDN permet d’accélérer la distribution de l’information d’un site partout sur la planète en utilisant la logique du cache.
Optimisation sur WordPress
WordPress offre de nombreux plugins qui servent d’outils pour de nombreuses fonctions. Cependant, le piège des plugins, c’est qu’ils peuvent alourdir la quantité d’information envoyée par le serveur pour afficher votre site.
Les plugins peuvent améliorer le « look » de votre site, bloquer les messages de spam et même vous offrir des conseils en matière de rédaction SEO. Dans le même ordre d’idée que nos conseils précédents, il importe d’ajouter les plugins que vous considérez comme essentiels. Parfois, pour alléger la charge du serveur, c’est mieux de coder vous-même avec HTML certaines fonctions accomplies par des plugins dans WordPress.
Dimension des images
Un autre aspect facile à changer sur WordPress est la dimension des images. En effet, à l’instar de la résolution, plus une image est large, plus son poids sera élevé.
Ainsi, nous recommandons à nos clients des tailles d’images adéquates. Donc, dans un esprit d’UX (user experience ou l’expérience de l’utilisateur), nous recommandons de réduire la dimension des images sans que la taille nuise à l’expérience du lecteur.
En général, sur le Web, une image de grande taille ferait 400 à 600 pixels de large, alors qu’une petite image ferait environ 100 à 200 pixels de large. Les petites images peuvent être votre logo par exemple. Dans le cas des images qui doivent occuper l’entièreté de la page, Shopify recommande alors 2500 pixels de large.
Google Site Speed ou les rapports « Vitesse du site »
Vous avez appliqué tous ces trucs à votre site et vous souhaitez vous assurer que votre site est suffisamment rapide pour tous vos utilisateurs? Il existe une ressource qui se nomme le Google Site Speed ou « Vitesse du site » en français.
Il s’agit d’une ressource mise à votre disposition par Google qui vous offre des données sur la rapidité de votre site, ainsi que des suggestions pouvant améliorer la vitesse du site.
Dans cet article, Google vous indique comment avoir accès à cette ressource à partir de votre compte Google Analytics.
Il y a également cet article produit par Google nommé : Comprendre les rapports « Vitesse du site ».
L’utilisation de cet outil requiert certaines compétences techniques. De plus, les suggestions proposées par Google ne sont pas toujours véridiques. En effet, des avertissements du type load total peuvent s’avérer inexacts en fonction de la conception du site.
Bref, il faut tout de même des connaissances approfondies pour interpréter les informations fournies par Google avec justesse. Cependant, apprendre à déchiffrer et utiliser l’outil Site Speed peut être la dernière touche qui vous manque pour complètement maximiser la vitesse de chargement de votre site.
Savoir comment avoir un site Internet rapide, c’est notre spécialité
Bien qu’il s’agisse d’un long article avec amples informations, il y a un point important que nous vous invitons à retenir. Peu importe si vous bâtissez présentement votre site ou qu’il a déjà accumulé plusieurs années d’existences, c’est toujours possible d’optimiser votre site davantage. En effet, il n’est jamais trop tard et de nombreuses techniques variant en difficulté sont à votre disposition.
Chez Ton Consultant, nous avons plus d’une dizaine d’années d’expérience en développement Web. Notre équipe diverse comprend de nombreuses compétences en design, développement, communication et marketing. Nous proposons une perspective fraîche, dynamique et compétente grâce à notre expérience.
Nous sommes en mesure de bâtir votre site, de le modifier ou simplement d’agir à titre de conseillers par la suggestion d’amélioration. C’est en maximisant votre présence Web que nous vous aidons à atteindre les objectifs que vous vous êtes fixés.
Quelles stratégies avez-vous employées dans l’optimisation de votre site et quels furent les résultats? Dites-le-nous dans les commentaires!
