La performance d’un site internet est quelque chose d’important. De nos jours, on trouve de multiples sites en ligne qui nous permettent de tester cela, Pingdom, PageSpeedInsight, GTMetrix… Tous ces outils nous permettent d’analyser nos sites internet et d’en décortiquer les problématiques.
Mais, avant ça, est-ce que l’on peut penser performance dès la création du site internet ? N’y avait-il pas des règles fondamentales qui assurent de créer des sites web performants ?
Pourquoi la performance est importante ?
Avant tout chose, il est primordial de comprendre pourquoi la performance est quelque chose de crucial.
Initialement, c’est une recommandation de Google, leader sur le marché des moteurs de recherches. Ainsi, si vous ne voulez pas voir votre référencement en chute libre, il est conseillé d’optimiser avant toute chose la rapidité de votre site web. C’est un des nombreux facteurs qui sont étudiés lors du classement SEO de votre site internet.
Le second point, et il est en lien avec le premier, c’est tout simplement l’expérience utilisateur de vos visiteurs. Si ces derniers arrivent sur un site internet lourd à charger et qui met plusieurs secondes à s’ouvrir, vous risquez de les perdre.
Lors d’une étude de 2017, Google annonçait ceci :
« La probabilité d’un taux de rebond augmente de 32 % sur un temps de chargement entre 1 et 3 secondes ». S’ils le considèrent dans leurs critères de classement, c’est avant tout pour fournir une expérience utilisateur optimale.
Pour autant, il existe encore de multiples sites internet qui sont bien trop lents. Il y a pourtant des optimisations très simples à appliquer et c’est ce dont on va parler dans cet article.
Les images
C’est l’un des éléments les plus lourds à charger sur un site internet. Les images sont en général bien trop lourdes à cause de leur taille, mais également de leur poids.
Le redimensionnement des images
Beaucoup de personnes intègrent des images dans de mauvaises proportions : si vous souhaitez afficher une image en 500 × 500 px il n’est pas pertinent d’en charger une de 1000 × 1000 px. Vous chargez inutilement une image deux fois plus grande, et donc (en général) deux fois plus lourde.
Le redimensionnement des images est de ce fait la première optimisation à mettre en place.
La compression des images
L’autre point qui peut vous faire gagner un peu de stockage au niveau des images, c’est leur taux de compression. Peu de sites ont besoin d’afficher des photos en très hautes-définitions. Il est alors important de compresser ses images avant de les mettre en ligne.
Pour cela, vous pouvez utiliser des sites internet tel que tinyPNG ou bien des modules qui s’ajoutent directement à votre CMS (WordPress, Prestashop…).
Grâce à la compression de vos fichiers, vous devriez gagner davantage en performance.
L’ordre de chargement des fichiers (async, déferlante)
Lorsque vous ouvrez un site internet, c’est en réalité plein de petits fichiers qui sont téléchargés vers votre ordinateur pour vous afficher la page web.
Tous ces fichiers sont appelés dans l’ordre avec lequel ils ont été rédigés. Ceux étant placés tout en haut de la page sont appelés en premier et ceux tout en bas en dernier.
Cependant, il peut arriver que certains fichiers mettent du temps à se charger, c’est notamment le cas de certains fichiers JavaScript. Afin d’éviter de ralentir trop l’utilisateur, il est possible de demander au navigateur de les charger de manière asynchrone. C’est-à-dire que le site va charger tout le reste puis ce fichier en arrière-plan. Si ce dernier met, par exemple 10 secondes à se charger, il n’empêchera pas le chargement des autres.
Si vous avez un fichier JavaScript utile pour certaines interactions d’utilisateurs et que celles-ci ne sont pas réalisées dès l’ouverture du site, il peut être intéressant de l’ajouter en asynchrone. Cela vous assurera un meilleur temps de chargement et ne bloquera pas l’utilisateur.
Si c’est un script encore moins important alors vous pouvez utiliser l’attribut defer. Cela va différer l’exécution du script à la fin du chargement du document.
Ces attributs s’ajoutent à vos appels JavaScript comme ceci :
Le serveur web
Comme pour un ordinateur, un mauvais serveur web peut altérer vos performances. Si vous hébergez votre site internet sur un serveur trop ancien, pas bien entretenu ou mal configuré, vous risquez de perdre en performance. Il est important que votre serveur réponde très rapidement aux appels qui lui sont fait afin de délivrer le contenu dans les plus brefs délais.
Pour cela, vous pouvez optimiser votre serveur notamment au niveau de sa configuration (Apache, Nginx…).
L’autre possibilité d’optimisation c’est l’utilisation d’un CDN. Les Content Delivery Network sont des réseaux qui ont pour but de délivrer votre contenu au plus grand nombre. Grâce à cela votre site internet sera répliqué sur une multitude de serveurs dans le monde entier pour servir plus rapidement les fichiers de votre site internet.
Les librairies JS externes
Lorsque vous faites appel à des éléments externes à votre site, vous êtes dépendant des temps de chargement de ces fichiers. Ainsi, si leur serveur met trop de temps à répondre, vous risquez d’allonger le temps de chargement de votre site.
De plus, quand vous êtes sur un CMS tel que WordPress ou Prestashop, il arrive souvent que des modules que l’on installe, fassent, appelle à des librairies externes. L’inconvénient est que dans le cas où l’on dispose de deux modules différents qui appellent deux fois la même libraire, on surcharge le site internet inutilement. En intégrant ces librairies en interne, vous ferez le travail de vérification à chaque installation de module afin d’éviter les doubles appels.
Il faut donc être prudent lorsque l’on appelle des librairies externes afin que celles-ci soient au maximum disponible. Idéalement, quand vous le pouvez, il est préférable d’internaliser vos librairies pour ne pas créer une dépendance externe.
Les frameworks CSS
Les [frameworks CSS comportent beaucoup d’avantages], ne serait-ce que pour développer des interfaces utilisateurs très rapidement et simplement. Cependant, c’est également un gros inconvénient puisque l’on importe en général un grand nombre de fichiers CSS & JavaScript pour en utiliser qu’une partie. Cela surcharge alors inutilement l’utilisateur avec des fichiers qui ne sont pas utilisés pour la page sur laquelle il est actuellement.
Il est ainsi préférable de se passer de framework CSS lorsque l’on recherche des performances avancées. Sinon il existe désormais des frameworks plus intelligents qui permettent de charger uniquement les CSS utilisés sur chaque page.
jQuery
Parmi toutes les libraires JavaScript qui existent, une des plus connues reste jQuery. Celle-ci facilite notamment de manipuler des objets du DOM (Document Object Model).
Elle était particulièrement populaire il y a quelques années, car elle permet de simplifier des actions qui pouvaient être complexes en JavaScript natif.
Néanmoins, les mises à jour de ce dernier langage ont comblé ce manque et utiliser jQuery est dorénavant plus un inconvénient qu’un avantage.
Ainsi, on reproche à cette libraire sa taille trop imposante. Il est donc déconseillé de l’utiliser afin d’éviter de charger un fichier excessivement lourd (290ko). D’autant plus lorsque l’on sait que celui-ci importe uniquement des raccourcis permettant de faciliter l’accès à des fonctions.
Ainsi, vous l’aurez compris, il existe un grand nombre d’optimisations que l’on peut mettre en place plus ou moins facilement. Certaines nécessitent des connaissances techniques avancées, d’autres bien moins.
Quoi qu’il en soit, je peux vous accompagner si vous souhaitez optimiser les performances de votre site internet.
