Comment éviter de rendre votre site lent et incompatible

Le HTML, le CSS, le JavaScript sont des langages qui s’exécutent côté client.

Ça signifie donc, comme on a vu précédemment, que c’est votre ordinateur, et non pas le serveur, qui effectue les calculs pour afficher la page, pour produire les effets.

Ça implique que moins l’ordinateur sur lequel s’affiche votre site est performant, plus il aura tendance à ne pas être fluide, à “ramer” un peu.

Par exemple, un énorme diaporama avec des transitions gourmandes, un peu farfelues et délirantes, et le site sera amené à saccader sur une machine obsolète.

De même, sur une machine où il y aurait déjà quelques programmes gourmands qui seraient en cours d’exécution.

Cette vidéo ci-dessus est un extrait du guide complet “Créer un vrai site pour le Business avec WordPress“ –

Les facteurs qui ralentissent le site

Il y a plusieurs facteurs qui peuvent alourdir l’affichage d’un site :

• Le poids des images ou des autres médias (vidéos, etc.) : plus les images sont grandes et mal optimisées, c’est-à-dire exportées dans un format inapproprié, plus le site sera long à charger.

• Le nombre de fichiers externes à charger : comme vu précédemment, on peut appeler des feuilles de style CSS, des scripts JavaScript, ainsi que des images et des médias. Plus il y a de connexions à établir vers l’extérieur de la page, plus la page sera longue à charger.

• Le poids du fichier lui-même : si c’est un script, cela dépend du nombre de lignes. Plus il y a de lignes, plus le fichier est lourd et long à télécharger, ce qui allonge le temps d’affichage de la page.

• La mauvaise optimisation du code : coder est une véritable discipline. Si le code a été écrit de manière amateur, il peut contenir des fonctions mal optimisées, qui seront beaucoup plus gourmandes que si elles avaient été conçues par un développeur web expérimenté.

L’évolutivité des langages

Un autre aspect important à prendre en considération, c’est l’évolutivité de ces langages.

Il y a eu le HTML 1, 2, 3, 4 et, aujourd’hui, la version avancée, évoluée du HTML, c’est la version 5. Il y a eu le CSS1, 2, on en est au CSS3. Donc, il y a toujours une version d’avance : le HTML6 est en cours, le CSS4 aussi.

Pour que ces langages prennent vie, que ces nouvelles versions, que les nouvelles fonctionnalités que ces langages apportent prennent vie, il faut que les navigateurs soient équipés pour comprendre ces nouvelles fonctions.

C’est pour ça qu’il est important de mettre à jour vos navigateurs. Un site ne s’affichera pas de la même façon, ça dépend des sites : il y a des sites hyper basiques pour lesquels il y a de fortes chances qu’ils s’affichent à peu près pareil sur tous les navigateurs, mais un site un petit peu avancé risque de ne pas s’afficher de la même manière sur Google Chrome et Firefox.

Ce que je voulais juste vous expliquer, c’est simplement un tableau comparatif qui vous montre la quantité d’objets (c’est-à-dire de fonctions du langage HTML5), la quantité de fonctions prises en charge par le navigateur.

Dans mon exemple (sur la vidéo), on constate que Google Chrome prend en considération 526 fonctions du HTML5, la dernière version de Firefox, elle, en prend 467, Internet Explorer, loin derrière avec 336 (et une prochaine version annoncée qui en prendrait 402), Opera 519 et Safari 396. Chrome a donc une longueur d’avance et ça fait déjà quelques temps qu’il a cette position de leader.

C’est aussi un business : plus un navigateur est amélioré, plus les gens le choisissent et donc plus c’est facile pour les entreprises qui le développent d’obtenir des cookies de votre part, de prendre des analyses de vos comportements, etc.

C’était un point qui me paraissait aussi important d’être abordé : un site va utiliser des aspects précis d’un langage et, si ce sont des aspects trop modernes, il se peut que les navigateurs de vos utilisateurs ne les prennent pas encore en charge.

Donc, vous, en tant qu’utilisateur, il faut faire les mises à jour pour être sûr de toujours avoir toutes les fonctionnalités qu’un site offre.

Et, de l’autre côté, quand on fait un site, il faut essayer de ne pas être trop avant-gardiste sur les fonctionnalités utilisées.