Table des matières
L'un des problèmes rencontrés par de nombreuses applications est que bien qu'elles chargent le contenu rapidement, elles ne sont pas vues rapidement dans le navigateur de l'utilisateur, c'est-à-dire que le navigateur a fini de charger tout le contenu, toutes les images et tous les CSS Oui JS, mais il y a un petit délai entre ce que nous chargeons et ce que nous voyons.Ceci est largement dû à la position des téléchargements de fichiers dans le HTML, c'est-à-dire que nous avons probablement le CSS et les JS mélangé et cela rend difficile pour le navigateur de tout afficher comme lors du chargement d'un fichier JS vous devez le traiter avant de passer au fichier suivant.
La première recommandation est de toujours placer les fichiers de style comme CSS en haut de notre HTML, cela nous permet de faire en sorte que le navigateur affiche progressivement la page de l'application le plus rapidement possible.
De cette façon, nous évitons de voir une page blanche pendant plusieurs secondes avant de tout voir chargé, sinon nous voyons comment la page se construit progressivement, cela soulage les utilisateurs, en particulier ceux qui ont une connexion plus lente au réseau ou à Internet .
Si les feuilles de style ou CSS sont en bas, les navigateurs ne chargeront normalement pas les informations pour éviter d'avoir à changer le style une fois qu'ils ont atteint ce point, ce qui fait que l'utilisateur ne voit rien.
Le but de ceci est que le navigateur puisse continuer à charger les ressources de la page, car s'il trouve un fichier JS jusqu'à ce qu'il le charge sans erreur, il ne procédera pas au téléchargement d'autres ressources, même si elles se trouvent dans un CDN.
Où mettre les fichiers JS ?Pour cela, nous plaçons les fichiers JS aussi loin que possible dans notre HTML, bien qu'il y ait des cas où cela ne soit pas possible en raison de la structure de l'application, alors nous pouvons placer l'attribut reporter avec lequel nous disons au navigateur qu'il peut le charger à la fin de tout.
Le problème avec l'attribut reporter est que tous les navigateurs ne l'interprètent pas de la même manière, donc parfois il ne peut pas faire ce que nous pensons, cependant si nous pouvons placer un fichier, cet attribut signifie qu'il peut être déplacé à la fin.
Voyons dans l'image suivante comment se déroule le processus de chargement d'une page, dans la première partie les fichiers sont tous en haut et sans ordre particulier, dans la deuxième partie sont les CSS vers le haut et le JS vers le bas:
Là où se trouve l'œil est le point du processus où l'utilisateur peut voir la page de l'application, nous remarquons alors comment dans la première partie la page est vue beaucoup plus tard que ce que nous pouvons voir dans la deuxième partie.
Avec cela, nous terminons ce tutoriel, nous pouvons maintenant ajouter un nouvel élément pour améliorer la vitesse et les performances de notre application en plus de réduire l'attente de l'utilisateur pour voir ce que son navigateur charge.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif