Performance


Pour les sites Web, le terme performance désigne la vitesse de chargement ou la puissance de calcul d'un serveur, c'est-à-dire la vitesse à laquelle les données sont transférées d'un serveur au client.

Prérequis pour une bonne performance[modifier]

Un site Web qui charge lentement peut rebuter les clients potentiels et les inciter à quitter la page plus rapidement. Afin d'assurer une interaction fluide, une bonne performance doit être garantie de manière proactive. En particulier avec l'utilisation croissante d'appareils mobiles, une impression positive due à un chargement discret et rapide est particulièrement importante afin de convertir le visiteur en client. Lorsqu'une page se charge lentement, le visiteur s’en détourne et peut aller jusqu’à cliquer sur le résultat de recherche du concurrent. La performance d'une page revêt globalement de plus en plus d’importance, car les sites web deviennent plus grands et les réseaux plus lents en raison d'une charge plus élevée.

Avantages d’une bonne performance[modifier]

Une interaction fluide maintient les visiteurs sur un site Web et crée la confiance. Dans le même temps, les coûts d'exploitation peuvent être réduits. De meilleures performances réduisent également la vitesse de la page, ce qui peut avoir un effet positif sur le classement des moteurs de recherche.

Possibilités d’optimisation[modifier]

Il existe de nombreuses façons d'améliorer la performance de son site Web. Nous avons listé quelques astuces qui ne prennent parfois que quelques secondes. Toutes les méthodes ne sont pas adaptées à tout le monde et à tous les cas, c'est pourquoi il est toujours conseillé de vérifier si l'effort en vaut la peine.

Utilisation du cache du navigateur[modifier]

Il est possible de stocker des fichiers dans le cache côté client. Par exemple, si une image est mise en cache la première fois que vous visitez la page, elle peut être rechargée à partir de cette donnée la deuxième fois que vous la visitez. La page est construite plus rapidement car l'image n'a pas besoin d'être transférée. Cette mise en cache n'a de sens que si les fichiers ne sont pas fréquemment modifiés. Cette entrée doit être effectuée dans le fichier .htaccess.

Compression avec gzip[modifier]

Une autre façon de réduire le temps de chargement consiste à compresser les données avant que le serveur ne les envoie. Ceci est fait à l’aide du format GZip dans le fichier. htaccess. HTML, CSS et JavaScript peuvent être, entre autres données, compressés. De plus, les espaces blancs et les commentaires peuvent être supprimés au préalable. La transmission de telles pages compressées est prise en charge par les navigateurs modernes les plus courants. Le temps de de chargement avec peut être réduit de moitié avec GZip.

Réduction des requêtes HTTP[modifier]

Chaque élément de page représente une requête HTTP. Un seul navigateur peut charger entre deux et huit de ces éléments en même temps, tous les autres sont mis en file d'attente. Cela signifie qu'il faut plus de temps pour charger complètement une page, quelle que soit la bande passante disponible.

Le nombre de requêtes HTTP peut être réduit en combinant certains éléments de page. Les graphiques fréquemment utilisés peuvent être combinés en une seule unité, ce qui est par exemple judicieux pour les éléments de navigation. Ce principe est appelé CSS Sprites : on peut déterminer quels éléments sont visibles. Vous pouvez également utiliser JavaScript.

Plusieurs fichiers CSS ou JavaScript Librairies peuvent être combinés en un seul. La suppression de fichiers anciens et inutiles aide également à réduire les requêtes HTTP. Les éléments sans fonction sont inutiles et ne provoquent que des demandes superflues.

Un autre avantage de moins de requêtes consiste en le fait que chaque fichier dispose de son propre en-tête. Celui-ci doit être envoyé avec chaque demande, c'est pourquoi il est logique de combiner des fichiers graphiques ou CSS.

Maintenir des petites tailles de fichier[modifier]

Pour réduire la quantité totale de données à transférer, les fichiers doivent être maintenus petits. L'augmentation de la bande passante n'est pas un contre-argument, car il faut aujourd'hui compter avec les sessions depuis des appareils mobiles.

Une façon de réduire la taille des fichiers est d'éviter les répétitions. Les codes CSS et JavaScript contiennent souvent des paragraphes qui se trouvent ailleurs. Si ceux-ci sont habilement externalisés, toutes les répétitions peuvent être raccourcies et le fichier perd de sa taille.

Les caractères de contrôle offrent un potentiel supplémentaire de réduction de la taille des fichiers. Idéalement, un programmeur fait attention à la lisibilité du code, ce qui se traduit par des onglets, des lignes vierges et des sauts de ligne. Ce sont des signes qui sont transférés inutilement. Des outils spéciaux permettent de supprimer automatiquement les caractères superflus des fichiers CSS, JavaScript ou HTML. La version résultante peut difficilement être utilisée pour le travail, mais elle est plus petite que la version structurée et donc mieux adaptée à l'envoi.

Les graphiques offrent des potentiels d'économie considérables. Ici, la taille du fichier peut être fortement influencée par une réduction ciblée de la qualité. Le format peut être sélectionné lors de l'enregistrement, la taille doit être exactement la même que la taille dans laquelle le graphique est affiché et les paramètres peuvent également être modifiés pendant la compression, ce qui influence la taille du fichier (JPEG 85 % donne un fichier plus petit que JPEG 100 %).

Tester les cookies[modifier]

Les cookies influencent également les performances. Chaque cookie et chaque élément d'information contenu dans un cookie ne devrait exister que s'il est sensé. Si, par exemple, vous n'utilisez pas les données collectées depuis le début, vous n'avez pas besoin de les envoyer.

Sélecteurs CESS[modifier]

De petites optimisations sont également possibles dans les feuilles de style CSS. Les sélecteurs CSS ont en effet des délais de traitement différents. L'ID (#) et la classe (.) conviennent bien, tandis que le sélecteur de caractères génériques (*) et le sélecteur de descendant (>) sont plus lents. Un autre petit aspect est la commande @import - elle peut bloquer le chargement chez certains navigateurs jusqu'à ce que le fichier importé soit chargé lui-même.

Importance pour l’optimisation du référencement[modifier]

Le Page Speed est un facteur de classement confirmé. La performance est donc du point de vue SEO essentielle. Il est reconnu que les visiteurs quittent très vite des pages qui chargent lentement. Les grands sites Web ont souvent testé l'influence de la performance sur le comportement des clients. Amazon, par exemple, a délibérément retardé le chargement des pages produit de 100 ms. Résultat de l’expérience : le chiffre d'affaires a chuté de 1 %.

Un autre sondage Yahoo! a montré que le chargement de la page d'accueil a été ralenti de 400 ms : 9 % des visiteurs ont quitté le site avant que la page ne soit complètement chargée. Le moteur de recherche d'achat Shopzilla a quant à lui réduit son temps de chargement de 3,5 secondes grâce à l'optimisation de la performance, et les ventes ont augmenté de 12 %.

L'optimisation de la performance se fait donc dans la même direction que celle de l’optimisation pour les moteurs de recherche. Pour effectuer des comparaisons, il est recommandé d'évaluer les sites concurrents avec des outils appropriés. L’outil correspondant de Google est Insights. Vous pouvez spécifier une URL et l’outil en teste le Speed. L'utilisateur reçoit alors des suggestions pour améliorer la vitesse de chargement.

Liens web[modifier]