Comment améliorer les performances d'un site Web

La vitesse à laquelle une page Internet s'ouvre a un impact significatif sur plusieurs facteurs, parmi lesquels :

le temps qu'un utilisateur passe sur un site particulier ;

le nombre de conversions que vous obtenez de vos utilisateurs ;

le positionnement d'un site dans les résultats organiques des moteurs de recherche.

Malheureusement, dans la plupart des cas, une page Web obtient un score très faible lorsqu'il s'agit d'évaluer sa vitesse réelle. Ce point peut avoir un impact fortement négatif sur l’ensemble de la stratégie qui a été développée côté marketing digital.

De nombreux facteurs peuvent conduire à un ralentissement, et il serait préférable d’essayer d’en identifier le plus grand nombre possible. Ce qui peut sembler une durée suffisante pour certaines personnes peut paraître une éternité pour d’autres. Ce n'est pas une bonne idée d'évaluer la vitesse de chargement en utilisant uniquement votre connexion Internet.

Voyons ensemble quels sont les principaux facteurs à prendre en considération pour améliorer les performances d'un site internet et la rapidité d'ouverture des pages :

INDEX Choisir un service d'hébergement de bonne qualité La vitesse d'un site peut-elle faire une différence ?

Activez la mise en cache dans votre navigateur

Prioriser le contenu au-dessus de la ligne de flottaison

Optimiser les fichiers multimédias Optimiser les images

Utiliser un système de mise en cache et un CDN

1. Choisissez un service d'hébergement de bonne qualité De nombreux utilisateurs, lorsqu'ils décident d'ouvrir un site Web, commencent à rechercher des offres ou un hébergement mutualisé bon marché. Économiser sur le service d'hébergement n'est PAS toujours un avantage pour le projet que vous allez développer.

Lorsqu'un utilisateur se retrouve sur les pages d'un site lent, il n'est pas intéressé par le fait que le service d'hébergement ait permis au propriétaire d'économiser quelques dizaines d'euros. Souvent, au lieu d'attendre que la page se charge, vous revenez aux résultats de recherche et cliquez sur le résultat d'un concurrent. Avoir économisé quelques euros pourrait se traduire par une perte de plusieurs milliers d’euros et de clients fidèles au moment du renouvellement.

a name="speed""La vitesse d'un site peut-elle faire une différence ?

Certes, la vitesse d’un site internet peut augmenter ou diminuer les conversions de ses pages. Selon une étude menée par Amazon, une différence de seulement 100 ms – une unité de temps qu’une personne ne peut pas du tout percevoir – peut suffire à réduire les ventes de 1 % sur votre boutique en ligne. Or, selon une étude de Google* de 2017, les pages qui se chargent en 10 secondes peuvent entraîner une moyenne d'abandons des utilisateurs supérieure à 100 % de la moyenne des sites analysés.

Lorsque vous envisagez d’acheter un service d’hébergement pour votre projet, il est préférable de ne pas réduire votre budget jusqu’à l’os. Une mauvaise performance peut réduire considérablement les revenus.

Speed Host.it, au sein des outils présents dans ses plans d'abonnement, a créé SPEED. Une application capable de mesurer la vitesse réelle de votre site Internet, et de révéler sur quelles parties il faut intervenir.

A la fin des analyses réalisées par SPEED, se trouvent des suggestions créées spécifiquement pour mieux optimiser le temps de chargement de votre site internet.

2. Réduire les appels HTTP Chaque fichier nécessaire à l'affichage et au fonctionnement d'une page Web, comme les fichiers html, CSS, images et polices, affecte le temps de chargement de la page elle-même. Plus il y a de requêtes effectuées, plus une page se charge lentement.

Choisir un modèle ou développer un site Web peut devenir très fastidieux si l'on considère les fichiers CSS et JavaScript qui sont ajoutés ultérieurement lors de l'installation des plugins. Dans certains cas, il est possible d'avoir vingt requêtes http ou plus uniquement à partir de fichiers CSS et JavaScript. Ce qui augmente considérablement le temps nécessaire pour ouvrir une page.

Pour optimiser au mieux le temps d’ouverture d’une page, il est bon de suivre quelques bonnes pratiques :

fusionner des fichiers JavaScript en un seul fichier ;

fusionner les fichiers CSS en un seul fichier ;

réduire le nombre de plugins chargés mais non utilisés sur certaines pages ;

utilisez des sprites pour les images appelées le plus fréquemment ;

utilisez FontAwesone ou d'autres polices au lieu des icônes de l'interface utilisateur.

En optimisant et unifiant ces ressources, il est toujours judicieux de vérifier qu'aucun problème ne surgisse une fois cette opération réalisée. En effectuant les optimisations au cours de différentes sessions, vous serez sûr d'avoir considérablement réduit le nombre de requêtes pour la génération de chaque page html et en même temps d'avoir conservé intactes les fonctions des pages.

3. Activation de la compression L'activation de la compression Gzip est une fonctionnalité qui peut réduire considérablement le temps nécessaire au téléchargement des fichiers HTML, CSS et de toutes les ressources nécessaires au fonctionnement du site Web. Cette fonctionnalité permet de réduire la taille de certains fichiers, qui sont ensuite décompressés lorsqu'ils arrivent dans le navigateur.

Cette fonctionnalité n’affecte en rien la convivialité du site Internet. Tous les navigateurs Internet modernes prennent en charge Gzip et le traitent automatiquement à l'ouverture de la page.

4. Activer la mise en cache du navigateur En activant la mise en cache du navigateur, vous autorisez le stockage des éléments d'une page dans le navigateur que les utilisateurs utilisent pour naviguer dans les pages du site. Lorsqu'un utilisateur visite la première page d'un site avec la mise en cache du navigateur activée, il n'aura pas besoin d'envoyer de requêtes http supplémentaires au serveur pour les éléments qui ont été mis en cache lors de la navigation sur les pages suivantes.

Grâce à cette fonctionnalité, le nombre de fichiers nécessaires pour ouvrir la page à rappeler est nettement inférieur. Cela vous permet de réduire considérablement la vitesse d'ouverture de chaque page individuelle, même pour les utilisateurs ayant des connexions très lentes.

5. Donnez la priorité au contenu au-dessus de la ligne de flottaison

Les pages de sites Web peuvent être générées plus rapidement si elles sont codées pour donner la priorité au contenu au-dessus de la ligne de flottaison. Ce type de contenu n'est rien de plus que des informations que le visiteur peut consulter avant de faire défiler la page.

Ce type de contenu se retrouve dans la partie initiale du code html. Le positionnement dans la zone « au-dessus de la ligne de flottaison » permet aux navigateurs modernes de télécharger et d'afficher en premier le contenu trouvé dans cette partie du code. De cette manière, l’utilisateur pourra voir une partie du contenu de la page en quelques millisecondes.

Il est bon de se rappeler que dans le contenu au-dessus de la ligne de flottaison, vous devrez insérer tous les CSS et JavaScript nécessaires pour afficher le contenu dans cette zone de la page.

6. Optimiser les fichiers multimédia Les images et contenus vidéo présents sur les pages d'un site doivent être optimisés pour ne pas devenir un « obstacle » lors du chargement de la page elle-même. Une image trop grande peut ralentir considérablement l’ouverture d’une page ; en particulier pour les utilisateurs qui se connectent via des appareils mobiles.

L'optimisation des fichiers multimédias de votre site Web peut améliorer considérablement la vitesse d'ouverture d'une page.

Pour réellement optimiser au mieux le contenu multimédia de votre site Web, il est judicieux de choisir de le proposer à vos utilisateurs en fonction de la taille de l'écran sur lequel ils le visualisent. Il existe deux méthodes pour gérer ces optimisations.

Les images contenues dans le code HTML de votre site Web peuvent être diffusées à l'aide du jeu src, qui permet au navigateur de sélectionner, de télécharger, puis d'afficher l'image appropriée à l'appareil utilisé par l'utilisateur.

Les images placées sur les pages du site à l'aide de CSS, généralement comme arrière-plan ou graphique, peuvent être proposées à l'utilisateur via des requêtes multimédias qui s'adaptent à la taille de l'appareil utilisé par l'utilisateur.

Optimisation des images

Choisissez le format le mieux adapté au type d'image. Le format JPG est idéal pour les images photographiques, tandis que GIF et PNG sont idéaux pour les images comportant de grandes zones de couleur. Les fichiers PNG 8 bits sont utilisés pour les images sans canal alpha (arrière-plan transparent), tandis que les fichiers PNG 24 bits sont utilisés pour les images avec canal alpha.

Assurez-vous que vos images sont correctement dimensionnées pour votre point d'arrêt de référence. Si une image est utilisée pour des appareils mobiles, cela n’a aucun sens de la télécharger avec une taille de 1 600 pixels de large.

Utilisez un programme de compression d'images. Une série d'excellents outils sont disponibles sur le marché, sous forme de plugins ou de programmes en ligne, pour optimiser et compresser au mieux les images.

Choisissez le format vidéo le plus idéal. Dans la plupart des cas, MP4 est le format qui permet d’avoir le meilleur résultat entre compression/qualité vidéo.

Diffusez des vidéos aux utilisateurs en fonction de la taille de leur appareil.

Supprimez la piste audio, si la vidéo est utilisée comme arrière-plan d'une partie du site.

Utilisez un programme vidéo pour compresser les fichiers vidéo qui seront visionnés sur un site. Premiere et de nombreux autres programmes vous permettent de réduire considérablement la taille des fichiers vidéo.

Réduisez la durée de la vidéo s’il n’est pas nécessaire d’afficher l’intégralité de la vidéo.

Pensez à télécharger la vidéo sur des plateformes externes comme Youtube ou Vimeo, au lieu de la proposer à vos utilisateurs directement depuis votre hébergement.

7. Utilisez un système de mise en cache et la mise en cache du navigateur CDN vous permet de stocker une copie statique des pages Web que vous avez visitées, afin qu'elles puissent être consultées plus rapidement lors des vues suivantes. Un système CDN est composé d'une série de serveurs situés à divers endroits et qui permettent aux utilisateurs d'accéder à un site depuis l'emplacement le plus proche de leur emplacement. L'utilisation de ces deux technologies permet d'améliorer considérablement le temps nécessaire au chargement d'une page.

*PDF de Google Research 2017 : https://think.storage.googleapis.com/docs/mobile-page-speed-new-industry-benchmarks.pdf